diff --git a/met-web/src/components/engagement/admin/view/index.tsx b/met-web/src/components/engagement/admin/view/index.tsx index fb02c822b..c02056bba 100644 --- 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', }, }} />