Feature/ux ui refreshments (#139)

* Made various UI tweaks to make the UI cleaner and more consistent * Update place holder text
Nike-Inc · Feb 20, 2018 · 7f14880 · 7f14880
1 parent b7ac971
commit 7f14880
Show file tree

Hide file tree

Showing 17 changed files with 146 additions and 127 deletions.
diff --git a/dashboard/app/assets/styles/common.scss b/dashboard/app/assets/styles/common.scss
@@ -10,7 +10,7 @@ $snkrs_success: #48BD1F;
 $snkrs_error: #FE0000;
 
 $sectionPadding: 10px;
-$headerHeight: 90px;
+$headerHeight: 55px;
 
 body {
   background-color: $snkrs_dark_grey;
@@ -238,4 +238,12 @@ a {
     -moz-transform:scale(.3);
     background-color:$snkrs_off_white;
   }
+}
+
+@mixin rotate($degrees) {
+  -webkit-transform: rotate($degrees);
+  -moz-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  transform: rotate($degrees);
 }
diff --git a/dashboard/app/components/AddButton/AddButton.js b/dashboard/app/components/AddButton/AddButton.js
@@ -16,11 +16,11 @@ export default class AddButton extends Component {
     render() {
         const {handleClick, message} = this.props
         return (
-            <div className='permissions-add-new-permission-button-container clickable'
+            <div className='permissions-add-new-permission-button-container btn ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
                  onClick={() => {
                      handleClick()
                  }}>
-                <div className='permissions-add-new-permission-add-icon'></div>
+                <div className='permissions-add-new-permission-add-icon ncss-glyph-plus-lg'></div>
                 <div className='permissions-add-new-permission-add-label'>{message}</div>
             </div>
         )

diff --git a/dashboard/app/components/AddButton/AddButton.scss b/dashboard/app/components/AddButton/AddButton.scss
@@ -5,14 +5,9 @@
   width: 250px;
 
   .permissions-add-new-permission-add-icon {
-    background: url(../../assets/images/add-dark-grey.svg);
-    background-repeat: no-repeat;
-    padding: 10px;
-    margin-top: 1px;
-    margin-left: 3px;
+    padding-left: 10px;
   }
   .permissions-add-new-permission-add-label {
     padding-left: 7px;
-    font-weight: bold;
   }
 }
diff --git a/dashboard/app/components/CreateSDBoxForm/CreateSDBoxForm.js b/dashboard/app/components/CreateSDBoxForm/CreateSDBoxForm.js
@@ -149,7 +149,7 @@ export default class CreateSDBoxForm extends Component {
 
                 <div id="submit-btn-container">
                     <div id='cancel-btn'
-                         className='btn ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
+                         className='btn ncss-btn-accent ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
                          onClick={ () => {
                                 dispatch(modalActions.popModal())
                             }}>Cancel

diff --git a/dashboard/app/components/Header/Header.js b/dashboard/app/components/Header/Header.js
@@ -18,7 +18,7 @@ export default class Header extends Component {
                         hashHistory.push('/')
                     }.bind(this, this.props.dispatch)
                     }></div>
-                    <div id='header-title' className='ncss-brand'>Cerberus Management Dashboard</div>
+                    <div id='header-title' className='ncss-brand u-uppercase un-selectable'>Cerberus</div>
                     <UserBox userName={this.props.userName}
                              displayUserContextMenu={this.props.displayUserContextMenu}
                              dispatch={this.props.dispatch}
@@ -57,7 +57,7 @@ class UserBox extends Component {
         let isAdmin = this.props.isAdmin
 
         return (
-            <div id='user-box' className='ncss-brand'>
+            <div id='user-box' className='ncss-brand u-uppercase'>
                 <div id='u-b-container'
                      onClick={this.handleMouseClickUserName}
                      onMouseLeave={this.handleMouseLeaveUserMenuContext} >

diff --git a/dashboard/app/components/Header/Header.scss b/dashboard/app/components/Header/Header.scss
@@ -18,22 +18,22 @@
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
-    width: 84px;
+    width: 45px;
     margin-left: 20px;
     cursor: pointer;
   }
 
   #header-title {
-    font-size: 45px;
+    font-size: 35px;
     line-height: 1.2;
-    padding-left: 20px;
-    padding-top: 18px;
+    padding-left: 15px;
+    padding-top: 7px;
   }
 
   #user-box{
     margin-left: auto;
     padding-right: 20px;
-    padding-top: 5px;
+    padding-top: 12px;
     font-size: 18px;
 
     #u-b-container {
@@ -46,12 +46,12 @@
       #u-b-name {
         cursor: pointer;
         float: left;
-        padding-right: 5px;
+        padding-right: 3px;
       }
 
       #u-b-ico {
         cursor: pointer;
-        margin-top: -3px;
+        margin-top: -6px;
         font-size: 40px;
       }
     }

