From ce436627248e44f9ba5e73f5a6e05ae148706de4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81sd=C3=ADs=20Erna=20Gu=C3=B0mundsd=C3=B3ttir?=
 <disa.erna@gmail.com>
Date: Fri, 1 Nov 2024 13:01:28 +0000
Subject: [PATCH 1/6] fix: spacing and color

---
 .../components/Notifications/NotificationMenu.tsx  |  4 ++--
 .../src/components/Sidemenu/Sidemenu.css.ts        | 14 ++++++++++++--
 .../my-pages/src/components/Sidemenu/Sidemenu.tsx  |  4 ++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
index 35806e33d7d4..0a2d077e1389 100644
--- a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
+++ b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
@@ -51,7 +51,7 @@ const NotificationMenu = ({
       onClick={onClose}
       aria-label={formatMessage(sharedMessages.close)}
     >
-      <Icon icon="close" color="blue400" />
+      <Icon icon="close" color="blue600" />
     </button>
   )
 
@@ -93,7 +93,7 @@ const NotificationMenu = ({
               justifyContent="center"
               alignItems="center"
               className={mStyles.overviewIcon}
-              marginRight={1}
+              marginRight={'p2'}
             >
               <Icon
                 icon="notifications"
diff --git a/apps/portals/my-pages/src/components/Sidemenu/Sidemenu.css.ts b/apps/portals/my-pages/src/components/Sidemenu/Sidemenu.css.ts
index 6cbd650293fe..2999c3632824 100644
--- a/apps/portals/my-pages/src/components/Sidemenu/Sidemenu.css.ts
+++ b/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': {
diff --git a/apps/portals/my-pages/src/components/Sidemenu/Sidemenu.tsx b/apps/portals/my-pages/src/components/Sidemenu/Sidemenu.tsx
index ae17b9dc87c5..d2fecd5e4fa2 100644
--- a/apps/portals/my-pages/src/components/Sidemenu/Sidemenu.tsx
+++ b/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>

From f320adb290a423c6312c6046310f87ce4f659fc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81sd=C3=ADs=20Erna=20Gu=C3=B0mundsd=C3=B3ttir?=
 <disa.erna@gmail.com>
Date: Sat, 2 Nov 2024 22:31:18 +0000
Subject: [PATCH 2/6] mobile ui

---
 .../Notifications/NotificationLine.tsx         | 18 +++++++++++++-----
 .../Notifications/NotificationMenu.tsx         |  6 ++++--
 .../Notifications/Notifications.css.ts         |  2 --
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/portals/my-pages/src/components/Notifications/NotificationLine.tsx b/apps/portals/my-pages/src/components/Notifications/NotificationLine.tsx
index bb1dde899f58..2082a5f08e4e 100644
--- a/apps/portals/my-pages/src/components/Notifications/NotificationLine.tsx
+++ b/apps/portals/my-pages/src/components/Notifications/NotificationLine.tsx
@@ -15,6 +15,8 @@ import {
   COAT_OF_ARMS,
   resolveLink,
 } from '@island.is/service-portal/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,13 +76,13 @@ 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}
@@ -84,7 +90,9 @@ export const NotificationLine = ({ data, onClickCallback }: Props) => {
               flexDirection="row"
               justifyContent="spaceBetween"
             >
-              <Text variant="small">{data.message.displayBody}</Text>
+              <Text variant={isMobile ? 'medium' : 'small'}>
+                {data.message.displayBody}
+              </Text>
             </Box>
           </Box>
         </Box>
diff --git a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
index 0a2d077e1389..7b987f4d745b 100644
--- a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
+++ b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
@@ -60,7 +60,7 @@ const NotificationMenu = ({
       <Box
         position="relative"
         background="white"
-        padding={2}
+        padding={isMobile ? 0 : 2}
         borderRadius="large"
         display="flex"
         flexDirection="column"
@@ -85,6 +85,8 @@ const NotificationMenu = ({
             alignItems="center"
             marginBottom={1}
             marginTop={2}
+            marginRight={2}
+            marginLeft={2}
           >
             <Box
               borderRadius="circle"
@@ -93,7 +95,7 @@ const NotificationMenu = ({
               justifyContent="center"
               alignItems="center"
               className={mStyles.overviewIcon}
-              marginRight={'p2'}
+              marginRight="p2"
             >
               <Icon
                 icon="notifications"
diff --git a/apps/portals/my-pages/src/components/Notifications/Notifications.css.ts b/apps/portals/my-pages/src/components/Notifications/Notifications.css.ts
index 38de426488c8..5cfc46825e02 100644
--- a/apps/portals/my-pages/src/components/Notifications/Notifications.css.ts
+++ b/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,

From 3fcf52592e082b20b75cedaa7ac44c82a50da809 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81sd=C3=ADs=20Erna=20Gu=C3=B0mundsd=C3=B3ttir?=
 <disa.erna@gmail.com>
Date: Mon, 11 Nov 2024 10:23:26 +0000
Subject: [PATCH 3/6] fix: spacing for link

---
 .../src/components/Notifications/NotificationMenu.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
index 7b987f4d745b..eb797c57b4f1 100644
--- a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
+++ b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
@@ -115,8 +115,8 @@ const NotificationMenu = ({
               />
             ))}
             <Box
-              paddingTop={2}
-              paddingBottom={1}
+              paddingTop={3}
+              paddingBottom={2}
               textAlign="center"
               width="full"
             >
@@ -127,7 +127,7 @@ const NotificationMenu = ({
                 <Button
                   icon="arrowForward"
                   iconType="filled"
-                  size="medium"
+                  size="small"
                   type="text"
                   variant="text"
                   unfocusable

From ae376b52bf7b96093514b0e8c6eacf4a926bfdaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81sd=C3=ADs=20Erna=20Gu=C3=B0mundsd=C3=B3ttir?=
 <disa.erna@gmail.com>
Date: Mon, 11 Nov 2024 15:09:42 +0000
Subject: [PATCH 4/6] fix: tablet?

---
 .../src/components/Notifications/NotificationButton.tsx         | 2 +-
 .../my-pages/src/components/Notifications/NotificationMenu.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/portals/my-pages/src/components/Notifications/NotificationButton.tsx b/apps/portals/my-pages/src/components/Notifications/NotificationButton.tsx
index 0657c6a1bb5b..8dc02de72d41 100644
--- a/apps/portals/my-pages/src/components/Notifications/NotificationButton.tsx
+++ b/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({
diff --git a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
index eb797c57b4f1..d81f1860b623 100644
--- a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
+++ b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
@@ -39,7 +39,7 @@ const NotificationMenu = ({
   const { formatMessage } = useLocale()
   const { width } = useWindowSize()
 
-  const isMobile = width < theme.breakpoints.md
+  const isMobile = width < theme.breakpoints.lg
 
   const onClose = () => {
     closeNotificationMenu()

From e3037c9a9bb2304e26065253f1ea0e1983f5b582 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81sd=C3=ADs=20Erna=20Gu=C3=B0mundsd=C3=B3ttir?=
 <disa.erna@gmail.com>
Date: Sun, 17 Nov 2024 21:45:14 +0000
Subject: [PATCH 5/6] fix: full height on tablet

---
 .../src/components/Notifications/NotificationMenu.tsx    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
index 5f65ac2de9fe..d023f0a9d2ad 100644
--- a/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
+++ b/apps/portals/my-pages/src/components/Notifications/NotificationMenu.tsx
@@ -39,7 +39,8 @@ const NotificationMenu = ({
   const { formatMessage } = useLocale()
   const { width } = useWindowSize()
 
-  const isMobile = width < theme.breakpoints.lg
+  const isMobile = width < theme.breakpoints.md
+  const isTablet = width < theme.breakpoints.lg && !isMobile
 
   const onClose = () => {
     closeNotificationMenu()
@@ -60,17 +61,17 @@ const NotificationMenu = ({
       <Box
         position="relative"
         background="white"
-        padding={isMobile ? 0 : 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%)',

From a0228f4adeae087c5ffe7975718bf925725f8567 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81sd=C3=ADs=20Erna=20Gu=C3=B0mundsd=C3=B3ttir?=
 <disa.erna@gmail.com>
Date: Wed, 8 Jan 2025 14:13:14 +0000
Subject: [PATCH 6/6] rename isMobile to isTablet

---
 .../src/components/Notifications/NotificationButton.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/portals/my-pages/src/components/Notifications/NotificationButton.tsx b/apps/portals/my-pages/src/components/Notifications/NotificationButton.tsx
index cce66c5d41cb..6578da5520c9 100644
--- a/apps/portals/my-pages/src/components/Notifications/NotificationButton.tsx
+++ b/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.lg
+  const isTablet = width < theme.breakpoints.lg
   const ref = useRef<HTMLButtonElement>(null)
 
   const { data, refetch } = useGetUserNotificationsOverviewQuery({
@@ -64,10 +64,10 @@ const NotificationButton = ({
         variant="utility"
         colorScheme="white"
         disabled={disabled}
-        icon={showMenu && isMobile ? 'close' : 'notifications'}
+        icon={showMenu && isTablet ? 'close' : 'notifications'}
         iconType="outline"
         onClick={() => {
-          showMenu && isMobile
+          showMenu && isTablet
             ? setMenuState(undefined)
             : setMenuState('notifications')
         }}