Update text components

wondrous-dev · Apr 4, 2024 · 685ea24 · 685ea24
1 parent a5bc273
commit 685ea24
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/...n/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx b/...n/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx
@@ -2,7 +2,7 @@ import { Button, Grid, Stack, Typography, useTheme } from "@mui/material";
 import { COMPONENT_CATEGORIES } from "components/AddFormEntity/constants";
 import SafeImage from "components/SafeImage";
 import Modal from "components/Shared/Modal";
-import { ColumnContainer, OptionButton, OptionsColumnContainer } from "./styles";
+import { CategoryTitle, ColumnContainer, OptionButton, OptionButtonLabel, OptionsColumnContainer } from "./styles";
 
 const chooseIcon = (icon, category) => {
   if (!icon) {
@@ -26,22 +26,19 @@ const OptionsColumn = ({ colOptions, options, onClick, onClose, showBorder }) =>
     <OptionsColumnContainer $showBorder={showBorder}>
       {colOptions.map((category) => (
         <Stack spacing={2} key={category}>
-          <Typography fontWeight={600} color="#737373" textTransform="capitalize">
-            {category}
-          </Typography>
+          <CategoryTitle>{category}</CategoryTitle>
           <Stack alignItems="start">
             {options[category].map((option) => (
               <OptionButton
+                key={option.value}
                 disableRipple
                 onClick={() => {
                   onClick(option.value);
                   onClose();
                 }}
                 startIcon={chooseIcon(option.icon, category)}
               >
-                <Typography key={option.value} color="#262627" textAlign="left">
-                  {option.label}
-                </Typography>
+                <OptionButtonLabel>{option.label}</OptionButtonLabel>
               </OptionButton>
             ))}
           </Stack>

diff --git a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/styles.tsx b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/styles.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Grid } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 
 export const ColumnContainer = styled(Box)`
@@ -28,6 +28,14 @@ export const OptionsColumnContainer = styled(Box)<{ $showBorder?: boolean }>`
   }
 `;
 
+export const CategoryTitle = styled(Typography)`
+  && {
+    font-weight: 600;
+    color: #737373;
+    text-transform: capitalize;
+  }
+`;
+
 export const OptionButton = styled(Button)`
   && {
     text-transform: capitalize;
@@ -39,3 +47,10 @@ export const OptionButton = styled(Button)`
     }
   }
 `;
+
+export const OptionButtonLabel = styled(Typography)`
+  && {
+    color: #262627;
+    text-align: left;
+  }
+`;