Merge pull request #215 from jekyll/design-tweaks

Design tweaks

Author: mertkahyaoglu

src/containers/views/DataFileNew.js

@@ -68,8 +68,8 @@ export class DataFileNew extends Component {
             <div className="side-unit">
               <a onClick={() => this.handleClickSave()}
                 className={"btn"+(datafileChanged ? " btn-success " : " btn-inactive ")+"btn-fat"}>
-                  <i className="fa fa-save" aria-hidden="true"></i>
-                {updated ? 'Saved' : 'Save'}
+                  <i className="fa fa-plus-square" aria-hidden="true"></i>
+                {updated ? 'Created' : 'Create'}
               </a>
             </div>
           </div>

src/containers/views/DocumentNew.js

@@ -86,7 +86,7 @@ export class DocumentNew extends Component {
             <div className="side-unit">
               <a onClick={() => this.handleClickSave()}
                 className={"btn"+(fieldChanged ? " btn-success " : " btn-inactive ")+"btn-fat"}>
-                  <i className="fa fa-plus-square-o" aria-hidden="true"></i>
+                  <i className="fa fa-plus-square" aria-hidden="true"></i>
                 {updated ? 'Created' : 'Create'}
               </a>
             </div>

src/containers/views/PageNew.js

@@ -78,7 +78,7 @@ export class PageNew extends Component {
             <div className="side-unit">
               <a onClick={() => this.handleClickSave()}
                 className={"btn"+(fieldChanged ? " btn-success " : " btn-inactive ")+"btn-fat"}>
-                  <i className="fa fa-plus-square-o" aria-hidden="true"></i>
+                  <i className="fa fa-plus-square" aria-hidden="true"></i>
                 {updated ? 'Created' : 'Create'}
               </a>
             </div>

src/styles/form.scss

@@ -42,7 +42,6 @@
   box-shadow: none;
   border: 0;
   border-bottom: 1px solid #ededed;
-  @include border-radius($border-radius);
   &:focus {
     color: #000 !important;
     border-bottom: 2px solid $border-color-focus;

src/styles/metafields.scss

@@ -6,18 +6,19 @@
     margin-bottom: 20px;
     .meta-key {
       .key-field {
-        margin: 15px 0 10px;
-        padding: 11px 13px;
-        max-width: calc(100% - 36px);
-        height: 48px;
+        margin: 0 0 5px;
+        max-width: 200px;
         font-size: 16px;
         font-weight: 700;
-        border: 1px solid $border-color;
-        @include border-radius($border-radius);
+        background: 0 0;
+        border: 2px solid transparent;
+        @include border-radius(2px);
+        padding: 5px 0;
         box-shadow: none;
         @include transition(padding 250ms ease);
         &:focus {
-          border-color: $border-color-focus;
+          padding: 5px;
+          border-color: $dark-orange;
           color: #000 !important;
         }
         &:hover {
@@ -27,28 +28,30 @@
     }
     .meta-value {
       .value-field {
-        margin-bottom: 0;
-        padding: 11px 13px;
-        max-width: calc(100% - 36px);
+        overflow: hidden;
+        word-wrap: break-word;
+        resize:vertical;
+        height: auto;
         min-height: 46px;
+        margin-bottom: 0;
         max-height: 500px;
-        font-size: 16px;
-        line-height: 1.5;
-        resize: vertical;
         vertical-align: bottom;
-        word-wrap: break-word;
-        overflow: hidden;
+        line-height: 1.5;
+        width: 100%;
+
+        @include border-radius(2px);
         border-color: $border-color;
-        @include border-radius($border-radius);
+        font-size: 16px;
+        padding: 11px 13px;
         &:focus {
-          border: 1px solid $border-color-focus;
+          border: 1px solid $dark-orange;
         }
       }
     }
     .meta-value-array {
       padding: 10px 15px;
       border: 1px solid $border-color;
-      @include border-radius($border-radius);
+      @include border-radius(3px);
       position: relative;
       .array-item-wrap {
         margin-bottom: 20px;
@@ -79,6 +82,9 @@
         bottom: -13px;
         margin-left: -13px;
         left: 50%;
+        i {
+          margin: 0;
+        }
       }
     }
     .meta-value-object {
@@ -101,7 +107,7 @@
             box-shadow: none;
             min-height: 46px;
             line-height: 1.5;
-            @include border-radius($border-radius);
+            @include border-radius(2px);
           }
           .meta-buttons {
             transform: translateY(-50%);
@@ -156,7 +162,7 @@
         cursor: pointer;
         position: relative;
         button {
-          border: 1px solid $border-color;
+          border: 1px solid #d4d7d9;
           background: none;
           padding: 0;
           @include border-radius(50%);
@@ -175,7 +181,7 @@
             height: 0;
             border-style: solid;
             border-width: 0 10px 10px;
-            border-color: transparent transparent $border-color;
+            border-color: transparent transparent #d4d7d9;
             content: "";
             position: absolute;
             top: -10px;
@@ -190,7 +196,7 @@
           z-index: 30;
           width: 185px;
           border: 1px solid #d4d7d9;
-          border-radius: $border-radius;
+          border-radius: 2px;
           background: #fff;
           span {
             display: block;
@@ -234,7 +240,7 @@
     & div {
       opacity: 0;
     }
-    border: 1px dashed $dark-orange !important;
+    border: 2px dashed $dark-orange !important;
   }
   .showing-dropdown {
     z-index: 30;
@@ -256,6 +262,6 @@
     right: -10px !important;
   }
   .rw-state-focus {
-    border: 1px solid $orange !important;
+    border: 1px solid $dark-orange !important;
   }
 }