[Glitch] Add notifications for new reports

Port 2936f42a14cfdca70d4a9653dab29382315945e7 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

2 files changed, 39 insertions, 0 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 377cdd91f..4e912b18b 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -105,6 +105,8 @@
   position: relative;
   @include avatar-size(48px);
 
+  position: relative;
+
   &-base {
     @include avatar-radius();
     @include avatar-size(36px);
@@ -243,6 +245,33 @@
   margin-right: 10px;
 }
 
+.notification__report {
+  padding: 8px 10px;
+  padding-left: 68px;
+  position: relative;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  min-height: 54px;
+
+  &__details {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: $darker-text-color;
+    font-size: 15px;
+    line-height: 22px;
+
+    strong {
+      font-weight: 500;
+    }
+  }
+
+  &__avatar {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+  }
+}
+
 .notification__message {
   margin-left: 42px;
   padding: 8px 0 0 26px;
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index d10fc1d3e..3843bcd68 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -154,6 +154,16 @@
       padding-top: 15px;
     }
 
+    .notification__report {
+      padding: 15px 15px 15px (48px + 15px * 2);
+      min-height: 48px + 2px;
+
+      &__avatar {
+        left: 15px;
+        top: 17px;
+      }
+    }
+
     .status {
       padding: 15px;
       min-height: 48px + 2px;