From 5af248b504536e123ed38c864ece62260136ec2c Mon Sep 17 00:00:00 2001
From: benji-bitfly <beniamin.hutyra@bitfly.at>
Date: Thu, 24 Oct 2024 14:57:30 +0200
Subject: [PATCH] refactor(NotificationsOverview): convert to `rem` for `a11y`

---
 .../notifications/NotificationsOverview.vue   | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/frontend/components/notifications/NotificationsOverview.vue b/frontend/components/notifications/NotificationsOverview.vue
index f6a261cea..6de7c17b7 100644
--- a/frontend/components/notifications/NotificationsOverview.vue
+++ b/frontend/components/notifications/NotificationsOverview.vue
@@ -159,25 +159,25 @@ const emit = defineEmits<{
 
 .container {
   @include main.container;
-  padding: 17px 20px;
+  padding: 1.0625rem 1.25rem;
   position: relative;
 }
 .info-section, .action-section {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: .625rem;
 }
 .icon {
-  font-size: 24px;
+  font-size: 1.5rem;
 }
 .text {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 500;
 }
 .list-item {
   display: flex;
-  gap: 10px;
+  gap: .625rem;
   .list-text {
     @include utils.truncate-text;
   }
@@ -201,12 +201,12 @@ const emit = defineEmits<{
 .box-item {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: .625rem;
 }
 .inline-items {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: .625rem;
 }
 a:hover {
   color: var(--light-blue);
@@ -221,15 +221,14 @@ a:hover {
 }
 .icon-list {
   min-width: 0;
-  list-style-type: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: .625rem;
 }
 .icon {
-  font-size: 16px;
+  font-size: 1rem;
 }
 .inline-link,
 .gem {
@@ -238,21 +237,21 @@ a:hover {
 .premium-invitation {
   display: flex;
   align-items: center;
-  gap: 5px; /* Adjust the gap as needed */
+  gap: .3125rem;
 }
 .push-invitation {
   display: flex;
   align-items: center;
-  gap: 5px; /* Adjust the gap as needed */
+  gap: .3125rem;
   flex-wrap: wrap;
 }
 @media (max-width: 600px) {
   .box {
     flex-direction: row;
-    gap: 20px;
+    gap: 1.25rem;
   }
   .box-item {
-    min-width: 250px; /* Adjust based on content width */
+    min-width: 15.625rem;
   }
 }
 </style>