strip it down

client/scss/all.scss

@@ -17,11 +17,8 @@
 @import '~button/_button';
 @import '~button-primary/_button-primary';
 @import '~button-secondary/_button-secondary';
-@import '~button-tertiary/_button-tertiary';
 @import '~click-to-copy/_click-to-copy';
-@import '~column/_column';
 @import '~form-feedback/_form-feedback';
-@import '~horizontal-quad-split/_horizontal-quad-split';
 @import '~horizontal-split/_horizontal-split';
 @import '~label/_label';
 @import '~nav-bar/_nav-bar';

client/scss/asset-display/_asset-display.scss

@@ -1,57 +1,39 @@
 .asset-display {
-  background: #F6F6F6;
   display: flex;
   flex-direction: column;
   flex: 1 0 auto;
   justify-content: center;
   position: relative;
   width: 100%;
-
+  $height-delta: 43 / 16 + ($primary-padding * 2); //fix 43!!! nav height
-  &:after {
+  //max-height: calc(100vh - #{$height-delta});
-    background: transparent;
+  height: calc(100vh - #{$height-delta});
-    bottom: 0;
+  overflow: hidden;
-    box-shadow: inset 0 1px 2px 2px $shadow-color;
-    content: '';
-    height: 1px;
-    left: 0;
-    position: absolute;
-    top: auto;
-    width: 100%;
-  }
 }
 
 .asset-title {
   color: #2E2F31;
-  font-size: 26px;
+  font-size: $text-x-large;
   font-weight: normal;
   letter-spacing: 0;
-  line-height: 32px;
+  margin-top: $primary-padding;
-  margin-top: 40px;
   text-align: center;
 
   @media (max-width: $break-point-tablet) {
-    padding: 0 20px;
+    padding: 0 $tertiary-padding;
   }
 }
 
 .asset-image, .asset-video {
-  margin: 60px auto;
   max-height: 100%;
-  max-width: 60vh;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
   object-fit: contain;
   object-position: center;
-
-  @media (max-width: $break-point-small) {
-    max-width: calc(100% - 30px);
-  }
 }
 
-.asset-video {
+/*below must die if this is intended to be shareable component! it also probably doesn't need to be*/
-  border: none;
-  margin: 0px auto;
-  width: 100%;
-  padding: 6px;
-}
 
 .visible-content {
   margin: 0;
@@ -67,15 +49,6 @@
     }
   }
 
-  &:before{
-    box-shadow: inset 2px 3px 3px 2px $shadow-color;
-    content: '';
-    height: 100px;
-    position: absolute;
-    width: 100%;
-    z-index: 100;
-  }
-
   &:after {
     box-shadow: 0px 2px 3px 2px $shadow-color;
     content: '';
@@ -87,16 +60,17 @@
   }
 }
 
