chore: some refactoring and added phosphor icons

src/styles/components.scss

@@ -8,6 +8,16 @@
     // Components - for complex parts of the UI like search bars or compound buttons
     //
 
+    .phosphor-icon {
+        box-sizing: content-box;
+
+        width: 22px;
+        height: 22px;
+
+        display: grid;
+        place-content: center;
+    }
+
     .material-symbols-outlined {
         font-family: 'Material Symbols Outlined Variable';
         font-weight: normal;
@@ -63,7 +73,8 @@
             padding-left: 0.35rem;
         }
 
-        .material-symbols-outlined {
+        .material-symbols-outlined,
+        .phosphor-icon {
             padding: 0 0.5rem;
         }
     }
@@ -699,7 +710,8 @@
 
         background: var(--filter-bg-color, #ddd);
 
-        .material-symbols-outlined {
+        .material-symbols-outlined,
+        .phosphor-icon {
             padding: 0 0.35rem;
         }
 
@@ -834,7 +846,7 @@
             text-align: center;
             justify-items: center;
             align-content: start;
-            width: 25ch;
+            width: 28ch;
 
             .date {
                 display: grid;
@@ -851,6 +863,11 @@
                 grid-auto-flow: column;
                 gap: 0.5rem;
                 justify-content: center;
+
+                .phosphor-icon {
+                    width: 28px;
+                    height: 28px;
+                }
             }
 
             > img {

src/styles/pages.scss

@@ -647,7 +647,7 @@
             align-items: center;
 
             padding: 6rem;
-            gap: 4rem;
+            gap: 6rem;
         }
     }