style: improve banners

monkeytypegame · May 4, 2024 · a6a4e09 · a6a4e09
1 parent d06203c
commit a6a4e09
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 20 deletions.
diff --git a/frontend/src/styles/banners.scss b/frontend/src/styles/banners.scss
@@ -6,47 +6,46 @@
   .banner {
     background: var(--sub-color);
     color: var(--bg-color);
-    display: flex;
     justify-content: center;
+
+    &.withImage {
+      .lefticon {
+        display: none;
+      }
+    }
+
     .container {
-      max-width: 1000px;
+      padding-right: 0.25em;
       display: grid;
       grid-template-columns: auto 1fr auto;
-      gap: 1rem;
+      gap: 1em;
       align-items: center;
       width: 100%;
       justify-items: center;
       .image {
-        height: 2.35rem;
+        height: 2.25em;
         background-size: cover;
         aspect-ratio: 6/1;
         background-position: center;
         background-repeat: no-repeat;
-        margin-left: 2rem;
       }
-      .icon {
-        margin-left: 1rem;
-        margin-top: 0.5rem;
-        margin-bottom: 0.5rem;
+      .lefticon,
+      .image {
+        grid-column: 1;
+        grid-row: 1;
       }
       .text {
-        margin-top: 0.5rem;
-        margin-bottom: 0.5rem;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
       }
       .closeButton {
-        margin-right: 1rem;
-        /* margin-top: 0.5rem; */
-        /* margin-bottom: 0.5rem; */
+        padding: 0.25em;
         transition: 0.125s;
-        font-size: 1.4rem;
         &:hover {
           cursor: pointer;
           color: var(--text-color);
         }
       }
-      .righticon {
-        margin-right: 1rem;
-      }
     }
     &.good {
       background: var(--main-color);

diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
@@ -15,6 +15,17 @@
   #testModesNotice {
     font-size: 0.8rem;
   }
+  #bannerCenter {
+    font-size: 0.85rem;
+    .banner.withImage {
+      .image {
+        display: none;
+      }
+      .lefticon {
+        display: block;
+      }
+    }
+  }
   .page404 {
     .content {
       grid-template-columns: 300px;

diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
@@ -12,6 +12,14 @@
     font-size: 0.7rem;
     --horizontalPadding: 0.6em;
   }
+  #bannerCenter {
+    font-size: 0.85rem;
+    .banner .container {
+      .closeButton {
+        padding: 0.4em;
+      }
+    }
+  }
   header {
     #logo {
       .text {

diff --git a/frontend/src/ts/elements/notifications.ts b/frontend/src/ts/elements/notifications.ts
@@ -155,12 +155,16 @@ class Notification {
     } else if (this.type === "banner") {
       let leftside = `<div class="icon lefticon">${icon}</div>`;
 
+      let withImage = false;
       if (/images\/.*/.test(this.customIcon as string)) {
-        leftside = `<div class="image" style="background-image: url(${this.customIcon})"></div>`;
+        withImage = true;
+        leftside = `<div class="icon lefticon"><i class="fas fa-fw fa-bullhorn"></i></div><div class="image" style="background-image: url(${this.customIcon})"></div>`;
       }
 
       $("#bannerCenter").prepend(`
-        <div class="banner ${cls}" id="${this.id}">
+        <div class="banner ${cls} content-grid ${
+        withImage ? "withImage" : ""
+      }" id="${this.id}">
         <div class="container">
           ${leftside}
           <div class="text">