Merge pull request #26 from Knifa/ui-tweaks

Tighten up new design

Author: Knifa

public/screenshot.png

@@ -1,7 +1,7 @@
 @import "./scss/variables";
 @import "./scss/mixins";
 
-$split-breakpoint: $block-width * 2 + ($spacing * 4);
+$split-breakpoint: $block-width * 2 + ($spacing * 8);
 
 .App {
   display: flex;
@@ -14,25 +14,30 @@ $split-breakpoint: $block-width * 2 + ($spacing * 4);
     display: flex;
     justify-content: center;
     flex-grow: 1;
-    background-color: black;
+    background-color: $dark-color;
     box-shadow: $shadow-big;
     z-index: 1;
 
     @media screen and (min-width: $split-breakpoint) {
       justify-content: flex-end;
+      padding: $spacing;
     }
   }
 
   .LightSide {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    padding: $spacing;
-    background-color: $primary-color;
+    padding: $spacing * 2;
+
+    background-image: $primary-gradient;
+    background-attachment: fixed;
+    background-size: cover;
 
     @media screen and (max-width: $split-breakpoint) {
       align-items: center;
       justify-content: flex-start;
+      padding: $spacing;
     }
   }
 }

src/App.scss

@@ -54,14 +54,17 @@
     color: white;
     box-shadow: $shadow-small;
 
-    background-color: $input-bg;
+    background-image: $input-gradient;
+    background-attachment: fixed;
+    background-size: cover;
+
     border: none;
     outline: none;
 
     border-radius: $border-radius;
 
     &:hover {
-      background-color: $input-bg-hover;
+      background-image: $input-gradient-hover;
     }
 
     &:disabled {

src/Block.scss

@@ -4,13 +4,13 @@
   display: block;
   margin: $spacing 0;
   padding: $spacing;
-  background-color: $input-bg;
+  background-color: $dark-input-bg;
   border-radius: 0.5em;
   box-shadow: $shadow-small;
   line-height: 1;
 
   &:hover {
-    background-color: $input-bg-hover;
+    background-color: $dark-input-bg-hover;
     cursor: pointer;
   }
 }

src/CopyCode.scss

@@ -19,7 +19,7 @@
     text-align: center;
 
     padding: ($spacing / 2) $spacing;
-    background-color: $input-bg;
+    background-color: $dark-input-bg;
     border-radius: $border-radius;
     box-shadow: $shadow-small;
 
@@ -32,7 +32,7 @@
     }
 
     &:hover {
-      background-color: $input-bg-hover;
+      background-color: $dark-input-bg-hover;
     }
 
     video,

src/TestShapes.scss

@@ -34,10 +34,10 @@
 
   tbody tr {
     font-size: 12pt;
-    background-color: $block-bg-content;
+    background-color: $block-bg-content-alt;
 
     &:nth-child(2n + 1) {
-      background-color: $block-bg-content-alt;
+      background-color: $block-bg-content;
     }
   }
 

src/blocks/SummaryBlock.scss

@@ -40,7 +40,9 @@
       border-radius: $border-radius;
       overflow: hidden;
 
-      background-color: $input-bg;
+      background-image: $input-gradient;
+      background-attachment: fixed;
+      background-size: cover;
 
       .FormContainer__inputIcon {
         padding: 0.25em 0.5em;

src/forms/FormContainer.scss

@@ -1,6 +1,20 @@
 @import "~sass-material-colors";
 
-$primary-color: material-color("light-green", "700");
+$primary-color: material-color("pink", "700");
+$alt-color: material-color("deep-purple", "700");
+$dark-color: material-color("grey", "900");
+
+$primary-gradient: linear-gradient($primary-color, $alt-color);
+
+$input-gradient: linear-gradient(
+  adjust-color($primary-color, $lightness: -10, $saturation: -20),
+  adjust-color($alt-color, $lightness: -10, $saturation: -20)
+);
+
+$input-gradient-hover: linear-gradient(
+  adjust-color($primary-color, $lightness: -5, $saturation: -20),
+  adjust-color($alt-color, $lightness: -5, $saturation: -20)
+);
 
 $glass-white-color: rgba(white, 0.1);
 $glass-black-color: rgba(black, 0.2);
@@ -14,9 +28,12 @@ $shadow-big: ($spacing / 4) ($spacing / 4) rgba(0, 0, 0, 0.15);
 $block-width: 600px;
 $mobile-max-width: 650px;
 
-$block-bg-title: change-color($primary-color, $lightness: 15);
-$block-bg-content: black;
-$block-bg-content-alt: change-color($primary-color, $lightness: 5);
+$block-bg-title: rgba(black, 0.5);
+$block-bg-content: $dark-color;
+$block-bg-content-alt: adjust-color($block-bg-content, $lightness: 2);
 
 $input-bg: change-color($primary-color, $lightness: 15);
 $input-bg-hover: adjust-color($input-bg, $lightness: 5);
+
+$dark-input-bg: #333;
+$dark-input-bg-hover: adjust-color($dark-input-bg, $lightness: 5);