Merge pull request #719 from lbryio/redesign

Redesign

.gitignore

@@ -17,3 +17,7 @@ public/bundle/Lekton-*
 public/bundle/style.css
 
 uploads
+
+config/
+
+deployment-config.json

client/scss/_asset-display.scss

@@ -0,0 +1,129 @@
+.asset-main {
+  height: 75vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.asset-display {
+  display: flex;
+  min-height: 50vh
+}
+
+.asset-title {
+  padding-bottom: $thin-padding;
+  text-align: center;
+
+  @media (min-width: $break-point-mobile) {
+    padding-top: $secondary-padding;
+  }
+}
+
+.asset-image, .asset-video {
+  max-height: 100%;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
+  object-position: center;
+}
+
+/*below must die if this is intended to be shareable component! it also probably doesn't need to be*/
+
+.visible-content {
+  margin: 0;
+  padding-bottom: 30px;
+  position: relative;
+  width: 100%;
+
+  &.closed {
+    box-shadow: none;
+
+    &:after {
+      box-shadow: none;
+    }
+  }
+
+  &:after {
+    box-shadow: 0px 2px 3px 2px $shadow-color;
+    content: '';
+    height: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 100;
+  }
+}
+
+
+.vertical-split, .visible-content {
+  flex           : 1 0 auto;
+  display        : flex;
+  flex-direction : column;
+  justify-content: space-between;
+  align-items    : center;
+};
+
+.collapse-content {
+  flex-grow: 0;
+  @media (max-width: $break-point-tablet) {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.collapse-content.closed{
+  display: none;
+}
+
+.collapse-button {
+  background: none;
+  border: none;
+  display: block;
+  margin: 15px auto 0;
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  padding: 0px;
+
+  @media (max-width: $break-point-tablet) {
+    padding: 0;
+  }
+
+  svg {
+    stroke: $primary-color;
+    &.plus-icon {
+      transform: rotate(0);
+      transition: all 0.4s ease;
+    }
+
+  }
+
+  &:hover {
+    .plus-icon {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.asset-info {
+  $asset-info-width: 1000px;
+  max-width: $asset-info-width;
+  margin: $primary-padding;
+  max-width: 100%;
+
+  @media (max-width: $break-point-tablet) {
+    margin: $primary-padding $secondary-padding;
+  }
+
+  @media (max-width: $break-point-mobile) {
+    margin: $primary-padding 0;
+  }
+}
+
+.asset-footer {
+  border-top: 1px solid $grey-border;
+  padding-top: $primary-padding;
+  margin-top: $primary-padding;
+  color: $grey;
+}

client/scss/_body.scss

@@ -1,10 +1,10 @@
 body {
   margin: 0;
   padding: 0;
-  height: 100%;
+  min-height: 100%;
   word-wrap: break-word;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
-}
+}

client/scss/_button-primary.scss

@@ -0,0 +1,16 @@
+.button--primary, .button--primary:focus, .button--primary:active {
+  border-color: $primary-color;
+  color: $primary-color;
+  background-color: $background-color;
+}
+
+.button--primary:hover {
+  color: $background-color;
+  background-color: $primary-color;
+}
+
+.button--primary:active {
+  $color: darken($primary-color, 10%);
+  border-color: $color;
+  background-color: $color;
+}

client/scss/_button-secondary.scss

@@ -0,0 +1,11 @@
+.button--secondary, .button--secondary:focus, .button--secondary:active  {
+  border-bottom-color: $secondary-color;
+  color: $secondary-color;
+  background-color: $background-color;
+}
+
+.button--secondary:active {
+  $color: darken($secondary-color, 10%);
+  color: $color;
+  border-bottom-color: $color;
+}

client/scss/_button.scss

@@ -0,0 +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.scss

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

client/scss/_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/_form.scss

@@ -0,0 +1,7 @@
+.form-group {
+  padding-bottom: $secondary-padding;
+}
+
+.form-title {
+  padding-bottom: $secondary-padding;
+}

client/scss/_horizontal-split.scss

@@ -0,0 +1,62 @@
+.horizontal-split {
+  max-width: $width-content-constrained;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  display       : flex;
+  flex-direction : row;
+  justify-content: space-between;
+
+  &.horizontal-split--mobile-collapse {
+    @media (max-width: $break-point-mobile) {
+      flex-direction: column;
+
+      .horizontal-split__column {
+        width: 100%;
+      }
+
+      .horizontal-split__column--right {
+        padding-left: 0;
+        padding-top: $secondary-padding;
+      }
+    }
+  }
+};
+
+.horizontal-split__column {
+  width: 50%;
+  flex: 1 0 auto;
+  box-sizing: border-box;
+}
+
+.horizontal-split__column--left {
+  padding-right: $primary-padding;
+
+  @media (max-width: $break-point-mobile) {
+    padding-right: $thin-padding;
+  }
+}
+
+.horizontal-split__column--right {
+  padding-left: $primary-padding;
+
+  @media (max-width: $break-point-mobile) {
+    padding-left: $thin-padding;
+  }
+}
+
+@media (max-width: $break-point-tablet) {
+
+  .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;
+  }
+}

client/scss/_input.scss

@@ -4,17 +4,12 @@ input:-webkit-autofill {
 
 input {
   margin: 0;
-  outline: none;
   padding: $input-padding;
   border: 0;
   background-color: $background-color;
   display: inline-block;
 }
 
-.input-text {
-
-}
-
 .input-slider {
   width: 100%
 }
@@ -43,6 +38,10 @@ input {
   border-bottom: 1px solid $secondary-color;
 }
 
+.form-group {
+  padding-bottom: $secondary-padding;
+}
+
 // modifiers
 
 .input--full-width {

client/scss/_label.scss

@@ -2,6 +2,7 @@
   padding-top: $thin-padding;
   padding-bottom: $thin-padding;
   display: inline-block;
+  font-size: 12px;
 }
 
 .label-radio {
@@ -10,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.scss

@@ -0,0 +1,21 @@
+a, a:visited {
+  text-decoration: none;
+}
+
+.link--primary, .link--primary:visited {
+  color: $primary-color;
+  &:hover { text-decoration: underline; }
+}
+
+.link--nav {
+  color: $text-color;
+  border-bottom: 2px solid white;
+  &:hover {
+    color: $primary-color;
+  }
+}
+
+
+.link--nav-active {
+  border-bottom: 2px solid $primary-color;
+}

client/scss/_media-queries.scss

@@ -0,0 +1,7 @@
+@media (max-width: $break-point-x-large) {
+  // hide site description in nav bar
+  .site-description {
+    display: none;
+  }
+
+}

client/scss/_nav-bar.scss

@@ -1,31 +1,37 @@
 .nav-bar {
-  padding-left: $primary-padding;
+  margin-top: $thin-padding;
-  padding-right: $primary-padding;
+  margin-left: $primary-padding;
-  border-bottom: 0.5px solid $tertiary-color;
+  margin-right: $primary-padding;
-  .select--arrow {
+
-    padding: 0 1.5em 0 $input-padding;
+  @media (max-width: $break-point-mobile) {
+    margin-left: 15px;
+    margin-right: 15px;
   }
 }
 
 .nav-bar-link {
   padding: calc(1em - 2px);
   display: inline-block;
+  font-size: $text-medium;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
 }
 
 .nav-bar-logo {
   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;
     padding-bottom: calc(1em - 2px);
     padding-left: 1em;
   }
+
 }
 
-@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.scss

@@ -0,0 +1,27 @@
+.page-layout {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  .content {
+    flex: 1 0 auto;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    margin: $secondary-padding;
+  }
+}
+
+@media (max-width: $break-point-tablet) {
+  .page-layout .content { margin: $tertiary-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.scss

@@ -0,0 +1,12 @@
+.progress-bar__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.progress-bar--inactive {
+  color: $grey;
+}
+
+.progress-bar--active {
+  color: $primary-color;
+}

client/scss/_publish-preview.scss

@@ -0,0 +1,13 @@
+.publish-form__title {
+  max-width: $width-content-constrained;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media (max-width: $break-point-mobile) {
+    font-size: .8em;
+  }
+}
+
+.publish-preview-dim {
+  opacity: 0.2;
+}

client/scss/_publish-url-input.scss

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

client/scss/_reset.scss

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

client/scss/_row.scss

@@ -1,5 +1,5 @@
 .row {
-  padding-bottom: 2em;
+  margin-bottom: 1.2em;
 }
 
 .row-labeled {
@@ -7,29 +7,28 @@
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
+  padding-bottom: $tertiary-padding;
 }
 
 .row-labeled-label {
-  align-self: flex-start;
   width: 30%;
+  display: flex;
+  align-items: center;
+  flex: 1;
 }
 .row-labeled-content {
   align-self: center;
   width: 70%;
 }
 
-
+@media (max-width: $break-point-tablet ) {
-@media (max-width: $break-point-medium ) {
-
   .row-labeled {
     flex-direction: column;
   }
-
   .row-labeled-label {
     width: 100%;
   }
   .row-labeled-content {
     width: 100%;
   }
-
 }

client/scss/_select.scss

@@ -0,0 +1,4 @@
+select {
+  margin: 0;
+  display: inline-block;
+}

client/scss/_share-buttons.scss

@@ -0,0 +1,51 @@
+.share-buttons {
+  display: flex;
+  align-items: center;
+  
+  a {
+    display: block;
+    width: 30px;
+    height: 30px;
+    margin: 0 7px;
+    border-radius: 100%;
+    line-height: 30px;
+    text-align: center;
+    transition: all 0.2s ease;
+    &.twitter {
+      background:#4DC2FE;
+      img {
+        margin-top: 8px;
+        margin-left: 2px;
+      }
+    }
+    
+    &.facebook {
+      background: #5487DE;
+      img {
+        margin-top: 6px;
+      }
+    }
+    
+    &.tumblr {
+      background: #274061;
+      img {
+        margin-top: 7px;
+      }
+    }
+    
+    &.reddit {
+      background: #FF4500;
+      img {
+        margin-top: 7px;
+      }
+    }
+    
+    &:first-child{
+      margin-left: 0px;
+    }
+    
+    &:hover {
+      background: $primary-color;
+    }
+  }
+}

client/scss/_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.scss

@@ -0,0 +1,59 @@
+// set defaults
+
+h1, h2, h3, h4, p {
+  margin: 0;
+}
+
+body {
+  color: $text-color;
+  font-family: 'Circular', serif;
+  font-size: 16px;
+}
+
+h1 {
+ font-size: $text-xx-large;
+}
+
+h2 {
+  font-size: $text-x-large;
+}
+
+h3 {
+  font-size: $text-large;
+}
+
+.text--extra-large {
+  font-size: $text-xx-large;
+}
+
+.text--large {
+  font-size: $text-large;
+}
+
+.text--medium {
+  font-size: $text-medium;
+}
+
+.text--small {
+  font-size: $text-small;
+}
+
+.text--extra-small {
+  font-size: $text-x-small;
+}
+
+.text--secondary {
+  color: $help-color;
+}
+
+.text--interactive {
+  color: $primary-color;
+}
+
+.text--failure {
+  color: $failure-color;
+}
+
+.text--success {
+  color: $success-color;
+}

client/scss/_textarea.scss

@@ -0,0 +1,6 @@
+textarea {
+  margin: 0;
+  padding: $input-padding;
+  display: inline-block;
+  width: $input-full-width;
+}

client/scss/_variables.scss

@@ -1,10 +1,12 @@
 $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;
+$grey: #9095A5;
+$help-color: $grey;
+$grey-border: #DDDFE4;
+$shadow-color: rgba(169, 173, 186, 0.2);
 
 $primary-padding: 3em;
 $secondary-padding: 2em;
@@ -12,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;
@@ -23,16 +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: 2.0em;
-$text-large: x-large;
+$text-large: 1.5em;
-$text-medium: large;
+$text-medium: 1.0em;
-$text-small: medium;
+$text-small: 0.9em;
-$text-x-small: small;
+$text-x-small: 0.8em;
 
 $break-point-xx-large: 1400px;
 $break-point-x-large: 1290px;
 $break-point-large: 1000px;
-$break-point-medium: 800px;
+$break-point-tablet: 800px;
-$break-point-small: 500px;
+$break-point-mobile: 500px;
-$break-point-x-small: 400px;
-

client/scss/all.scss

@@ -1,48 +1,44 @@
-@import '~variables/_variables';
+@import '_variables';
-@import '~reset/_reset';
+@import '_reset';
-@import '~font/_font';
+@import 'font/_font.scss';
-@import '~html/_html';
+@import '_html';
-@import '~body/_body';
+@import '_body';
-@import '~react-app/_react-app';
+@import '_react-app';
-@import '~text/_text';
+@import '_text';
 
-@import '~link/_link';
+@import '_link';
-@import '~input/_input';
+@import '_input';
-@import '~select/_select';
+@import '_select';
-@import '~textarea/_textarea';
+@import '_textarea';
-@import '~video/_video';
+@import '_video';
+@import '_form';
 
-@import '~asset-display/_asset-display';
+@import '_asset-display';
-@import '~asset-preview/_asset-preview';
+@import '_asset-preview';
-@import '~button/_button';
+@import '_button';
-@import '~button-primary/_button-primary';
+@import '_button-primary';
-@import '~button-secondary/_button-secondary';
+@import '_button-secondary';
-@import '~button-tertiary/_button-tertiary';
+@import '_click-to-copy';
-@import '~click-to-copy/_click-to-copy';
+@import '_form-feedback';
-@import '~column/_column';
+@import '_horizontal-split';
-@import '~form-feedback/_form-feedback';
+@import '_label';
-@import '~horizontal-quad-split/_horizontal-quad-split';
+@import '_nav-bar';
-@import '~horizontal-split/_horizontal-split';
+@import '_page-layout';
-@import '~label/_label';
+@import '_page-layout-show-lite';
-@import '~nav-bar/_nav-bar';
+@import '_page-content';
-@import '~page-layout/_page-layout';
+@import '_progress-bar';
-@import '~page-layout-show-lite/_page-layout-show-lite';
+@import '_publish-preview';
-@import '~page-content/_page-content';
+@import '_share-buttons';
-@import '~progress-bar/_progress-bar';
+@import '_space-between';
-@import '~publish-preview/_publish-preview';
+@import '_space-around';
-@import '~space-between/_space-between';
+@import '_row';
-@import '~space-around/_space-around';
+@import '_tooltip';
-@import '~row/_row';
+@import '_social-share-link';
-@import '~vertical-split/_vertical-split';
-@import '~tooltip/_tooltip';
-@import '~social-share-link/_social-share-link';
-
-@import '~channel-claims-display/_channel-claims-display';
-@import '~dropzone/_dropzone';
-@import '~publish-url-input/_publish-url-input';
-@import '~publish-status/_publish-status';
-@import '~publish-disabled-message/_publish-disabled-message';
-
-@import '~media-queries/_media-queries';
 
+@import '_channel-claims-display';
+@import '_dropzone';
+@import '_publish-url-input';
+@import '_publish-status';
+@import '_publish-disabled-message';
 
+@import '_media-queries';

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

@@ -1,22 +0,0 @@
-.asset-display {
-  display: flex;
-  flex: 1 0 auto;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.asset-image, .asset-video {
-  margin : 0;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-  object-position: center;
-}
-.asset-video {
-  border: 1px solid #d0d0d0;
-  margin: 16px;
-  padding: 6px;
-}
-.vertical-split .asset-display {
-    height: 90vh;
-}

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

@@ -1,34 +0,0 @@
-.button-primary, .button-primary:focus, .button-primary:active {
-  border: $button-border-width $button-border-strength $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 {
-  border-color: $secondary-color;
-  background-color: $tertiary-color;
-}
-
-
-.button-primary:hover {
-  border-color: $interactive-color;
-  color: $background-color;
-  background-color: $interactive-color;
-}
-
-.button-primary:active{
-  border-color: $background-color;
-  color: $secondary-color;
-  background-color: $tertiary-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 +0,0 @@
-.button--secondary, .button--secondary:focus {
-  border: 0;
-  border-bottom: $button-border-width $button-border-strength $primary-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;
-}

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 +0,0 @@
-button {
-  cursor: pointer;
-}

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

@@ -1,9 +0,0 @@
-.click-to-copy {
-  cursor: pointer;
-  border: 1px solid black;
-  padding: 0.5em;
-  margin: 0;
-  color: black;
-  background-color: white;
-  width: calc(100% - 1em - 2px);
-}

client/scss/column/_column.scss

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

client/scss/font/_font.scss

@@ -16,3 +16,16 @@
   font-weight: normal;
   font-style: italic;
 }
+
+
+@font-face {
+  font-family: 'Circular';
+  src: url('./font/Circular/CircularStd-Book.ttf');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'Circular';
+  src: url('./font/Circular/CircularStd-Bold.ttf');
+  font-weight: bold;
+}

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 +0,0 @@
-.horizontal-split {
-  display       : flex;
-  flex-direction : row;
-  justify-content: space-between;
-  align-items    : flex-start;
-  .column {
-    width: 50%;
-  }
-};
-
-
-
-@media (max-width: $break-point-large ) {
-
-  .horizontal-split {
-    display       : flex;
-    flex-direction : column;
-    justify-content: space-between;
-    align-items    : flex-start;
-    .column {
-      width: 100%;
-      padding-left: 0;
-      padding-right: 0;
-      padding-bottom: $secondary-padding;
-    }
-  };
-
-}

client/scss/icon/chevron-down.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="8px" viewBox="0 0 14 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>chevron-down</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <polyline id="chevron-down" stroke="#000000" stroke-width="1.2" fill-rule="nonzero" points="13 1 7 7 1 1"></polyline>
+    </g>
+</svg>

client/scss/link/_link.scss

@@ -1,27 +0,0 @@
-a, a:visited {
-  text-decoration: none;
-}
-
-.link--primary, .link--primary:visited {
-  color: $interactive-color;
-}
-
-.link--secondary, .link--secondary:visited {
-  margin: 0px;
-  padding: 0.3em;
-  color: $secondary-color;
-}
-
-.link--nav {
-  color: $primary-color;
-  border-bottom: 2px solid white;
-}
-
-.link--nav:hover {
-  color: $interactive-color;
-}
-
-.link--nav-active {
-  color: $interactive-color;
-  border-bottom: 2px solid $interactive-color;
-}

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

@@ -1,24 +0,0 @@
-@media (max-width: $break-point-x-large) {
-  // hide site description in nav bar
-  .site-description {
-    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/page-layout/_page-layout.scss

@@ -1,12 +0,0 @@
-.page-layout {
-  flex: 1 0 auto;
-  display: flex;
-  flex-direction: column;
-  .content {
-    flex: 1 0 auto;
-    display: flex;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    margin: $primary-padding;
-  }
-}

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

@@ -1,7 +0,0 @@
-.progress-bar--inactive {
-  color: $secondary-color;
-}
-
-.progress-bar--active {
-  color: $primary-color;
-}

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

@@ -1,3 +0,0 @@
-.publish-preview-dim {
-  opacity: 0.2;
-}

client/scss/select/_select.scss

@@ -1,17 +0,0 @@
-select {
-  margin: 0;
-  outline: none;
-  padding: $input-padding;
-  border: 0;
-  background-color: $background-color;
-  display: inline-block;
-}
-
-.select--arrow {
-  -moz-appearance:none;
-  -webkit-appearance: none;
-  background: url('./icon/downArrow.svg') no-repeat right;
-  cursor: pointer;
-  padding-right: 1.5em;
-  padding-left: $input-padding
-}

client/scss/text/_text.scss

@@ -1,165 +0,0 @@
-// set defaults
-
-h1, h2, h3, h4, p {
-  margin: 0;
-}
-
-h1 {
- font-size: $text-xx-large;
-}
-
-h2 {
-  font-size: $text-x-large;
-}
-
-h3 {
-  font-size: $text-large;
-  font-weight: bold;
-}
-
-p, body, button, input, textarea, label, select, option {
-  font-family: 'Lekton', monospace;
-  font-size: $text-large;
-}
-
-.text--extra-large {
-  font-size: $text-xx-large;
-}
-
-.text--large {
-  font-size: $text-large;
-}
-
-.text--medium {
-  font-size: $text-medium;
-}
-
-.text--small {
-  font-size: $text-small;
-}
-
-.text--extra-small {
-  font-size: $text-x-small;
-}
-
-.text--underline {
-  text-decoration: underline;
-}
-
-.text--primary {
-  color: $primary-color;
-}
-
-.text--secondary {
-  color: $secondary-color;
-}
-
-.text--tertiary {
-  color: $tertiary-color;
-}
-
-.text--interactive {
-  color: $interactive-color;
-}
-
-.text--failure {
-  color: $failure-color;
-}
-
-.text--success {
-  color: $success-color;
-}
-
-@media (max-width: $break-point-x-large ) {
-  h1 {
-    font-size: $text-x-large;
-  }
-
-  h2 {
-    font-size: $text-large;
-  }
-
-  h3 {
-    font-size: $text-medium;
-  }
-
-  p, body, button, input, textarea, label, select, option {
-    font-size: $text-medium;
-  }
-
-  .text--extra-large {
-    font-size: $text-x-large;
-  }
-
-  .text--large {
-    font-size: $text-medium;
-  }
-
-  .text--medium {
-    font-size: $text-small;
-  }
-
-}
-
-@media (max-width: $break-point-medium) {
-
-  h1 {
-    font-size: $text-large;
-  }
-
-  h2 {
-    font-size: $text-medium;
-  }
-
-  h3 {
-    font-size: $text-small;
-  }
-
-  p, body, button, input, textarea, label, select, option {
-    font-size: $text-small;
-  }
-
-  .text--extra-large {
-    font-size: $text-large;
-  }
-
-  .text--large {
-    font-size: $text-medium;
-  }
-
-  .text--small {
-    font-size: $text-x-small;
-  }
-
-
-}
-
-@media (max-width: $break-point-x-small) {
-
-  h1 {
-    font-size: $text-medium;
-    font-weight: bold;
-  }
-
-  h2 {
-    font-size: $text-small;
-  }
-
-  p, body, button, input, textarea, label, select, option {
-    font-size: $text-x-small;
-  }
-
-  .text--extra-large {
-    font-size: $text-x-small;
-    font-weight: bold;
-  }
-
-  .text--large {
-    font-size: $text-x-small;
-  }
-
-  .text--medium {
-    font-size: $text-x-small;
-  }
-
-}

client/scss/textarea/_textarea.scss

@@ -1,10 +0,0 @@
-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/vertical-split/_vertical-split.scss

@@ -1,7 +0,0 @@
-.vertical-split {
-  flex           : 1 0 auto;
-  display        : flex;
-  flex-direction : column;
-  justify-content: space-between;
-  align-items    : center;
-};

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

@@ -5,49 +5,53 @@ const AssetShareButtons = ({ assetUrl, name }) => {
   return (
     <SocialShareLink >
       <a
-        className='link--primary'
+        className='link--primary twitter'
         target='_blank'
         href={`https://twitter.com/intent/tweet?text=${assetUrl}`}
       >
-        twitter
+        <img src='/assets/img/icn_twitter.svg' />
       </a>
       <a
-        className='link--primary'
+        className='link--primary facebook'
         target='_blank'
         href={`https://www.facebook.com/sharer/sharer.php?u=${assetUrl}`}
       >
-        facebook
+        <img src='/assets/img/icn_facebook.svg' />
       </a>
       <a
-        className='link--primary'
+        className='link--primary tumblr'
         target='_blank'
         href={`https://tumblr.com/widgets/share/tool?canonicalUrl=${assetUrl}`}
       >
-        tumblr
+        <img src='/assets/img/icn_tumblr.svg' />
       </a>
       <a
-        className='link--primary'
+        className='link--primary reddit'
         target='_blank'
         href={`https://www.reddit.com/submit?url=${assetUrl}&title=${name}`}
       >
-        reddit
+        <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/ChannelSelectDropdown/index.jsx

@@ -5,7 +5,6 @@ const ChannelSelectDropdown = ({ selectedChannel, handleSelection, loggedInChann
   return (
     <select
       id='channel-name-select'
-      className='select select--arrow'
       value={selectedChannel}
       onChange={handleSelection}>
       { loggedInChannelName && (

client/src/components/ClickToCopy/index.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
+import * as Icon from 'react-feather';
 
 class ClickToCopy extends React.Component {
   constructor (props) {
     super(props);
     this.copyToClipboard = this.copyToClipboard.bind(this);
   }
-  copyToClipboard (event) {
+  copyToClipboard () {
-    const elementToCopy = event.target.id;
+    const elementToCopy = this.props.id;
     const element = document.getElementById(elementToCopy);
+    console.log(elementToCopy);
     element.select();
     try {
       document.execCommand('copy');
@@ -18,15 +20,22 @@ class ClickToCopy extends React.Component {
   render () {
     const {id, value} = this.props;
     return (
-      <input
+      <div
-        id={id}
+        className='click-to-copy-wrap'
-        value={value}
         onClick={this.copyToClipboard}
-        type='text'
+      >
-        className='click-to-copy'
+        <input
-        readOnly
+          id={id}
-        spellCheck='false'
+          value={value}
-      />
+          type='text'
+          className='click-to-copy'
+          readOnly
+          spellCheck='false'
+        />
+        <div className='icon-wrap'>
+          <Icon.Copy />
+        </div>
+      </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

@@ -9,15 +9,15 @@ const DropzoneInstructionsDisplay = ({fileError, message}) => {
   return (
     <div className={'dropzone-instructions-display'}>
       <Row>
-        <p className={'text--large'}>{message}</p>
+        <span className={'text--large'}>{message}</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}
@@ -25,7 +25,7 @@ const DropzoneInstructionsDisplay = ({fileError, message}) => {
           />
         </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

@@ -1,21 +1,21 @@
 import React from 'react';
 
 const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => {
-  return (
+  return (errorMessage || defaultMessage) ? (
     <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>
       )}
     </div>
-  );
+  ) : null;
 };
 
 export default FormFeedbackDisplay;

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

@@ -2,13 +2,26 @@ import React from 'react';
 
 class HorizontalSplit extends React.Component {
   render () {
+    const { leftSide, rightSide, collapseOnMobile } = this.props;
+
+    let className = 'horizontal-split';
+    if (collapseOnMobile) {
+      className += " horizontal-split--mobile-collapse";
+    }
+
+    // If there is no left side, move the right side to the left
+    // This is mostly for content with no description
+    // It doesn't need to be on the right side with nothing next to it.
+    const leftComponent = leftSide || rightSide;
+    const rightComponent = leftSide ? rightSide : null;
+
     return (
-      <div className={'horizontal-split'}>
+      <div className={className}>
-        <div className={'column'}>
+        <div className={'horizontal-split__column horizontal-split__column--left'}>
-          {this.props.leftSide}
+          {leftComponent}
         </div>
-        <div className={'column'}>
+        <div className={'horizontal-split__column horizontal-split__column--right'}>
-          {this.props.rightSide}
+          {rightComponent}
         </div>
       </div>
     );

client/src/components/NavBar/index.jsx

@@ -10,7 +10,6 @@ class NavBar extends React.Component {
       <div className={'nav-bar'}>
         <SpaceBetween >
           <Logo />
-          <SiteDescription />
           <NavigationLinks />
         </SpaceBetween>
       </div>

client/src/components/NavBarChannelOptionsDropdown/index.jsx

@@ -6,7 +6,6 @@ function NavBarChannelDropdown ({ channelName, handleSelection, defaultSelection
       <select
         type='text'
         id='nav-bar-channel-select'
-        className='select select--arrow'
         onChange={handleSelection}
         value={defaultSelection}
       >

client/src/components/ProgressBar/index.jsx

@@ -62,7 +62,7 @@ class ProgressBar extends React.Component {
   };
   render () {
     return (
-      <div>
+      <div className="progress-bar__wrapper">
         {this.state.bars.map((bar, index) => bar.isActive ? <ActiveStatusBar key={index} /> : <InactiveStatusBar key={index}/>)}
       </div>
     );

client/src/components/PublishLicenseInput/index.jsx

@@ -13,7 +13,6 @@ const PublishLicenseInput = ({ handleSelect }) => {
           type='text'
           name='license'
           id='publish-license'
-          className='select select--primary'
           onChange={handleSelect}
         >
           <option value=''>Unspecified</option>

client/src/components/PublishPreview/index.jsx

@@ -5,16 +5,21 @@ 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 () {
     const { isUpdate, uri } = this.props;
     return (
-      <div>
+      <div className={'publish-form'}>
-        <Row>
+        <div className={'publish-form__title'}>
-          {isUpdate && uri && (<p className='text--extra-small'>{`Editing ${uri}`}</p>)}
+          <Row>
-          <PublishTitleInput />
+            {isUpdate && uri && (<p className='text--secondary'>{`Editing ${uri}`}</p>)}
-        </Row>
+            <PublishTitleInput />
+          </Row>
+        </div>
         <HorizontalSplit
+          collapseOnMobile
           leftSide={<Dropzone />}
           rightSide={<PublishDetails />}
         />

client/src/containers/AssetDisplay/view.jsx

@@ -79,12 +79,12 @@ class AssetDisplay extends React.Component {
         </div>
         }
         {(status === AVAILABLE) &&
-          <AvailableContent
+        <AvailableContent
-            contentType={contentType}
+          contentType={contentType}
-            sourceUrl={sourceUrl}
+          sourceUrl={sourceUrl}
-            name={name}
+          name={name}
-            thumbnail={thumbnail}
+          thumbnail={thumbnail}
-          />
+        />
         }
       </div>
     );

client/src/containers/AssetInfo/view.jsx

@@ -6,10 +6,12 @@ import Row from '@components/Row';
 import SpaceBetween from '@components/SpaceBetween';
 import AssetShareButtons from '@components/AssetShareButtons';
 import ClickToCopy from '@components/ClickToCopy';
+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,137 +31,119 @@ class AssetInfo extends React.Component {
       channelCanonicalUrl = `${createCanonicalLink({channel})}`;
     }
     return (
-      <div>
+      <div className='asset-info'>
-        {editable && (
+        <HorizontalSplit
-          <Row>
+          leftSide={
-            <RowLabeled
+            description && (
-              label={<Label value={'Edit:'} />}
+              <p className='asset-info__description'>{description}</p>
-              content={<Link to={`/edit${canonicalUrl}`}>{name}</Link>}
+            )
-            />
+          }
-          </Row>
+          rightSide={
-        )}
+            <div>
+              {editable && (
+                <RowLabeled
+                  label={<Label value={'Edit:'} />}
+                  content={<Link to={`/edit${canonicalUrl}`}>{name}</Link>}
+                />
+              )}
+              {channelName && (
+                <RowLabeled
+                  label={
+                    <Label value={'Channel'} />
+                  }
+                  content={
+                    <span className='text'>
+                      <Link className='link--primary' to={channelCanonicalUrl}>{channelName}</Link>
+                    </span>
+                  }
+                />
+              )}
+              {claimViews ? (
+                <RowLabeled
+                  label={
+                    <Label value={'Views'} />
+                  }
+                  content={
+                    <span className='text'>
+                      {claimViews}
+                    </span>
+                  }
+                />
+              ) : null}
 
-        {channelName && (
+              <RowLabeled
-          <Row>
+                label={
-            <RowLabeled
+                  <Label value={'Share'} />
-              label={
+                }
-                <Label value={'Channel:'} />
+                content={
-              }
+                  <AssetShareButtons
-              content={
+                    name={name}
-                <span className='text'>
+                    assetUrl={assetCanonicalUrl}
-                  <Link to={channelCanonicalUrl}>{channelName}</Link>
-                </span>
-              }
-            />
-          </Row>
-        )}
-
-        {claimViews ? (
-          <Row>
-            <RowLabeled
-              label={
-                <Label value={'Views:'} />
-              }
-              content={
-                <span className='text'>
-                  {claimViews}
-                </span>
-              }
-            />
-          </Row>
-        ) : null}
-
-        <Row>
-          <RowLabeled
-            label={
-              <Label value={'Share:'} />
-            }
-            content={
-              <AssetShareButtons
-                name={name}
-                assetUrl={assetCanonicalUrl}
-              />
-            }
-          />
-        </Row>
-
-        <Row>
-          <RowLabeled
-            label={
-              <Label value={'Link:'} />
-            }
-            content={
-              <ClickToCopy
-                id={'short-link'}
-                value={assetCanonicalUrl}
-              />
-            }
-          />
-        </Row>
-
-        <Row>
-          <RowLabeled
-            label={
-              <Label value={'Embed:'} />
-            }
-            content={
-              <div>
-                {(contentType === 'video/mp4') ? (
-                  <ClickToCopy
-                    id={'embed-text-video'}
-                    value={`<iframe src="${host}/video-embed${canonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`}
                   />
-                ) : (
+                }
+              />
+
+              <RowLabeled
+                label={
+                  <Label value={'Link'} />
+                }
+                content={
                   <ClickToCopy
-                    id={'embed-text-image'}
+                    id={'short-link'}
-                    value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`}
+                    value={assetCanonicalUrl}
                   />
-                )}
+                }
-              </div>
+              />
-            }
-          />
-        </Row>
 
-        <Row>
+              <RowLabeled
-          <SpaceBetween>
+                label={
-            <a
+                  <Label value={'Embed'} />
-              className='link--primary'
+                }
-              href={`${assetCanonicalUrl}.${fileExt}`}
+                content={
-            >
+                  <div>
-              Direct Link
+                    {(contentType === 'video/mp4') ? (
-            </a>
+                      <ClickToCopy
-            <a
+                        id={'embed-text-video'}
-              className={'link--primary'}
+                        value={`<iframe src="${host}/video-embed${canonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`}
-              href={`${assetCanonicalUrl}.${fileExt}`}
+                      />
-              download={name}
+                    ) : (
-            >
+                      <ClickToCopy
-              Download
+                        id={'embed-text-image'}
-            </a>
+                        value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`}
-            <a
+                      />
-              className={'link--primary'}
+                    )}
-              target='_blank'
+                  </div>
-              href='https://lbry.io/dmca'
+                }
-            >
+              />
-              Report
-            </a>
-          </SpaceBetween>
-        </Row>
-
-        {description && (
-          <Row>
-            <p>{description}</p>
-          </Row>
-        )}
-
-        <Row>
-          <p>
-            Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
-          </p>
-        </Row>
 
+              <SpaceBetween>
+                <a
+                  className='link--primary'
+                  href={`${assetCanonicalUrl}.${fileExt}`}
+                >
+                  Direct Link
+                </a>
+                <a
+                  className={'link--primary'}
+                  href={`${assetCanonicalUrl}.${fileExt}`}
+                  download={name}
+                >
+                  Download
+                </a>
+                <a
+                  className={'link--primary'}
+                  target='_blank'
+                  href='https://lbry.io/dmca'
+                >
+                  Report
+                </a>
+              </SpaceBetween>
+            </div>
+          } />
+        <AssetInfoFooter/>
       </div>
     );
   }
 };
 
-export default AssetInfo;
+export default AssetInfo;

client/src/containers/AssetTitle/view.jsx

@@ -1,12 +1,8 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import Row from '@components/Row';
 
 const AssetTitle = ({ title }) => {
   return (
-    <Row>
+    <h1 className='asset-title'>{title}</h1>
-      <h3>{title}</h3>
-    </Row>
   );
 };
 

client/src/containers/ChannelCreateForm/view.jsx

@@ -59,7 +59,7 @@ class ChannelCreateForm extends React.Component {
     return (
       <div>
         { !status ? (
-          <form onSubmit={this.handleSubmit}>
+          <form className="form-group" onSubmit={this.handleSubmit}>
             <ChannelCreateNameInput
               value={name.value}
               error={name.error}
@@ -69,10 +69,7 @@ class ChannelCreateForm extends React.Component {
               value={password.value}
               handlePasswordInput={this.handlePasswordInput}
             />
-            <FormFeedbackDisplay
+            <FormFeedbackDisplay errorMessage={formError} />
-              errorMessage={formError}
-              defaultMessage={'Choose a name and password for your channel'}
-            />
             <ButtonPrimary
               type={'submit'}
               value={'Create Channel'}
@@ -81,7 +78,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/ChannelLoginForm/view.jsx

@@ -49,7 +49,7 @@ class ChannelLoginForm extends React.Component {
   }
   render () {
     return (
-      <form onSubmit={this.loginToChannel}>
+      <form className="form-group" onSubmit={this.loginToChannel}>
         <ChannelLoginNameInput
           channelName={this.state.channelName}
           handleInput={this.handleInput}
@@ -58,10 +58,7 @@ class ChannelLoginForm extends React.Component {
           channelPassword={this.state.channelPassword}
           handleInput={this.handleInput}
         />
-        <FormFeedbackDisplay
+        <FormFeedbackDisplay errorMessage={this.state.error} />
-          errorMessage={this.state.error}
-          defaultMessage={'Enter the name and password for your channel'}
-        />
         <ButtonPrimary
           type={'submit'}
           value={'Authenticate'}

client/src/containers/ChannelSelect/view.jsx

@@ -40,16 +40,16 @@ class ChannelSelect extends React.Component {
     const { publishInChannel, channelError, selectedChannel, loggedInChannelName, publishOnlyApproved } = this.props;
     if (publishOnlyApproved) {
       return (
-        <div>
+        <React.Fragment>
           <RowLabeled
             label={<Label value={'Channel:'} />}
             content={<span>{loggedInChannelName}</span>}
           />
-        </div>
+        </React.Fragment>
       );
     }
     return (
-      <div>
+      <React.Fragment>
         <RowLabeled
           label={
             <ChooseAnonymousPublishRadio
@@ -87,7 +87,7 @@ class ChannelSelect extends React.Component {
             { (selectedChannel === CREATE) && <ChannelCreateForm /> }
           </div>
         )}
-      </div>
+      </React.Fragment>
     );
   }
 }

client/src/containers/ChannelTools/view.jsx

@@ -7,14 +7,14 @@ class ChannelTools extends React.Component {
   render () {
     return (
       <div>
-        <Row>
+        <h3 className="form-title">Log in to existing channel</h3>
-          <h3>Log in to an existing channel:</h3>
+        <ChannelLoginForm />
-          <ChannelLoginForm />
+        {!this.props.closedRegistration && (
-        </Row>
+          <React.Fragment>
-        {!this.props.closedRegistration && (<Row>
+            <h3 className="form-title">Create new channel</h3>
-          <h3>Create a brand new channel:</h3>
+            <ChannelCreateForm />
-          <ChannelCreateForm />
+          </React.Fragment>
-        </Row>)}
+        )}
       </div>
     );
   }

client/src/containers/Dropzone/view.jsx

@@ -84,7 +84,7 @@ class Dropzone extends React.Component {
     const { dragOver, mouseOver, dimPreview } = this.state;
     const { file, thumbnail, fileError, isUpdate, sourceUrl, fileExt } = this.props;
     return (
-      <div className="dropzone-wrapper">
+      <React.Fragment>
         {isUpdate && fileExt === 'mp4' ? (
           <p>Video updates are currently disabled. This feature will be available soon. You can edit metadata.</p>
         ) : (
@@ -145,7 +145,7 @@ class Dropzone extends React.Component {
             </div>
           </div>
         )}
-      </div>
+      </React.Fragment>
     );
   }
 };

client/src/containers/PublishDetails/view.jsx

@@ -8,7 +8,6 @@ import Row from '@components/Row';
 import Label from '@components/Label';
 import RowLabeled from '@components/RowLabeled';
 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';
@@ -46,7 +45,7 @@ class PublishDetails extends React.Component {
     return (
       <div>
         {isUpdate ? (asset && (
-          <Row>
+          <React.Fragment>
             <RowLabeled
               label={
                 <Label value={'Channel:'} />
@@ -57,16 +56,14 @@ class PublishDetails extends React.Component {
                 </span>
               }
             />
-          </Row>
+          </React.Fragment>
         )) : (
           <React.Fragment>
             <Row>
               <PublishUrlInput />
             </Row>
 
-            <Row>
+            <ChannelSelect />
-              <ChannelSelect />
-            </Row>
           </React.Fragment>
         )}
 
@@ -100,7 +97,7 @@ class PublishDetails extends React.Component {
 
         <Row>
           <SpaceAround>
-            <ButtonTertiary
+            <ButtonSecondary
               value={'Cancel'}
               onClickHandler={this.onCancel}
             />

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,20 +30,20 @@ class PublishMetadataInputs extends React.Component {
     const { showMetadataInputs, description, isUpdate, nsfw } = this.props;
     return (
       <div>
-        {(showMetadataInputs || isUpdate) && (
+  {(showMetadataInputs || isUpdate) && (
-          <div>
+          <React.Fragment>
             <PublishDescriptionInput
-              description={description}
+              description={this.props.description}
               handleInput={this.handleInput}
             />
             <PublishLicenseInput
               handleSelect={this.handleSelect}
             />
             <PublishNsfwInput
-              nsfw={nsfw}
+              nsfw={this.props.nsfw}
               handleInput={this.handleInput}
             />
-          </div>
+          </React.Fragment>
         )}
         {!isUpdate && (
           <ButtonSecondary

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/AboutPage/index.jsx

@@ -13,6 +13,7 @@ class AboutPage extends React.Component {
         pageUri={'about'}
       >
         <HorizontalSplit
+          collapseOnMobile
           leftSide={<AboutSpeechOverview />}
           rightSide={<AboutSpeechDetails />}
         />

client/src/pages/LoginPage/view.jsx

@@ -20,6 +20,7 @@ class LoginPage extends React.Component {
         pageUri={'login'}
       >
         <HorizontalSplit
+          collapseOnMobile
           leftSide={<ChannelAbout />}
           rightSide={<ChannelTools />}
         />

client/src/pages/ShowAssetDetails/view.jsx

@@ -1,12 +1,31 @@
 import React from 'react';
 import PageLayout from '@components/PageLayout';
-import HorizontalSplit from '@components/HorizontalSplit';
+import * as Icon from 'react-feather';
-import AssetTitle from '@containers/AssetTitle';
 import AssetDisplay from '@containers/AssetDisplay';
 import AssetInfo from '@containers/AssetInfo';
 import ErrorPage from '@pages/ErrorPage';
+import AssetTitle from '@containers/AssetTitle';
 
 class ShowAssetDetails extends React.Component {
+
+  constructor (props) {
+    super(props);
+    this.collapse = this.collapse.bind(this);
+    // this.storageKey = 'vert-split-state-' + this.props.name;
+    // const closed = window && window.localStorage
+    //   ? !!window.localStorage.getItem(this.storageKey) : false;
+    const closed = true;
+    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'));
+  }
+
   render () {
     const { asset } = this.props;
     if (asset) {
@@ -16,11 +35,15 @@ class ShowAssetDetails extends React.Component {
           pageTitle={`${name} - details`}
           asset={asset}
         >
-          <AssetTitle />
+          <div className="asset-main">
-          <HorizontalSplit
+            <AssetDisplay />
-            leftSide={<AssetDisplay />}
+            <AssetTitle />
-            rightSide={<AssetInfo />}
+            
-          />
+            <button className='collapse-button' onClick={this.collapse}>
+              {this.state.closed ? <Icon.PlusCircle className='plus-icon' /> : <Icon.MinusCircle />}
+            </button>
+          </div>
+          {!this.state.closed && <AssetInfo />}
         </PageLayout>
       );
     }

package-lock.json

@@ -11542,6 +11542,11 @@
         "prop-types": "15.6.2"
       }
     },
+    "react-feather": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-1.1.3.tgz",
+      "integrity": "sha512-5+KHu7zp5qvc+zq6N0XjeZDhufl3NVEaQyocg486lXZ+ZwW9z66GO+HXABoZ74OCLjsqhBl48j4BS17VRfyjTQ=="
+    },
     "react-ga": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.5.3.tgz",