-.asset-information-wrap {
+.asset-info {
-  max-width: 800px;
+  $asset-info-width: 1000px;
+  max-width: $asset-info-width;
 
-  @media (max-width: $break-point-tablet) {
+  @media (max-width: $asset-info-width) {
     margin: 0px auto;
     max-width: 100%;
     width: calc(100% - 80px);
   }
 
-  @media (max-width: $break-point-phone) {
+  @media (max-width: $break-point-tablet) {
     width: calc(100% - 30px);
   }
 
@@ -104,10 +78,17 @@
     justify-content: center;
 
     .column {
-      padding-top: 40px;
+      padding-top: $primary-padding;
+      padding-bottom: $primary-padding;
+
+      .row-labeled
+      {
+        margin-bottom: $secondary-padding;
+        &:last-child { margin-bottom: 0; }
+      }
 
       &:first-child {
-        border-right: 1px solid $grey-alt;
+        border-right: 1px solid $grey-border;
         margin-right: -1px;
         padding-right: 40px;
 
@@ -120,7 +101,7 @@
       }
 
       &:last-child {
-        border-left: 1px solid $grey-alt;
+        border-left: 1px solid $grey-border;
         padding-left: 60px;
 
         @media (max-width: $break-point-tablet) {
@@ -153,7 +134,7 @@
     width: 320px;
 
     @media (max-width: $break-point-tablet) {
-      border-bottom: 1px solid $grey-alt;
+      border-bottom: 1px solid $grey-border;
       min-width: 100%;
       padding-bottom: 30px;
       width: 100%;
@@ -163,22 +144,7 @@
 }
 
 .asset-footer {
-  border-top: 1px solid $grey-alt;
+  border-top: 1px solid $grey-border;
-  padding-bottom: 80px;
+  padding: $tertiary-padding $primary-padding;
-  padding-top: 30px;
+  color: $grey;
-
-  @media (max-width: $break-point-tablet) {
-    padding-top: 22px;
-    padding-bottom: 0;
-  }
-
-    .claim-address {
-
-      .link--brand {
-        font-size: 14px;
-        font-weight: 300;
-        line-height: 18px;
-      }
-    }
-
 }

client/scss/button-primary/_button-primary.scss

@@ -1,34 +1,16 @@
-.button-primary, .button-primary:focus, .button-primary:active {
+.button--primary, .button--primary:focus, .button--primary:active {
-  border: $button-border-width $button-border-strength $primary-color;
+  border-color: $primary-color;
-  margin-top: $thin-padding;
-  margin-bottom: $thin-padding;
-  padding: $thin-padding;
   color: $primary-color;
   background-color: $background-color;
-  outline: 0;
 }
 
-.button-primary:focus {
+.button--primary:hover {
-  border-color: $secondary-color;
-  background-color: $tertiary-color;
-}
-
-
-.button-primary:hover {
-  border-color: $interactive-color;
   color: $background-color;
-  background-color: $interactive-color;
+  background-color: $primary-color;
 }
 
-.button-primary:active{
+.button--primary:active {
-  border-color: $background-color;
+  $color: darken($primary-color, 10%);
-  color: $secondary-color;
+  border-color: $color;
-  background-color: $tertiary-color;
+  background-color: $color;
-}
+}
-
-.button-primary--jumbo, .button-primary--jumbo:focus, .button-primary--jumbo:active {
-  width: $button-full-width;
-  padding-top: $secondary-padding;
-  padding-bottom: $secondary-padding;
-  font-size: x-large;
-}

client/scss/button-secondary/_button-secondary.scss

@@ -1,21 +1,11 @@
-.button--secondary, .button--secondary:focus {
+.button--secondary, .button--secondary:focus, .button--secondary:active  {
-  border: 0;
+  border-bottom-color: $secondary-color;
-  border-bottom: $button-border-width $button-border-strength $primary-color;
+  color: $secondary-color;
-  padding: 0.5em;
-  color: $primary-color;
   background-color: $background-color;
-  outline: 0;
-}
-
-.button--secondary:focus{
-  border-color: $secondary-color;
-  background-color: $tertiary-color;
-}
-
-.button--secondary:hover {
-  color: $interactive-color;
 }
 
 .button--secondary:active {
-  color: $background-color;
+  $color: darken($secondary-color, 10%);
+  color: $color;
+  border-bottom-color: $color;
 }

client/scss/button-tertiary/_button-tertiary.scss

@@ -1,14 +0,0 @@
-.button--tertiary, .button--tertiary:focus, .button--tertiary:active {
-  border: 0;
-  color: $secondary-color;
-  background-color: $background-color;
-}
-
-.button--tertiary:hover {
-  color: $primary-color;
-}
-
-.button--tertiary:active, .button--tertiary:focus {
-  color: $secondary-color;
-  background-color: $tertiary-color;
-}

client/scss/button/_button.scss

@@ -1,3 +1,21 @@
 button {
   cursor: pointer;
+  &:active
+  {
+    outline: 0;
+  }
+}
+
+.button--primary, .button--secondary
+{
+  border-width: $button-border-width;
+  border-style: $button-border-strength;
+  border-color: transparent;
+  padding: $thin-padding;
+}
+
+
+.button--jumbo, .button--jumbo:focus, .button--jumbo:active {
+  width: $button-full-width;
+  font-size: x-large;
 }

client/scss/click-to-copy/_click-to-copy.scss

@@ -4,22 +4,20 @@
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  border: 1px solid $grey-alt;
+  border: 1px solid $grey-border;
   border-radius: 6px;
   .click-to-copy {
     border: none;
     padding: 0.36em 0.5em;
     margin: 0;
-    color: black;
     background-color: transparent;
     width: calc(100% - 1em - 2px);
     font-size: 14px;
-    color: #2E2F31;
     letter-spacing: -0.6px;
     line-height: 20px;
     letter-spacing: 0;
     font-family: monospace;
-    border-right: 1px solid $grey-alt;
+    border-right: 1px solid $grey-border;
   }
   .icon-wrap {
     width: 30px;
@@ -27,7 +25,7 @@
     line-height: 34px;
     text-align: center;
     svg {
-      stroke: $brand-color;
+      stroke: $primary-color;
       width: 16px;
       height: 16px;
     }

client/scss/column/_column.scss

@@ -1,4 +0,0 @@
-.column {
-  padding-left: $primary-padding;
-  padding-right: $primary-padding;
-}

client/scss/dropzone/_dropzone.scss

@@ -16,6 +16,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  user-select: none;
 }
 
 .dropzone:hover, .dropzone--active {
@@ -28,6 +29,11 @@
   text-align: center;
 }
 
+.dropzone-dropit-display
+{
+  color: $primary-color;
+}
+
 .dropzone-preview-wrapper {
   position: relative;
   width: 100%;
@@ -49,3 +55,7 @@
   padding: 1em;
   width: calc(100% - 2em);
 }
+
+.dropzone-instructions-display__chooser-label {
+  text-decoration: underline;
+}

client/scss/horizontal-quad-split/_horizontal-quad-split.scss

@@ -1,53 +0,0 @@
-.horizontal-quad-split {
-  display       : flex;
-  flex-direction : row;
-  justify-content: space-between;
-  align-items    : flex-start;
-  .left-side, .right-side {
-    width          : 50%;
-    display        : flex;
-    flex-direction : row;
-    justify-content: space-between;
-    align-items    : flex-start;
-    .column-a, .column-b, .column-c, .column-d {
-      width: 50%;
-    };
-    .column-a, .column-b, .column-c {
-      padding-right: $secondary-padding;
-    };
-  };
-};
-
-
-
-@media (max-width: $break-point-large ) {
-
-  .horizontal-quad-split {
-    flex-direction : column;
-    .left-side, .right-side {
-      width          : 100%;
-      .column-a, .column-b, .column-c, .column-d {
-        width: 50%;
-      };
-      .column-b {
-        padding-right: 0;
-      }
-    }
-  };
-
-}
-
-@media (max-width: $break-point-medium ) {
-
-  .horizontal-quad-split {
-    flex-direction : column;
-    .left-side, .right-side {
-      flex-direction : column;
-      .column-a, .column-b, .column-c, .column-d {
-        width: 100%;
-        padding: 0;
-      };
-    }
-  };
-
-}

client/scss/horizontal-split/_horizontal-split.scss

@@ -1,28 +1,39 @@
 .horizontal-split {
+  max-width: $width-content-constrained;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
   display       : flex;
   flex-direction : row;
   justify-content: space-between;
-
-  .column {
-    width: 50%;
-  }
 };
 
+.horizontal-split__column {
+  width: 50%;
+  flex: 1 0 auto;
+  box-sizing: border-box;
+}
 
+.horizontal-split__column--left {
+  padding-right: $primary-padding;
+}
+
+.horizontal-split__column--right {
+  padding-left: $primary-padding;
+}
 
 @media (max-width: $break-point-tablet) {
 
-  .horizontal-split {
+  .horizontal-split__column {
     display       : flex;
     flex-direction : column;
     justify-content: space-between;
-
-    .column {
-      width: 100%;
-      padding-left: 0;
-      padding-right: 0;
-      padding-bottom: $secondary-padding;
-    }
   };
 
+  .column {
+    width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: $secondary-padding;
+  }
 }

client/scss/input/_input.scss

@@ -4,7 +4,6 @@ input:-webkit-autofill {
 
 input {
   margin: 0;
-  outline: none;
   padding: $input-padding;
   border: 0;
   background-color: $background-color;

client/scss/label/_label.scss

@@ -11,7 +11,7 @@
   cursor: pointer;
 }
 
-@media (max-width: $break-point-medium ) {
+@media (max-width: $break-point-tablet ) {
 
   // note: bolding break point lines up with row-label break point
   .label, .label-radio {

client/scss/link/_link.scss

@@ -3,76 +3,19 @@ a, a:visited {
 }
 
 .link--primary, .link--primary:visited {
-  color: $interactive-color;
+  color: $primary-color;
-}
+  &:hover { text-decoration: underline; }
-
-.link--brand, .link--brand:visited {
-  color: $brand-color;
-}
-
-.link--secondary, .link--secondary:visited {
-  margin: 0px;
-  padding: 0.3em;
-  color: $secondary-color;
 }
 
 .link--nav {
-  color: $primary-color;
+  color: $text-color;
   border-bottom: 2px solid white;
+  &:hover {
+    color: $primary-color;
+  }
 }
 
-.link--nav:hover {
-  color: $interactive-color;
-}
 
 .link--nav-active {
-  color: $interactive-color;
+  border-bottom: 2px solid $primary-color;
-  border-bottom: 2px solid $interactive-color;
+}
-}
-
-
-.link--icon, .link--icon:visited {
-  display: flex;
-  align-items: center;
-  
-  .link-text {
-    padding-bottom: 2px;
-    border-bottom: 1px solid transparent;
-    transition: all 0.2s ease;
-  }
-  .icon-wrap {
-    margin-left: 5px;
-    padding-top: 0px;
-    align-items: center;
-    svg {
-      width: 16px;
-      height: 16px;
-      stroke: $grey;
-      transition: all 0.2s ease;
-    }
-
-    @media (max-width: $break-point-x-small) {
-      padding-top: 0;
-    }
-  }
-  &:hover {
-    .link-text {
-      border-bottom: 1px solid $brand-color;
-    }
-    svg {
-      stroke: $brand-color;
-    }
-  }
-}
-
-
-.link--hover {
-  display: inline-block;
-  padding-bottom: 2px;
-  border-bottom: 1px solid transparent;
-  transition: all 0.2s ease;
-  &:hover {
-    border-bottom: 1px solid $brand-color;
-  }
-}
-

client/scss/media-queries/_media-queries.scss

@@ -4,21 +4,4 @@
     display: none;
   }
 
-}
+}
-
-@media (max-width: $break-point-large ) {
-
-}
-
-@media (max-width: $break-point-medium) {
-
-
-}
-
-@media (max-width: $break-point-small) {
-
-}
-
-@media (max-width: $break-point-x-small ) {
-
-}

client/scss/nav-bar/_nav-bar.scss

@@ -1,13 +1,12 @@
 .nav-bar {
-  padding-left: $primary-padding;
+  margin-left: $primary-padding;
-  padding-right: $primary-padding;
+  margin-right: $primary-padding;
   
-  @media (max-width: $break-point-phone) {
+  @media (max-width: $break-point-mobile) {
-    padding-left: 15px;
+    margin-left: 15px;
-    padding-right: 15px;
+    margin-right: 15px;
   }
 
-  // border-bottom: 0.5px solid $tertiary-color;
   .select--arrow {
     padding: 0 1.5em 0 $input-padding;
     font-size: 14px;
@@ -28,7 +27,7 @@
   cursor: pointer;
 }
 
-@media (max-width: $break-point-medium ) {
+@media (max-width: $break-point-tablet ) {
   .nav-bar-link {
     padding-top: calc(1em - 2px);
     padding-right: 1em;
@@ -38,7 +37,7 @@
   
 }
 
-@media (max-width: $break-point-small ) {
+@media (max-width: $break-point-mobile ) {
   .nav-bar-link {
     padding-top: calc(0.5em - 2px);
     padding-right: 0.5em;

client/scss/page-layout/_page-layout.scss

@@ -7,5 +7,21 @@
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
+    margin: $secondary-padding;
   }
 }
+
+@media (max-width: $break-point-tablet) {
+  .page-layout .content { margin: $thin-padding; }
+}
+
+@media (max-width: $break-point-mobile) {
+  max-width: calc(100% - 30px);
+}
+
+//below should take some styles from _text.scss and probably elsewhere and become "markdown" or "rich" styles
+.page-layout {
+  p {
+    margin-bottom: $tertiary-padding;
+  }
+}

client/scss/progress-bar/_progress-bar.scss

@@ -1,5 +1,5 @@
 .progress-bar--inactive {
-  color: $secondary-color;
+  color: $grey;
 }
 
 .progress-bar--active {

client/scss/publish-preview/_publish-preview.scss

@@ -1,3 +1,9 @@
+.publish-form__title {
+  max-width: $width-content-constrained;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .publish-preview-dim {
   opacity: 0.2;
 }

client/scss/publish-url-input/_publish-url-input.scss

@@ -17,5 +17,5 @@
 .publish-url-text {
   margin: 0;
   padding: 0;
-  color: $secondary-color;
+  color: $help-color;
 }

client/scss/reset/_reset.scss

@@ -0,0 +1,4 @@
+button, input, textarea, label, select, option {
+  font-family: inherit;
+  font-size: inherit;
+}

client/scss/row/_row.scss

@@ -1,5 +1,5 @@
 .row {
-  padding-bottom: 1.2em;
+  margin-bottom: 1.2em;
 }
 
 .row-labeled {
@@ -10,77 +10,26 @@
 }
 
 .row-labeled-label {
-  align-self: flex-start;
   width: 30%;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  //bad, fix this
+  .label { padding-top: 0; padding-bottom: 0; }
 }
 .row-labeled-content {
   align-self: center;
   width: 70%;
 }
 
-.row-labeled-alt {
+@media (max-width: $break-point-tablet ) {
-  display: column;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-
-  .row-labeled-label {
-    align-self: flex-start;
-    width: 100%;
-    color: $grey;
-    .label {
-      font-weight: bold;
-      text-transform: uppercase;
-      font-size: 13px;
-      letter-spacing: 0.4px;
-      line-height: 18px;
-    }
-  }
-
-  .row-labeled-content {
-    align-self: center;
-    width: 100%;
-  }
-}
-
-
-@media (max-width: $break-point-medium ) {
-
   .row-labeled {
     flex-direction: column;
   }
-
   .row-labeled-label {
     width: 100%;
   }
   .row-labeled-content {
     width: 100%;
   }
-
+}
-}
-
-
-@media (max-width: $break-point-tablet) and (min-width: $break-point-phone) {
-  .row {
-    margin-bottom: 1.4em;
-  }
-
-  .tablet-inline-row {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-
-    >.row {
-      flex: 1;
-      margin: 0 15px 1.4em;
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-}

client/scss/select/_select.scss

@@ -1,9 +1,5 @@
 select {
   margin: 0;
-  outline: none;
-  padding: $input-padding;
-  border: 0;
-  background-color: $background-color;
   display: inline-block;
 }
 

client/scss/share-buttons/_share-buttons.scss

@@ -45,7 +45,7 @@
     }
     
     &:hover {
-      background: $brand-color;
+      background: $primary-color;
     }
   }
 }

client/scss/social-share-link/_social-share-link.scss

@@ -7,5 +7,4 @@
 .social-share-link > a{
   padding-right:0.5em;
   padding-left:0.5em;
-  padding-bottom:0.3em;
 }

client/scss/text/_text.scss

@@ -4,6 +4,12 @@ h1, h2, h3, h4, p {
   margin: 0;
 }
 
+body {
+  color: $text-color;
+  font-family: 'Circular', serif;
+  font-size: 16px;
+}
+
 h1 {
  font-size: $text-xx-large;
 }
@@ -14,12 +20,6 @@ h2 {
 
 h3 {
   font-size: $text-large;
-  font-weight: bold;
-}
-
-p, body, button, input, textarea, label, select, option {
-  font-family: 'Circular', serif;
-  font-size: 16px;
 }
 
 .text--extra-large {
@@ -42,24 +42,12 @@ p, body, button, input, textarea, label, select, option {
   font-size: $text-x-small;
 }
 
-.text--underline {
-  text-decoration: underline;
-}
-
-.text--primary {
-  color: $primary-color;
-}
-
 .text--secondary {
-  color: $secondary-color;
+  color: $help-color;
-}
-
-.text--tertiary {
-  color: $tertiary-color;
 }
 
 .text--interactive {
-  color: $interactive-color;
+  color: $primary-color;
 }
 
 .text--failure {
@@ -101,7 +89,7 @@ p, body, button, input, textarea, label, select, option {
 
 }
 
-@media (max-width: $break-point-medium) {
+@media (max-width: $break-point-tablet) {
 
   h1 {
     font-size: $text-large;
@@ -134,7 +122,7 @@ p, body, button, input, textarea, label, select, option {
 
 }
 
-@media (max-width: $break-point-x-small) {
+@media (max-width: $break-point-mobile) {
 
   h1 {
     font-size: $text-medium;

client/scss/textarea/_textarea.scss

@@ -1,10 +1,6 @@
 textarea {
   margin: 0;
-  outline: none;
   padding: $input-padding;
-  border: 0;
-  border-bottom: 1px solid $secondary-color;
-  background-color: $background-color;
   display: inline-block;
   width: $input-full-width;
 }

client/scss/variables/_variables.scss

@@ -1,14 +1,11 @@
 $base-color: white;
-$primary-color: black;
+$primary-color: #005da0;
-$secondary-color: #9b9b9b;
+$secondary-color: $primary-color;
-$tertiary-color: #ccccc0;
-$interactive-color: blue;
 $success-color: green;
 $failure-color: red;
-// $brand-color: #ff725d;
-$brand-color: #1944F9;
 $grey: #9095A5;
-$grey-alt: #DDDFE4;
+$help-color: $grey;
+$grey-border: #DDDFE4;
 $shadow-color: rgba(169, 173, 186, 0.2);
 
 $primary-padding: 3em;
@@ -17,8 +14,10 @@ $tertiary-padding: 1em;
 $thin-padding: 0.3em;
 $full-width-thin-padding: calc(100% - 0.6em);
 
+$width-content-constrained: 1000px;
+
 $background-color: $base-color;
-$font-color: $primary-color;
+$text-color: #333;
 
 $button-border-width: 1px;
 $button-border-strength: solid;
@@ -28,18 +27,14 @@ $input-padding: 0.3em;
 $input-full-width: calc(100% - 0.6em);
 
 $text-xx-large: 2.5em;
-$text-x-large: xx-large;
+$text-x-large: x-large;
-$text-large: x-large;
+$text-large: large;
-$text-medium: large;
+$text-medium: medium;
-$text-small: medium;
+$text-small: small;
 $text-x-small: small;
 
 $break-point-xx-large: 1400px;
 $break-point-x-large: 1290px;
 $break-point-large: 1000px;
-$break-point-tablet: 900px;
+$break-point-tablet: 800px;
-$break-point-medium: 800px;
+$break-point-mobile: 500px;
-$break-point-phone: 640px;
-$break-point-small: 500px;
-$break-point-x-small: 400px;
-

client/scss/vertical-split/_vertical-split.scss

@@ -1,4 +1,4 @@
-.vertical-split {
+.vertical-split, .visible-content {
   flex           : 1 0 auto;
   display        : flex;
   flex-direction : column;
@@ -6,7 +6,13 @@
   align-items    : center;
 };
 
+.asset-display-wrap
+{
+  flex-grow: 1;
+}
+
 .collapse-content {
+  flex-grow: 0;
   @media (max-width: $break-point-tablet) {
     max-width: 100%;
     width: 100%;
@@ -18,7 +24,6 @@
 }
 
 .collapse-button {
-  outline: none;
   background: none;
   border: none;
   display: block;
@@ -34,7 +39,7 @@
   }
 
   svg {
-    stroke: $brand-color;
+    stroke: $primary-color;
     &.plus-icon {
       transform: rotate(0);
       transition: all 0.4s ease;

client/src/components/AboutSpeechDetails/index.jsx

@@ -7,9 +7,9 @@ const AboutSpeechDetails = () => {
     <div>
       <Row>
         <p className={'text--large'}>
-          <Link to='/tos'>Terms of Service</Link>
+          <Link className={'link--primary'} to='/tos'>Terms of Service</Link>
           <br />
-          <Link to='/faq'>Frequently Asked Questions</Link>
+          <Link className={'link--primary'} to='/faq'>Frequently Asked Questions</Link>
         </p>
       </Row>
       <Row>

client/src/components/AboutSpeechOverview/index.jsx

@@ -8,18 +8,12 @@ const AboutSpeechOverview = () => {
         <p className={'text--extra-large'}>Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own.</p>
       </Row>
       <Row>
-        <p className={'text--large'}>
+        <div className={'text--large'}>
-          <a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a>
+          <a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a><br/>
-        </p>
+          <a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a><br/>
-        <p className={'text--large'}>
+          <a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a><br/>
-          <a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a>
+          <a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a><br/>
-        </p>
+        </div>
-        <p className={'text--large'}>
-          <a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a>
-        </p>
-        <p className={'text--large'}>
-          <a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a>
-        </p>
       </Row>
     </div>
   );

client/src/components/AssetInfoFooter/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Row from '@components/Row';
+
+const AssetInfoFooter = ({ assetUrl, name }) => {
+  return (
+    <div className='asset-footer'>
+      <p>
+        Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
+      </p>
+    </div>
+  );
+};
+
+export default AssetInfoFooter;

client/src/components/AssetShareButtons/index.js

@@ -9,45 +9,49 @@ const AssetShareButtons = ({ assetUrl, name }) => {
         target='_blank'
         href={`https://twitter.com/intent/tweet?text=${assetUrl}`}
       >
-        <img src='/assets/img/twitter.svg' />
+        <img src='/assets/img/icn_twitter.svg' />
       </a>
       <a
         className='link--primary facebook'
         target='_blank'
         href={`https://www.facebook.com/sharer/sharer.php?u=${assetUrl}`}
       >
-        <img src='/assets/img/facebook.svg' />
+        <img src='/assets/img/icn_facebook.svg' />
       </a>
       <a
         className='link--primary tumblr'
         target='_blank'
         href={`https://tumblr.com/widgets/share/tool?canonicalUrl=${assetUrl}`}
       >
-        <img src='/assets/img/tumblr.svg' />
+        <img src='/assets/img/icn_tumblr.svg' />
       </a>
       <a
         className='link--primary reddit'
         target='_blank'
         href={`https://www.reddit.com/submit?url=${assetUrl}&title=${name}`}
       >
-        <img src='/assets/img/reddit.svg' />
+        <img src='/assets/img/icn_reddit.svg' />
-      </a>
-      <a
-        className='link--primary'
-        target='_blank'
-        href={`https://sharetomastodon.github.io/?title=${name}&url=${assetUrl}`}
-      >
-        mastodon
-      </a>
-      <a
-        className='link--primary'
-        target='_blank'
-        href={`https://share.diasporafoundation.org/?title=${name}&url=${assetUrl}`}
-      >
-        diaspora
       </a>
     </SocialShareLink>
   );
 };
+//
+// Additional icons disabled. If you want to add additional icons, you have to solve
+// https://github.com/lbryio/spee.ch/issues/687
+//
+// <a
+//   className='link--primary'
+//   target='_blank'
+//   href={`https://sharetomastodon.github.io/?title=${name}&url=${assetUrl}`}
+// >
+//   mastodon
+// </a>
+// <a
+//   className='link--primary'
+//   target='_blank'
+//   href={`https://share.diasporafoundation.org/?title=${name}&url=${assetUrl}`}
+// >
+//   diaspora
+// </a>
 
 export default AssetShareButtons;

client/src/components/ButtonPrimary/index.jsx

@@ -4,7 +4,7 @@ const ButtonPrimary  = ({ value, onClickHandler, type = 'button' }) => {
   return (
     <button
       type={type}
-      className={'button button-primary'}
+      className={'button button--primary'}
       onClick={onClickHandler}
     >
       {value}

client/src/components/ButtonPrimaryJumbo/index.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const ButtonPrimaryJumbo  = ({ value, onClickHandler }) => {
   return (
     <button
-      className={'button button-primary button-primary--jumbo'}
+      className={'button button--primary button--jumbo'}
       onClick={onClickHandler}
     >
       {value}

client/src/components/ButtonTertiary/index.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-const ButtonTertiary  = ({ value, onClickHandler }) => {
-  return (
-    <button
-      className={'button button--tertiary'}
-      onClick={onClickHandler}
-    >
-      {value}
-    </button>
-  );
-};
-
-export default ButtonTertiary;

client/src/components/ChannelAbout/index.jsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 const ChannelAbout = () => {
   return (
-    <div>
+    <div className={'text--large'}>
-      <p className={'text--large'}>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
+      <p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.</p>
+      <p>You can create 1 channel, or 100, so whether you're <a className='link--primary' target='_blank' href='/@catalonia2017:43dcf47163caa21d8404d9fe9b30f78ef3e146a8'>documenting important events</a>, or making a public repository for <a className='link--primary' target='_blank' href='/@catGifs'>cat gifs</a> (password: '1234'), try creating a channel for it!</p>
     </div>
   );
 };

client/src/components/Column/index.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-class Column extends React.Component {
-  render () {
-    return (
-      <div className={'column'}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-export default Column;

client/src/components/DropzoneDropItDisplay/index.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const DropzoneDropItDisplay = () => {
   return (
     <div className={'dropzone-dropit-display'}>
-      <p className={'text--interactive'}>Drop it.</p>
+      Drop it.
     </div>
   );
 }

client/src/components/DropzoneInstructionsDisplay/index.jsx

@@ -6,15 +6,15 @@ const DropzoneInstructionsDisplay = ({fileError}) => {
   return (
     <div className={'dropzone-instructions-display'}>
       <Row>
-        <p className={'text--large'}>Drag & drop image or video here to publish</p>
+        <span className={'text--large'}>Drag & drop image or video here to publish</span>
       </Row>
       <Row>
-        <p className={'text--small'}>OR</p>
+        <span className={'text--small text--secondary'}>OR</span>
       </Row>
       { fileError ? (
         <div>
           <Row>
-            <p className={'text--large text--underline'}>CHOOSE FILE</p>
+            <span className={'text--large dropzone-instructions-display__chooser-label'}>CHOOSE FILE</span>
           </Row>
           <FormFeedbackDisplay
             errorMessage={fileError}
@@ -22,7 +22,7 @@ const DropzoneInstructionsDisplay = ({fileError}) => {
           />
         </div>
       ) : (
-        <p className={'text--large text--underline'}>CHOOSE FILE</p>
+        <span className={'text--large dropzone-instructions-display__chooser-label'}>CHOOSE FILE</span>
       )}
     </div>
   );

client/src/components/FormFeedbackDisplay/index.jsx

@@ -4,13 +4,13 @@ const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
   return (
     <div className={'form-feedback'}>
       { errorMessage ? (
-        <p className={'text--small text--failure'}>{errorMessage}</p>
+        <span className={'text--small text--failure'}>{errorMessage}</span>
       ) : (
         <div>
           { defaultMessage ? (
-            <p className={'text--small text--secondary'}>{defaultMessage}</p>
+            <span className={'text--small text--secondary'}>{defaultMessage}</span>
           ) : (
-            <p className={'text--small'}>&nbsp;</p>
+            <span className={'text--small'}>&nbsp;</span>
           )}
         </div>
       )}

client/src/components/HorizontalQuadSplit/index.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import Row from '@components/Row';
-
-class HorizontalTriSplit extends React.Component {
-  render () {
-    return (
-      <div className={'horizontal-quad-split'}>
-        <div className={'left-side'}>
-          <div className={'column-a'}>
-            <Row>
-              {this.props.columnA}
-            </Row>
-          </div>
-          <div className={'column-b'}>
-            <Row>
-              {this.props.columnB}
-            </Row>
-          </div>
-        </div>
-        <div className={'right-side'}>
-          <div className={'column-c'}>
-            <Row>
-              {this.props.columnC}
-            </Row>
-          </div>
-          <div className={'column-d'}>
-            <Row>
-              {this.props.columnD}
-            </Row>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default HorizontalTriSplit;

client/src/components/HorizontalSplit/index.jsx

@@ -4,10 +4,10 @@ class HorizontalSplit extends React.Component {
   render () {
     return (
       <div className={'horizontal-split'}>
-        <div className={'column'}>
+        <div className={'horizontal-split__column horizontal-split__column--left'}>
           {this.props.leftSide}
         </div>
-        <div className={'column'}>
+        <div className={'horizontal-split__column horizontal-split__column--right'}>
           {this.props.rightSide}
         </div>
       </div>

client/src/components/PublishPreview/index.jsx

@@ -5,13 +5,17 @@ import PublishDetails from '@containers/PublishDetails';
 import PublishTitleInput from '@containers/PublishTitleInput';
 import Row from '@components/Row';
 
+// this class seems more like PublishForm and should probably be renamed
+
 class PublishPreview extends React.Component {
   render () {
     return (
-      <div>
+      <div className={'publish-form'}>
-        <Row>
+        <div className={'publish-form__title'}>
-          <PublishTitleInput />
+          <Row>
-        </Row>
+            <PublishTitleInput />
+          </Row>
+        </div>
         <HorizontalSplit
           leftSide={<Dropzone />}
           rightSide={<PublishDetails />}

client/src/components/RowLabeledAlt/index.jsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-class RowLabeledAlt extends React.Component {
-  render () {
-    return (
-      <div className={'row-labeled-alt'}>
-        <div className={'row-labeled-label'}>{this.props.label}</div>
-        <div className={'row-labeled-content'}>{this.props.content}</div>
-      </div>
-    );
-  }
-}
-
-export default RowLabeledAlt;

client/src/components/VerticalCollapsibleSplit/index.jsx

@@ -5,11 +5,18 @@ class VerticalCollapsibleSplit extends React.Component {
   constructor (props) {
     super(props);
     this.collapse = this.collapse.bind(this);
-    this.state = { closed: false };
+    this.storageKey = 'vert-split-state-' + this.props.name;
+    // const closed = window && window.localStorage
+    //   ? !!window.localStorage.getItem(this.storageKey) : false;
+    const closed = false;
+    this.state = { closed: closed };
   }
 
   collapse () {
     this.setState({ closed: !this.state.closed });
+    // if (window && window.localStorage) {
+    //   window.localStorage.setItem(this.storageKey, !this.state.closed);
+    // }
     document.querySelectorAll(`[data-name='${this.props.name}']`).forEach(el => el.classList.toggle('closed'));
   }
 

client/src/containers/AssetInfo/view.jsx

@@ -11,6 +11,7 @@ import HorizontalSplit from '@components/HorizontalSplit';
 import siteConfig from '@config/siteConfig.json';
 const { details: { host } } = siteConfig;
 import createCanonicalLink from '../../../../utils/createCanonicalLink';
+import AssetInfoFooter from '../../components/AssetInfoFooter/index';
 
 class AssetInfo extends React.Component {
   render () {
@@ -29,129 +30,111 @@ class AssetInfo extends React.Component {
       channelCanonicalUrl = `${createCanonicalLink({channel})}`;
     }
     return (
-      <div className='asset-information-wrap'>
+      <div className='asset-info'>
         <HorizontalSplit
           leftSide={
             description && (
-              <Row>
+              <p className='asset-info__description'>{description}</p>
-                <p>{description}</p>
-              </Row>
             )
           }
           rightSide={
             <div>
               {channelName && (
-                <Row>
+                <RowLabeled
-                  <RowLabeled
+                  label={
-                    label={
+                    <Label value={'Channel'} />
-                      <Label value={'Channel:'} />
+                  }
-                    }
+                  content={
-                    content={
+                    <span className='text'>
-                      <span className='text'>
+                      <Link className='link--primary' to={channelCanonicalUrl}>{channelName}</Link>
-                        <Link to={channelCanonicalUrl}>{channelName}</Link>
+                    </span>
-                      </span>
+                  }
-                    }
+                />
-                  />
-                </Row>
               )}
 
               {claimViews ? (
-                <Row>
+                <RowLabeled
-                  <RowLabeled
+                  label={
-                    label={
+                    <Label value={'Views'} />
-                      <Label value={'Views:'} />
+                  }
-                    }
+                  content={
-                    content={
+                    <span className='text'>
-                      <span className='text'>
+                      {claimViews}
-                        {claimViews}
+                    </span>
-                      </span>
+                  }
-                    }
+                />
-                  />
-                </Row>
               ) : null}
 
-              <Row>
+              <RowLabeled
-                <RowLabeled
+                label={
-                  label={
+                  <Label value={'Share'} />
-                    <Label value={'Share:'} />
+                }
-                  }
+                content={
-                  content={
+                  <AssetShareButtons
-                    <AssetShareButtons
+                    name={name}
-                      name={name}
+                    assetUrl={assetCanonicalUrl}
-                      assetUrl={assetCanonicalUrl}
+                  />
-                    />
+                }
-                  }
+              />
-                />
-              </Row>
 
-              <Row>
+              <RowLabeled
-                <RowLabeled
+                label={
-                  label={
+                  <Label value={'Link'} />
-                    <Label value={'Link:'} />
+                }
-                  }
+                content={
-                  content={
+                  <ClickToCopy
-                    <ClickToCopy
+                    id={'short-link'}
-                      id={'short-link'}
+                    value={assetCanonicalUrl}
-                      value={assetCanonicalUrl}
+                  />
-                    />
+                }
-                  }
+              />
-                />
-              </Row>
 
-              <Row>
+              <RowLabeled
-                <RowLabeled
+                label={
-                  label={
+                  <Label value={'Embed'} />
-                    <Label value={'Embed:'} />
+                }
-                  }
+                content={
-                  content={
+                  <div>
-                    <div>
+                    {(contentType === 'video/mp4') ? (
-                      {(contentType === 'video/mp4') ? (
+                      <ClickToCopy
-                        <ClickToCopy
+                        id={'embed-text-video'}
-                          id={'embed-text-video'}
+                        value={`<iframe src="${host}/video-embed${canonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`}
-                          value={`<iframe src="${host}/video-embed${canonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`}
+                      />
-                        />
+                    ) : (
-                      ) : (
+                      <ClickToCopy
-                        <ClickToCopy
+                        id={'embed-text-image'}
-                          id={'embed-text-image'}
+                        value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`}
-                          value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`}
+                      />
-                        />
+                    )}
-                      )}
+                  </div>
-                    </div>
+                }
-                  }
+              />
-                />
-              </Row>
 
-              <Row>
+              <SpaceBetween>
-                <SpaceBetween>
+                <a
-                  <a
+                  className='link--primary'
-                    className='link--primary'
+                  href={`${assetCanonicalUrl}.${fileExt}`}
-                    href={`${assetCanonicalUrl}.${fileExt}`}
+                >
-                  >
+                  Direct Link
-                    Direct Link
+                </a>
-                  </a>
+                <a
-                  <a
+                  className={'link--primary'}
-                    className={'link--primary'}
+                  href={`${assetCanonicalUrl}.${fileExt}`}
-                    href={`${assetCanonicalUrl}.${fileExt}`}
+                  download={name}
-                    download={name}
+                >
-                  >
+                  Download
-                    Download
+                </a>
-                  </a>
+                <a
-                  <a
+                  className={'link--primary'}
-                    className={'link--primary'}
+                  target='_blank'
-                    target='_blank'
+                  href='https://lbry.io/dmca'
-                    href='https://lbry.io/dmca'
+                >
-                  >
+                  Report
-                    Report
+                </a>
-                  </a>
+              </SpaceBetween>
-                </SpaceBetween>
-              </Row>
             </div>
           } />
-        <Row>
+        <AssetInfoFooter/>
-          <p>
-            Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
-          </p>
-        </Row>
       </div>
     );
   }

client/src/containers/ChannelCreateForm/view.jsx

@@ -81,7 +81,7 @@ class ChannelCreateForm extends React.Component {
         </form>
         ) : (
           <div>
-            <p className={'text--small text--secondary'}>{status}</p>
+            <span className={'text--small text--secondary'}>{status}</span>
             <ProgressBar size={12} />
           </div>
         )}

client/src/containers/ChannelTools/view.jsx

@@ -8,11 +8,11 @@ class ChannelTools extends React.Component {
     return (
       <div>
         <Row>
-          <h3>Log in to an existing channel:</h3>
+          <h3>Log in to existing channel</h3>
           <ChannelLoginForm />
         </Row>
         {!this.props.closedRegistration && (<Row>
-          <h3>Create a brand new channel:</h3>
+          <h3>Create new channel</h3>
           <ChannelCreateForm />
         </Row>)}
       </div>

client/src/containers/PublishDetails/view.jsx

@@ -6,7 +6,7 @@ import PublishMetadataInputs from '@containers/PublishMetadataInputs';
 import ChannelSelect from '@containers/ChannelSelect';
 import Row from '@components/Row';
 import ButtonPrimaryJumbo from '@components/ButtonPrimaryJumbo';
-import ButtonTertiary from '@components/ButtonTertiary';
+import ButtonSecondary from '@components/ButtonSecondary';
 import SpaceAround from '@components/SpaceAround';
 import PublishFinePrint from '@components/PublishFinePrint';
 
@@ -48,7 +48,7 @@ class PublishDetails extends React.Component {
 
         <Row>
           <SpaceAround>
-            <ButtonTertiary
+            <ButtonSecondary
               value={'Cancel'}
               onClickHandler={this.props.clearFile}
             />

client/src/containers/PublishMetadataInputs/view.jsx

@@ -3,6 +3,7 @@ import PublishDescriptionInput from '@components/PublishDescriptionInput';
 import PublishLicenseInput from '@components/PublishLicenseInput';
 import PublishNsfwInput from '@components/PublishNsfwInput';
 import ButtonSecondary from '@components/ButtonSecondary';
+import Row from '@components/Row';
 
 class PublishMetadataInputs extends React.Component {
   constructor (props) {
@@ -29,19 +30,25 @@ class PublishMetadataInputs extends React.Component {
     return (
       <div>
         {this.props.showMetadataInputs && (
-          <div>
+          <React.Fragment>
-            <PublishDescriptionInput
+            <Row>
-              description={this.props.description}
+              <PublishDescriptionInput
-              handleInput={this.handleInput}
+                description={this.props.description}
-            />
+                handleInput={this.handleInput}
-            <PublishLicenseInput
+              />
-              handleSelect={this.handleSelect}
+            </Row>
-            />
+            <Row>
-            <PublishNsfwInput
+              <PublishLicenseInput
-              nsfw={this.props.nsfw}
+                handleSelect={this.handleSelect}
-              handleInput={this.handleInput}
+              />
-            />
+            </Row>
-          </div>
+            <Row>
+              <PublishNsfwInput
+                nsfw={this.props.nsfw}
+                handleInput={this.handleInput}
+              />
+            </Row>
+          </React.Fragment>
         )}
         <ButtonSecondary
           value={this.props.showMetadataInputs ? 'less' : 'more'}

client/src/containers/PublishThumbnailInput/view.jsx

@@ -126,7 +126,7 @@ class PublishThumbnailInput extends React.Component {
               </div>
             </div>
           ) : (
-            <p className={'text--small text--secondary'}>loading... </p>
+            <span className={'text--small text--secondary'}>loading... </span>
           )
         }
         <FormFeedbackDisplay

client/src/pages/ShowAssetDetails/view.jsx

@@ -6,6 +6,16 @@ import AssetDisplay from '@containers/AssetDisplay';
 import AssetInfo from '@containers/AssetInfo';
 import ErrorPage from '@pages/ErrorPage';
 
+/*
+
+          <VerticalCollapsibleSplit
+            name={'asset-display-collapse'}
+            top={}
+            bottom={<AssetInfo />}
+          />
+
+ */
+
 class ShowAssetDetails extends React.Component {
   render () {
     const { asset } = this.props;
@@ -16,11 +26,8 @@ class ShowAssetDetails extends React.Component {
           pageTitle={`${name} - details`}
           asset={asset}
         >
-          <VerticalCollapsibleSplit
+          <AssetDisplay />
-            name={'asset-display-collapse'}
+
-            top={<AssetDisplay />}
-            bottom={<AssetInfo />}
-          />
         </PageLayout>
       );
     }