diff --git a/dashboard/app/components/ManageSafeDepositBox/ManageSafeDepositBox.js b/dashboard/app/components/ManageSafeDepositBox/ManageSafeDepositBox.js
@@ -88,23 +88,23 @@ export default class ManageSafeDepositBox extends Component {
         return(
             <div className="safe-deposit-box-content-wrapper">
                 <div className="safe-deposit-box-content-section safe-deposit-box-header">
-                    <div className="safe-deposit-box-header-item safe-deposit-box-header-name">{sdbData.name}</div>
+                    <div className="safe-deposit-box-header-item safe-deposit-box-header-name ncss-brand u-uppercase">{sdbData.name}</div>
                     <div className="safe-deposit-box-header-item safe-deposit-box-header-description">{sdbData.description}</div>
                 </div>
                 <div className="safe-deposit-box-content-section safe-deposit-box-nav">
                     <div
-                        className={"un-selectable nav-item secure-data" + (nav.secureDataSelected ? ' nav-item-selected' : '')}
+                        className={"un-selectable nav-item secure-data ncss-brand u-uppercase" + (nav.secureDataSelected ? ' nav-item-selected' : '')}
                         onClick={() => { this.handleNavItemClicked('secureData')}}
                     >Secure Data</div>
                     <div
-                        className={"un-selectable nav-item versions" + (nav.secureDataVersionsSelected ? ' nav-item-selected' : '')}
+                        className={"un-selectable nav-item versions ncss-brand u-uppercase" + (nav.secureDataVersionsSelected ? ' nav-item-selected' : '')}
                         onClick={() => {
                             dispatch(vActions.fetchVersionDataForSdb(sdbData.id, cerberusAuthToken))
                             this.handleNavItemClicked('secureDataVersions')
                         }}
                     >Secure Data Version History</div>
                     <div
-                        className={"un-selectable nav-item setting" + (nav.sdbSettingsSelected ? ' nav-item-selected' : '')}
+                        className={"un-selectable nav-item setting ncss-brand u-uppercase" + (nav.sdbSettingsSelected ? ' nav-item-selected' : '')}
                         onClick={() => { this.handleNavItemClicked('sdbSettings')}}
                     >Settings</div>
                 </div>

diff --git a/dashboard/app/components/ManageSafeDepositBox/ManageSafeDepositBox.scss b/dashboard/app/components/ManageSafeDepositBox/ManageSafeDepositBox.scss
@@ -17,8 +17,7 @@
     width: 100%;
 
     .safe-deposit-box-header-name {
-      font-size: 24px;
-      font-weight: bold;
+      font-size: 27px;
     }
 
     .safe-deposit-box-header-description {

diff --git a/dashboard/app/components/SecureData/SecureData.js b/dashboard/app/components/SecureData/SecureData.js
@@ -70,15 +70,21 @@ export default class SecureData extends Component {
                     <SecureDataForm initialValues={ (secureData[`${navigatedPath}${label}`] && secureData[`${navigatedPath}${label}`].hasFormInit) ? undefined : {kvMap: this.assembleFormData(sdbData), path: label}}
                                      pathReadOnly={true}
                                      formKey={`${navigatedPath}${label}`} />
-                    <div className="secure-data-delete-btn" onClick={() => {
-                                dispatch(mSDBActions.deleteSecureDataPathConfirm(`${navigatedPath}`,`${label}`, cerberusAuthToken))
-                            }}>
-                        <div className="secure-data-delete-btn-icon"></div>
-                        <div className="secure-data-delete-btn-label">Delete this Secret Path</div>
-                    </div>
+                    { deleteButton(dispatch, navigatedPath, label, cerberusAuthToken) }
                 </div>
                 }
             </div>
         )
     }
+}
+
+const deleteButton = (dispatch, navigatedPath, label, cerberusAuthToken) => {
+    return (
+        <div className="secure-data-delete-btn btn ncss-btn-accent ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase" onClick={() => {
+            dispatch(mSDBActions.deleteSecureDataPathConfirm(`${navigatedPath}`,`${label}`, cerberusAuthToken))
+        }}>
+            <div className="ncss-glyph-plus-lg secure-data-delete-btn-icon"></div>
+            <div className="secure-data-delete-btn-label">Delete this Secure Data Path</div>
+        </div>
+    )
 }
