From db55e71e3970b092cf7f60a689e257661bfa759c Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Fri, 13 Oct 2023 22:23:31 -0400
Subject: [PATCH] feat(directory): updated info style

---
 directory/src/i18n.json                  |  2 +-
 directory/src/routes/path/Home.jsx       | 23 +++++++----
 directory/src/scss/_page_base.scss       | 52 ++++++++++++------------
 directory/src/scss/home/Home.module.scss | 10 +++--
 4 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/directory/src/i18n.json b/directory/src/i18n.json
index 759e463..90ff10f 100644
--- a/directory/src/i18n.json
+++ b/directory/src/i18n.json
@@ -157,7 +157,7 @@
       },
       "new_op_wait_to_update": {
         "zh-CN": "个新干员等待更新",
-        "en-US": "New Operator(s) Wait to Update"
+        "en-US": "New Operator(s) Waiting to Update"
       }
     }
 }
\ No newline at end of file
diff --git a/directory/src/routes/path/Home.jsx b/directory/src/routes/path/Home.jsx
index 062b1d0..4dbf042 100644
--- a/directory/src/routes/path/Home.jsx
+++ b/directory/src/routes/path/Home.jsx
@@ -166,21 +166,30 @@ export default function Home() {
   return (
     <section>
       {
-        officalUpdate.length > operators.length && (
+        officalUpdate.length === operators.length && (
           <section>
             <section className={classes['offical-update']}>
               <section className={classes.info}>
                 <section className={classes.content}>
                   <section className={classes.text}>{officalUpdate.length - operators.length} {i18n("new_op_wait_to_update")}</section>
                   {officalUpdate[officalUpdate.latest].map((entry, index) => {
-                      return (
-                        <section key={index} className={classes.list}>
-                          {`${i18n(entry.type)}: ${entry.codename[language]}`}
+                    return (
+                      <section className={classes.container} key={index}>
+                        <section className={classes.type}>
+                          <CharIcon
+                            type={entry.type}
+                            viewBox={
+                              entry.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
+                            } />
                         </section>
-                      )
-                    })}
+                        <section className={classes.title}>
+                          {entry.codename[language]}
+                        </section>
+                      </section>
+                    )
+                  })}
                 </section>
-                
+
               </section>
               <section className={classes.date}>{officalUpdate.latest}</section>
             </section>
diff --git a/directory/src/scss/_page_base.scss b/directory/src/scss/_page_base.scss
index 95f64db..942a879 100644
--- a/directory/src/scss/_page_base.scss
+++ b/directory/src/scss/_page_base.scss
@@ -11,6 +11,31 @@
   user-select: none;
 }
 
+.container {
+  color: var(--text-color-full);
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 1.25rem;
+  font-weight: bold;
+  .title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.3em;
+    height: auto;
+  }
+  .type {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    svg {
+      width: 1.5rem;
+      fill: var(--text-color);
+    }
+  }
+}
+
 .group {
   padding: 1rem;
   display: flex;
@@ -85,33 +110,6 @@
       line-height: 1.2em;
       height: 36px;
 
-      .container {
-        color: var(--text-color-full);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 1.25rem;
-        font-weight: bold;
-        .title {
-          flex: 1;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          line-height: 1.3em;
-          height: auto;
-        }
-        .type {
-          display: flex;
-          flex-direction: row;
-          align-items: baseline;
-          text-align: center;
-
-          svg {
-            width: 1.5rem;
-            fill: var(--text-color);
-          }
-        }
-      }
-
       .wrapper {
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/directory/src/scss/home/Home.module.scss b/directory/src/scss/home/Home.module.scss
index 5bafdc7..1c117b7 100644
--- a/directory/src/scss/home/Home.module.scss
+++ b/directory/src/scss/home/Home.module.scss
@@ -1,4 +1,4 @@
-@use '@/scss/_page_base.scss';
+@use "@/scss/_page_base.scss";
 
 .offical-update {
   flex-direction: column;
@@ -18,9 +18,11 @@
         padding-bottom: 1rem;
       }
     }
-    .list {
-      display: list-item;
+    .container {
       margin-left: 2.5rem;
+      .title {
+        margin-left: 0.5rem;
+      }
     }
   }
-}
\ No newline at end of file
+}