refactor(NotificationsOverview): convert to rem for a11y

gobitfly · Oct 24, 2024 · 5af248b · 5af248b
1 parent 21d9cde
commit 5af248b
Showing 1 changed file with 13 additions and 14 deletions.
diff --git 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>