Fix tab styles (accidentally overridden in merge)

bcgov · Aug 16, 2024 · 57fdc0c · 57fdc0c
1 parent ecfb917
commit 57fdc0c
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/met-web/src/components/engagement/admin/view/index.tsx b/met-web/src/components/engagement/admin/view/index.tsx
@@ -65,23 +65,35 @@ export const AdminEngagementView = () => {
                             key={key}
                             value={value}
                             label={value}
+                            disableFocusRipple
                             sx={{
                                 display: 'flex',
-                                height: '48px',
-                                padding: '0px 24px 0px 18px',
                                 justifyContent: 'center',
                                 alignItems: 'center',
+                                height: '48px',
+                                padding: '4px 24px 2px 18px',
+                                fontSize: '14px',
                                 borderRadius: '0px 16px 0px 0px',
-                                borderBottom: '1px solid',
-                                borderColor: 'gray.60',
-                                backgroundColor: 'gray.10',
-                                color: 'text.secondary',
+                                borderBottom: '2px solid',
+                                borderBottomColor: 'gray.60',
                                 boxShadow:
                                     '0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20)',
+                                backgroundColor: 'gray.10',
+                                color: 'text.secondary',
+                                fontWeight: 'normal',
                                 '&.Mui-selected': {
                                     backgroundColor: 'primary.main',
                                     borderColor: 'primary.main',
                                     color: 'white',
+                                    fontWeight: 'bold',
+                                },
+                                outlineOffset: '-4px',
+                                '&:focus-visible': {
+                                    outline: `2px solid`,
+                                    outlineColor: 'focus.inner',
+                                    border: '4px solid',
+                                    borderColor: 'focus.outer',
+                                    padding: '0px 20px 0px 14px',
                                 },
                             }}
                         />