Merge pull request #715 from lgaitan/new-skin

New verdaccio skin
2025-02-17 23:45:29 -05:00 · 2018-05-27 20:57:44 +02:00 · 2018-05-27 20:57:44 +02:00 · 658775220d
commit 658775220d
parent a4061e6f6d 3168a769c3
14 changed files with 65 additions and 19 deletions
--- a/package.json
+++ b/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",
--- a/src/webui/src/components/Header/header.scss
+++ b/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;
+    }
  }
 }

--- a/src/webui/src/components/Header/index.js
+++ b/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
--- a/src/webui/src/components/Header/logo.png
+++ b/src/webui/src/components/Header/logo.png
--- a/src/webui/src/components/Package/package.scss
+++ b/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;
    }
  }
--- a/src/webui/src/components/PackageDetail/packageDetail.scss
+++ b/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;
--- a/src/webui/src/components/PackageSidebar/Module/style.scss
+++ b/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;
--- a/src/webui/src/components/PackageSidebar/modules/Dependencies/style.scss
+++ b/src/webui/src/components/PackageSidebar/modules/Dependencies/style.scss
@ -7,7 +7,7 @@
    line-height: 1.5;

    a {
-      color: $primary-color;
+      color: inherit;
    }
  }
 }
--- a/src/webui/src/components/PackageSidebar/modules/Maintainers/style.scss
+++ b/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;
  }
--- a/src/webui/src/styles/global.scss
+++ b/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;
+  }
 }
--- a/src/webui/src/styles/variable.scss
+++ b/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;
--- a/test/webui/components/snapshots/header.spec.js.snap
+++ b/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>"`;
--- a/tools/webpack.prod.config.babel.js
+++ b/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({}),
    ],
  },
 };
--- a/yarn.lock
+++ b/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"