styling

Sage-Bionetworks · Mar 7, 2025 · f64dac5 · f64dac5
1 parent bab1bee
commit f64dac5
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/apps/synapse-portal-framework/src/components/HeaderSearchBox.tsx b/apps/synapse-portal-framework/src/components/HeaderSearchBox.tsx
@@ -67,23 +67,40 @@ const HeaderSearchBox = ({
         })}
       >
         <Box
-          sx={{
+          sx={theme => ({
             display: 'flex',
             gap: '20px',
             alignItems: 'center',
             height: '48px',
-          }}
+            [theme.breakpoints.down('md')]: {
+              flexDirection: 'column',
+              marginBottom: '50px',
+            },
+          })}
         >
-          <FormControl sx={{ width: '187px', minHeight: '38px' }}>
+          <FormControl
+            sx={theme => ({
+              minWidth: '187px',
+              minHeight: '38px',
+              height: '100%',
+              [theme.breakpoints.down('md')]: {
+                width: '100%',
+              },
+            })}
+          >
             <Select
-              variant="standard"
               sx={{
+                backgroundColor: '#FFFF',
+                height: '100%',
                 svg: {
                   color: '#878E95',
                   width: '24px',
                   height: '24px',
                   right: '10px',
                 },
+                '.MuiSelect-select': {
+                  marginRight: '10px',
+                },
               }}
               displayEmpty
               label="Select a Role"
@@ -92,11 +109,24 @@ const HeaderSearchBox = ({
               IconComponent={KeyboardArrowDown}
             >
               <MenuItem disabled value="">
-                <em>Select a Role</em>
+                <Typography
+                  sx={{
+                    fontStyle: 'italic',
+                    color: 'grey.700',
+                  }}
+                >
+                  Select a Role
+                </Typography>
               </MenuItem>
               {roles.map(({ value, label }) => (
-                <MenuItem key={value} value={value}>
-                  {label}
+                <MenuItem key={value} value={value} sx={{ fontSize: '16px' }}>
+                  <Typography
+                    sx={{
+                      display: 'inline',
+                    }}
+                  >
+                    {label}
+                  </Typography>
                 </MenuItem>
               ))}
             </Select>
@@ -106,6 +136,7 @@ const HeaderSearchBox = ({
             path={path}
             role={role}
             sx={{
+              boxShadow: 'none',
               margin: 0,
               height: '100%',
               borderRadius: '3px',
@@ -114,6 +145,11 @@ const HeaderSearchBox = ({
                 borderRadius: '3px',
                 fontSize: '16px',
               },
+              '.MuiInputBase-input::placeholder': {
+                fontStyle: 'italic',
+                opacity: 1,
+                color: 'grey.700',
+              },
             }}
           />
         </Box>
@@ -134,6 +170,7 @@ const HeaderSearchBox = ({
                   variant="contained"
                   onClick={() => handleTermClick(term)}
                   sx={{
+                    boxShadow: 'none !important',
                     borderRadius: '30px',
                     border: '1px solid',
                     borderColor: lighten(theme.palette.primary.main, 0.9),

diff --git a/apps/synapse-portal-framework/src/components/cancercomplexity/CancerComplexityHeader.tsx b/apps/synapse-portal-framework/src/components/cancercomplexity/CancerComplexityHeader.tsx
@@ -23,7 +23,7 @@ const CancerComplexityHeader = () => {
   )
   const roles = [
     { value: 'researcher', label: 'Researcher' },
-    { value: 'principalInvestigator', label: 'Principal Investigator (PI)' },
+    { value: 'principalInvestigator', label: 'Principal Investigator' },
     { value: 'funder', label: 'Funder' },
     { value: 'student', label: 'Student' },
     { value: 'patientAdvocate', label: 'Patient Advocate' },