Merge pull request #395 from netlify/visual-tweaks

Small update to the UI's look and feel

src/components/AppHeader/AppHeader.css

@@ -1,10 +1,14 @@
 @import '../UI/theme';
 
 .appBar {
+  padding: 8px 24px;
+  height: auto;
   background-color: var(--backgroundAltColor);
+  color: var(--defaultColorLight);
 }
 
 /* Gross stuff below, React Toolbox hacks */
+
 .homeLink,
 .iconMenu {
   margin-left: 2%;
@@ -19,8 +23,8 @@
 .leftIcon span {
   /* stylelint-disable */
 
-  color: var(--foregroundAltColor) !important;
-  font-size: 30px !important;
+  color: var(--defaultColorLight) !important;
+  font-size: 24px !important;
 
   /* stylelint-enable */
 }

src/components/ControlPanel/ControlPane.css

@@ -1,32 +1,41 @@
 @import "../UI/theme";
 
 .control {
-  color: #7c8382;
+  color: var(--textColor);
   position: relative;
   padding: 20px 0 10px 0;
+  margin-top: 16px;
 
   & input,
   & textarea,
   & select {
-    font-family: monospace;
+    font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
     display: block;
     width: 100%;
     padding: 12px;
     margin: 0;
-    border: none;
+    border: var(--textFieldBorder);
     border-radius: var(--borderRadius);
     outline: 0;
     box-shadow: none;
     background-color: var(--controlBGColor);
-    font-size: 18px;
-    color: #7c8382;
+    font-size: 16px;
+    color: var(--textColor);
+    transition: border-color .3s ease;
+
+    &:focus,
+    &:active {
+      border-color: var(--primaryColor);
+    }
   }
 }
 
 .label {
   display: block;
   color: var(--controlLabelColor);
-  font-size: 14px;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 600;
 }
 
 .labelWithError {
@@ -40,3 +49,7 @@
   color: #FF706F;
   margin-bottom: 5px;
 }
+
+p {
+  font-size: 16px;
+}

src/components/EntryEditor/EntryEditor.css

@@ -18,11 +18,11 @@
 }
 
 .controlPane {
-  height: calc(100% - 55px);
   overflow: auto;
   padding: 20px 20px 0;
+  height: calc(100% - 55px);
   border-right: 1px solid var(--defaultColorLight);
-  background-color: var(--backgroundTertiaryColorDark);
+  background-color: var(--backgroundColor);
 }
 
 .previewPane {
@@ -41,7 +41,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-top: 1px solid var(--defaultColorLight);
+  border-top: var(--border);
   background: var(--backgroundColor);
   text-align: right;
 }
@@ -52,3 +52,7 @@
   right: 0;
   height: 100%;
 }
+
+.ProseMirror {
+  border: var(--textFieldBorder);
+}

src/components/EntryListing/EntryListing.css

@@ -1,14 +1,21 @@
 .card {
+  flex: 0 300px;
   overflow: hidden;
-  margin-bottom: 10px;
-  margin-left: 15px;
+  margin-bottom: 16px;
+  margin-left: 16px;
+  max-width: 50%;
   max-height: 290px;
-  width: 240px;
   cursor: pointer;
 }
 