diff --git a/dashboard/app/components/SecureData/SecureData.scss b/dashboard/app/components/SecureData/SecureData.scss
@@ -111,13 +111,11 @@
   margin-top: 10px;
   cursor: pointer;
   display: flex;
+  width: 250px;
 
   .secure-data-delete-btn-icon {
-    background: url(../../assets/images/remove-red.svg);
-    background-repeat: no-repeat;
-    margin-left: 2px;
-    margin-top: 2px;
-    padding: 9px;
+    margin-left: -8px;
+    @include rotate(-45deg);
   }
 
   .secure-data-delete-btn-label {

diff --git a/dashboard/app/components/SecureDataBrowser/SecureDataBrowser.js b/dashboard/app/components/SecureDataBrowser/SecureDataBrowser.js
@@ -56,11 +56,11 @@ export default class SecureDataBrowser extends Component {
                     {! showAddSecretForm &&
                         <AddButton handleClick={() => {
                             dispatch(mSDBActions.showAddNewSecureData())
-                        }} message="Add New Secret Path" />
+                        }} message="Add New Secure Data Path" />
                     }
                     {showAddSecretForm &&
                         <div id="add-form-container">
-                            <div className="secure-data-form-label">Add a new Secret Path</div>
+                            <div className="secure-data-form-label ncss-brand u-uppercase">Add a new Secure Data Path</div>
                             <SecureDataForm initialValues={{
                                                            kvMap: [{key: null, value: null, revealed: true}],
                                                            path: null

diff --git a/dashboard/app/components/SecureDataBrowser/SecureDataBrowser.scss b/dashboard/app/components/SecureDataBrowser/SecureDataBrowser.scss
@@ -7,7 +7,6 @@
 #secure-data-path {
   padding: 8px;
   margin-top: -1px;
-  border: 1px solid $snkrs_medium_grey;
   font-size: 16px;
   font-weight: bold;
   display: flex;
@@ -52,7 +51,6 @@
 
 #add-form-container {
   .secure-data-form-label {
-    font-size: 16px;
-    font-weight: bold;
+    font-size: 20px;
   }
 }
diff --git a/dashboard/app/components/SecureDataForm/SecureDataForm.js b/dashboard/app/components/SecureDataForm/SecureDataForm.js
@@ -92,7 +92,7 @@ export default class SecureDataForm extends Component {
                                         <input {...path}
                                             type='text'
                                             className='ncss-input pt2-sm pr4-sm pb2-sm pl4-sm'
-                                            placeholder='Enter path of secret from current path'/>
+                                            placeholder='Path'/>
                                         {path.touched && path.error && <div className='ncss-error-msg'>{path.error}</div>}
                                     </div>
                                 </div>
@@ -152,14 +152,14 @@ export default class SecureDataForm extends Component {
                         <div id="submit-btn-container">
                             <div className="btn-wrapper">
                                 <div id='cancel-btn'
-                                        className='ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
+                                        className='ncss-btn-accent ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase un-selectable'
                                         onClick={() => {
                                             dispatch(mSDBActions.hideAddNewSecureData())
                                         }}>Cancel</div>
                             </div>
                             <div className="btn-wrapper">
                                 <button id='submit-btn'
-                                        className='ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase'
+                                        className='ncss-btn-dark-grey ncss-brand pt3-sm pr5-sm pb3-sm pl5-sm pt2-lg pb2-lg u-uppercase un-selectable'
                                         disabled={secureData[navigatedPath + path.value] ? secureData[navigatedPath + path.value].isUpdating : false}>Save
                                 </button>
                             </div>

diff --git a/dashboard/app/components/SecureDataForm/SecureDataForm.scss b/dashboard/app/components/SecureDataForm/SecureDataForm.scss
@@ -71,6 +71,13 @@
           padding-top: 0px;
           padding-bottom: 0px;
         }
+
+        .ncss-btn-accent {
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 0px;
+          padding-bottom: 0px;
+        }
       }
     }
   }

