impr: notifications redesign (evvvrado, Miodec) (#4700)

* impr: notification cards redesign * fix: formatting notifications.scss using prettier * fix: notifications background opacity * fix: new design and colors for notifications.scss * fix: removing useless notifications commands at about.ts * feat(language): add japanese romaji * styling update * remove test notifications * removed opacity transition --------- Co-authored-by: Miodec <jack@monkeytype.com>
monkeytypegame · Oct 24, 2023 · a2ad6ed · a2ad6ed
1 parent fb5c8fd
commit a2ad6ed
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 62 deletions.
diff --git a/frontend/src/styles/notifications.scss b/frontend/src/styles/notifications.scss
@@ -7,6 +7,7 @@
   right: 1rem;
   top: 1rem;
   transition: 0.125s opacity;
+
   .clearAll.button {
     font-size: 0.75em;
   }
@@ -23,78 +24,58 @@
     display: grid;
     gap: 1rem;
   }
+
   .notif {
+    --notif-border-color: rgba(0, 130, 251, 0.985);
+    --notif-background-color: rgba(0, 77, 148, 0.9);
+
     -webkit-user-select: none;
     user-select: none;
+    backdrop-filter: blur(15px);
+
     .icon {
-      color: var(--sub-color);
-      padding: 1rem 1rem;
-      align-items: center;
-      display: grid;
-      font-size: 1.25em;
+      color: #ffffff92;
+      font-size: 1em;
+      margin-right: 0.5em;
+      display: inline;
     }
+
     .message {
-      padding: 1rem 1rem 1rem 0;
-      color: var(--text-color);
+      padding: 1em;
+      color: #fff;
+      font-size: 14px;
+
       .title {
-        color: var(--sub-color);
-        font-size: 0.75em;
+        color: #ffffff92;
+        font-weight: 500;
+        padding-bottom: 0.5em;
       }
     }
 
+    border-radius: 12px;
+    border: 2px solid var(--notif-border-color);
+    background: var(--notif-background-color);
+    color: #fff;
+
+    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
+
     position: relative;
-    background: var(--sub-alt-color);
-    color: var(--sub-color);
     display: grid;
-    grid-template-columns: min-content auto min-content;
-    border-radius: var(--roundness);
-    // outline-width: 0.25em;
-    // outline-style: solid;
-    // outline-color: var(--sub-color);
-    box-shadow: 0 0 0 0.2em var(--sub-color);
+    grid-template-columns: auto;
 
     &.bad {
-      // background-color: var(--error-color);
-      box-shadow: 0 0 0 0.2em var(--error-color);
-      color: var(--error-color);
-      .icon {
-        color: var(--error-color);
-      }
+      --notif-border-color: rgba(241, 51, 34, 0.71);
+      --notif-background-color: rgba(138, 18, 12, 0.9);
     }
 
     &.good {
-      box-shadow: 0 0 0 0.2em var(--main-color);
-      color: var(--main-color);
-      .icon {
-        color: var(--main-color);
-      }
+      --notif-border-color: rgba(100, 206, 100, 0.71);
+      --notif-background-color: rgba(0, 148, 0, 0.9);
     }
 
     &:hover {
-      // opacity: .5;
-      // box-shadow: 0 0 20px rgba(0,0,0,.25);
+      opacity: 0.5;
       cursor: pointer;
-      &::after {
-        opacity: 1;
-      }
-    }
-    &::after {
-      transition: 0.125s;
-      font-family: "Font Awesome 5 Free";
-      background: rgba(0, 0, 0, 0.5);
-      opacity: 0;
-      font-weight: 900;
-      content: "\f00d";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      // color: inherit;
-      font-size: 2.5rem;
-      display: grid;
-      /* align-self: center; */
-      align-items: center;
-      text-align: center;
-      border-radius: var(--roundness);
     }
   }
 }
