fix(compass-global-writes): unite banner btn styles COMPASS-8451 (#6484)

fix(compass-global-writes): unite banner btn styles

Co-authored-by: Paula Stachova <[email protected]>

Author: paula-stacho

packages/compass-global-writes/src/components/common-styles.ts

@@ -17,3 +17,8 @@ export const containerStyles = css({
   marginBottom: spacing[400],
   textAlign: 'justify',
 });
+
+export const bannerBtnStyles = css({
+  float: 'right',
+  height: `${spacing[600]}px`,
+});

packages/compass-global-writes/src/components/states/incomplete-sharding-setup.tsx

@@ -20,6 +20,7 @@ import {
 import { connect } from 'react-redux';
 import ExampleCommandsMarkup from '../example-commands-markup';
 import { ShardZonesTable } from '../shard-zones-table';
+import { bannerBtnStyles } from '../common-styles';
 
 const containerStyles = css({
   display: 'flex',
@@ -28,10 +29,6 @@ const containerStyles = css({
   marginBottom: spacing[400],
 });
 
-const manageBtnStyles = css({
-  marginTop: spacing[100],
-});
-
 export interface IncompleteShardingSetupProps {
   shardKey: ShardKey;
   shardZones: ShardZoneData[];
@@ -70,7 +67,7 @@ export function IncompleteShardingSetup({
             variant={ButtonVariant.Default}
             isLoading={isSubmittingForSharding}
             loadingIndicator={<SpinLoader />}
-            className={manageBtnStyles}
+            className={bannerBtnStyles}
           >
             Enable Global Writes
           </Button>

packages/compass-global-writes/src/components/states/shard-key-mismatch.tsx

@@ -2,8 +2,6 @@ import {
   Banner,
   BannerVariant,
   Button,
-  spacing,
-  css,
   ButtonVariant,
   SpinLoader,
 } from '@mongodb-js/compass-components';
@@ -17,11 +15,11 @@ import {
 } from '../../store/reducer';
 import { connect } from 'react-redux';
 import type { ManagedNamespace } from '../../services/atlas-global-writes-service';
-import { containerStyles, bannerStyles } from '../common-styles';
-
-const unmanageBtnStyles = css({
-  marginTop: spacing[100],
-});
+import {
+  containerStyles,
+  bannerStyles,
+  bannerBtnStyles,
+} from '../common-styles';
 
 const getRequestedShardKey = (
   managedNamespace: ManagedNamespace
@@ -71,7 +69,7 @@ export function ShardKeyMismatch({
             variant={ButtonVariant.Default}
             isLoading={isUnmanagingNamespace}
             loadingIndicator={<SpinLoader />}
-            className={unmanageBtnStyles}
+            className={bannerBtnStyles}
           >
             Unmanage collection
           </Button>

packages/compass-global-writes/src/components/states/sharding-error.tsx

@@ -14,12 +14,11 @@ import {
   ShardingStatuses,
 } from '../../store/reducer';
 import CreateShardKeyForm from '../create-shard-key-form';
-import { containerStyles, bannerStyles } from '../common-styles';
-
-const btnStyles = css({
-  float: 'right',
-  height: spacing[600],
-});
+import {
+  containerStyles,
+  bannerStyles,
+  bannerBtnStyles,
+} from '../common-styles';
 
 const errorStyles = css({
   marginTop: spacing[200],
@@ -47,7 +46,7 @@ export function ShardingError({
         make any necessary changes to your collection, and try again.
         <div className={errorStyles}>{shardingError}</div>
         <Button
-          className={btnStyles}
+          className={bannerBtnStyles}
           data-testid="cancel-sharding-btn"
           disabled={isCancellingSharding || isSubmittingForSharding}
           isLoading={isCancellingSharding}

packages/compass-global-writes/src/components/states/sharding.tsx

@@ -4,9 +4,7 @@ import {
   BannerVariant,
   Body,
   Button,
-  css,
   Link,
-  spacing,
   SpinLoader,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
@@ -15,15 +13,14 @@ import {
   type RootState,
   ShardingStatuses,
 } from '../../store/reducer';
-import { containerStyles, bannerStyles } from '../common-styles';
+import {
+  containerStyles,
+  bannerStyles,
+  bannerBtnStyles,
+} from '../common-styles';
 
 const nbsp = '\u00a0';
 
-const btnStyles = css({
-  float: 'right',
-  height: spacing[600],
-});
-
 interface ShardingStateProps {
   isCancellingSharding: boolean;
   onCancelSharding: () => void;
@@ -39,7 +36,7 @@ export function ShardingState({
         <strong>Sharding your collection …</strong>
         {nbsp}this should not take too long.
         <Button
-          className={btnStyles}
+          className={bannerBtnStyles}
           data-testid="cancel-sharding-btn"
           onClick={onCancelSharding}
           isLoading={isCancellingSharding}