Overhaul of UI Part 1 (#54)

Overhaul of UI
- NavBar - Resized to 48px, rework bottom border with box-shadow
- Search Bar - Simplify DOM elements, height 60px, font 24px bold, narrower in md, lg screens.
- Container top margin at 96, 64, 32px for lg, md, sm screens.
- Search results has 16px top and bottom
- Consolidated buttons classes to: btn-primary btn-default
- Reworked Tag buttons and labels
- Fixed panel border radiuses
- Fixed NavBar active state highlighting

amundsen_application/static/css/_buttons-default.scss

@@ -28,21 +28,9 @@
     margin-bottom: 4px;
   }
 
-  &.btn-cancel {
-    border-color: $gray-lighter;
-    font-family: $font-family-sans-serif-bold;
-    font-weight: $font-weight-sans-serif-bold;
-
-    &:focus,
-    &:not(.disabled):hover,
-    &:not([disabled]):hover {
-      background-color: $gray-lighter;
-      border-color: $gray-lighter;
-    }
-  }
-
   &.btn-flat-icon {
     border: none;
+    background-color: transparent;
     color: $gray-light;
     box-shadow: none !important;
     padding: 0px;
@@ -60,16 +48,15 @@
     }
   }
 
-  &.btn-primary {
-    border-width: 2px;
-    -webkit-box-shadow: 8px 9px 20px -15px rgba(0,0,0,0.46);
-    -moz-box-shadow: 8px 9px 20px -15px rgba(0,0,0,0.46);
-    box-shadow: 8px 9px 20px -15px rgba(0,0,0,0.46);
+  &.btn-default {
+    border-radius: 4px;
+    border: 1px solid rgba(0, 7, 39, 0.13);
+    height: 36px;
     font-family: $font-family-sans-serif-bold;
     font-weight: $font-weight-sans-serif-bold;
   }
 
-  &.btn-save {
+  &.btn-primary {
     color: white;
     background-color: $brand-color-4;
     border-color: $brand-color-4;
@@ -85,6 +72,10 @@
     }
   }
 
+  &.btn-shadow {
+    box-shadow: 0 1px 3px 0 rgba(17, 17, 31, 0.12);
+  }
+
   &.disabled,
   &:disabled {
     -webkit-box-shadow: none;

amundsen_application/static/css/_icons.scss

@@ -56,6 +56,11 @@ img.icon {
     mask-image: url('/static/images/icons/Right.svg');
   }
 
+  &.icon-search {
+    -webkit-mask-image: url('/static/images/icons/Search.svg');
+    mask-image: url('/static/images/icons/Search.svg');
+  }
+
   &.icon-up {
     -webkit-mask-image: url('/static/images/icons/Up.svg');
     mask-image: url('/static/images/icons/Up.svg');

amundsen_application/static/css/styles.scss

@@ -6,7 +6,26 @@
 @import 'list-group-item';
 @import 'popovers';
 
-// TODO - Find a better place for misc styles.
+// TODO - Move to separate files
+// Layout
+#main > .container {
+  margin: 96px auto 48px;
+}
+
+@media (max-width: $screen-md-max) {
+  #main > .container {
+    margin: 64px auto 48px;
+  }
+}
+
+@media (max-width: $screen-sm-max) {
+  #main > .container {
+    margin: 32px auto 48px;
+  }
+}
+
+
+// Misc
 td {
   white-space: nowrap;
   overflow: hidden;
@@ -15,4 +34,3 @@ td {
 form {
   margin-bottom: 0;
 }
-

amundsen_application/static/js/components/AnnouncementPage/styles.scss

 @import 'variables';
 
-.announcement-container {
-  margin: 64px auto 48px;
-}
 .announcement-container hr {
   border: 2px solid $brand-color-4;
 }

amundsen_application/static/js/components/NavBar/index.tsx

@@ -3,6 +3,7 @@ import Avatar from 'react-avatar';
 import { Link, NavLink } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { withRouter } from 'react-router-dom'
 
 import AppConfig from '../../../config/config';
 import { GlobalState } from "../../ducks/rootReducer";
@@ -70,7 +71,7 @@ class NavBar extends React.Component<NavBarProps, NavBarState> {
               }
               {
                 this.state.currentUser &&
-                <Avatar name={this.state.currentUser.display_name} size={48} round={true}/>
+                <Avatar name={this.state.currentUser.display_name} size={32} round={true}/>
               }
             </div>
           </div>
@@ -90,4 +91,4 @@ const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({ getCurrentUser }, dispatch);
 };
 
-export default connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(NavBar);
+export default withRouter(connect<StateFromProps, DispatchFromProps>(mapStateToProps, mapDispatchToProps)(NavBar));

amundsen_application/static/js/components/NavBar/styles.scss

 @import 'variables';
 
 .nav-bar {
-  height: 72px;
-  border-bottom: 1px solid $gray-lighter;
-  padding: 10px 32px 10px 32px;
+  height: 48px;
+  box-shadow: 0 2px 0 -1px $gray-lightest;
+  padding: 8px 32px 8px 32px;
   font-family: $font-family-sans-serif-bold;
   font-weight: $font-weight-sans-serif-bold;
   color: $gray-light;
@@ -56,6 +56,6 @@
 }
 
 .logo-icon {
-  max-height: 48px;
+  max-height: 32px;
   max-width: 144px;
 }

amundsen_application/static/js/components/NotFoundPage/styles.scss

@@ -2,7 +2,6 @@
 
 .not-found-page {
   width: 70%;
-  margin: 64px auto 48px;
   text-align: center;
 }
 

amundsen_application/static/js/components/OwnerEditor/index.tsx

@@ -145,7 +145,7 @@ class OwnerEditor extends React.Component<OwnerEditorProps, OwnerEditorState> {
             placeholder='Enter an email address'
             ref={ this.inputRef }
           />
-          <button className="btn btn-light add-button" type="submit" aria-label="Add Item">
+          <button className="btn btn-default add-button" type="submit" aria-label="Add Item">
             <span aria-hidden="true">Add</span>
           </button>
         </form>
@@ -222,8 +222,8 @@ class OwnerEditor extends React.Component<OwnerEditorProps, OwnerEditorState> {
           </Modal.Header>
           { this.renderModalBody() }
           <Modal.Footer>
-            <button type="button" className="btn btn-cancel" onClick={this.cancelEdit}>Cancel</button>
-            <button type="button" className="btn btn-save" onClick={this.saveEdit}>Save</button>
+            <button type="button" className="btn btn-default" onClick={this.cancelEdit}>Cancel</button>
+            <button type="button" className="btn btn-primary" onClick={this.saveEdit}>Save</button>
           </Modal.Footer>
         </Modal>
       </div>

amundsen_application/static/js/components/SearchPage/SearchBar/index.tsx

@@ -24,7 +24,7 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
 
   public static defaultProps: SearchBarProps = {
     handleValueSubmit: () => undefined,
-    placeholder: 'Search for data resources...', // TODO: Hard-coded text strings should be translatable/customizable
+    placeholder: 'search for data resources...', // TODO: Hard-coded text strings should be translatable/customizable
     searchTerm: '',
     subText: DEFAULT_SUBTEXT,
   };
@@ -89,23 +89,22 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
   render() {
     const subTextClass = `subtext ${this.state.optionalSubTextClass}`;
     return (
-      <div className="col-xs-12">
-        <div id="searchBar" className="search-bar">
-          <form id="searchForm" onSubmit={ this.handleValueSubmit }>
-            <div id="inputContainer" className="input-container">
-              <button id="searchButton" type="submit" className="btn icon" />
-              <input
-               id="searchInput"
-               value={ this.state.searchTerm }
-               onChange={ this.handleValueChange }
-               aria-label={ this.props.placeholder }
-               placeholder={ this.props.placeholder }
-               autoFocus={ true }
-               ref={ this.inputRef }
-              />
-            </div>
-          </form>
-        </div>
+      <div id="search-bar" className="col-xs-12 col-md-offset-1 col-md-10">
+        <form className="search-bar-form" onSubmit={ this.handleValueSubmit }>
+            <button className="btn btn-flat-icon search-bar-button" type="submit">
+              <img className="icon icon-search" />
+            </button>
+            <input
+              id="searchInput"
+              className="search-bar-input form-control"
+              value={ this.state.searchTerm }
+              onChange={ this.handleValueChange }
+              aria-label={ this.props.placeholder }
+              placeholder={ this.props.placeholder }
+              autoFocus={ true }
+              ref={ this.inputRef }
+            />
+        </form>
         <div className={ subTextClass }>
           { this.state.subText }
         </div>

amundsen_application/static/js/components/SearchPage/SearchBar/styles.scss

 @import 'variables';
 
-.search-bar {
-  -webkit-box-shadow: 8px 9px 20px -15px rgba(0,0,0,0.46);
-  -moz-box-shadow: 8px 9px 20px -15px rgba(0,0,0,0.46);
-  box-shadow: 8px 9px 20px -15px rgba(0,0,0,0.46);
-  border: 1px solid $gray-lighter;
-  padding: 10px;
-  border-radius: 5px;
-  height:48px;
-}
-.search-bar:focus-within {
-  border: 2px solid $brand-color-2;
-}
-.input-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.input-container button {
-  height: 24px;
-  width: 24px;
-  border: none;
-  background-color: $gray-light;
-  -webkit-mask-image: url('/static/images/icons/Search.svg');
-  mask-image: url('/static/images/icons/Search.svg');
-}
-.input-container input {
-  cursor: text;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-  width: 100%;
-  height: 24px;
-  margin-left: 12px;
-  font-size: 16px;
-  background-color: transparent;
-  border: none;
-}
-.input-container input:focus {
-  outline: none;
-}
+#search-bar {
+  .search-bar-form {
+    position: relative;
 
-.subtext {
-  color: $gray-light;
-  font-size: 14px;
-  margin-top: 8px;
-  height: 32px;
-}
+    .search-bar-button {
+      position: absolute;
+      height: 24px;
+      width: 24px;
+      top: 18px;
+      left: 16px;
+    }
+
+    .search-bar-input {
+      border-radius: 4px;
+      box-shadow: 0 3px 12px 0 rgba(17, 17, 31, 0.04);
+      color: $text-color;
+      font-family: $font-family-sans-serif-bold;
+      font-size: 24px;
+      font-weight: $font-weight-sans-serif-bold;
+      width: 100%;
+      height: 60px;
+      padding: 16px 16px 16px 50px;
+
+      &:focus {
+        border-color: $brand-color-2;
+        box-shadow: 0 3px 12px 0 rgba($brand-color-2, 0.5);
+      }
+    }
+  }
+
+  .subtext {
+    color: $gray-light;
+    margin-top: 8px;
+  }
 
-.error {
-  color: red;
+  .error {
+    color: red;
+  }
 }

amundsen_application/static/js/components/SearchPage/index.tsx

@@ -154,7 +154,7 @@ class SearchPage extends React.Component<SearchPageProps, SearchPageState> {
       }
 
       return (
-        <div className="col-xs-12">
+        <div className="col-xs-12 col-md-offset-1 col-md-10">
           <div className="search-list-container">
             <div className="search-list-header">
               <label> { listTitle } </label>

amundsen_application/static/js/components/SearchPage/styles.scss

 @import 'variables';
 
 .search-page {
-  margin: 64px auto 48px;
-}
-.search-list-container {
-  margin: 32px 0px 0px 0px;
-}
-.search-list-header {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 32px;
-}
-.search-list-header label {
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-  font-size: 20px;
-  margin-top: auto;
-  margin-bottom: auto;
-  width: fit-content;
-  line-height: 24px;
-}
-.search-pagination-component {
-  display: flex;
-  justify-content: center;
+  .search-list-container {
+    margin: 64px 0 0 0;
+  }
+  @media (max-width: $screen-sm-max) {
+    .search-list-container {
+      margin: 32px 0 0 0;
+    }
+  }
+
+  .search-list-header {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 32px;
+  }
+  .search-list-header label {
+    font-family: $font-family-sans-serif-bold;
+    font-weight: $font-weight-sans-serif-bold;
+    font-size: 20px;
+    margin-top: auto;
+    margin-bottom: auto;
+    width: fit-content;
+    line-height: 24px;
+  }
+  .search-pagination-component {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 .pagination {

amundsen_application/static/js/components/TableDetail/DataPreviewButton/index.tsx

@@ -181,7 +181,7 @@ class DataPreviewButton extends React.Component<DataPreviewButtonProps, DataPrev
 
     const previewButton = (
       <button
-       className="btn btn-primary btn-block"
+       className="btn btn-default btn-shadow btn-block"
        disabled={disabled}
        onClick={this.handleShow}>
          <img className={"icon icon-color " + iconClass} />

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -259,7 +259,11 @@ class TableDetail extends React.Component<TableDetailProps & RouteComponentProps
           <DataPreviewButton modalTitle={`${this.schema}.${this.tableName}`} />
           {
             AppConfig.tableProfile.isExploreEnabled &&
-              <a role="button" href={this.getExploreSqlUrl()} target="_blank" className="btn btn-primary btn-block">
+              <a className="btn btn-default btn-shadow btn-block"
+                 href={this.getExploreSqlUrl()}
+                 role="button"
+                 target="_blank"
+              >
                 <img className="icon icon-color icon-database"/>
                 Explore with SQL
               </a>

amundsen_application/static/js/components/TableDetail/styles.scss

 @import 'variables';
 
 .table-detail {
-  margin: 64px auto 48px;
 
   .error-label {
     margin: 48px auto;

amundsen_application/static/js/components/Tags/TagInfo/index.tsx

@@ -23,14 +23,14 @@ class TagInfo extends React.Component<TagInfoProps, {}> {
 
     if (this.props.compact) {
       return (
-        <Link role="button" to={searchUrl} className="btn btn-default tag-button compact">
+        <Link role="button" to={searchUrl} className="btn tag-button compact">
           {this.props.data.tag_name}
         </Link>
       );
     }
 
     return (
-      <Link role="button" to={searchUrl} className="btn btn-default tag-button">
+      <Link role="button" to={searchUrl} className="btn tag-button">
         <span className="tag-name">{this.props.data.tag_name}</span>
         <span className="tag-count">{this.props.data.tag_count}</span>
       </Link>

amundsen_application/static/js/components/Tags/TagInfo/styles.scss

 @import 'variables';
 
-.tag-button {
-  border-radius: 2px;
+.btn.tag-button {
+  background-color: $gray-lightest;
+  border: 0;
+  border-radius: 4px;
+  color: $gray;
   font-size: $font-size-large;
   margin: 4px;
   overflow: hidden;
   padding: 4px 8px;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
 
-.tag-button.compact {
-  // Color to match up with the multi select tag library
-  background-color: rgb(230, 230, 230);
+  &.compact {
+    font-size: $font-size-base;
+    line-height: 24px;
+    height: 30px;
+    margin: 2px;
+    padding: 3px 6px;
+  }
 
-  border: 0;
-  font-size: $font-size-small;
-  line-height: 16px;
-  margin: 2px;
-  padding: 3px 6px;
-}
+  &:hover,
+  &:focus {
+    color: $gray;
+    background-color: $brand-color-2;
+  }
 
-.tag-name {
-  margin-right: 8px;
-}
+  .tag-name {
+    margin-right: 8px;
+  }
 
-.tag-count {
-  color: $gray-light;
+  .tag-count {
+    color: $gray-light;
+  }
 }

amundsen_application/static/js/components/Tags/TagInput/index.tsx

@@ -187,7 +187,7 @@ class TagInput extends React.Component<TagInputProps, TagInputState> {
     else if (this.batchEditSet[tagName] === BatchEditState.DELETE) {
       this.batchEditSet[tagName] = BatchEditState.CURRENT;
     }
-  }
+  };
 
   renderTagBlob(tagArray, keyPrefix, className) {
     return tagArray.map((tag) => {
@@ -199,7 +199,7 @@ class TagInput extends React.Component<TagInputProps, TagInputState> {
       };
       const updateTag = (event) => {
         this.toggleTag(event, tagName);
-      }
+      };
       return  (
         <div onClick={updateTag} key={`${keyPrefix}:${tagName}`} className={className}>
           <components.MultiValueContainer>
@@ -257,6 +257,9 @@ class TagInput extends React.Component<TagInputProps, TagInputState> {
           styles={{
             multiValueLabel: (provided) => ({
               ...provided,
+              fontSize: '14px',
+              height: '30px',
+              lineHeight: '24px',
               width: '100%',
             }),
             option: this.generateCustomOptionStyle
@@ -277,8 +280,8 @@ class TagInput extends React.Component<TagInputProps, TagInputState> {
             {this.renderModalBody()}
           </Modal.Body>
           <Modal.Footer>
-            <button type="button" className="btn btn-cancel" onClick={this.handleClose}>Cancel</button>
-            <button type="button" className="btn btn-save" onClick={this.handleSaveModalEdit}>Save</button>
+            <button type="button" className="btn btn-default" onClick={this.handleClose}>Cancel</button>
+            <button type="button" className="btn btn-primary" onClick={this.handleSaveModalEdit}>Save</button>
           </Modal.Footer>
         </Modal>
       </div>

amundsen_application/static/js/components/Tags/TagInput/styles.scss

@@ -5,27 +5,51 @@
    using !important as a temporary workaround in places where a compiled class
    is taking precendence,
 */
-.amundsen__multi-value__remove:hover,
-.amundsen__multi-value__remove:focus {
-  background-color: $gray-light !important;
-  color: $text-color !important;
-}
+.tag-input .basic-multi-select {
+  .amundsen__control {
+
+    min-height: 34px;
+
+    &,
+    .amundsen__control--is-focused,
+    .amundsen__control--is-focused:hover  {
+       border: none !important;
+       box-shadow: none !important;
+    }
+
+    .amundsen__multi-value {
+      background-color: $gray-lightest !important;
+      border-radius: 4px;
+
+      .amundsen__multi-value__label {
+        border-radius: 4px 0 0 4px;
+        color: $gray;
+      }
+
+      .amundsen__multi-value__remove {
+        border-radius: 0 4px 4px 0;
+        cursor: pointer;
+
+        &:hover,
+        &:focus {
+          background-color: $brand-color-2 !important;
+          color: $gray;
+        }
+      }
+    }
+  }
 
-.amundsen__control.amundsen__control--is-disabled {
-  background-color: transparent;
-  border-style: none;
+  .amundsen__control--is-disabled {
+    background-color: transparent;
+    border-style: none;
+  }
 }
 
+
 .amundsen__value-container {
-  padding: 0px !important;
+  padding: 0 !important;
 }
 
-.amundsen__control,
-.amundsen__control--is-focused,
-.amundsen__control--is-focused:hover  {
-   border: none !important;
-   box-shadow: none !important;
-}
 
 .amundsen__option--is-focused {
   background-color: #eee !important;
@@ -45,7 +69,7 @@
 }
 
 .multi-value-container {
-  border-radius: 2px;
+  border-radius: 4px;
   border: 1px solid hsl(0,0%,90%);
   display: flex;
   margin: 4px;

amundsen_application/static/js/components/common/EntityCard/styles.scss

 @import 'variables';
 
 .entity-card {
-  border-radius: 2px;
+  border-radius: 0 0 6px 6px;
   border-top: 4px solid $brand-color-4;
   box-shadow: 0 0 24px -2px rgba(0, 0, 0, .2);
   padding: 32px;

amundsen_application/static/js/components/common/Feedback/FeedbackForm/index.tsx

@@ -98,7 +98,7 @@ export class RatingFeedbackForm extends AbstractFeedbackForm {
         <textarea name="comment" form={AbstractFeedbackForm.FORM_ID}
           rows={ 5 } maxLength={ 2000 } placeholder="Additional Comments"/>
         <div>
-          <button className="btn btn-light submit" type="submit">Submit</button>
+          <button className="btn btn-default submit" type="submit">Submit</button>
         </div>
       </form>
     );
@@ -125,7 +125,7 @@ export class BugReportFeedbackForm extends AbstractFeedbackForm {
                     maxLength={ 2000 } placeholder="What you did to encounter this bug?"/>
         </div>
         <div>
-          <button className="btn btn-light submit" type="submit">Submit</button>
+          <button className="btn btn-default submit" type="submit">Submit</button>
         </div>
       </form>
     );
@@ -152,7 +152,7 @@ export class RequestFeedbackForm extends AbstractFeedbackForm {
                     maxLength={ 2000 } placeholder="How does this feature add value?"/>
         </div>
         <div>
-          <button className="btn btn-light submit" type="submit">Submit</button>
+          <button className="btn btn-default submit" type="submit">Submit</button>
         </div>
       </form>
     );

amundsen_application/static/js/components/common/Feedback/FeedbackForm/styles.scss

@@ -9,10 +9,6 @@
   background-color: $gray-lighter;
 }
 
-.btn-light {
-  border-color: $gray-lighter;
-}
-
 .radio-set {
   display: flex;
   margin-top: 8px;

amundsen_application/static/js/components/common/Feedback/styles.scss

@@ -9,7 +9,7 @@
 
   &.expanded {
     background-color: white;
-    border-radius: 2px;
+    border-radius: 0 0 6px 6px;
     border-top: 4px solid $brand-primary;
     height: auto;
     min-height: 450px;

amundsen_application/static/js/components/common/ResourceListItem/TableListItem/styles.scss

 @import 'variables';
 
 .search-list-item {
-
+  padding: 16px 4px;
   .resultInfo {
     margin-left: 8px;
     margin-right: 8px;

amundsen_application/static/js/index.tsx

@@ -33,7 +33,7 @@ ReactDOM.render(
   <DocumentTitle title="Amundsen - Data Discovery Portal">
     <Provider store={store}>
       <BrowserRouter>
-        <div>
+        <div id="main">
           <NavBar />
           <Switch>
             <Route path="/table_detail/:cluster/:db/:schema/:table" component={TableDetail} />