refactor: Upgrade to the new UI (#521)

Co-authored-by: MystiPanda <mystipanda@proton.me>

src/assets/styles/index.scss

@@ -13,10 +13,10 @@ body {
 
 :root {
   --primary-main: #5b5c9d;
-  --text-primary: #637381;
+  --text-primary: #1f1f1f;
   --selection-color: #f5f5f5;
-  --scroller-color: #90939980;
-  --background-color: #ffffff;
+  --scroller-color: #8c8c8c;
+  --background-color: #f5f5f5;
   --background-color-alpha: rgba(24, 103, 192, 0.1);
   --border-radius: 8px;
 }

src/assets/styles/layout.scss

@@ -5,33 +5,44 @@
   overflow: hidden;
 
   &__left {
-    flex: 1 0 15%;
+    flex: 1 0 228px;
     display: flex;
     height: 100%;
-    max-width: 225px;
-    min-width: 125px;
+    width: 100%;
+    // max-width: 225px;
+    // min-width: 225px;
     padding: 16px 0 8px;
-    position: relative;
+    // position: relative;
     flex-direction: column;
+    align-self: stretch;
     box-sizing: border-box;
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     overflow: hidden;
-    background-color: var(--background-color-alpha);
+    border-right: 1px solid var(--divider-color);
+    // background-color: var(--background-color-alpha);
 
-    $maxLogo: 100px;
+    // $maxLogo: 100px;
 
     .the-logo {
-      position: relative;
-      flex: 0 1 $maxLogo;
-      width: 100%;
-      max-width: $maxLogo + 32px;
-      max-height: $maxLogo;
-      margin: 0 auto;
-      padding: 0 16px;
-      text-align: center;
+      // position: relative;
+      flex: 1 0 58px;
+      // width: 100%;
+      display: flex;
+      height: 100%;
+      padding: 0px 20px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      align-self: stretch;
+      border-bottom: 1px solid var(--divider-color);
+      // max-width: $maxLogo + 32px;
+      // max-height: $maxLogo;
+      // margin: 0 auto;
+      // padding: 0 auto;
+      // text-align: center;
       box-sizing: border-box;
 
       img,
@@ -39,11 +50,11 @@
         width: 100%;
         height: 100%;
         pointer-events: none;
-        fill: var(--primary-main);
+        // fill: var(--primary-main);
 
-        #bg {
-          fill: var(--background-color);
-        }
+        // #bg {
+        //   fill: var(--background-color);
+        // }
       }
 
       .the-newbtn {
@@ -65,21 +76,22 @@
 
       > div {
         margin: 0 auto;
+        // padding: 0 20px;
       }
     }
   }
 
   &__right {
     position: relative;
-    flex: 1 1 75%;
+    flex: 1 1 100%;
     height: 100%;
-    background-color: var(--background-color-alpha);
+    // background-color: var(--background-color-alpha);
 
     .the-bar {
       position: absolute;
       top: 0px;
       right: 0px;
-      height: 36px;
+      height: 24px;
       display: flex;
       align-items: center;
       box-sizing: border-box;
@@ -100,15 +112,16 @@
 .windows,
 .unknown {
   &.layout {
-    $maxLogo: 115px;
+    .layout__left {
+      padding-top: 24px;
+    }
+
     .layout__left .the-logo {
-      flex: 0 1 $maxLogo;
-      max-width: $maxLogo + 32px;
-      max-height: $maxLogo;
+      flex: 1 0 58px;
     }
 
     .layout__right .the-content {
-      top: 30px;
+      top: 24px;
     }
   }
 }
@@ -119,7 +132,7 @@
       padding-top: 24px;
     }
     .layout__right .the-content {
-      top: 20px;
+      top: 24px;
     }
   }
 }

src/assets/styles/page.scss

@@ -3,23 +3,23 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-
   > header {
     flex: 0 0 58px;
     width: 100%;
     // max-width: 850px;
     margin: 0 auto;
-    padding-right: 8px;
+    padding: 0 20px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    border-bottom: 1px solid var(--divider-color);
   }
 
   .base-container {
     height: 100%;
     overflow: hidden;
-    border-top-left-radius: var(--border-radius);
+    // border-top-left-radius: var(--border-radius);
 
     > section {
       position: relative;
@@ -27,12 +27,11 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      padding: 10px 0;
+      padding: 16px 0;
       box-sizing: border-box;
       scrollbar-gutter: stable;
-
       .base-content {
-        width: calc(100% - 10px * 2);
+        width: calc(100% - 16px * 2);
         margin: 0 auto;
       }
     }
@@ -41,7 +40,6 @@
       > section {
         padding: 0;
         overflow: visible;
-
         .base-content {
           width: 100%;
         }