#1593| Styling fixes

Author: ombhardwajj

src/dataEntryApp/components/GroupSubjectMemberCardView.jsx

@@ -4,7 +4,7 @@ import {
   Button,
   Typography,
   DialogContent,
-  Grid
+  Grid,
 } from "@mui/material";
 import { InternalLink } from "../../common/components/utils";
 import { useTranslation } from "react-i18next";
@@ -15,16 +15,16 @@ import SubjectCardView from "./SubjectCardView";
 
 const StyledCardActions = styled(CardActions)({
   display: "flex",
-  justifyContent: "space-between"
+  justifyContent: "space-between",
 });
 
 const StyledDialogContent = styled(DialogContent)({
   width: 600,
-  height: "auto"
+  height: "auto",
 });
 
 const StyledEditButton = styled(Button)({
-  minWidth: "0px"
+  minWidth: "0px",
 });
 
 const removeButtonStyle = {
@@ -33,11 +33,11 @@ const removeButtonStyle = {
   marginTop: "1px",
   boxShadow: "none",
   color: "#0e6eff",
-  backgroundColor: "#fff",
+  backgroundColor: "#F8F9F9",
   "&:hover": {
     color: "#0e6eff",
-    backgroundColor: "#fff"
-  }
+    backgroundColor: "#F8F9F9",
+  },
 };
 
 const applyButtonStyle = {
@@ -46,8 +46,8 @@ const applyButtonStyle = {
   height: "30px",
   boxShadow: "none",
   "&:hover": {
-    backgroundColor: "#f27510"
-  }
+    backgroundColor: "#f27510",
+  },
 };
 
 const cancelButtonStyle = {
@@ -58,17 +58,17 @@ const cancelButtonStyle = {
   height: "30px",
   boxShadow: "none",
   "&:hover": {
-    backgroundColor: "#F8F9F9"
-  }
+    backgroundColor: "#F8F9F9",
+  },
 };
 
 const GroupSubjectMemberCardView = ({
   setMembersChanged,
   groupSubject: {
     memberSubject,
     encounterMetadata: { dueEncounters, overdueEncounters },
-    uuid
-  }
+    uuid,
+  },
 }) => {
   const { t } = useTranslation();
 
@@ -91,8 +91,8 @@ const GroupSubjectMemberCardView = ({
       {dueEncounters && dueEncounters > 0 ? (
         <Typography
           sx={{
-            color: theme => theme.palette.text.secondary,
-            textAlign: "center"
+            color: (theme) => theme.palette.text.secondary,
+            textAlign: "center",
           }}
         >
           {t("Due") + ": " + dueEncounters}
@@ -103,8 +103,8 @@ const GroupSubjectMemberCardView = ({
       {overdueEncounters && overdueEncounters > 0 ? (
         <Typography
           sx={{
-            color: theme => theme.palette.text.secondary,
-            textAlign: "center"
+            color: (theme) => theme.palette.text.secondary,
+            textAlign: "center",
           }}
         >
           {t("Overdue") + ": " + overdueEncounters}
@@ -133,7 +133,7 @@ const GroupSubjectMemberCardView = ({
             {
               buttonType: "openButton",
               label: t("remove"),
-              sx: removeButtonStyle
+              sx: removeButtonStyle,
             },
             {
               buttonType: "applyButton",
@@ -144,13 +144,13 @@ const GroupSubjectMemberCardView = ({
                 api
                   .deleteGroupSubject(uuid)
                   .then(() => setTimeout(() => setMembersChanged(true), 250));
-              }
+              },
             },
             {
               buttonType: "cancelButton",
               label: t("cancel"),
-              sx: cancelButtonStyle
-            }
+              sx: cancelButtonStyle,
+            },
           ]}
           title="Remove Member"
           btnHandleClose={noop}

src/dataEntryApp/components/SubjectCardView.jsx

@@ -7,7 +7,7 @@ import SubjectProfilePicture from "./SubjectProfilePicture";
 const StyledCard = styled(Card)(({ theme }) => ({
   boxShadow: theme.shadows[2],
   borderRadius: "2",
-  width: "auto",
+  width: "100%",
   whiteSpace: "nowrap",
   overflowWrap: "normal",
   minHeight: 150,

src/dataEntryApp/views/subjectDashBoard/components/CommonModal.jsx

@@ -5,7 +5,7 @@ import {
   Dialog,
   DialogActions as MuiDialogActions,
   IconButton,
-  Fab
+  Fab,
 } from "@mui/material";
 import { Close as CloseIcon } from "@mui/icons-material";
 import { Link } from "react-router-dom";
@@ -18,18 +18,18 @@ const DialogTitleWrapper = styled("div")(({ theme }) => ({
   color: "white",
   display: "flex",
   alignItems: "center",
-  justifyContent: "space-between"
+  justifyContent: "space-between",
 }));
 
 const StyledCloseButton = styled(IconButton)({
-  color: "white"
+  color: "white",
 });
 
 const DialogActions = styled(MuiDialogActions)({
   padding: "11px",
   backgroundColor: "#F8F9F9",
   float: "left",
-  display: "inline"
+  display: "inline",
 });
 
 const CommonModal = ({
@@ -54,7 +54,7 @@ const CommonModal = ({
     btnHandleClose();
   };
 
-  const pick = type => buttonsSet.find(btn => btn.buttonType === type);
+  const pick = (type) => buttonsSet.find((btn) => btn.buttonType === type);
 
   const mainButton = pick("openButton");
   const filterButton = pick("filterButton");
@@ -74,6 +74,7 @@ const CommonModal = ({
           color="primary"
           aria-label="add"
           onClick={handleClickOpen}
+          sx={mainButton.sx}
         >
           {mainButton.label}
         </Fab>