some dropshadow and other CSS tweaks

decaporg · Dec 6, 2017 · fea448a · fea448a
1 parent 83f4ccb
commit fea448a
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 10 deletions.
diff --git a/src/components/App/Header.css b/src/components/App/Header.css
@@ -3,7 +3,7 @@
 }
 
 .nc-appHeader-main {
-  @apply(--dropShadow);
+  @apply(--dropShadowMain);
   position: fixed;
   width: 100%;
   top: 0;
@@ -53,6 +53,7 @@
 
 .nc-appHeader-siteLink {
   font-size: 14px;
+  font-weight: 400;
   color: #7b8290;
   padding: 10px 16px;
 }

diff --git a/src/components/Collection/CollectionTop.css b/src/components/Collection/CollectionTop.css
@@ -17,7 +17,7 @@
 }
 
 .nc-collectionPage-topNewButton {
-  @apply(--button);
+  @apply(--buttonShadow);
 }
 
 .nc-collectionPage-top-viewControls {

diff --git a/src/components/Editor/EditorControlPane/EditorControl.css b/src/components/Editor/EditorControlPane/EditorControl.css
@@ -1,3 +1,7 @@
 .nc-controlPane-control {
   margin-top: 16px;
+
+  &:first-child {
+    margin-top: 36px;
+  }
 }
diff --git a/src/components/Editor/EditorToolbar.css b/src/components/Editor/EditorToolbar.css
@@ -1,5 +1,7 @@
 .nc-entryEditor-toolbar {
-  @apply(--dropShadow);
+  box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),
+              0 1px 3px 0 rgba(68, 74, 87, 0.10),
+              0 2px 54px rgba(0, 0, 0, 0.1);
   position: fixed;
   top: 0;
   left: 0;
@@ -17,13 +19,14 @@
   height: 100%;
   display: flex;
   align-items: center;
-  padding: 0 16px;
+
 }
 
 .nc-entryEditor-toolbar-mainSection {
   flex: 10;
   display: flex;
   justify-content: space-between;
+  padding: 0 20px;
 }
 
 .nc-entryEditor-toolbar-backSection,
@@ -34,10 +37,12 @@
 .nc-entryEditor-toolbar-backSection {
   border-right-width: 1px;
   font-weight: normal;
+  padding: 0 20px;
 }
 
 .nc-entryEditor-toolbar-metaSection {
   border-left-width: 1px;
+  padding: 0 7px;
 }
 
 .nc-entryEditor-toolbar-backArrow {

diff --git a/src/components/Editor/EditorToolbar.js b/src/components/Editor/EditorToolbar.js
@@ -25,12 +25,12 @@ const EditorToolbar = (
         <div className="nc-entryEditor-toolbar-backArrow">←</div>
         <div>
           <div className="nc-entryEditor-toolbar-backCollection">
-            Writing in {collection.get('label')} collection
+            Writing in <strong>{collection.get('label')}</strong> collection
           </div>
           {
             hasChanged
              ? <div className="nc-entryEditor-toolbar-backStatus-hasChanged">Unsaved Changes</div>
-             : <div className="nc-entryEditor-toolbar-backStatus">Changes saved &#10003;</div>
+             : <div className="nc-entryEditor-toolbar-backStatus">Changes saved &#10004;</div>
           }
         </div>
       </Link>

diff --git a/src/components/UI/base.css b/src/components/UI/base.css
@@ -86,12 +86,19 @@
     box-shadow: 0 2px 4px 0 rgba(19, 39, 48, .12);
   }
 
+  --dropShadowMain: {
+    box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),
+                0 1px 3px 0 rgba(68, 74, 87, 0.10);
+  }
+
   --dropShadowMiddle: {
-    box-shadow: 0 2px 6px 0 rgba(68,74,87,0.15), 0 1px 3px 0 rgba(68,74,87,0.30);
+    box-shadow: 0 2px 6px 0 rgba(68,74,87,0.15),
+                0 1px 3px 0 rgba(68,74,87,0.30);
   }
 
   --dropShadowDeep: {
-    box-shadow: 0 4px 12px 0 rgba(68,74,87,0.15), 0 1px 3px 0 rgba(68,74,87,0.25);
+    box-shadow: 0 4px 12px 0 rgba(68,74,87,0.15),
+                0 1px 3px  0 rgba(68,74,87,0.25);
   }
 
   --caretDown: {
@@ -104,8 +111,8 @@
   }
 
   --card: {
-    @apply(--dropShadow);
-    border-radius: 8px;
+    @apply(--dropShadowMain);
+    border-radius: 5px;
     background-color: #fff;
   }
 
@@ -118,6 +125,16 @@
     cursor: pointer;
   }
 
+  --buttonShadow {
+    @apply(--button);
+    @apply(--dropShadowDeep);
+
+    &:hover {
+      color: white;
+      background-color: #555b65;
+    }
+  }
+
   --textBadge: {
     color: #3a69c7;
     font-size: 13px;