unify styles

paula-stacho · paula-stacho · commit 19a368cfc048 · 2024-10-24T13:31:20.000+02:00
diff --git a/packages/compass-global-writes/src/components/create-shard-key-form.tsx b/packages/compass-global-writes/src/components/create-shard-key-form.tsx
@@ -25,12 +25,7 @@ import {
 } from '../store/reducer';
 import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
 import { connect } from 'react-redux';
-
-const contentStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[200],
-});
+import { containerStyles } from './common-styles';
 
 const listStyles = css({
   listStyle: 'disc',
@@ -69,7 +64,7 @@ type ShardingAdvancedOption = 'default' | 'unique-index' | 'hashed-index';
 
 function CreateShardKeyDescription() {
   return (
-    <div className={contentStyles} data-testid="unsharded-text-description">
+    <div className={containerStyles} data-testid="unsharded-text-description">
       <Subtitle>Configure compound shard key</Subtitle>
       <Body>
         To properly configure Global Writes, your collections must be sharded
@@ -165,7 +160,7 @@ export function CreateShardKeyForm({
   return (
     <>
       <CreateShardKeyDescription />
-      <div className={contentStyles} data-testid="shard-collection-form">
+      <div className={containerStyles} data-testid="shard-collection-form">
         <div className={shardKeyFormFieldsStyles}>
           <div>
             <Label htmlFor="first-shard-key">
@@ -277,7 +272,7 @@ export function CreateShardKeyForm({
             </Radio>
           </RadioGroup>
           {selectedAdvancedOption === 'hashed-index' && (
-            <div className={cx(contentStyles, hasedIndexOptionsStyles)}>
+            <div className={cx(containerStyles, hasedIndexOptionsStyles)}>
               <Checkbox
                 data-testid="presplit-data-checkbox"
                 onChange={() => setIsPreSplitData(!isPreSplitData)}
diff --git a/packages/compass-global-writes/src/components/states/shard-key-correct.tsx b/packages/compass-global-writes/src/components/states/shard-key-correct.tsx
@@ -24,28 +24,20 @@ import toNS from 'mongodb-ns';
 import { ShardZonesTable } from '../shard-zones-table';
 import { useConnectionInfo } from '@mongodb-js/compass-connections/provider';
 import ShardKeyMarkup from '../shard-key-markup';
+import {
+  containerStyles,
+  paragraphStyles,
+  bannerStyles,
+} from '../common-styles';
 
 const nbsp = '\u00a0';
 
-const containerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[400],
-  marginBottom: spacing[400],
-});
-
 const codeBlockContainerStyles = css({
   display: 'flex',
   flexDirection: 'column',
   gap: spacing[100],
 });
 
-const paragraphStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[100],
-});
-
 export type ShardKeyCorrectProps = {
   namespace: string;
   shardKey: ShardKey;
@@ -81,7 +73,7 @@ export function ShardKeyCorrect({
 
   return (
     <div className={containerStyles}>
-      <Banner variant={BannerVariant.Info}>
+      <Banner variant={BannerVariant.Info} className={bannerStyles}>
         <strong>
           All documents in your collection should contain both the ‘location’
           field (with a ISO country or subdivision code) and your{' '}
diff --git a/packages/compass-global-writes/src/components/states/shard-key-invalid.tsx b/packages/compass-global-writes/src/components/states/shard-key-invalid.tsx
@@ -8,13 +8,7 @@ import React from 'react';
 import ShardKeyMarkup from '../shard-key-markup';
 import type { RootState, ShardKey } from '../../store/reducer';
 import { connect } from 'react-redux';
-
-const containerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[400],
-  marginBottom: spacing[400],
-});
+import { containerStyles, bannerStyles } from '../common-styles';
 
 const paragraphStyles = css({
   display: 'flex',
@@ -30,7 +24,7 @@ export interface ShardKeyInvalidProps {
 export function ShardKeyInvalid({ shardKey, namespace }: ShardKeyInvalidProps) {
   return (
     <div className={containerStyles}>
-      <Banner variant={BannerVariant.Danger}>
+      <Banner variant={BannerVariant.Danger} className={bannerStyles}>
         <strong>
           To configure Global Writes, the first shard key of this collection
           must be &quot;location&quot; with ranged sharding and you must also
diff --git a/packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx b/packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx
@@ -16,13 +16,7 @@ import {
 } from '../../store/reducer';
 import { connect } from 'react-redux';
 import type { ManagedNamespace } from '../../services/atlas-global-writes-service';
-
-const containerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[400],
-  marginBottom: spacing[400],
-});
+import { containerStyles, bannerStyles } from '../common-styles';
 
 const unmanageBtnStyles = css({
   marginTop: spacing[100],
@@ -61,7 +55,7 @@ export function ShardKeyMismatch({
 }: ShardKeyMismatchProps) {
   return (
     <div className={containerStyles}>
-      <Banner variant={BannerVariant.Danger}>
+      <Banner variant={BannerVariant.Danger} className={bannerStyles}>
         <strong>
           Your requested shard key cannot be configured because the collection
           has already been sharded with a different key.
diff --git a/packages/compass-global-writes/src/components/states/sharding-error.tsx b/packages/compass-global-writes/src/components/states/sharding-error.tsx
@@ -13,12 +13,7 @@ import {
   ShardingStatuses,
 } from '../../store/reducer';
 import CreateShardKeyForm from '../create-shard-key-form';
-
-const containerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[400],
-});
+import { containerStyles, bannerStyles } from '../common-styles';
 
 const btnStyles = css({
   float: 'right',
@@ -44,12 +39,10 @@ export function ShardingError({
 }: ShardingErrorProps) {
   return (
     <div className={containerStyles}>
-      <Banner variant={BannerVariant.Warning}>
-        <div>
-          There was an error sharding your collection. Please cancel the
-          request, make any necessary changes to your collection, and try again.
-          <div className={errorStyles}>{shardingError}</div>
-        </div>
+      <Banner variant={BannerVariant.Warning} className={bannerStyles}>
+        There was an error sharding your collection. Please cancel the request,
+        make any necessary changes to your collection, and try again.
+        <div className={errorStyles}>{shardingError}</div>
         <Button
           className={btnStyles}
           data-testid="cancel-sharding-btn"
diff --git a/packages/compass-global-writes/src/components/states/sharding.tsx b/packages/compass-global-writes/src/components/states/sharding.tsx
@@ -14,15 +14,10 @@ import {
   type RootState,
   ShardingStatuses,
 } from '../../store/reducer';
+import { containerStyles, bannerStyles } from '../common-styles';
 
 const nbsp = '\u00a0';
 
-const containerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[400],
-});
-
 const btnStyles = css({
   float: 'right',
   height: spacing[600],
@@ -39,7 +34,7 @@ export function ShardingState({
 }: ShardingStateProps) {
   return (
     <div className={containerStyles}>
-      <Banner variant={BannerVariant.Info}>
+      <Banner variant={BannerVariant.Info} className={bannerStyles}>
         <strong>Sharding your collection …</strong>
         {nbsp}this should not take too long.
         <Button
diff --git a/packages/compass-global-writes/src/components/states/unsharded.tsx b/packages/compass-global-writes/src/components/states/unsharded.tsx
@@ -1,24 +1,14 @@
 import React from 'react';
-import {
-  Banner,
-  BannerVariant,
-  css,
-  spacing,
-} from '@mongodb-js/compass-components';
+import { Banner, BannerVariant } from '@mongodb-js/compass-components';
 import CreateShardKeyForm from '../create-shard-key-form';
+import { containerStyles, bannerStyles } from '../common-styles';
 
 const nbsp = '\u00a0';
 
-const containerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacing[400],
-});
-
 export function UnshardedState() {
   return (
     <div className={containerStyles}>
-      <Banner variant={BannerVariant.Warning}>
+      <Banner variant={BannerVariant.Warning} className={bannerStyles}>
         <strong>
           To use Global Writes, this collection must be configured with a
           compound shard key made up of both a ‘location’ field and an
