Updated user and shelf views to new design

resources/assets/sass/_blocks.scss

@@ -86,27 +86,27 @@
 @mixin spacing($prop, $propLetter) {
   @each $sizeLetter, $size in $spacing {
     .#{$propLetter}-#{$sizeLetter} {
-      #{$prop}: $size;
+      #{$prop}: $size !important;
     }
     .#{$propLetter}x-#{$sizeLetter} {
-      #{$prop}-left: $size;
-      #{$prop}-right: $size;
+      #{$prop}-left: $size !important;
+      #{$prop}-right: $size !important;
     }
     .#{$propLetter}y-#{$sizeLetter} {
-      #{$prop}-top: $size;
-      #{$prop}-bottom: $size;
+      #{$prop}-top: $size !important;
+      #{$prop}-bottom: $size !important;
     }
     .#{$propLetter}t-#{$sizeLetter} {
-      #{$prop}-top: $size;
+      #{$prop}-top: $size !important;
     }
     .#{$propLetter}r-#{$sizeLetter} {
-      #{$prop}-right: $size;
+      #{$prop}-right: $size !important;
     }
     .#{$propLetter}b-#{$sizeLetter} {
-      #{$prop}-bottom: $size;
+      #{$prop}-bottom: $size !important;
     }
     .#{$propLetter}l-#{$sizeLetter} {
-      #{$prop}-left: $size;
+      #{$prop}-left: $size !important;
     }
   }
 

resources/assets/sass/_buttons.scss

@@ -28,7 +28,7 @@ $button-border-radius: 2px;
 
 .button-base {
   text-decoration: none;
-  font-size: $fs-m;
+  font-size: 0.85rem;
   line-height: 1.4em;
   padding: $-xs*1.3 $-m;
   margin-top: $-xs;
@@ -67,6 +67,11 @@ $button-border-radius: 2px;
   margin-left: $-s;
 }
 
+.button.small {
+  font-size: 0.75rem;
+  padding: $-xs*1.2 $-s;
+}
+
 .button.outline {
   background-color: transparent;
   color: #888;
@@ -115,6 +120,7 @@ $button-border-radius: 2px;
   margin: 0;
   border: none;
   user-select: none;
+  font-size: 0.75rem;
   &:focus, &:active {
     outline: 0;
   }
@@ -124,6 +130,9 @@ $button-border-radius: 2px;
   &.neg {
     color: $negative;
   }
+  &.muted {
+    color: #666;
+  }
 }
 
 .button-group {

resources/assets/sass/_colors.scss

@@ -101,4 +101,7 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
 
 .bg-book {
   background-color: $color-book;
+}
+.bg-shelf {
+  background-color: $color-bookshelf;
 }

resources/assets/sass/_forms.scss

@@ -98,7 +98,7 @@ label {
   line-height: 1.4em;
   font-size: 0.94em;
   font-weight: 400;
-  color: #999;
+  color: #666;
   padding-bottom: 2px;
   margin-bottom: 0.2em;
   &.inline {
@@ -149,9 +149,10 @@ input[type=date] {
     height: 16px;
     border-radius: 2px;
     display: inline-block;
-    border: 2px solid #999;
+    border: 2px solid currentColor;
+    opacity: 0.6;
     overflow: hidden;
-    fill: #888;
+    fill: currentColor;
     .svg-icon {
       width: 100%;
       height: 100%;
@@ -172,8 +173,12 @@ input[type=date] {
   }
   .custom-checkbox:hover {
     background-color: rgba(0, 0, 0, 0.05);
+    opacity: 0.8;
   }
 }
+.toggle-switch-list .toggle-switch {
+  margin: $-xs 0;
+}
 
 .form-group {
   margin-bottom: $-s;
@@ -193,6 +198,14 @@ input[type=date] {
 .setting-list-label + p.small {
   margin-bottom: 0;
 }
+.setting-list-label + .grid {
+  margin-top: $-m;
+}
+.setting-list .grid {
+  input[type=text], input[type=email], input[type=password], select {
+    width: 100%;
+  }
+}
 
 .simple-code-input {
   background-color: #F8F8F8;

resources/assets/sass/_grid.scss

@@ -50,6 +50,16 @@ body.flexbox {
   flex: 1;
 }
 
+.dual-column-content {
+  columns: 2;
+}
+
+@include smaller-than($m) {
+  .dual-column-content {
+    columns: 1;
+  }
+}
+
 .content-wrap.card {
   padding: $-l $-xxl;
   margin-left: auto;
@@ -65,6 +75,12 @@ body.flexbox {
   }
 }
 
+@include smaller-than($m) {
+  .content-wrap.card {
+    padding: $-m $-l;
+  }
+}
+
 .tri-layout-container {
   display: grid;
   grid-template-columns: 1fr minmax(auto, 940px) 1fr;
@@ -271,9 +287,13 @@ div[class^="col-"] img {
   .grid.third {
     grid-template-columns: 1fr 1fr;
   }
-  .grid.left-focus, .grid.right-focus {
+  .grid.half, .grid.left-focus, .grid.right-focus {
     grid-template-columns: 1fr;
   }
+  .grid.large-gap {
+    grid-column-gap: $-m;
+    grid-row-gap: $-m;
+  }
   .grid.right-focus.reverse-collapse > *:nth-child(2) {
     order: 0;
   }

resources/assets/sass/_text.scss

@@ -149,8 +149,8 @@ em, i, .italic {
 }
 
 small, p.small, span.small, .text-small {
-  font-size: 0.8em;
-  color: lighten($text-dark, 20%);
+  font-size: 0.85em;
+  color: lighten($text-dark, 10%);
   small, p.small, span.small, .text-small {
     font-size: 1em;
   }