chore: adjust styling

AxisCommunications · Apr 11, 2024 · c9a19c6 · c9a19c6
1 parent 3f8c66f
commit c9a19c6
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/examples/src/stories/icons/icon-page.styles.ts b/examples/src/stories/icons/icon-page.styles.ts
@@ -21,4 +21,10 @@ export const useStyles = makeStyles({
     height: "auto",
     ...shorthands.padding("0px 8px"),
   },
+  displayName: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    justifyContent: "center",
+  },
 });
diff --git a/examples/src/stories/icons/icon-page.tsx b/examples/src/stories/icons/icon-page.tsx
@@ -31,7 +31,7 @@ export const IconPage = (): JSX.Element => {
         className={styles.iconWrapper}
       >
         <Icon />
-        <div>
+        <div className={styles.displayName}>
           <Caption1 className={styles.text}>
             {Icon.displayName}
           </Caption1>

diff --git a/examples/src/stories/illustrations/components/illustration-dialog.tsx b/examples/src/stories/illustrations/components/illustration-dialog.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles({
       backgroundColor: tokens.colorNeutralBackground1,
     },
   },
-  iconBootstrap: {
+  illustrationBootstrap: {
     resize: "both",
     width: "250px",
     maxWidth: "500px",

diff --git a/examples/src/stories/illustrations/illustration-page.styles.ts b/examples/src/stories/illustrations/illustration-page.styles.ts
@@ -19,4 +19,10 @@ export const useStyles = makeStyles({
     height: "auto",
     ...shorthands.padding("0px 8px"),
   },
+  displayName: {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    justifyContent: "center",
+  },
 });
diff --git a/examples/src/stories/illustrations/illustration-page.tsx b/examples/src/stories/illustrations/illustration-page.tsx
@@ -39,7 +39,7 @@ export const IllustrationPage = (): JSX.Element => {
         >
           <Illustration />
         </IllustrationDialog>
-        <div>
+        <div className={styles.displayName}>
           <Caption1 className={styles.text}>
             {Illustration.displayName}
           </Caption1>