From 8070ab39ef8f78ad01a5250a6616dadfd31c8f15 Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Mon, 30 Apr 2018 10:24:02 +0300
Subject: [PATCH] restyle input

---
 web/app/common/constants.js                   |  2 +-
 .../_preview/input__button_type_preview.scss  |  6 +++++
 .../_type/_send/input__button_type_send.scss  |  8 +++++++
 .../input/__button/input__button.scss         | 22 +++++--------------
 .../input/__buttons/input__buttons.scss       |  3 +++
 .../input/__field/input__field.scss           | 14 ++----------
 web/app/components/input/index.js             |  4 ++++
 web/app/components/input/input.jsx            |  5 ++++-
 web/app/components/input/input.scss           |  2 ++
 web/app/components/input/input.vars.scss      |  2 --
 10 files changed, 35 insertions(+), 33 deletions(-)
 create mode 100644 web/app/components/input/__button/_type/_preview/input__button_type_preview.scss
 create mode 100644 web/app/components/input/__button/_type/_send/input__button_type_send.scss
 create mode 100644 web/app/components/input/__buttons/input__buttons.scss
 delete mode 100644 web/app/components/input/input.vars.scss

diff --git a/web/app/common/constants.js b/web/app/common/constants.js
index 8399dcbc..c076403c 100644
--- a/web/app/common/constants.js
+++ b/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';
diff --git a/web/app/components/input/__button/_type/_preview/input__button_type_preview.scss b/web/app/components/input/__button/_type/_preview/input__button_type_preview.scss
new file mode 100644
index 00000000..b6f448e3
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/web/app/components/input/__button/_type/_send/input__button_type_send.scss b/web/app/components/input/__button/_type/_send/input__button_type_send.scss
new file mode 100644
index 00000000..771dec10
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/web/app/components/input/__button/input__button.scss b/web/app/components/input/__button/input__button.scss
index ffd4c323..ba5cd3aa 100644
--- a/web/app/components/input/__button/input__button.scss
+++ b/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;
+  }
 }
diff --git a/web/app/components/input/__buttons/input__buttons.scss b/web/app/components/input/__buttons/input__buttons.scss
new file mode 100644
index 00000000..91718a82
--- /dev/null
+++ b/web/app/components/input/__buttons/input__buttons.scss
@@ -0,0 +1,3 @@
+.input__buttons {
+  margin-top: 4px;
+}
diff --git a/web/app/components/input/__field/input__field.scss b/web/app/components/input/__field/input__field.scss
index 0e8b5a1a..ad177ea6 100644
--- a/web/app/components/input/__field/input__field.scss
+++ b/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;
   }
diff --git a/web/app/components/input/index.js b/web/app/components/input/index.js
index 4e017dfa..b38176c9 100644
--- a/web/app/components/input/index.js
+++ b/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');
diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx
index 55122cc0..fa35eb08 100644
--- a/web/app/components/input/input.jsx
+++ b/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>
     );
   }
diff --git a/web/app/components/input/input.scss b/web/app/components/input/input.scss
index 491a7ed3..cfd5f6d0 100644
--- a/web/app/components/input/input.scss
+++ b/web/app/components/input/input.scss
@@ -2,4 +2,6 @@
   position: relative;
   display: block;
   font-size: 0;
+  border: 3px solid #eee;
+  background: #eee;
 }
diff --git a/web/app/components/input/input.vars.scss b/web/app/components/input/input.vars.scss
deleted file mode 100644
index 66a1d2d9..00000000
--- a/web/app/components/input/input.vars.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$borderRadius: 4px;
-$buttonWidth: 72px;