Visual adjustments

fortanix · Feb 25, 2025 · a9b26f5 · a9b26f5
1 parent 3ff56cb
commit a9b26f5
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 8 deletions.
diff --git a/src/components/containers/DialogLayout/DialogLayout.module.scss b/src/components/containers/DialogLayout/DialogLayout.module.scss
@@ -10,12 +10,12 @@
 
     display: flex;
     flex-direction: column;
-    gap: bk.$spacing-7;
+    gap: bk.$spacing-10;
 
     .bk-dialog-layout__content {
       display: flex;
       flex-direction: row;
-      gap: bk.$spacing-10;
+      gap: bk.$spacing-12;
     }
 
     .bk-dialog-layout__content__aside {
@@ -24,8 +24,17 @@
 
     // TODO: Maybe this should be a separate component?
     hr {
-      border-block-end: 1px solid bk.$color-blackberry-300;
-      margin-block: bk.$spacing-11 bk.$spacing-2;
+      border-block-end: 1px solid bk.$theme-rule-default;
+      margin-block: bk.rem-from-px(70) bk.$spacing-2;
+    }
+
+    small {
+      color: bk.$theme-text-small-text-subtle;
+      font-size: bk.$font-size-s;
+    }
+
+    button {
+      font-size: bk.$font-size-s;
     }
   }
 }
diff --git a/src/components/containers/DialogLayout/DialogLayout.stories.tsx b/src/components/containers/DialogLayout/DialogLayout.stories.tsx
@@ -36,6 +36,7 @@ export const DialogPattern2: Story = {
   render: () => {
     return (
       <Dialog
+        // not exactly the same logo on Figma, but I guess that's irrelevant for this story.
         title={<Logo subtitle="Armor"/>}
         showCancelAction={false}
       >
@@ -55,7 +56,10 @@ export const DialogPattern2: Story = {
               />
               {/* TODO: Maybe this should be a separate component? */}
               <hr/>
-              <p><Icon icon="info"/> Step-by-Step Guide to Connect to Azure Cloud Provider</p>
+              <div style={{display: 'flex', flexDirection: 'row', gap: '4px', alignItems: 'flex-start'}}>
+                <p><Icon icon="info"/></p>
+                <p><small>Step-by-Step Guide to Connect to Azure Cloud Provider</small></p>
+              </div>
             </>
           )}
         >
@@ -113,7 +117,7 @@ export const DialogPattern2: Story = {
 
               {/* TODO: Eventually in the future implement something like this:
               https://react-spectrum.adobe.com/react-spectrum/Flex.html */}
-              <div style={{display: 'flex', flexDirection: 'row', gap: '8px'}}>
+              <div style={{display: 'flex', flexDirection: 'row', gap: '12px'}}>{/* bk.spacing-3 */}
                 <Button kind="secondary">Back</Button>
                 <Button kind="secondary">Skip Onboarding</Button>
                 <Button kind="primary">Next</Button>

diff --git a/src/components/forms/fields/FieldLayout/FieldLayout.module.scss b/src/components/forms/fields/FieldLayout/FieldLayout.module.scss
@@ -13,7 +13,7 @@
     }
 
     &.bk-field-layout--medium {
-      inline-size: calc(bk.$spacing-18 + bk.$spacing-11); // 320px
+      inline-size: bk.rem-from-px(400);
     }
   }
 }
diff --git a/src/components/forms/fields/InputField/InputField.module.scss b/src/components/forms/fields/InputField/InputField.module.scss
@@ -33,7 +33,8 @@
     }
 
     .bk-input-field__description {
-      font-size: bk.$font-size-xs;
+      color: bk.$theme-form-text-hint;
+      font-size: bk.$font-size-s;
     }
   }
 }