ui/dist/themes/dark.css

@@ -4,10 +4,10 @@
     --color-canvas: #0f1517;
     --color-bg: #1a2327;
     --color-bg-alt: #314048;
-    --color-help: #AAA;
+    --color-help: rgba(255,255,255, 0.5);
     --color-error: #a94442;
     --color-load-screen-text: #FFF;
-    --color-money: var(--color-primary);
+    --color-money: #1DE9B6;
     --color-meta-light: #757575;
     --color-dark-overlay: rgba(15, 21, 23, 0.85);
     --color-download: rgba(255, 255, 255, 0.75);
@@ -60,9 +60,6 @@
     --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
     --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
 
-    /* Media */
-    --media-bg: #90A4AE;
-
     /* Divider */
     --divider: 1px solid rgba(255, 225, 225, 0.12);
 }

ui/js/actions/app.js

@@ -200,7 +200,6 @@ export function doRemoveSnackBarSnack() {
 export function doClearCache() {
   return function(dispatch, getState) {
     window.cacheStore.purge();
-
     return Promise.resolve();
   };
 }

ui/js/component/common.js

@@ -152,19 +152,21 @@ export class Address extends React.PureComponent {
 
   render() {
     return (
-      <input
-        className="input-copyable"
-        type="text"
-        ref={input => {
-          this._inputElem = input;
-        }}
-        onFocus={() => {
-          this._inputElem.select();
-        }}
-        style={addressStyle}
-        readOnly="readonly"
-        value={this.props.address || ""}
-      />
+      <div className="form-field form-field--address">
+        <input
+          className="input-copyable"
+          type="text"
+          ref={input => {
+            this._inputElem = input;
+          }}
+          onFocus={() => {
+            this._inputElem.select();
+          }}
+          style={addressStyle}
+          readOnly="readonly"
+          value={this.props.address || ""}
+        />
+      </div>
     );
   }
 }

ui/js/component/form.js

@@ -105,6 +105,10 @@ export class FormRow extends React.PureComponent {
     return this._field.getOptions();
   }
 
+  focus() {
+    this._field.focus();
+  }
+
   onFocus() {
     this.setState({ isFocus: true });
   }
@@ -128,21 +132,21 @@ export class FormRow extends React.PureComponent {
     delete fieldProps.isFocus;
 
     return (
-      <div className="form-row">
+      <div
+        className={"form-row" + (this.state.isFocus ? " form-row--focus" : "")}
+      >
         {this.props.label && !renderLabelInFormField
           ? <div
               className={
                 "form-row__label-row " +
-                (this.props.labelPrefix ? "form-row__label-row--prefix" : "") +
-                (this.state.isFocus ? "focus " : "")
+                (this.props.labelPrefix ? "form-row__label-row--prefix" : "")
               }
             >
               <label
                 htmlFor={elementId}
                 className={
                   "form-field__label " +
-                  (this.state.isError ? "form-field__label--error" : " ") +
-                  (this.state.isFocus ? "focus" : " ")
+                  (this.state.isError ? "form-field__label--error" : " ")
                 }
               >
                 {this.props.label}

ui/js/component/formField/view.jsx

@@ -48,7 +48,8 @@ class FormField extends React.PureComponent {
       this._element = SimpleMDE;
       this._type = "textarea";
       this._extraElementProps.options = {
-        hideIcons: ["guide", "heading", "image", "fullscreen", "side-by-side"],
+        placeholder: this.props.placeholder,
+        hideIcons: ["heading", "image", "fullscreen", "side-by-side"],
       };
     } else if (formFieldFileSelectorTypes.includes(this.props.type)) {
       this._element = "input";
@@ -124,6 +125,10 @@ class FormField extends React.PureComponent {
     this.props.onBlur && this.props.onBlur();
   }
 
+  focus() {
+    this.refs.field.focus();
+  }
+
   render() {
     // Pass all unhandled props to the field element
     const otherProps = Object.assign({}, this.props),
@@ -134,8 +139,6 @@ class FormField extends React.PureComponent {
       renderElementInsideLabel =
         this.props.label && formFieldNestedLabelTypes.includes(this.props.type);
 
-    const isCheck = this.refs.field && this.refs.field.checked ? true : false;
-
     delete otherProps.type;
     delete otherProps.label;
     delete otherProps.hasError;
@@ -179,9 +182,7 @@ class FormField extends React.PureComponent {
           <label
             htmlFor={elementId}
             className={
-              "form-field__label " +
-              (isError ? "form-field__label--error" : "") +
-              (isCheck ? " checked" : "")
+              "form-field__label " + (isError ? "form-field__label--error" : "")
             }
           >
             {this.props.label}

ui/js/component/publishForm/internal/channelSection.jsx

@@ -89,8 +89,7 @@ class ChannelSection extends React.PureComponent {
     const channel = this.state.addingChannel ? "new" : this.props.channel;
     const { fetchingChannels, channels = [] } = this.props;
 
-    let channelContent = [];
-    channelContent.push(
+    const channelSelector = (
       <FormRow
         key="channel"
         type="select"
@@ -101,7 +100,7 @@ class ChannelSection extends React.PureComponent {
         <option key="anonymous" value="anonymous">
           {__("Anonymous")}
         </option>
-        {this.props.channels.map(({ name }) =>
+        {channels.map(({ name }) =>
           <option key={name} value={name}>{name}</option>
         )}
         <option key="new" value="new">
@@ -109,11 +108,6 @@ class ChannelSection extends React.PureComponent {
         </option>
       </FormRow>
     );
-    if (fetchingChannels) {
-      channelContent = (
-        <BusyMessage message="Updating channels" key="loading" />
-      );
-    }
 
     return (
       <section className="card">
@@ -128,7 +122,9 @@ class ChannelSection extends React.PureComponent {
           </div>
         </div>
         <div className="card__content">
-          {channelContent}
+          {fetchingChannels
+            ? <BusyMessage message="Updating channels" key="loading" />
+            : channelSelector}
         </div>
         {this.state.addingChannel &&
           <div className="card__content">

ui/js/component/publishForm/view.jsx

@@ -584,12 +584,10 @@ class PublishForm extends React.PureComponent {
                       }}
                     />
                   </div>
-                  <div className="card__content">
-                    <h4>{__("Description")}</h4>
-                  </div>
                   <div className="card__content">
                     <FormRow
                       type="SimpleMDE"
+                      label={__("Description")}
                       ref="meta_description"
                       name="description"
                       value={this.state.meta_description}

ui/scss/_vars.scss

@@ -61,7 +61,8 @@ $text-color: #000;
   --input-width: 330px;
   --input-color: var(--text-color);
   --input-border-size: 2px;
-  --input-border-color: rgba(0, 0, 0, 0.42);
+  --input-border-color: rgba(0, 0, 0, 0.54);
+
   /* input:active */
   --input-active-bg: transparent;
 
@@ -149,9 +150,6 @@ $text-color: #000;
   --scrollbar-thumb-active-bg: var(--color-primary);
   --scrollbar-track-bg: transparent;
 
-  /* Media */
-  --media-bg: #FFF;
-
   /* Divider */
   --divider: 1px solid rgba(0, 0, 0, 0.12);
 

ui/scss/all.scss

@@ -23,7 +23,6 @@
 @import "component/_markdown-editor.scss";
 @import "component/_scrollbar.scss";
 @import "component/_tabs.scss";
-@import "component/_media.scss";
 @import "component/_divider.scss";
 @import "component/_checkbox.scss";
 @import "component/_radio.scss";

ui/scss/component/_file-tile.scss

@@ -20,14 +20,4 @@ $height-file-tile: $spacing-vertical * 6;
     margin-top: 0;
   }
 
-  .file-tile__uri {
-    color: var(--color-primary);
-    font-size: 0.82em;
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 85%;
-  }
-
 }

ui/scss/component/_form-field.scss

@@ -18,15 +18,16 @@
   margin-right: 5px;
 }
 
+.form-row--focus {
+  .form-field__label, .form-field__prefix {
+    color: var(--color-primary) !important;
+  }
+}
+
 .form-field {
   display: inline-block;
   margin: 8px 0;
 
-  input[type="checkbox"],
-  input[type="radio"] {
-    cursor: pointer;
-  }
-
   select {
     transition: outline var(--transition-duration) var(--transition-type);
     box-sizing: border-box;
@@ -40,6 +41,12 @@
     }
   }
 
+  input[type="radio"], input[type="checkbox"], {
+    &:checked + .form-field__label,  {
+      color: var(--text-color);
+    }
+  }
+
   input[type="text"].input-copyable {
     background: var(--input-bg);
     color:  var(--input-disabled-color);
@@ -112,26 +119,19 @@
     border: var(--input-border-size) solid var(--input-border-color);
   }
 }
+.form-field--address {
+  width: 100%;
+}
+
 .form-field--SimpleMDE {
   display: block;
 }
 
-
 .form-field__label, .form-row__label {
   color: var(--form-label-color);
-  &[for] {  cursor: pointer; }
-  > input[type="checkbox"], input[type="radio"] {
-    margin-right: 6px;
+  &[for] {
+    cursor: pointer;
   }
-
-  &.focus {
-    color: var(--color-primary) !important;
-  }
-
-  &.checked {
-    color: var(--text-color) !important;
-  }
-
 }
 
 .form-row__label-row .form-field__label--error {

ui/scss/component/_media.scss

@@ -1,5 +0,0 @@
-.media {
-  /* temp fix for text files
-  background: var(--media-bg);
-  */
-}

ui/scss/component/_tabs.scss

@@ -6,6 +6,7 @@ nav.sub-header
   max-width: $width-page-constrained;
   margin-bottom: 40px;
   border-bottom: var(--divider);
+  user-select: none;
   > a
   {
     height: 38px;