diff --git a/frontend/src/ts/elements/notifications.ts b/frontend/src/ts/elements/notifications.ts
@@ -66,15 +66,15 @@ class Notification {
   //-1 - bad
   show(): void {
     let cls = "notice";
-    let icon = `<i class="fas fa-fw fa-exclamation"></i>`;
+    let icon = `<i class="fas fa-info-circle"></i>`;
     let title = "Notice";
     if (this.level === 1) {
       cls = "good";
-      icon = `<i class="fas fa-fw fa-check"></i>`;
+      icon = `<i class="fas fa-check-circle"></i>`;
       title = "Success";
     } else if (this.level === -1) {
       cls = "bad";
-      icon = `<i class="fas fa-fw fa-times"></i>`;
+      icon = `<i class="fas fa-times-circle"></i>`;
       title = "Error";
       console.error(this.message);
     }
@@ -103,11 +103,10 @@ class Notification {
       }
       const oldHeight = $("#notificationCenter .history").height() as number;
       $("#notificationCenter .history").prepend(`
-          
+
           <div class="notif ${cls}" id=${this.id}>
-              <div class="icon">${icon}</div>
-              <div class="message"><div class="title">${title}</div>${this.message}</div>
-          </div>     
+              <div class="message"><div class="title"><div class="icon">${icon}</div>${title}</div>${this.message}</div>
+          </div>
 
           `);
       const newHeight = $("#notificationCenter .history").height() as number;
@@ -122,11 +121,10 @@ class Notification {
           () => {
             $("#notificationCenter .history").css("margin-top", 0);
             $("#notificationCenter .history").prepend(`
-          
+
                   <div class="notif ${cls}" id=${this.id}>
-                      <div class="icon">${icon}</div>
-                      <div class="message"><div class="title">${title}</div>${this.message}</div>
-                  </div>     
+                      <div class="message"><div class="title"><div class="icon">${icon}</div>${title}</div>${this.message}</div>
+                  </div>
 
               `);
             $(`#notificationCenter .notif[id='${this.id}']`)

diff --git a/frontend/static/languages/japanese_romaji.json b/frontend/static/languages/japanese_romaji.json
@@ -0,0 +1,162 @@
+{
+  "name": "japanese_romaji",
+  "noLazyMode": true,
+  "bcp47": "jp-JP",
+  "words": [
+    "sumu",
+    "hataraku",
+    "sensei",
+    "daigaku",
+    "yasui",
+    "takai",
+    "motto",
+    "doko",
+    "ie",
+    "iie",
+    "hai",
+    "watashi",
+    "desu",
+    "hiroi",
+    "chiisai",
+    "ookii",
+    "suga",
+    "tsugi",
+    "suki",
+    "furui",
+    "atarashii",
+    "hayai",
+    "iro",
+    "benkyou",
+    "iku",
+    "ooi",
+    "itsu",
+    "ima",
+    "mada",
+    "ato",
+    "dou",
+    "omoi",
+    "densha",
+    "kami",
+    "osoi",
+    "hayai",
+    "shinu",
+    "iru",
+    "en",
+    "koko",
+    "taberu",
+    "namae",
+    "ichi",
+    "oya",
+    "sukoshi",
+    "fuku",
+    "se",
+    "kanashii",
+    "shaberu",
+    "gemu",
+    "tenki",
+    "atsui",
+    "nai",
+    "kitanai",
+    "suku",
+    "nichi",
+    "hairu",
+    "hiraku",
+    "mizu",
+    "ni",
+    "kumori",
+    "dame",
+    "san",
+    "asa",
+    "ame",
+    "yasashii",
+    "ippa",
+    "hidarai",
+    "ii",
+    "ue",
+    "eki",
+    "oishii",
+    "kirei",
+    "shita",
+    "chichi",
+    "haha",
+    "nani",
+    "hito",
+    "boku",
+    "hoshii",
+    "warui",
+    "otearai",
+    "hontouni",
+    "samui",
+    "atatakai",
+    "otoko",
+    "onna",
+    "hyaku",
+    "sekai",
+    "yaru",
+    "imu",
+    "erabu",
+    "kaji",
+    "ji",
+    "wa",
+    "tada",
+    "denwa",
+    "amari",
+    "isogashii",
+    "aoi",
+    "akai",
+    "isu",
+    "katsu",
+    "makeru",
+    "niku",
+    "sakana",
+    "neko",
+    "inu",
+    "tori",
+    "raishuu",
+    "maishuu",
+    "dakera",
+    "nan",
+    "shiro",
+    "ashita",
+    "hitoride",
+    "kibishii",
+    "shinpai",
+    "toshi",
+    "youkoso",
+    "tsukue",
+    "eigo",
+    "nihongo",
+    "oto",
+    "seiko",
+    "naka",
+    "sakana",
+    "ringo",
+    "umai",
+    "sumaho",
+    "shiken",
+    "ongaku",
+    "ana",
+    "uma",
+    "taiyou",
+    "hon",
+    "yoku",
+    "juu",
+    "yuumei",
+    "ryouri",
+    "hi",
+    "sugoi",
+    "kutsu",
+    "no",
+    "are",
+    "kuruma",
+    "mise",
+    "tooi",
+    "suru",
+    "yoru",
+    "made",
+    "ka",
+    "hoka",
+    "kyou",
+    "kazoku"
+  ]
+}