Icon sizing

nemac · Dec 4, 2024 · 8f7481a · 8f7481a
1 parent 43b09fa
commit 8f7481a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/src/components/Cell.jsx b/src/components/Cell.jsx
@@ -58,7 +58,6 @@ export default function Cell({ label, type, key, isSelectable, onRemove }) {
         borderBottomRightRadius: 0,
         borderTopLeftRadius: type === 'community' ? theme.spacing(2) : 0,
         borderBottomLeftRadius: type === 'community' ? theme.spacing(2) : 0,
-        padding: 3,
         bgcolor: key === hoverRow ? 'primary.cellHoverBg' : 'primary.tan',
         height: { xs: 120, md: 50 },
         justifyContent: 'center',

diff --git a/src/components/HeaderBox.jsx b/src/components/HeaderBox.jsx
@@ -6,7 +6,6 @@ import { styled } from "@mui/material/styles";
 const HeaderBox = styled(Box)(({ theme }) => ({
   height: '200px',
   alignContent: 'center',
-  textAlign: 'center',
 }));
 
 export default HeaderBox;

diff --git a/src/components/PractitionerPane.jsx b/src/components/PractitionerPane.jsx
@@ -14,9 +14,9 @@ const matchVals = (commCats, practCats) => {
   return commCats.map((commCat) => practCats.includes(commCat));
 };
 
+// Person icon (mobile), school icon (mobile)
 const StyledBox = styled(Box)({
   height: 45,
-  maxWidth: '80%',
 });
 
 function StrTrainedBadge({ isTrained }) {
@@ -35,7 +35,10 @@ function StrTrainedBadge({ isTrained }) {
             xs: 'primary.lightBlue',
             md: 'primary.main',
           },
-          color: 'primary.lightGray',
+          color: {
+            xs: 'primary.main',
+            md: 'primary.lightGray',
+          },
           flexGrow: 'space-around',
           verticalAlign: 'middle',
           justifyContent: 'center',
@@ -80,7 +83,18 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
   };
 
   return (
-    <HeaderBox
+    <HeaderBox 
+      sx={{
+        flexDirection: 'column',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+        width: '80%',
+        margin: '0 auto',
+        display: {
+          md: 'flex',
+          xs: 'block'
+        },
+      }}
       ref={headerRef}
       onMouseEnter={onMouseEnter}
     >
@@ -102,6 +116,7 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
               xs: 'inherit',
               md: 'none',
             },
+            color: "primary.lightBlue",
           }}
         />
       </StyledBox>
@@ -117,6 +132,7 @@ function PractitionerHeader({ strTrained, practitioner, poppedPractitioner, setP
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           textWrap: 'auto',
+          textAlign: 'center',
         }}
       >
         {practitioner.org}

diff --git a/src/components/svg/PractMatchSymbol.jsx b/src/components/svg/PractMatchSymbol.jsx
@@ -15,13 +15,9 @@ export default function PractMatchSymbol({ label }) {
       <Box
         sx={{
           width: {
-            xs: 20,
+            xs: "clamp(20px, 75%, 40px)",
             md: 25
-          },
-          height: {
-            xs: 20,
-            md: 25
-          }
+          }    
         }} 
       >
         {
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,13 +15,9 @@ export default function PractMatchSymbol({ label }) { @@
           <Box
             sx={{
               width: {
-                xs: 20,
+                xs: "clamp(20px, 75%, 40px)",
                 md: 25
-              },
-              height: {
-                xs: 20,
-                md: 25
-              }
+              }
             }}
           >
             {
@@ Expand Down @@