Merge pull request #715 from lgaitan/new-skin

New verdaccio skin

package.json

@@ -107,6 +107,7 @@
     "node-mocks-http": "1.6.7",
     "node-sass": "4.9.0",
     "normalize.css": "8.0.0",
+    "optimize-css-assets-webpack-plugin": "4.0.1",
     "ora": "1.4.0",
     "prop-types": "15.6.1",
     "puppeteer": "1.1.1",

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 {
+  .headerButton {
-    margin-left: auto;
+    color: inherit;
-    color: white;
+    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 }>
+        <div className="user-logged">
-          <span className="user-logged-greetings">Hi, {storage.getItem('username')}</span>
+          <span className="user-logged-greetings" style={ {marginRight: '10px'} }>Hi, {storage.getItem('username')}</span>
-          &nbsp;
+          <Button className={`${classes.headerButton} header-button-logout`} type="danger" onClick={this.handleLogout}>Logout</Button>
-          <Button className="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>"`;

tools/webpack.prod.config.babel.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const baseConfig = require('./webpack.config');
 const env = require('../src/config/env');
 const _ = require('lodash');
@@ -44,6 +45,7 @@ const prodConf = {
       new UglifyJsWebpackPlugin({
         sourceMap: true,
       }),
+      new OptimizeCSSAssetsPlugin({}),
     ],
   },
 };

yarn.lock

@@ -2802,7 +2802,7 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
-cssnano@^3.10.0:
+cssnano@^3.10.0, cssnano@^3.4.0:
   version "3.10.0"
   resolved "https://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
   dependencies:
@@ -6000,6 +6000,13 @@ known-css-properties@^0.6.0:
   version "0.6.1"
   resolved "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.6.1.tgz#31b5123ad03d8d1a3f36bd4155459c981173478b"
 
+last-call-webpack-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
+  dependencies:
+    lodash "^4.17.5"
+    webpack-sources "^1.1.0"
+
 lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@@ -7219,6 +7226,13 @@ optimist@^0.6.1:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
 
+optimize-css-assets-webpack-plugin@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-4.0.1.tgz#48f016766752c7648b92cc1e795b999732bd87a2"
+  dependencies:
+    cssnano "^3.4.0"
+    last-call-webpack-plugin "^3.0.0"
+
 optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.2"
   resolved "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"