Merge pull request #4223 from Almee98/WV-701

WV-701 Aligned notification icon and profile avatar icon.
wevote · Jan 22, 2025 · e67429a · e67429a
2 parents 6210567 + 5ad089b
commit e67429a
Showing 1 changed file with 22 additions and 1 deletion.
diff --git a/src/js/components/Navigation/HeaderNotificationMenu.jsx b/src/js/components/Navigation/HeaderNotificationMenu.jsx
@@ -278,7 +278,8 @@ class HeaderNotificationMenu extends Component {
           id="headerNotificationMenuIcon"
           onClick={this.handleClick}
           size="large"
-          sx={isTablet() ? { marginTop: '5px', marginRight: '12px' } : {}}
+          // 'sx' refactored in the 'iconButtonRoot' and 'iconButtonRootSelected' classes below.
+          // sx={isTablet() ? { marginTop: '5px', marginRight: '12px' } : {}}
         >
           {allActivityNoticesNotSeenCount ? (
             <Badge
@@ -343,6 +344,16 @@ const styles = (theme) => ({
     paddingRight: 0,
     paddingBottom: '9px !important',
     paddingLeft: 6,
+    [theme.breakpoints.down('sm')]: {
+      marginTop: '5px !important',
+    },
+    [theme.breakpoints.between('sm', 'md')]: {
+      marginTop: '4px !important',
+      marginRight: '12px',
+    },
+    [theme.breakpoints.up('md')]: {
+      marginTop: '3px !important',
+    },
     '&:hover': {
       backgroundColor: 'transparent',
     },
@@ -355,6 +366,16 @@ const styles = (theme) => ({
     paddingRight: 0,
     paddingBottom: '9px !important',
     paddingLeft: 6,
+    [theme.breakpoints.down('sm')]: {
+      marginTop: '5px !important',
+    },
+    [theme.breakpoints.between('sm', 'md')]: {
+      marginTop: '4px !important',
+      marginRight: '12px',
+    },
+    [theme.breakpoints.up('md')]: {
+      marginTop: '3px !important',
+    },
     '&:hover': {
       backgroundColor: 'transparent',
     },