From a2e83e8e2fa1471e66d31430b75c5cdf7423fe6c Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 27 Oct 2021 23:15:10 +0800
Subject: [PATCH] refactor: update logo (#366)

---
 public/images/logo.svg        |  1 +
 src/components/Tools/Logo.vue |  3 +-
 src/styles/global.less        | 63 ++++++-----------------------------
 3 files changed, 12 insertions(+), 55 deletions(-)
 create mode 100644 public/images/logo.svg

diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 00000000..86fbed95
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2144 877" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M1028.16,339.331c148.249,0 268.609,120.36 268.609,268.609c-0,148.249 -120.36,268.608 -268.609,268.608c-148.249,0 -268.608,-120.359 -268.608,-268.608c-0,-148.249 120.359,-268.609 268.608,-268.609Zm0,119.152c82.488,0 149.457,66.969 149.457,149.457c-0,82.487 -66.969,149.456 -149.457,149.456c-82.487,0 -149.456,-66.969 -149.456,-149.456c-0,-82.488 66.969,-149.457 149.456,-149.457Z" style="fill:url(#_Linear1);"/><path d="M1874.58,339.331c148.249,0 268.608,120.36 268.608,268.609c0,148.249 -120.359,268.608 -268.608,268.608c-148.249,0 -268.609,-120.359 -268.609,-268.608c0,-148.249 120.36,-268.609 268.609,-268.609Zm-0,119.152c82.487,0 149.456,66.969 149.456,149.457c0,82.487 -66.969,149.456 -149.456,149.456c-82.488,0 -149.457,-66.969 -149.457,-149.456c0,-82.488 66.969,-149.457 149.457,-149.457Z" style="fill:url(#_Linear2);"/><path d="M1309.27,377.585c-0,-10.083 -7.222,-18.719 -17.146,-20.504c-19.618,-3.528 -51.9,-9.334 -74.172,-13.34c-6.073,-1.092 -12.318,0.564 -17.052,4.522c-4.734,3.959 -7.469,9.812 -7.469,15.983c-0,91.374 -0,407.153 -0,491.469c-0,5.525 2.195,10.824 6.102,14.731c3.907,3.907 9.206,6.102 14.731,6.102c20.987,0 53.186,0 74.173,0c5.525,0 10.824,-2.195 14.731,-6.102c3.907,-3.907 6.102,-9.206 6.102,-14.731c-0,-84.425 -0,-400.286 -0,-478.13Z" style="fill:url(#_Linear3);"/><path d="M1542.59,72.033c0,-8.288 -3.292,-16.237 -9.153,-22.097c-5.86,-5.861 -13.809,-9.153 -22.097,-9.153c-23.867,-0 -56.609,-0 -80.477,-0c-8.288,-0 -16.236,3.292 -22.097,9.153c-5.86,5.86 -9.153,13.809 -9.153,22.097c0,131.79 0,641.475 0,773.265c0,8.288 3.293,16.237 9.153,22.097c5.861,5.861 13.809,9.153 22.097,9.153c23.868,0 56.61,0 80.477,0c8.288,0 16.237,-3.292 22.097,-9.153c5.861,-5.86 9.153,-13.809 9.153,-22.097c0,-131.79 0,-641.475 0,-773.265Z" style="fill:url(#_Linear4);fill-rule:nonzero;"/><g><path d="M506.409,822.063c-0,13.815 5.494,27.062 15.271,36.821c9.777,9.76 23.034,15.23 36.848,15.206c18.674,-0.034 39.711,-0.072 58.369,-0.105c28.696,-0.052 51.932,-23.329 51.932,-52.026l0,-769.586c0,-13.798 -5.481,-27.031 -15.238,-36.788c-9.756,-9.757 -22.99,-15.238 -36.788,-15.238l-58.368,-0c-13.798,-0 -27.031,5.481 -36.788,15.238c-9.757,9.757 -15.238,22.99 -15.238,36.788c-0,155.286 -0,614.283 -0,769.69Z" style="fill:url(#_Linear5);fill-rule:nonzero;"/><path d="M616.746,322.662c13.813,0 27.061,5.487 36.829,15.255c9.767,9.768 15.254,23.015 15.254,36.829c0,105.185 0,341.877 0,447.062c0,13.814 -5.487,27.061 -15.254,36.829c-9.768,9.767 -23.016,15.255 -36.829,15.255c-18.632,-0 -39.622,-0 -58.254,-0c-13.813,-0 -27.061,-5.488 -36.828,-15.255c-9.768,-9.768 -15.255,-23.015 -15.255,-36.829c-0,-68.223 -0,-187.159 -0,-255.383c-0,-13.813 -5.487,-27.061 -15.255,-36.828c-9.767,-9.768 -23.015,-15.255 -36.828,-15.255c-129.249,-0 -454.326,-0 -454.326,-0l0,-191.68l616.746,0Z" style="fill:#0051b0;fill-rule:nonzero;"/><path d="M-0,822.101c0,13.817 5.497,27.067 15.277,36.827c9.781,9.76 23.043,15.229 36.86,15.199c18.675,-0.04 39.713,-0.085 58.368,-0.124c28.69,-0.062 51.916,-23.337 51.916,-52.027c-0,-155.205 -0,-614.509 -0,-769.714c-0,-28.69 -23.226,-51.965 -51.916,-52.026c-18.655,-0.04 -39.693,-0.085 -58.368,-0.125c-13.817,-0.029 -27.079,5.439 -36.86,15.199c-9.78,9.76 -15.277,23.01 -15.277,36.827l-0,769.964Z" style="fill:url(#_Linear6);fill-rule:nonzero;"/></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.19814e-14,-848.921,848.921,5.19814e-14,1308.8,875.397)"><stop offset="0" style="stop-color:#0050b5;stop-opacity:1"/><stop offset="1" style="stop-color:#0b87fd;stop-opacity:1"/></linearGradient><linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.19814e-14,-848.921,848.921,5.19814e-14,1308.8,875.397)"><stop offset="0" style="stop-color:#0050b5;stop-opacity:1"/><stop offset="1" style="stop-color:#0b87fd;stop-opacity:1"/></linearGradient><linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.19814e-14,-848.921,848.921,5.19814e-14,1308.8,875.397)"><stop offset="0" style="stop-color:#0050b5;stop-opacity:1"/><stop offset="1" style="stop-color:#0b87fd;stop-opacity:1"/></linearGradient><linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.19814e-14,-848.921,848.921,5.19814e-14,1308.8,875.397)"><stop offset="0" style="stop-color:#0050b5;stop-opacity:1"/><stop offset="1" style="stop-color:#0b87fd;stop-opacity:1"/></linearGradient><linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.91885e-13,472.459,-473.895,-3.90698e-13,587.619,-0.861651)"><stop offset="0" style="stop-color:#0048af;stop-opacity:1"/><stop offset="1" style="stop-color:#003580;stop-opacity:1"/></linearGradient><linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(5.51848e-14,898.506,-901.236,5.50176e-14,162.421,-12.1337)"><stop offset="0" style="stop-color:#0b89ff;stop-opacity:1"/><stop offset="1" style="stop-color:#004eb2;stop-opacity:1"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/src/components/Tools/Logo.vue b/src/components/Tools/Logo.vue
index 54f13a88..7656337b 100644
--- a/src/components/Tools/Logo.vue
+++ b/src/components/Tools/Logo.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="logo">
     <a href="javascript:void(0);" @click="onLogoClick()">
