From 14d6c9e18a2c1c54e0f39e7af8eb1aef0dfac8cf Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Thu, 3 Mar 2022 15:00:20 +0800
Subject: [PATCH] feat(console): topbar (#310)

* feat(console): topbar

* refactor(console): move logo to assets folder
---
 packages/console/src/App.module.scss          |  1 +
 packages/console/src/assets/images/logo.svg   | 58 +++++++++++++++++++
 .../Sidebar/components/Item/index.module.scss |  2 +-
 .../src/components/Topbar/index.module.scss   | 17 ++++++
 .../console/src/components/Topbar/index.tsx   | 10 +++-
 packages/console/src/scss/_underscore.scss    |  3 +-
 6 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 packages/console/src/assets/images/logo.svg

diff --git a/packages/console/src/App.module.scss b/packages/console/src/App.module.scss
index e5904ea78..7460084c1 100644
--- a/packages/console/src/App.module.scss
+++ b/packages/console/src/App.module.scss
@@ -4,6 +4,7 @@
   --color-on-surface-variant: #47464e;
   --color-primary: #4f37f9;
   --color-primary-90: #e5dfff;
+  --color-component-text: #191c1d;
   position: absolute;
   left: 0;
   top: 0;
diff --git a/packages/console/src/assets/images/logo.svg b/packages/console/src/assets/images/logo.svg
new file mode 100644
index 000000000..5adb0240b
--- /dev/null
+++ b/packages/console/src/assets/images/logo.svg
@@ -0,0 +1,58 @@
+<svg width="891" height="274" viewBox="0 0 891 274" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M375.888 195.694C378.108 195.694 379.218 194.584 379.218 192.363V181.26C379.218 179.039 378.108 177.929 375.888 177.929H312.616V65.786C312.616 63.5654 311.506 62.455 309.285 62.455H291.525C289.305 62.455 288.195 63.5654 288.195 65.786V192.363C288.195 194.584 289.305 195.694 291.525 195.694H375.888Z" fill="#111111"/>
+<path d="M468.052 60.2344H439.191C413.29 60.2344 400.339 73.1882 400.339 99.0959V159.054C400.339 184.961 413.29 197.915 439.191 197.915H468.052C493.953 197.915 506.903 184.961 506.903 159.054V99.0959C506.903 73.1882 493.953 60.2344 468.052 60.2344ZM482.482 159.054C482.482 173.118 475.452 180.15 461.392 180.15H445.851C431.79 180.15 424.76 173.118 424.76 159.054V99.0959C424.76 85.0317 431.79 77.9996 445.851 77.9996H461.392C475.452 77.9996 482.482 85.0317 482.482 99.0959V159.054Z" fill="#111111"/>
+<path d="M634.508 117.971H590.106C587.886 117.971 586.776 119.082 586.776 121.302V132.406C586.776 134.626 587.886 135.737 590.106 135.737H613.417V159.054C613.417 173.118 606.386 180.15 592.326 180.15H579.005C564.945 180.15 557.915 173.118 557.915 159.054V101.317C557.915 87.2524 564.945 80.2203 579.005 80.2203H625.627C627.847 80.2203 628.957 79.1099 628.957 76.8893V65.786C628.957 63.5654 627.847 62.455 625.627 62.455H572.345C546.444 62.455 533.494 75.4089 533.494 101.317V159.054C533.494 184.961 546.444 197.915 572.345 197.915H598.986C624.887 197.915 637.838 184.961 637.838 159.054V121.302C637.838 119.082 636.728 117.971 634.508 117.971Z" fill="#111111"/>
+<path d="M758.86 62.455H661.176C658.956 62.455 657.846 63.5654 657.846 65.786V76.8893C657.846 79.1099 658.956 80.2203 661.176 80.2203H697.807V192.363C697.807 194.584 698.917 195.694 701.138 195.694H718.898C721.118 195.694 722.228 194.584 722.228 192.363V80.2203H758.86C761.08 80.2203 762.19 79.1099 762.19 76.8893V65.786C762.19 63.5654 761.08 62.455 758.86 62.455Z" fill="#111111"/>
+<path d="M851.074 60.2344H822.213C796.312 60.2344 783.362 73.1882 783.362 99.0959V159.054C783.362 184.961 796.312 197.915 822.213 197.915H851.074C876.975 197.915 889.926 184.961 889.926 159.054V99.0959C889.926 73.1882 876.975 60.2344 851.074 60.2344ZM865.505 159.054C865.505 173.118 858.474 180.15 844.414 180.15H828.873C814.813 180.15 807.782 173.118 807.782 159.054V99.0959C807.782 85.0317 814.813 77.9996 828.873 77.9996H844.414C858.474 77.9996 865.505 85.0317 865.505 99.0959V159.054Z" fill="#111111"/>
+<path d="M0 37.5117C0 28.6752 7.16344 21.5117 16 21.5117H186.166C195.003 21.5117 202.166 28.6752 202.166 37.5117V220.638C202.166 229.474 195.003 236.638 186.166 236.638H16C7.16344 236.638 0 229.474 0 220.638V37.5117Z" fill="url(#paint0_linear_935_668)"/>
+<path d="M231.201 273.748L34.949 235.025L318.305 238.252L231.201 273.748Z" fill="url(#paint1_linear_935_668)"/>
+<path d="M0 35.3888C0 27.4266 5.85456 20.676 13.7367 19.5497L132.286 2.60972C141.925 1.23235 150.549 8.7118 150.549 18.4488V239.702C150.549 249.439 141.925 256.919 132.286 255.542L13.7367 238.602C5.85457 237.475 0 230.725 0 222.762V35.3888Z" fill="url(#paint2_linear_935_668)"/>
+<g filter="url(#filter0_d_935_668)">
+<ellipse cx="116.138" cy="129.076" rx="12.9042" ry="12.9076" fill="url(#paint3_linear_935_668)"/>
+</g>
+<g filter="url(#filter1_d_935_668)">
+<rect x="109.686" y="123.697" width="12.9042" height="34.4202" rx="6.45212" fill="url(#paint4_linear_935_668)"/>
+</g>
+<defs>
+<filter id="filter0_d_935_668" x="102.234" y="116.168" width="27.8085" height="27.8145" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.104304 0 0 0 0 0.0825 0 0 0 0 0.2 0 0 0 0.02 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_935_668"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_935_668" result="shape"/>
+</filter>
+<filter id="filter1_d_935_668" x="105.686" y="123.697" width="18.9043" height="41.4199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="4"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.104304 0 0 0 0 0.0825 0 0 0 0 0.2 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_935_668"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_935_668" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_935_668" x1="4.83909" y1="136.604" x2="205.001" y2="72.5859" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF06A"/>
+<stop offset="1" stop-color="#EC78FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_935_668" x1="118.827" y1="241.479" x2="240.344" y2="266.206" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECB6FF"/>
+<stop offset="1" stop-color="#FFF4F4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_935_668" x1="-12.3666" y1="147.899" x2="162.382" y2="110.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="#492EF3"/>
+<stop offset="1" stop-color="#CF69FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_935_668" x1="116.138" y1="116.168" x2="110.759" y2="141.983" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1BFFF"/>
+<stop offset="1" stop-color="#AF68EE"/>
+</linearGradient>
+<linearGradient id="paint4_linear_935_668" x1="116.138" y1="123.697" x2="100.89" y2="151.138" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8F2FF"/>
+<stop offset="1" stop-color="#D185F5"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/console/src/components/Sidebar/components/Item/index.module.scss b/packages/console/src/components/Sidebar/components/Item/index.module.scss
index b078ac64f..8bd8578c2 100644
--- a/packages/console/src/components/Sidebar/components/Item/index.module.scss
+++ b/packages/console/src/components/Sidebar/components/Item/index.module.scss
@@ -32,6 +32,6 @@
   }
 
   .title {
-    @include _.subhead-1;
+    @include _.title-medium;
   }
 }
