fix(my-pages): notifications spacing and color

apps/portals/my-pages/src/components/Notifications/NotificationButton.tsx

@@ -28,7 +28,7 @@ const NotificationButton = ({
   const [hasMarkedLocally, setHasMarkedLocally] = useState(false)
   const [markAllAsSeen] = useMarkAllNotificationsAsSeenMutation()
   const { width } = useWindowSize()
-  const isMobile = width < theme.breakpoints.md
+  const isMobile = width < theme.breakpoints.lg
   const ref = useRef<HTMLButtonElement>(null)
 
   const { data, refetch } = useGetUserNotificationsOverviewQuery({

apps/portals/my-pages/src/components/Notifications/NotificationLine.tsx

@@ -15,6 +15,8 @@ import {
   COAT_OF_ARMS,
   resolveLink,
 } from '@island.is/portals/my-pages/information'
+import { useWindowSize } from 'react-use'
+import { theme } from '@island.is/island-ui/theme'
 
 interface Props {
   data: {
@@ -26,6 +28,10 @@ interface Props {
 }
 
 export const NotificationLine = ({ data, onClickCallback }: Props) => {
+  const { width } = useWindowSize()
+
+  const isMobile = width < theme.breakpoints.md
+
   const date = data.metadata?.created
     ? format(new Date(data.metadata.created), dateFormat.is)
     : ''
@@ -44,7 +50,7 @@ export const NotificationLine = ({ data, onClickCallback }: Props) => {
           position="relative"
           borderColor="blue200"
           borderBottomWidth="standard"
-          paddingX={2}
+          padding={2}
           width="full"
           className={cn(styles.line, {
             [styles.unread]: !isRead,
@@ -60,7 +66,7 @@ export const NotificationLine = ({ data, onClickCallback }: Props) => {
             width="full"
             display="flex"
             flexDirection="column"
-            paddingLeft={2}
+            paddingLeft={isMobile ? 'p2' : 2}
             minWidth={0}
           >
             <Box
@@ -70,21 +76,23 @@ export const NotificationLine = ({ data, onClickCallback }: Props) => {
             >
               <Text
                 fontWeight={isRead ? 'regular' : 'medium'}
-                variant="medium"
+                variant={isMobile ? 'default' : 'medium'}
                 color="blue400"
                 truncate
               >
                 {data.message.title}
               </Text>
-              <Text variant="small">{date}</Text>
+              <Text variant={isMobile ? 'medium' : 'small'}>{date}</Text>
             </Box>
             <Box
               marginTop={1}
               display="flex"
               flexDirection="row"
               justifyContent="spaceBetween"
             >
-              <Text variant="small">{data.message.displayBody}</Text>
+              <Text variant={isMobile ? 'medium' : 'small'}>
+                {data.message.displayBody}
+              </Text>
             </Box>
           </Box>
         </Box>

apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx

@@ -40,6 +40,7 @@ const NotificationMenu = ({
   const { width } = useWindowSize()
 
   const isMobile = width < theme.breakpoints.md
+  const isTablet = width < theme.breakpoints.lg && !isMobile
 
   const onClose = () => {
     closeNotificationMenu()
@@ -51,7 +52,7 @@ const NotificationMenu = ({
       onClick={onClose}
       aria-label={formatMessage(sharedMessages.close)}
     >
-      <Icon icon="close" color="blue400" />
+      <Icon icon="close" color="blue600" />
     </button>
   )
 
@@ -60,17 +61,17 @@ const NotificationMenu = ({
       <Box
         position="relative"
         background="white"
-        padding={2}
+        padding={isMobile || isTablet ? 0 : 2}
         borderRadius="large"
         display="flex"
         flexDirection="column"
         height={isMobile ? 'full' : undefined}
         className={cn(
-          isMobile ? mStyles.fullScreen : mStyles.dropdown,
+          isMobile || isTablet ? mStyles.fullScreen : mStyles.dropdown,
           mStyles.container,
         )}
         style={
-          !isMobile
+          !isMobile && !isTablet
             ? {
                 left: rightPosition ?? '75%',
                 transform: 'translateX(-100%)',
@@ -85,6 +86,8 @@ const NotificationMenu = ({
             alignItems="center"
             marginBottom={1}
             marginTop={2}
+            marginRight={2}
+            marginLeft={2}
           >
             <Box
               borderRadius="full"
@@ -93,7 +96,7 @@ const NotificationMenu = ({
               justifyContent="center"
               alignItems="center"
               className={mStyles.overviewIcon}
-              marginRight={1}
+              marginRight="p2"
             >
               <Icon
                 icon="notifications"
@@ -113,8 +116,8 @@ const NotificationMenu = ({
               />
             ))}
             <Box
-              paddingTop={2}
-              paddingBottom={1}
+              paddingTop={3}
+              paddingBottom={2}
               textAlign="center"
               width="full"
             >
@@ -125,7 +128,7 @@ const NotificationMenu = ({
                 <Button
                   icon="arrowForward"
                   iconType="filled"
-                  size="medium"
+                  size="small"
                   type="text"
                   variant="text"
                   unfocusable

apps/portals/my-pages/src/components/Notifications/Notifications.css.ts

@@ -54,8 +54,6 @@ export const lineWrapper = style({
 })
 
 export const line = style({
-  paddingTop: theme.spacing.smallGutter * 3,
-  paddingBottom: theme.spacing.smallGutter * 3,
   selectors: {
     '&:hover': {
       backgroundColor: theme.color.blue100,

apps/portals/my-pages/src/components/Sidemenu/Sidemenu.css.ts

@@ -1,5 +1,10 @@
 import { spacing, theme, themeUtils } from '@island.is/island-ui/theme'
-import { keyframes, style, styleVariants } from '@vanilla-extract/css'
+import {
+  globalStyle,
+  keyframes,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css'
 import { StyleWithSelectors } from '@vanilla-extract/css/dist/declarations/src/types'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -161,7 +166,8 @@ export const closeButton = style({
   transition: 'background-color 250ms, border-color 250ms',
 
   ':hover': {
-    backgroundColor: theme.color.dark100,
+    backgroundColor: theme.color.blue100,
+    color: theme.color.blue400,
   },
 
   ':focus': {
@@ -170,6 +176,10 @@ export const closeButton = style({
   },
 })
 
+globalStyle(`${closeButton}:hover > svg`, {
+  color: theme.color.blue400,
+})
+
 export const itemLink = style({
   width: '100%',
   ':hover': {

apps/portals/my-pages/src/components/Sidemenu/Sidemenu.tsx

@@ -47,7 +47,7 @@ const Sidemenu = ({
       onClick={() => setSideMenuOpen(false)}
       aria-label={formatMessage(sharedMessages.close)}
     >
-      <Icon icon="close" color="blue400" />
+      <Icon icon="close" color="blue600" />
     </button>
   )
 
@@ -89,7 +89,7 @@ const Sidemenu = ({
               justifyContent="center"
               alignItems="center"
               className={styles.overviewIcon}
-              marginRight={2}
+              marginRight={'p2'}
             >
               <Icon icon="dots" />
             </Box>