distinguish buttons and checkbox style

Author: paula-stacho

packages/compass-components/src/components/select-table.tsx

@@ -9,6 +9,12 @@ import {
   TableBody,
   TableHead,
 } from './leafygreen';
+import { spacing } from '@leafygreen-ui/tokens';
+import { css } from '@leafygreen-ui/emotion';
+
+const checkboxStyles = css({
+  padding: spacing[100],
+});
 
 type SelectItem = {
   id: string;
@@ -61,6 +67,7 @@ export function SelectTable<T extends SelectItem>(
           <HeaderRow>
             <HeaderCell key="select-table-all-checkbox">
               <Checkbox
+                className={checkboxStyles}
                 data-testid="select-table-all-checkbox"
                 aria-label="Select all"
                 onChange={handleSelectAllChange}
@@ -79,6 +86,7 @@ export function SelectTable<T extends SelectItem>(
             <Row key={item.id}>
               <Cell>
                 <Checkbox
+                  className={checkboxStyles}
                   key={`select-${item.id}`}
                   name={`select-${item.id}`}
                   data-testid={`select-${item.id}`}

packages/compass-data-modeling/src/components/new-diagram-form.tsx

@@ -41,6 +41,7 @@ const FormStepContainer: React.FunctionComponent<{
   isNextDisabled: boolean;
   nextLabel: string;
   previousLabel: string;
+  step: string;
 }> = ({
   title,
   description,
@@ -51,6 +52,7 @@ const FormStepContainer: React.FunctionComponent<{
   nextLabel,
   previousLabel,
   children,
+  step,
 }) => {
   return (
     <>
@@ -71,10 +73,13 @@ const FormStepContainer: React.FunctionComponent<{
           disabled={isNextDisabled}
           isLoading={isLoading}
           variant="primary"
+          key={`${step}-next`}
         >
           {nextLabel}
         </Button>
-        <Button onClick={onPreviousClick}>{previousLabel}</Button>
+        <Button onClick={onPreviousClick} key={`${step}-previous`}>
+          {previousLabel}
+        </Button>
       </ModalFooter>
     </>
   );
@@ -318,6 +323,7 @@ const NewDiagramForm: React.FunctionComponent<NewDiagramFormProps> = ({
         previousLabel={cancelLabel}
         isNextDisabled={isConfirmDisabled}
         isLoading={isLoading}
+        step={currentStep}
       >
         {formContent}
       </FormStepContainer>