Feature/Setups of Onboarding Process (#4580)

UX enhancement: onboarding setup graphs 

Co-authored-by: llcc <lzhes43@gmail.com>
Co-authored-by: Tienson Qin <tiensonqin@gmail.com>

src/main/frontend/components/header.css

@@ -109,6 +109,17 @@
       opacity: .9;
     }
   }
+
+  .add-graph-btn {
+    border: 1px dashed var(--ls-border-color);
+    padding: 0 8px;
+
+    strong {
+      padding: 0 10px;
+      position: relative;
+      top: 1px;
+    }
+  }
 }
 
 .is-electron.is-mac .cp__header {
@@ -174,14 +185,20 @@ a.button {
   opacity: 0.6;
   display: block;
   border-radius: 4px;
+  user-select: none;
 
   &:hover, &.active {
     opacity: 1;
     background: none;
+
     @screen md {
         background: var(--ls-tertiary-background-color);
     }
   }
+
+  &:active {
+    opacity: .7;
+  }
 }
 
 .is-mac.is-electron :is(.cp__header, .cp__right-sidebar-topbar) :is(button, .button, a) {