Gestita pagina notifiche

salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor.css

@@ -6,18 +6,27 @@
     width: 100%;
 }
 
-.behind {
+.behind-left, .behind-right {
     position: absolute;
     inset: 0;
     display: flex;
-    justify-content: flex-end;
     align-items: center;
-    padding-right: 14px;
-    background: var(--mud-palette-error);
     z-index: 0;
 }
 
-.trash-btn {
+.behind-right {
+    justify-content: flex-end;
+    padding-right: 14px;
+    background: var(--mud-palette-error);
+}
+
+.behind-left {
+    justify-content: flex-start;
+    padding-left: 14px;
+    background: var(--mud-palette-info);
+}
+
+.read-btn, .trash-btn {
     color: white;
     padding: 10px 15px;
     cursor: pointer;
@@ -29,6 +38,7 @@
     display: flex;
     align-items: center;
     padding: 12px;
+    gap: 12px;
     background: var(--mud-palette-background);
     transition: transform .2s ease;
     touch-action: pan-y;
@@ -37,15 +47,34 @@
 }
 
 .avatar {
-    width: 42px;
+    min-width: 42px;
     height: 42px;
     border-radius: 12px;
     display: grid;
     place-items: center;
-    background: #0b1220;
-    border: 1px solid #1f2937;
+    background: var(--mud-palette-background);
+    border: 1px solid var(--mud-palette-divider);
     font-weight: bold;
-    color: #22d3ee;
+    color: var(--mud-palette-primary);
+}
+
+.notification-body {
+    width: 100%
+}
+
+.title-row {
+    display: flex;
+    gap: 8px;
+    justify-items: center;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.unread-dot {
+    width: 10px;
+    height: 10px;
+    background-color: var(--mud-palette-error);
+    border-radius: 50%;
 }
 
 .title {
@@ -53,12 +82,24 @@
     margin-bottom: unset !important;
 }
 
-.subtitle {
+.section-time {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+.notification-time {
     font-size: 13px;
     color: #94a3b8;
+    line-height: normal;
 }
 
 .collapsing {
     transition: height .22s ease, margin .22s ease, opacity .22s ease;
     overflow: hidden;
+}
+
+.subtitle {
+    font-size: 12px;
+    color: var(--mud-palette-drawer-text);
 }