fix: User portal style issues (#796)

* fix: Home page style

* fix: Header nav active link style

Author: dongrui

public/op-logo.svg

@@ -22,6 +22,7 @@ router.get('/logout', ctx => {
     'username',
     'user_id',
     'role',
+    'portal',
     'email',
     'login_time',
     'changedRole',

server/routes/page.js

@@ -1,10 +1,8 @@
 @import '~scss/vars';
 
 .appList {
-  position: relative;
   overflow: hidden;
   _zoom: 1;
-  top: 30px;
 
   > div {
     &:nth-child(3n+4) {
@@ -18,4 +16,4 @@
     font-size: 12px;
     color: $N75;
   }
-}
+}

src/components/AppList/index.scss

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { translate } from 'react-i18next';
-import { inject, observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 
 import { Image } from 'components/Base';
 import SearchBox from 'pages/Home/SearchBox';
@@ -11,7 +11,9 @@ import { getPortalFromPath } from 'routes';
 import styles from './index.scss';
 
 @translate()
-@inject('rootStore')
+@inject(({ rootStore }) => ({
+  user: rootStore.user
+}))
 @observer
 export default class Banner extends Component {
   static propTypes = {
@@ -42,22 +44,26 @@ export default class Banner extends Component {
       className,
       stretch,
       shrink,
-      rootStore,
+      user,
       t
     } = this.props;
 
     if (!['', 'user'].includes(getPortalFromPath())) {
       return null;
     }
 
+    const titleShow = user.isLoggedIn()
+      ? `${t('QingCloud App Center')} - ${t(title)}`
+      : t(title);
+
     return (
       <div
         className={classnames(
           'banner',
           styles.banner,
           {
             [styles.stretch]: stretch,
-            [styles.shrink]: shrink || rootStore.fixNav
+            [styles.shrink]: shrink
           },
           className
         )}
@@ -69,7 +75,7 @@ export default class Banner extends Component {
                 <Image src={icon} iconSize={48} iconLetter={title} />
               </span>
             )}
-            <div className={styles.name}>{t(title)}</div>
+            <div className={styles.name}>{titleShow}</div>
             <div className={styles.description}>{t(description)}</div>
           </div>
 

src/components/Banner/index.jsx

@@ -7,33 +7,41 @@ $speed: 0.2s;
   width: 100%;
   z-index: 2;
   top: $header-height;
-  padding: 30px 0;
   background-color: $N500;
   transition: all $speed ease-in-out;
 
   &.stretch {
-    padding: 64px 0;
+    height: $search-banner-height;
+    .wrapper {
+      padding: 68px 0;
+      height: $search-banner-height;
+    }
     .search {
+      transition: all $speed ease-in-out;
       float: none;
-      top: 0;
+      bottom: 0;
     }
   }
 
   &.shrink {
-    padding: 30px 0 !important;
+    height: $title-banner-height;
+
     .search {
       transition: all $speed ease-in-out;
       float: right;
-      top: -15px;
+      bottom: 10px;
     }
   }
 
   .wrapper {
     width: $content-width;
     margin: 0 auto;
+    padding: 28px 0;
+    height: $title-banner-height;
 
     .words {
       display: inline-block;
+      height: 52px;
     }
   }
 
@@ -63,10 +71,9 @@ $speed: 0.2s;
   }
 
   .name {
-    margin-bottom: 4px;
     font-size: 20px;
     font-weight: 500;
-    line-height: 24px;
+    line-height: 32px;
     letter-spacing: 0;
     color: $N0;
   }
@@ -115,4 +122,4 @@ $speed: 0.2s;
       }
     }
   }
-}
+}

src/components/Banner/index.scss

@@ -117,24 +117,28 @@
   }
 }
 
-:global(.operate-menu) {
-  a {
-    color: $N300;
-  }
-  li,a,span {
-    display: block;
-    min-width: 105px;
-    padding: 0 12px;
-    height: 32px;
-    font-size: 12px;
-    line-height: 32px;
-    color: $N300;
-    background-color: $N0;
-    cursor: pointer;
-    transition: all $transition-speed;
-    &:hover {
-      color: $N500;
-      background-color: $N10;
+:global{
+  .operate-menu {
+    a {
+      color: $N300;
+    }
+
+    >li,>a,>span {
+      display: block;
+      min-width: 105px;
+      padding: 0 12px;
+      height: 32px;
+      font-size: 12px;
+      line-height: 32px;
+      color: $N300;
+      background-color: $N0;
+      cursor: pointer;
+      transition: all $transition-speed;
+
+      &:hover {
+        color: $N500;
+        background-color: $N10;
+      }
     }
 
     .icon {

src/components/Base/Popover/index.scss

@@ -1,20 +1,18 @@
 @import '~scss/vars';
 
-.title{
-  padding-bottom: 12px;
-  line-height: 1.25;
-  font-size: $font16;
-  font-weight: bold;
-  color: $N500;
-  .more{
+.title {
+  @include title-font($font-size: 16px);
+  margin: 32px 0 12px;
+
+  .more {
     display: none;
     float: right;
     font-size: 12px;
     font-weight: normal;
     cursor: pointer;
     @include moreText();
   }
-  .show{
+  .show {
     display: inline-block;
   }
 }

src/components/Card/CardTitle/index.scss

@@ -7,15 +7,14 @@ $card-height: 208px;
    float: left;
    display: inline-block;
    position: relative;
-   width: $card-width;
+   width: calc(33.3% - 13.3px);
    height: $card-height;
    padding: 32px 44px;
-   margin: 0 24px 24px 0;
+   margin: 0 20px 20px 0;
    border-radius: 2px;
    border: 1px solid $N0;
    background-color: $N0;
    transition: all .3s ease-in-out;
-   text-align: center;
    box-shadow: 0 1px 4px 0 rgba(73, 33, 173, 0.06), 0 4px 8px 0 rgba(35, 35, 36, 0.04);
    cursor: pointer;
    overflow: hidden;
@@ -27,11 +26,15 @@ $card-height: 208px;
     margin: 0 auto 12px;
     transition:all 0.3s ease;
     position: relative;
+
+    img {
+      border-radius: 3px;
+    }
   }
   .name {
-    font-family: Roboto sans-serif;
     font-size: 14px;
-    color: #343945;
+    color: $N500;
+    font-weight: 500;
     text-align: center;
     line-height: 28px;
     margin-bottom: 8px;

src/components/Card/index.scss

@@ -29,7 +29,7 @@ export default class DetailTabs extends Component {
     const firstTab = props.tabs[0];
     this.state = {
       curTab:
-        props.defaultTab || _.isObject(firstTab) ? firstTab.value : firstTab
+        props.defaultTab || (_.isObject(firstTab) ? firstTab.value : firstTab)
     };
   }
 

src/components/DetailTabs/index.jsx

@@ -32,13 +32,16 @@
 
 .accountTabs {
   padding: 0;
-  height: 41px;
+  height: 32px;
   background-color: $N500;
   border-bottom: 0 none;
 
   >label {
-    padding: 12px 0;
+    margin-right: 40px;
+    line-height: 20px;
+    padding: 0 0 11px 0;
     color: $N30;
+    border-bottom: 1px solid transparent;
 
     &.active {
       color: $N0;