Update editor look and downplay header

src/components/AppHeader/AppHeader.css

@@ -2,6 +2,8 @@
 
 .appBar {
   background-color: var(--backgroundAltColor);
+  height: auto;
+  padding: 8px 2.4rem;
 }
 
 /* Gross stuff below, React Toolbox hacks */
@@ -20,7 +22,7 @@
   /* stylelint-disable */
 
   color: var(--textColor) !important;
-  font-size: 30px !important;
+  font-size: 24px !important;
 
   /* stylelint-enable */
 }

src/components/ControlPanel/ControlPane.css

@@ -1,32 +1,42 @@
 @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-radius: var(--borderRadius);
+    border-bottom: 1px solid rgb(230, 230, 230);
+    border-radius: 0;
     outline: 0;
     box-shadow: none;
     background-color: var(--controlBGColor);
-    font-size: 18px;
+    font-size: 16px;
-    color: #7c8382;
+    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 +50,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 {

src/components/EntryListing/EntryListing.css

@@ -5,10 +5,16 @@
   overflow: hidden;
   margin-bottom: 16px;
   margin-left: 16px;
+  max-width: 31%;
   max-height: 290px;
   cursor: pointer;
 }
 
+.card:hover {
+  background: #f8f9fa;
+  transform: translateY(-8px);
+}
+
 .cardImage {
   margin: -16px -24px 16px -24px;
   width: calc(100% + 24px + 24px);

src/components/UI/card/Card.css

@@ -9,24 +9,6 @@
   padding: 16px 24px;
 }
 
-.card:hover {
-  background: #f8f9fa;
-  transform: translateY(-8px);
-}
-
-/*.card > *:not(iframe, video, img, header, footer) {
-  margin-right: 10px;
-  margin-left: 10px;
-}
-
-.card > *:not(iframe, video, img, header, footer):first-child {
-  margin-top: 10px;
-}
-
-.card > *:not(iframe, video, img, header, footer):last-child {
-  margin-bottom: 10px;
-}*/
-
 .card > iframe,
 .card > video,
 .card > img {

src/components/UI/theme.css

@@ -5,6 +5,7 @@
   --backgroundColorShaded: #eee;
   --shadowColor: rgba(19, 39, 48, .12);
   --infoColor: #69c;
+  --primaryColor: #4990e2;
   --successColor: #1c7;
   --warningColor: #fa0;
   --errorColor: #f52;
@@ -19,7 +20,7 @@
   --highlightFGColor: #fff;
   --highlightBGColor: #3ab7a5;
   --highlightFGAltColor: #eee;
-  --controlLabelColor: var(--textColor);
+  --controlLabelColor: #8b8b8b;
   --controlBGColor: #fff;
   --backgroundTertiaryColor: #fff;
   --backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));

src/containers/Sidebar.css

@@ -1,7 +1,7 @@
 @import '../components/UI/theme';
 
 .root {
-  margin-top: 64px;
+  margin-top: 54px;
 }
 
 .sidebar {

src/index.css

@@ -27,8 +27,8 @@ h1, h2, h3, h4, h5, h6, p {
 h1 {
   margin: 30px auto 25px;
   padding-bottom: 15px;
-  font-size: 20px;
+  font-size: 24px;
-  font-weight: 600;
+  font-weight: 800;
   color: #313D3E;
   letter-spacing: 0;
   line-height: 24px;