-      <h1 class="logo-title">Halo</h1>
-      <h1 class="logo-sub-title" style="padding-left: 10px;">Dashboard</h1>
+      <img src="/images/logo.svg" alt="Halo Logo" />
     </a>
   </div>
 </template>
diff --git a/src/styles/global.less b/src/styles/global.less
index 4508294f..d888eae4 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -209,10 +209,6 @@ body {
             flex: 0;
             text-align: center;
             line-height: 58px;
-
-            h1 {
-              display: none;
-            }
           }
         }
       }
@@ -274,8 +270,8 @@ body {
         display: flex;
 
         .logo.top-nav-header {
-          flex: 0 0 165px;
-          width: 165px;
+          flex: 0 0 115px;
+          width: 115px;
           height: 64px;
           position: relative;
           line-height: 64px;
@@ -286,17 +282,7 @@ body {
           svg {
             display: inline-block;
             vertical-align: middle;
-            height: 32px;
-            width: 32px;
-          }
-
-          h1 {
-            color: #fff;
-            display: inline-block;
-            vertical-align: top;
-            font-size: 16px;
-            margin: 0;
-            font-weight: 600;
+            width: 56px;
           }
         }
       }
@@ -322,16 +308,6 @@ body {
 
     &.light {
       background-color: #fff;
-
-      .header-index-wide {
-        .header-index-left {
-          .logo {
-            h1 {
-              color: #002140;
-            }
-          }
-        }
-      }
     }
   }
 
@@ -405,26 +381,11 @@ body {
     background: #002140;
     transition: all 0.3s;
 
-    img,
-    svg,
-    h1 {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
     img,
     svg {
-      height: 32px;
-      width: 32px;
-    }
-
-    h1 {
-      color: #fff;
-      font-size: 20px;
-      margin: 0;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      font-weight: 600;
+      display: inline-block;
       vertical-align: middle;
+      width: 64px;
     }
   }
 
@@ -435,10 +396,6 @@ body {
     .logo {
       background: #fff;
       box-shadow: 1px 1px 0px 0px #e8e8e8;
-
-      h1 {
-        color: unset;
-      }
     }
 
     .ant-menu-light {
@@ -894,7 +851,7 @@ body {
   width: 100px;
   height: 100%;
   box-shadow: 0 0 10px #29d, 0 0 5px #29d;
-  opacity: 1.0;
+  opacity: 1;
 
   -webkit-transform: rotate(3deg) translate(0px, -4px);
   -ms-transform: rotate(3deg) translate(0px, -4px);
@@ -953,19 +910,19 @@ body {
 }
 
 /* scroll bar style */
-*::-webkit-scrollbar-track-piece{
+*::-webkit-scrollbar-track-piece {
   background-color: #f8f8f8;
   -webkit-border-radius: 2em;
   -moz-border-radius: 2em;
   border-radius: 2em;
 }
 
-*::-webkit-scrollbar{
+*::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
-*::-webkit-scrollbar-thumb{
+*::-webkit-scrollbar-thumb {
   background-color: #ddd;
   background-clip: padding-box;
   -webkit-border-radius: 2em;
@@ -973,6 +930,6 @@ body {
   border-radius: 2em;
 }
 
-*::-webkit-scrollbar-thumb:hover{
+*::-webkit-scrollbar-thumb:hover {
   background-color: #bbb;
 }