diff --git a/dashboard/app/components/SideBar/SideBar.js b/dashboard/app/components/SideBar/SideBar.js
@@ -4,7 +4,6 @@ import { connect } from 'react-redux'
 import * as appActions from '../../actions/appActions'
 import * as mSDBActions from '../../actions/manageSafetyDepositBoxActions'
 import * as vActions from '../../actions/versionHistoryBrowserActions'
-import Category from './views/Category'
 import Loader from '../Loader/Loader'
 import './SideBar.scss'
 import { getLogger } from 'logger'
@@ -38,28 +37,66 @@ export default class SideBar extends Component {
     }
 
     render() {
-        var categories = []
-        for (let key in this.props.data) {
-            if (this.props.data.hasOwnProperty(key)) {
-                var category = this.props.data[key]
-                categories.push(<Category key={category.id}
-                                          id={category.id}
-                                          name={category.name}
-                                          boxes={category.boxes}
-                                          handleMouseClickAddNewBucket={this.handleMouseClickAddNewBucket}
-                                          handleSDBClicked={this.handleSDBClicked}/>)
-            }
-        }
+        return (
+            <div className='sidebar'>
+                <div className="sidebar-header ncss-brand u-uppercase un-selectable">Safe Deposit Boxes</div>
+                { sideBarContent(this.handleMouseClickAddNewBucket, this.handleSDBClicked, this.props) }
+            </div>
+        )
+    }
+}
 
+const sideBarContent = (handleMouseClickAddNewBucket, handleSDBClicked, props) => {
+    if (props.isFetching) {
         return (
-            <div id='side-bar'>
-                <div id='loader' className={this.props.isFetching ? 'show-me' : 'hide-me'}>
-                    <Loader/>
+            <div className='loader'>
+                <Loader/>
+            </div>
+        )
+    }
+
+    return (
+        <div className='sidebar-categories'>
+            {categories(handleMouseClickAddNewBucket, handleSDBClicked, props.data)}
+        </div>
+    )
+}
+
+const categories = (handleMouseClickAddNewBucket, handleSDBClicked, data) => {
+    var categories = []
+    for (let key in data) {
+        if (data.hasOwnProperty(key)) {
+            let category = data[key]
+            categories.push(
+                <div key={category.id}>
+                    <div className='category'>
+                        <div className='category-label ncss-brand u-uppercase un-selectable'>{category.name}</div>
+                    </div>
+                    <div className="add-new-sdb ncss-brand u-uppercase un-selectable sidebar-button"
+                         onClick={() => {
+                             handleMouseClickAddNewBucket(category.id)
+                         }}>
+                        <div className="ncss-glyph-plus-lg icon"></div>
+                        <div className="txt">Create a New SDB</div>
+                    </div>
+                    {bucketComponents(category.boxes, handleSDBClicked)}
                 </div>
-                <ul id='sidebar-categories' className={this.props.isFetching ? 'hide-me' : ''}>
-                    {categories}
-                </ul>
+            )
+        }
+    }
+    return categories
+}
+
+const bucketComponents = (boxes, handleSDBClicked) => {
+    let bucketComponents = []
+    for (let box of boxes) {
+        bucketComponents.push(
+            <div className='border-bottom-light-grey sidebar-button un-selectable'
+                 key={box.id}
+                 onClick={handleSDBClicked.bind(this, box.id, box.path)} >
+                <div className='ncss-brand u-uppercase'>{box.name}</div>
             </div>
         )
     }
+    return bucketComponents
 }