Merge pull request #55 from cph-cachet/jakdan99/fix-design-issues

Fix design issues
cph-cachet · Jan 6, 2025 · d707ae7 · d707ae7
2 parents c5bfe74 + 99cead9
commit d707ae7
Show file tree

Hide file tree

Showing 16 changed files with 159 additions and 113 deletions.
diff --git a/src/assets/fonts/index.tsx b/src/assets/fonts/index.tsx
@@ -1,50 +1,29 @@
-import MuseoSans100 from "./museosans-100-webfont.woff";
-import MuseoSans300 from "./museosans-300-webfont.woff";
-import MuseoSans500 from "./museosans-500-webfont.woff";
-import MuseoSans700 from "./museosans-700-webfont.woff";
-import MuseoSans900 from "./museosans-900-webfont.woff";
-
-export const museosans100 = {
-  fontFamily: "Museo Sans Rounded",
+export const opensans100 = {
+  fontFamily: "Open Sans",
   fontStyle: "normal",
   fontWeight: 100,
-  src: `
-    url(${MuseoSans100}) format('woff')
-  `,
 };
 
-export const museosans300 = {
-  fontFamily: "Museo Sans",
+export const opensans300 = {
+  fontFamily: "Open Sans",
   fontStyle: "normal",
   fontWeight: 300,
-  src: `
-    url(${MuseoSans300}) format('woff')
-  `,
 };
 
-export const museosans500 = {
-  fontFamily: "Museo Sans",
+export const opensans500 = {
+  fontFamily: "Open Sans",
   fontStyle: "normal",
   fontWeight: 500,
-  src: `
-    url(${MuseoSans500}) format('woff')
-  `,
 };
 
-export const museosans700 = {
-  fontFamily: "Museo Sans",
+export const opensans700 = {
+  fontFamily: "Open Sans",
   fontStyle: "normal",
   fontWeight: 700,
-  src: `
-    url(${MuseoSans700}) format('woff')
-  `,
 };
 
-export const museosans900 = {
-  fontFamily: "Museo Sans",
+export const opensans900 = {
+  fontFamily: "Open Sans",
   fontStyle: "normal",
   fontWeight: 900,
-  src: `
-    url(${MuseoSans900}) format('woff')
-  `,
 };
diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel='shortcut icon' type='image/png' href='/images/favicon.png' />
     <title><%= title %></title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
 </head>
 <body>
     <div id="root"></div>

diff --git a/src/pages/Deployment/BasicInfo/index.tsx b/src/pages/Deployment/BasicInfo/index.tsx
@@ -131,45 +131,58 @@ const BasicInfo = () => {
           )}
         </Left>
         <Right>
-          <Stack direction="column" gap="8px">
-            <SecondaryText variant="h6">
-              {`${t("common:created_on", {
-                date: formatDateTime(deployment.deploymentStatus.createdOn, {
-                  year: "numeric",
-                  month: "numeric",
-                  day: "numeric",
-                }),
-              })}`}
-            </SecondaryText>
-            {deployment.deploymentStatus.startedOn && (
+          <Stack direction="column">
+            <Stack
+              direction="row"
+              gap="8px"
+              justifyContent="end"
+              marginRight="36px"
+            >
               <SecondaryText variant="h6">
-                {`${t("common:started_on", {
-                  date: formatDateTime(deployment.deploymentStatus.startedOn, {
+                {`${t("common:created_on", {
+                  date: formatDateTime(deployment.deploymentStatus.createdOn, {
                     year: "numeric",
                     month: "numeric",
                     day: "numeric",
                   }),
                 })}`}
               </SecondaryText>
-            )}
-            {deployment.deploymentStatus.stoppedOn && (
+              {deployment.deploymentStatus.startedOn && (
+                <SecondaryText variant="h6">
+                  {`${t("common:started_on", {
+                    date: formatDateTime(
+                      deployment.deploymentStatus.startedOn,
+                      {
+                        year: "numeric",
+                        month: "numeric",
+                        day: "numeric",
+                      },
+                    ),
+                  })}`}
+                </SecondaryText>
+              )}
+              {deployment.deploymentStatus.stoppedOn && (
+                <SecondaryText variant="h6">
+                  {`${t("common:stopped_on", {
+                    date: formatDateTime(
+                      deployment.deploymentStatus.stoppedOn,
+                      {
+                        year: "numeric",
+                        month: "numeric",
+                        day: "numeric",
+                      },
+                    ),
+                  })}`}
+                </SecondaryText>
+              )}
+            </Stack>
+            <StyledDivider />
+            <Stack direction="row" gap="16px" justifyContent="end">
               <SecondaryText variant="h6">
-                {`${t("common:stopped_on", {
-                  date: formatDateTime(deployment.deploymentStatus.stoppedOn, {
-                    year: "numeric",
-                    month: "numeric",
-                    day: "numeric",
-                  }),
-                })}`}
+                {t("common:deployment_id", { id: deploymentId })}
               </SecondaryText>
-            )}
-          </Stack>
-          <StyledDivider />
-          <Stack direction="row" gap="8px" marginTop={1}>
-            <SecondaryText variant="h6">
-              {t("common:deployment_id", { id: deploymentId })}
-            </SecondaryText>
-            <CopyButton textToCopy={deploymentId} idType="Deployment" />
+              <CopyButton textToCopy={deploymentId} idType="Deployment" />
+            </Stack>
           </Stack>
         </Right>
       </StyledCard>

diff --git a/src/pages/Deployment/BasicInfo/styles.ts b/src/pages/Deployment/BasicInfo/styles.ts
@@ -21,7 +21,6 @@ export const Left = styled("div")({
 
 export const Right = styled("div")({
   display: "flex",
-  alignItems: "center",
   "& button": {
     paddingBottom: 10,
   },
@@ -30,10 +29,11 @@ export const Right = styled("div")({
 export const StyledDivider = styled(Divider)(({ theme }) => ({
   borderColor: theme.palette.grey[300],
   borderWidth: 1,
-  width: 1,
-  marginRight: 10,
-  marginLeft: 10,
-  height: 64,
+  width: 400,
+  marginTop: 10,
+  marginBottom: 10,
+  marginRight: 36,
+  height: 1,
 }));
 
 export const SecondaryText = styled(Typography)(({ theme }) => ({

diff --git a/src/pages/Export/ExportsTable/index.tsx b/src/pages/Export/ExportsTable/index.tsx
@@ -84,6 +84,17 @@ const ExportsTable = memo(({ exports, exportsLoading }: Props) => {
     muiSkeletonProps: {
       animation: "wave",
     },
+    muiPaginationProps: {
+      SelectProps: {
+        sx: {
+          border: "1px solid #d9d9d9",
+          borderRadius: "8px",
+          height: "35px",
+          padding: "4px 0 0 12px",
+          elevation: 3,
+        },
+      },
+    },
     state: {
       showSkeletons: exportsLoading,
     },

diff --git a/src/pages/Export/ExportsTable/styles.ts b/src/pages/Export/ExportsTable/styles.ts
@@ -55,9 +55,6 @@ export const StyledContainer = styled("div")(({ theme }) => ({
     backgroundColor: "#fff",
     boxShadow: "none",
   },
-  "& .MuiPaper-root .MuiBox-root .MuiBox-root .MuiBox-root": {
-    width: "100%",
-  },
   "& .MuiPaper-root > div.MuiBox-root:last-of-type > div > div": {
     width: "100%",
     paddingLeft: 8,

diff --git a/src/pages/Protocol/ProtocolInfo/styles.ts b/src/pages/Protocol/ProtocolInfo/styles.ts
@@ -27,7 +27,7 @@ export const Left = styled("div")({
   gap: 26,
   flexShrink: 2,
   "@media (max-width: 1250px)": {
-    justifyContent: "space-between",
+    justifyContent: "flex-start",
     width: "100%",
   },
 });

diff --git a/src/pages/StudyOverview/Overview/Status/index.tsx b/src/pages/StudyOverview/Overview/Status/index.tsx
@@ -84,7 +84,7 @@ const Status = () => {
           <StyledLink
             variant="h6"
             onClick={() => {
-              navigate("/protocols");
+              navigate(`/studies/${studyId}/settings`);
             }}
           >
             See detailed information in Study Settings

diff --git a/src/pages/StudyProtocol/ProtocolInfo/index.tsx b/src/pages/StudyProtocol/ProtocolInfo/index.tsx
@@ -61,7 +61,7 @@ type Props = {
 };
 
 const ProtocolInfo = ({ protocolId }: Props) => {
-  const isDownMd = useMediaQuery("(max-width:1250px)");
+  const isDownMd = useMediaQuery("(max-width:1725px)");
   const { data: protocol, isLoading: protocolLoading } =
     useProtocolDetails(protocolId);
   if (protocolLoading) return <ProtocolInfoSkeleton />;

diff --git a/src/pages/StudyProtocol/ProtocolInfo/styles.ts b/src/pages/StudyProtocol/ProtocolInfo/styles.ts
@@ -15,7 +15,7 @@ export const StyledContainer = styled(Card)(({ theme }) => ({
   padding: "0 32px",
   boxShadow: "none",
   gap: 24,
-  "@media (max-width: 1250px)": {
+  "@media (max-width: 1725px)": {
     height: "auto",
     padding: 24,
     flexDirection: "column",
@@ -30,7 +30,7 @@ export const Left = styled("div")({
   gap: 8,
   height: "100%",
   flexShrink: 2,
-  "@media (max-width: 1250px)": {
+  "@media (max-width: 1725px)": {
     justifyContent: "space-between",
     width: "100%",
   },
@@ -60,7 +60,7 @@ export const Right = styled("div")({
   justifyContent: "end",
   flexShrink: 0,
   gap: 18,
-  "@media (max-width: 1250px)": {
+  "@media (max-width: 1725px)": {
     justifyContent: "space-between",
     width: "100%",
   },
@@ -109,7 +109,7 @@ export const CreationInfoContainer = styled("div")(({ theme }) => ({
   color: theme.palette.text.secondary,
   height: 20,
   padding: 2,
-  "@media (max-width: 1250px)": {
+  "@media (max-width: 1725px)": {
     justifyContent: "flex-start",
   },
 }));

diff --git a/src/pages/StudySettings/StudyData/index.tsx b/src/pages/StudySettings/StudyData/index.tsx
@@ -6,12 +6,25 @@ import {
   useStudyDetails,
   useStudyStatus,
 } from "@Utils/queries/studies";
-import { FormLabel, MenuItem, Select, TextField } from "@mui/material";
+import {
+  FormLabel,
+  MenuItem,
+  Select,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import LinkIcon from "@mui/icons-material/Link";
 import { useFormik } from "formik";
-import { useParams } from "react-router";
+import { useNavigate, useParams } from "react-router";
 import * as yup from "yup";
 import StudySetupSkeleton from "../StudySetupSkeleton";
-import { Heading, StyledCard, Subheading } from "../styles";
+import {
+  Heading,
+  ProtocolInformation,
+  StyledCard,
+  Subheading,
+} from "../styles";
 
 const studyDetailsValidationSchema = yup.object({
   name: yup.string().required("Name is required"),
@@ -24,6 +37,7 @@ const studyProtocolValidationSchema = yup.object({
 
 const StudyData = () => {
   const { id: studyId } = useParams();
+  const navigate = useNavigate();
   const {
     data: studyDetails,
     isLoading: studyDetailsLoading,
@@ -129,9 +143,24 @@ const StudyData = () => {
         }
         onBlur={handleDetailsBlur}
       />
-      <FormLabel disabled={!studyStatus.canSetStudyProtocol} required>
-        Protocol
-      </FormLabel>
+      <Stack
+        spacing={2}
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        margin="16px 0 8px 0"
+      >
+        <FormLabel disabled={!studyStatus.canSetStudyProtocol} required>
+          Protocol
+        </FormLabel>
+        <ProtocolInformation
+          direction="row"
+          onClick={() => navigate(`/studies/${studyId}/protocol`)}
+        >
+          <Typography variant="h6">See detailed information</Typography>
+          <LinkIcon sx={{ fontSize: 16 }} />
+        </ProtocolInformation>
+      </Stack>
       <Select
         disabled={!studyStatus.canSetStudyProtocol}
         variant="outlined"

diff --git a/src/pages/StudySettings/StudyStatusSection/index.tsx b/src/pages/StudySettings/StudyStatusSection/index.tsx
@@ -198,8 +198,8 @@ const StudyStatusSection: React.FC = () => {
           <DeleteStudyButton
             onClick={() => setOpenDeleteConfirmationModal(true)}
           >
-            <Typography variant="h6">Delete Study</Typography>
             <DeleteForeverRoundedIcon fontSize="small" />
+            <Typography variant="h5">Delete Study</Typography>
           </DeleteStudyButton>
         </InnerLeftContainer>
         {!isDownMd && <StyledDivider />}

diff --git a/src/pages/StudySettings/StudyStatusSection/styles.ts b/src/pages/StudySettings/StudyStatusSection/styles.ts
@@ -63,7 +63,7 @@ export const InnerLeftContainer = styled("div")({
   flexDirection: "column",
   justifyContent: "center",
   alignItems: "flex-end",
-  gap: 12,
+  gap: "4px",
   flexShrink: 0,
 });
 
@@ -108,15 +108,14 @@ export const CreationInfoContainer = styled("div")(({ theme }) => ({
 }));
 
 export const DeleteStudyButton = styled(Button)(({ theme }) => ({
-  padding: 2,
-  height: 20,
+  padding: "8px 16px",
+  height: 36,
   alignSelf: "flex-end",
   color: theme.palette.error.main,
+  border: `1px solid ${theme.palette.grey[700]}`,
+  borderRadius: 16,
   textTransform: "none",
-  "& svg": {
-    marginLeft: 10,
-    marginRight: "-4px",
-  },
+  gap: "8px",
   "@media (max-width: 1250px)": {
     alignSelf: "flex-start",
   },

diff --git a/src/pages/StudySettings/styles.ts b/src/pages/StudySettings/styles.ts
@@ -1,4 +1,4 @@
-import { Card, Typography } from "@mui/material";
+import { Card, Stack, Typography } from "@mui/material";
 import { styled } from "@Utils/theme";
 
 export const StyledContainer = styled("div", {
@@ -36,3 +36,9 @@ export const Subheading = styled(Typography, {
   color: theme.palette.text.primary,
   opacity: disabled ? "0.5" : 1,
 }));
+
+export const ProtocolInformation = styled(Stack)(({ theme }) => ({
+  gap: "8px",
+  color: theme.palette.primary.main,
+  cursor: "pointer",
+}));