From 57ef586561d178b3582490a002362683f32e71f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sun, 19 Oct 2025 23:29:32 +0200
Subject: [PATCH] pl-fe: styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../notifications/components/notification.tsx |  4 +--
 .../pl-fe/src/styles/new/notifications.scss   | 27 +++++++++++++++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index 4bf8b6a61..1ab9c5290 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -333,14 +333,14 @@ const Notification: React.FC<INotification> = (props) => {
         <Emoji
           emoji={notification.emoji}
           src={notification.emoji_url || undefined}
-          className='size-4 flex-none'
+          className='⁂-notification__icon ⁂-notification__icon--emoji'
         />
       );
     } else if (icons[displayedType]) {
       return (
         <Icon
           src={icons[displayedType]!}
-          className='flex-none text-primary-600 dark:text-primary-400'
+          className='⁂-notification__icon'
         />
       );
     } else {
diff --git a/packages/pl-fe/src/styles/new/notifications.scss b/packages/pl-fe/src/styles/new/notifications.scss
index 18bc9ca1d..1be55ca7d 100644
--- a/packages/pl-fe/src/styles/new/notifications.scss
+++ b/packages/pl-fe/src/styles/new/notifications.scss
@@ -1,22 +1,39 @@
 @use 'mixins'; 
 
 .⁂-notification {
-  @apply flex flex-col gap-2 p-4;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;;
 
   &__header {
-    @apply flex items-center gap-3;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
   }
 
   &__info {
-    @apply min-w-0 flex-1;
+    min-width: 0;
+    flex: 1 1 0%
+  }
+
+  &__icon {
+    flex: none;
+    @apply text-primary-600 dark:text-primary-400;
+
+    &--emoji {
+      height: 1rem;
+      width: 1rem;
+    }
   }
 
   &__timestamp {
-    @apply ml-auto flex-none;
+    flex: none;
+    margin-left: auto;
     @include mixins.text($size: xs, $theme: muted, $truncate: true);
   }
 
   .status__wrapper {
-    @apply p-0;
+    padding: 0;
   }
 }
\ No newline at end of file