feat: new verdaccio skin to webui

src/webui/src/components/Header/header.scss

@@ -6,13 +6,13 @@
   width: 100%;
   align-items: center;
   background: $primary-color;
+  color: #fff;
 
   figure {
     margin: 0 0 0 10px;
     font-size: 14px;
     line-height: 18px;
     padding: 8px 0;
-    color: #f9f2f4;
   }
 
   .headerWrap {
@@ -22,13 +22,24 @@
     @include container-size();
   }
 
+  .headerRight {
+    margin-left: auto;
+  }
+
   .logo {
     height: 50px;
   }
 
-  .welcome {
-    margin-left: auto;
-    color: white;
+  .headerButton {
+    color: inherit;
+    border-color: #fff;
+    background-color: transparent;
+
+    &:hover, &:focus {
+      color: $primary-color;
+      border-color: #f7f8f6;
+      background-color: #f7f8f6;
+    }
   }
 }
 

src/webui/src/components/Header/index.js

@@ -129,14 +129,13 @@ export default class Header extends React.Component {
   renderUserActionButton() {
     if (!this.isTokenExpire) { // TODO: Check jwt token expire
       return (
-        <div className={ classes.welcome }>
-          <span className="user-logged-greetings">Hi, {storage.getItem('username')}</span>
-          &nbsp;
-          <Button className="header-button-logout" type="danger" onClick={this.handleLogout}>Logout</Button>
+        <div className="user-logged">
+          <span className="user-logged-greetings" style={ {marginRight: '10px'} }>Hi, {storage.getItem('username')}</span>
+          <Button className={`${classes.headerButton} header-button-logout`} type="danger" onClick={this.handleLogout}>Logout</Button>
         </div>
       );
     } else {
-      return <Button className="header-button-login" type="danger" style={ {marginLeft: 'auto'} } onClick={ this.toggleLoginModal }>Login</Button>;
+      return <Button className={`${classes.headerButton} header-button-login`} onClick={ this.toggleLoginModal }>Login</Button>;
     }
   }
 
@@ -154,7 +153,10 @@ export default class Header extends React.Component {
             <br/>
             npm adduser --registry { registryURL }
           </figure>
-          {this.renderUserActionButton()}
+
+          <div className={ classes.headerRight }>
+            {this.renderUserActionButton()}
+          </div>
         </div>
 
         <Dialog

src/webui/src/components/Package/package.scss

@@ -3,6 +3,7 @@
 .package {
   display: block;
   position: relative;
+  color: inherit;
   margin: 0;
   padding: 10px 0;
   cursor: pointer;
@@ -10,7 +11,6 @@
 
   h1 {
     font-size: 18px;
-    color: $primary-color;
 
     :global {
       .el-tag {
@@ -58,7 +58,6 @@
       left: 0;
       content: 'Click to view detail';
       text-align: center;
-      color: $primary-color;
       font-size: 18px;
     }
   }

src/webui/src/components/PackageDetail/packageDetail.scss

@@ -3,7 +3,6 @@
 .pkgDetail {
   .title {
     font-size: 26px;
-    color: $primary-color;
     border-bottom: 1px solid $border-color;
     font-weight: 600;
     margin: 0 0 40px;

src/webui/src/components/PackageSidebar/Module/style.scss

@@ -1,11 +1,13 @@
 @import '../../../styles/variable';
 
 .module {
+
+  margin-bottom: 10px;
+
   .moduleTitle {
     display: flex;
     align-items: flex-end;
     font-size: 21px;
-    color: $primary-color;
     margin: 0 0 10px;
     padding: 5px 0;
     font-weight: 600;

src/webui/src/components/PackageSidebar/modules/Dependencies/style.scss

@@ -7,7 +7,7 @@
     line-height: 1.5;
 
     a {
-      color: $primary-color;
+      color: inherit;
     }
   }
 }

src/webui/src/components/PackageSidebar/modules/Maintainers/style.scss

@@ -7,7 +7,6 @@
     background: none;
     border: none;
     font-size: 14px;
-    color: $primary-color;
     text-align: center;
     padding: 10px 0;
   }

src/webui/src/styles/global.scss

@@ -28,4 +28,21 @@ ul {
     flex-direction: column;
     min-height: 100vh;
   }
+
+  .el-button {
+    &:hover, &:focus {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  .el-input__inner {
+    &:hover, &:focus {
+      border-color: $primary-color;
+    }
+  }
+
+  .el-dialog__headerbtn:hover .el-dialog__close {
+    color: $text-black;
+  }
 }

src/webui/src/styles/variable.scss

@@ -12,7 +12,7 @@ $space-lg: 30px;
 $font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 /* Colors */
-$primary-color: #de4136;
+$primary-color: #4b5e40;
 $border-color: #e3e3e3;
 $text-black: #3c3c3c;
 $text-grey: #95989A;

test/webui/components/__snapshots__/header.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><button style=\\"margin-left: auto;\\" class=\\"el-button el-button--danger header-button-login\\" type=\\"button\\"><span>Login</span></button></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><form class=\\"el-form el-form--label-right login-form\\"><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default cancel-login-button\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--default login-button\\" type=\\"submit\\"><span>Login</span></button></div></form></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;
+exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><div class=\\"headerRight\\"><button class=\\"el-button el-button--default headerButton header-button-login\\" type=\\"button\\"><span>Login</span></button></div></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><form class=\\"el-form el-form--label-right login-form\\"><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default cancel-login-button\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--default login-button\\" type=\\"submit\\"><span>Login</span></button></div></form></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;