Merge pull request #137 from IntersectMBO/feature/reasonings-modals-m…

…ocked-data Feature: Reasonings modals style adjustments
IntersectMBO · Jun 21, 2024 · e6a4d09 · e6a4d09
2 parents 0875a10 + 3d6f331
commit e6a4d09
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/frontend/src/components/atoms/modal/ModalHeader.tsx b/frontend/src/components/atoms/modal/ModalHeader.tsx
@@ -7,7 +7,7 @@ interface Props {
 }
 
 export const ModalHeader = ({ children, sx }: Props) => (
-  <Typography marginBottom="8px" fontSize="22px" fontWeight="500" sx={sx}>
+  <Typography marginBottom="16px" fontSize="22px" fontWeight="500" sx={sx}>
     {children}
   </Typography>
 );
diff --git a/frontend/src/components/organisms/Modals/AddReasoningModal.tsx b/frontend/src/components/organisms/Modals/AddReasoningModal.tsx
@@ -8,7 +8,7 @@ import {
   Typography,
 } from "@atoms";
 import { useForm } from "react-hook-form";
-import { IMAGES } from "@consts";
+import { customPalette, IMAGES } from "@consts";
 import { useTranslations } from "next-intl";
 import { ControlledField } from "@organisms";
 import { useModal } from "@context";
@@ -51,10 +51,16 @@ export const AddReasoningModal = () => {
       dataTestId="add-reasoning-modal"
       icon={IMAGES.pastelReasoning}
     >
-      <ModalHeader>{t("addReasoning.headline")}</ModalHeader>
+      <ModalHeader sx={{ marginTop: "16px" }}>
+        {t("addReasoning.headline")}
+      </ModalHeader>
       <form onSubmit={handleSubmit(onSubmit)}>
         <ModalContents>
-          <Typography variant="body1" fontWeight={500}>
+          <Typography
+            variant="body2"
+            fontWeight={400}
+            color={customPalette.textGray}
+          >
             {t("addReasoning.description")}
           </Typography>
           <ControlledField.Input

diff --git a/frontend/src/components/organisms/Modals/PreviewReasoningModal.tsx b/frontend/src/components/organisms/Modals/PreviewReasoningModal.tsx
@@ -63,11 +63,11 @@ export const PreviewReasoningModal = () => {
   }, [id]);
 
   return (
-    <ModalWrapper dataTestId="preview-reasoning-modal" sx={{ padding: 0 }}>
+    <ModalWrapper dataTestId="preview-reasoning-modal" sx={{ py: 3, px: 0 }}>
       {reasoning ? (
         <>
-          <ModalHeader sx={{ px: 3, py: 1, mb: 0 }}>
-            <Box>
+          <ModalHeader sx={{ px: 3 }}>
+            <Box sx={{ mb: 2, height: "64px" }}>
               <img
                 width={64}
                 data-testid="modal-icon"
@@ -92,7 +92,7 @@ export const PreviewReasoningModal = () => {
               borderTopRightRadius: 20,
               backgroundColor: "rgba(255, 255, 255, 0.3)",
             }}
-            pt={1.5}
+            pt={3}
             pb={3}
             px={{ xs: 2.25, md: 3 }}
           >
@@ -215,7 +215,7 @@ export const PreviewReasoningModal = () => {
           <Box
             bgcolor="white"
             px={{ xs: 1.4, md: 3 }}
-            py={2.5}
+            pt={2.5}
             sx={{ borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}
           >
             {onActionClick && (

diff --git a/frontend/src/components/organisms/Modals/ReasoningLinkModal.tsx b/frontend/src/components/organisms/Modals/ReasoningLinkModal.tsx
@@ -8,7 +8,7 @@ import {
   ModalActions,
   Typography,
 } from "@atoms";
-import { IMAGES } from "@consts";
+import { customPalette, IMAGES } from "@consts";
 import { useTranslations } from "next-intl";
 import { useModal } from "@context";
 import { useSnackbar } from "@/context/snackbar";
@@ -33,10 +33,16 @@ export const ReasoningLinkModal = () => {
       dataTestId="reasoning-link-modal"
       icon={IMAGES.pastelReasoning}
     >
-      <ModalHeader>{t("reasoningLink.headline")}</ModalHeader>
+      <ModalHeader sx={{ marginTop: "16px" }}>
+        {t("reasoningLink.headline")}
+      </ModalHeader>
       <form onSubmit={onSubmit}>
         <ModalContents>
-          <Typography variant="body1" fontWeight={500}>
+          <Typography
+            color={customPalette.textGray}
+            variant="body2"
+            fontWeight={400}
+          >
             {t("reasoningLink.description")}
           </Typography>