+.card:hover {
+  background: #f8f9fa;
+  transform: translateY(-8px);
+}
+
 .cardImage {
-  width: 240px;
+  margin: -16px -24px 16px -24px;
+  width: calc(100% + 24px + 24px);
   height: 135px;
   background-position: center center;
   background-size: cover;
@@ -18,7 +25,7 @@
 .cardsGrid {
   display: flex;
   flex-flow: row wrap;
-  margin-left: -15px;
+  margin-left: -16px;
 }
 
 .cardList {

src/components/FindBar/FindBar.css

@@ -6,14 +6,14 @@
 }
 
 .inputField {
-  width: 80%;
-  max-width: 800px;
+  width: 100%;
+  max-width: 500px;
   display: block;
-  margin: 0 auto;
+  margin: 0 24px;
   padding: 10px 14px;
   border: 0;
   border-radius: var(--borderRadius);
   box-shadow: none;
   outline: none;
-  font-size: 18px;
+  font-size: 14px;
 }

src/components/UI/Sticky/Sticky.css

@@ -8,7 +8,7 @@
 
 .stickyActive:not(.stickyAtBottom) {
   position: fixed !important;
-  top: 64px !important;
+  top: 54px !important;
 }
 
 .stickyAtBottom {

src/components/UI/Sticky/Sticky.js

@@ -163,6 +163,11 @@ export class Sticky extends Component {
   static propTypes = {
     className: PropTypes.string,
 
+    /**
+     * classNameActive: class to apply when Sticky is active.
+     */
+    classNameActive: PropTypes.string,
+
     /**
      * fillContainerWidth: allows the sticky width to be dynamically set to the width of it's
      * StickyContainer when sticky (fixed positioning).
@@ -201,6 +206,7 @@ export class Sticky extends Component {
             styles.sticky,
             {
               [styles.stickyActive]: state.shouldStick,
+              [props.classNameActive]: state.shouldStick,
               [styles.stickyAtBottom]: state.shouldStickAtBottom,
             },
           )}

src/components/UI/card/Card.css

@@ -1,8 +1,39 @@
 @import '../theme.css';
 
 .card {
-  composes: base container rounded depth;
+  composes: base container rounded;
   overflow: hidden;
+  border: var(--textFieldBorder);
+  transition: all .1s ease-in-out;
+  transform: translateY(0);
+  padding: 16px 24px;
+}
+
+.card > iframe,
+.card > video,
+.card > img {
+  margin: -16px -24px 16px;
+  width: calc(100% + 16px + 16px);
+}
+
+.card h1 {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 24px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  color: var(--defaultColor);
+}
+
+.card p {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 24px;
+  padding: 0;
+  color: var(--textMutedColor);
 }
 
 .card > *:not(iframe, video, img, header, footer) {
@@ -17,17 +48,3 @@
 .card > *:not(iframe, video, img, header, footer):last-child {
   margin-bottom: 10px;
 }
-
-.card > iframe,
-.card > video,
-.card > img {
-  max-width: 100%;
-}
-
-.card h1 {
-  margin: 15px 0;
-  padding: 0;
-  border: none;
-  color: var(--defaultColor);
-  font-size: 18px;
-}

src/components/UI/theme.css

@@ -1,31 +1,35 @@
 :root {
   --defaultColor: #333;
-  --defaultColorLight: #eee;
+  --defaultColorLight: #fff;
   --backgroundColor: #fff;
   --backgroundColorShaded: #eee;
-  --shadowColor: rgba(0, 0, 0, .25);
+  --shadowColor: rgba(19, 39, 48, .24);
   --infoColor: #69c;
+  --primaryColor: #4990e2;
   --successColor: #1c7;
   --warningColor: #fa0;
   --errorColor: #f52;
-  --textColor: #272e30;
-  --borderRadius: 2px;
-  --borderRadiusLarge: 10px;
-  --dropShadow:
-    0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  --textColor: #191919;
+  --textMutedColor: #8c8c8c;
+  --borderRadius: 4px;
+  --borderRadiusLarge: 8px;
+  --secondaryColor: #d9d9d9;
+  --dropShadow: 0 2px 8px 0 var(--secondaryColor);
   --topmostZindex: 99999;
   --foregroundAltColor: #fff;
-  --backgroundAltColor: #272e30;
-  --textFieldBorderColor: #e7e7e7;
+  --backgroundAltColor: #232528;
+  --textFieldBorderColor: var(--secondaryColor);
   --highlightFGColor: #fff;
   --highlightBGColor: #3ab7a5;
   --highlightFGAltColor: #eee;
-  --controlLabelColor: var(--textColor);
+  --controlLabelColor: #8b8b8b;
   --controlBGColor: #fff;
-  --backgroundTertiaryColor: #f2f5f4;
+  --backgroundTertiaryColor: #fff;
   --backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
+  --richTextEditorMinHeight: 300px;
+  --borderWidth: 2px;
+  --border: solid var(--borderWidth) var(--secondaryColor);
+  --textFieldBorder: var(--border);
 }
 
 .base {
@@ -42,7 +46,7 @@
 }
 
 .depth {
-  box-shadow: var(--shadowColor) 0 1px 6px;
+  box-shadow: var(--dropShadow);
 }
 
 .clearfix:after {

src/components/UI/toast/Toast.css

@@ -4,6 +4,11 @@
   --iconSize: 30px;
 }
 
+/* redux-notifications override */
+:global(.notif__container) {
+  z-index: 10000;
+}
+
 .root {
   composes: base container rounded depth from '../theme.css';
   overflow: hidden;

src/components/UnpublishedListing/UnpublishedListing.css

@@ -1,5 +1,7 @@
+@import '../UI/theme.css';
+
 :root {
-  --highlightColor: #e1eeea;
+  --highlightColor: #38ab9b;
   --defaultFontSize: 1em;
 }
 
@@ -11,6 +13,7 @@
 .column {
   flex: 1 33%;
   margin: -10px;
+  margin-top: 24px;
   padding: 10px;
   max-width: 33%;
   transition: background-color .5s ease;
@@ -18,7 +21,8 @@
 
 .columnHovered {
   composes: column;
-  background-color: var(--highlightColor);
+  border: 2px dashed var(--highlightColor);
+  border-radius: 4px;
 }
 
 .columnHeading {
@@ -32,3 +36,11 @@
 .card {
   margin-bottom: 10px;
 }
+
+/* Gross stuff below, React Toolbox hacks */
+
+.cardTitle h5 {
+  color: var(--backgroundAltColor) !important;
+  font-weight: 500 !important;
+  font-size: 21px !important;
+}

src/components/UnpublishedListing/UnpublishedListing.js

@@ -88,6 +88,7 @@ class UnpublishedListing extends React.Component {
                     <CardTitle
                       title={entry.getIn(['data', 'title'])}
                       subtitle={`by ${ author }`}
+                      className={styles.cardTitle}
                     />
                     <CardText>
                       Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}

src/components/UnpublishedListing/UnpublishedListingCardMeta.css

@@ -12,7 +12,8 @@
   font-size: .75em;
   text-transform: uppercase;
 
-  background: var(--backgroundColorShaded);
+  background: var(--backgroundAltColor);
+  color: #fff;
 }
 
 .meta {}

src/components/Widgets/ImageControl.css

@@ -0,0 +1,21 @@
+@import "../UI/theme.css";
+
+.input {
+  display: none !important;
+}
+
+.message {
+  padding: 20px;
+  display: block;
+  font-size: 12px;
+}
+
+.imageUpload {
+  background-color: #fff;
+  text-align: center;
+  color: #999;
+  border: var(--border);
+  border-style: dashed;
+  border-radius: var(--borderRadius);
+  cursor: pointer;
+}

src/components/Widgets/ImageControl.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
+import styles from './ImageControl.css';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -81,8 +82,8 @@ export default class ImageControl extends React.Component {
     const imageName = this.renderImageName();
     if (processing) {
       return (
-        <div style={styles.imageUpload}>
-          <span style={styles.message}>
+        <div className={styles.imageUpload}>
+          <span className={styles.message}>
             <Loader active />
           </span>
         </div>
@@ -90,19 +91,19 @@ export default class ImageControl extends React.Component {
     }
     return (
       <div
-        style={styles.imageUpload}
+        className={styles.imageUpload}
         onDragEnter={this.handleDragEnter}
         onDragOver={this.handleDragOver}
         onDrop={this.handleChange}
       >
-        <span style={styles.message} onClick={this.handleClick}>
-          {imageName ? imageName : 'Tip: Click here to upload an image from your file browser, or drag an image directly into this box from your desktop'}
+        <span className={styles.message} onClick={this.handleClick}>
+          {imageName ? imageName : 'Click here to upload an image from your computer, or drag and drop a file directly into this box'}
         </span>
         <input
           type="file"
           accept="image/*"
           onChange={this.handleChange}
-          style={styles.input}
+          className={styles.input}
           ref={this.handleFileInputRef}
         />
       </div>
@@ -110,24 +111,6 @@ export default class ImageControl extends React.Component {
   }
 }
 
-const styles = {
-  input: {
-    display: 'none',
-  },
-  message: {
-    padding: '20px',
-    display: 'block',
-    fontSize: '12px',
-  },
-  imageUpload: {
-    backgroundColor: '#fff',
-    textAlign: 'center',
-    color: '#999',
-    border: '1px dashed #eee',
-    cursor: 'pointer',
-  },
-};
-
 ImageControl.propTypes = {
   onAddAsset: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,

src/components/Widgets/MarkdownControlElements/RawEditor/index.css

@@ -1,3 +1,5 @@
+@import "../../../UI/theme";
+
 .root {
   position: relative;
 }
@@ -6,6 +8,10 @@
   composes: editorControlBar from "../VisualEditor/index.css";
 }
 
+.editorControlBarSticky {
+  composes: editorControlBarSticky from "../VisualEditor/index.css";
+}
+
 .dragging { }
 
 .shim {
@@ -28,4 +34,5 @@
 .textarea {
   overflow: hidden;
   resize: none;
+  min-height: var(--richTextEditorMinHeight);
 }

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

@@ -320,7 +320,11 @@ export default class RawEditor extends React.Component {
       onDragOver={this.handleDragOver}
       onDrop={this.handleDrop}
     >
-      <Sticky className={styles.editorControlBar} fillContainerWidth>
+      <Sticky
+        className={styles.editorControlBar}
+        classNameActive={styles.editorControlBarSticky}
+        fillContainerWidth
+      >
         <Toolbar
           selectionPosition={selectionPosition}
           onH1={this.handleHeader('#')}
@@ -338,6 +342,7 @@ export default class RawEditor extends React.Component {
         />
       </Sticky>
       <TextareaAutosize
+        className={styles.textarea}
         inputRef={this.handleRef}
         className={styles.textarea}
         value={this.props.value || ''}

src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarPluginForm.css

@@ -2,10 +2,11 @@
 
 .pluginForm {
   position: absolute;
-  background-color: var(--backgroundTertiaryColorDark);
+  background-color: var(--backgroundColor);
   margin-top: -20px;
   margin-bottom: 30px;
   margin-left: 20px;
+  border: var(--border);
   border-radius: var(--borderRadius);
   box-shadow: var(--dropShadow);
   overflow: hidden;

src/components/Widgets/MarkdownControlElements/VisualEditor/index.css

@@ -1,10 +1,14 @@
 @import "../../../UI/theme";
 
 .editorControlBar {
-  background-color: var(--controlBGColor);
-  border-bottom: 1px solid var(--backgroundTertiaryColorDark);
-  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
   z-index: 1;
+  border: 2px solid transparent;
+  border-top: 0;
+  background-color: var(--controlBGColor);
+}
+
+.editorControlBarSticky {
+  border-color: var(--textFieldBorderColor);
 }
 
 .editor {
@@ -69,8 +73,11 @@
     position: relative;
     background-color: var(--controlBGColor);
     padding: 12px;
-    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
     overflow: hidden;
+    border-radius: var(--borderRadius);
+    overflow-x: auto;
+    border: var(--textFieldBorder);
+    min-height: var(--richTextEditorMinHeight);
 
     & ul,
     & ol {

src/components/Widgets/MarkdownControlElements/VisualEditor/index.js

@@ -275,7 +275,11 @@ export default class Editor extends Component {
       onDragOver={this.handleDragOver}
       onDrop={this.handleDrop}
     >
-      <Sticky className={styles.editorControlBar} fillContainerWidth>
+      <Sticky
+        className={styles.editorControlBar}
+        classNameActive={styles.editorControlBarSticky}
+        fillContainerWidth
+      >
         <Toolbar
           selectionPosition={selectionPosition}
           onH1={this.handleHeader(1)}