restyle input

web/app/common/constants.js

@@ -1,4 +1,4 @@
-const BASE_URL = 'https://remark42.radio-t.com/';
+const BASE_URL = 'https://remark42.radio-t.com';
 const API_BASE = '/api/v1';
 const NODE_ID = 'remark42';
 const COUNTER_NODE_CLASSNAME = 'remark42__counter';

web/app/components/input/__button/_type/_preview/input__button_type_preview.scss

@@ -0,0 +1,6 @@
+.input__button_type_preview {
+  &:hover {
+    box-shadow: inset 0 0 0 2px #0aa;
+    color: #099;
+  }
+}

web/app/components/input/__button/_type/_send/input__button_type_send.scss

@@ -0,0 +1,8 @@
+.input__button_type_send {
+  background: #0aa;
+  color: #fff;
+
+  &:hover {
+    background: #06c5c5;
+  }
+}

web/app/components/input/__button/input__button.scss

@@ -1,27 +1,15 @@
-@import '../input.vars';
-
 .input__button {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
   box-sizing: border-box;
-  width: $buttonWidth;
-  height: 100%;
-  padding: 0 10px;
+  padding: 8px 12px;
   font-size: 16px;
   border: 0;
-  background: #0aa;
-  border-radius: 0 $borderRadius $borderRadius 0;
-  color: #fff;
   cursor: pointer;
 
-  &:hover {
-    background: #06c5c5;
-  }
-
   &:focus {
     outline: none;
   }
+
+  + .input__button {
+    margin-left: 8px;
+  }
 }

web/app/components/input/__buttons/input__buttons.scss

@@ -0,0 +1,3 @@
+.input__buttons {
+  margin-top: 4px;
+}

web/app/components/input/__field/input__field.scss

@@ -1,5 +1,3 @@
-@import '../input.vars';
-
 .input__field {
   $lineHeight: 1.4;
   $fontSize: 16px;
@@ -10,26 +8,18 @@
   width: 100%;
   height: $height;
   min-height: $height;
-  padding: $paddingVrt ($buttonWidth + 8px) $paddingVrt 15px;
+  padding: $paddingVrt 12px;
   font-family: 'PT Sans', Helvetica, Arial, sans-serif;
   font-size: $fontSize;
   line-height: $lineHeight;
-  box-shadow: inset 0 0 0 1px #eee;
   border: 0;
-  border-radius: $borderRadius;
   resize: none;
 
   &:focus {
-    box-shadow: inset 0 0 0 1px #06c5c5;
+    box-shadow: inset 0 0 0 2px #0aa;
     outline: none;
   }
 
-  &:valid {
-    + .input__button {
-      display: block;
-    }
-  }
-
   &:disabled {
     color: #777;
   }

web/app/components/input/index.js

@@ -3,4 +3,8 @@ export { default } from './input';
 require('./input.scss');
 
 require('./__button/input__button.scss');
+require('./__button/_type/_preview/input__button_type_preview.scss');
+require('./__button/_type/_send/input__button_type_send.scss');
+
+require('./__buttons/input__buttons.scss');
 require('./__field/input__field.scss');

web/app/components/input/input.jsx

@@ -69,7 +69,10 @@ export default class Input extends Component {
           {props.children}
         </textarea>
 
-        <button className="input__button" type="submit">Send</button>
+        <div className="input__buttons">
+          <button className={b('input__button', {}, { type: 'preview' })} type="button">Preview</button>
+          <button className={b('input__button', {}, { type: 'send' })} type="submit">Send</button>
+        </div>
       </form>
     );
   }

web/app/components/input/input.scss

@@ -2,4 +2,6 @@
   position: relative;
   display: block;
   font-size: 0;
+  border: 3px solid #eee;
+  background: #eee;
 }

web/app/components/input/input.vars.scss

@@ -1,2 +0,0 @@
-$borderRadius: 4px;
-$buttonWidth: 72px;