diff --git a/packages/console/src/components/Topbar/index.module.scss b/packages/console/src/components/Topbar/index.module.scss
index 2bc0feeb1..3909180df 100644
--- a/packages/console/src/components/Topbar/index.module.scss
+++ b/packages/console/src/components/Topbar/index.module.scss
@@ -6,4 +6,21 @@
   padding: _.unit(3) _.unit(8);
   display: flex;
   align-items: center;
+
+  img {
+    height: 30px;
+  }
+
+  .line {
+    border: 1px solid #c4c7c7;
+    height: 24px;
+    width: 0;
+    flex: 0 0 0;
+    margin: 0 _.unit(3);
+  }
+
+  .text {
+    @include _.title-medium;
+    color: var(--color-component-text);
+  }
 }
diff --git a/packages/console/src/components/Topbar/index.tsx b/packages/console/src/components/Topbar/index.tsx
index c16564d8b..6a205af4f 100644
--- a/packages/console/src/components/Topbar/index.tsx
+++ b/packages/console/src/components/Topbar/index.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
 
+import logo from '@/assets/images/logo.svg';
+
 import * as styles from './index.module.scss';
 
 const Topbar = () => {
-  return <div className={styles.topbar}>Admin Console</div>;
+  return (
+    <div className={styles.topbar}>
+      <img src={logo} />
+      <div className={styles.line} />
+      <div className={styles.text}>Admin Console</div>
+    </div>
+  );
 };
 
 export default Topbar;
diff --git a/packages/console/src/scss/_underscore.scss b/packages/console/src/scss/_underscore.scss
index 7387336b0..ebe027b99 100644
--- a/packages/console/src/scss/_underscore.scss
+++ b/packages/console/src/scss/_underscore.scss
@@ -9,7 +9,8 @@
   justify-content: center;
 }
 
-@mixin subhead-1 {
+
+@mixin title-medium {
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;