From b2e6276b96dcbf85c0cee583cbb96c177dac0011 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Fri, 5 Aug 2016 08:58:24 +0300
Subject: [PATCH] #14: improve reCaptcha styles

---
 src/components/ui/form/Captcha.jsx |  9 ++++++++-
 src/components/ui/form/form.scss   | 31 ++++++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/form/Captcha.jsx b/src/components/ui/form/Captcha.jsx
index ddfeaf9..7bcba7d 100644
--- a/src/components/ui/form/Captcha.jsx
+++ b/src/components/ui/form/Captcha.jsx
@@ -1,5 +1,7 @@
 import React, { PropTypes } from 'react';
 
+import classNames from 'classnames';
+
 import captcha from 'services/captcha';
 import { skins, SKIN_DARK } from 'components/ui';
 
@@ -25,9 +27,14 @@ export default class Captcha extends FormInputComponent {
     }
 
     render() {
+        const {skin} = this.props;
+
         return (
             <div>
-                <div ref={this.setEl} className={styles.captcha} />
+                <div ref={this.setEl} className={classNames(
+                    styles.captcha,
+                    styles[`${skin}Captcha`]
+                )} />
                 {this.renderError()}
             </div>
         );
diff --git a/src/components/ui/form/form.scss b/src/components/ui/form/form.scss
index 46e708e..b5729b7 100644
--- a/src/components/ui/form/form.scss
+++ b/src/components/ui/form/form.scss
@@ -296,12 +296,35 @@
 }
 
 .captcha {
-    width: 302px;
-    height: 76px;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 302px;
+    height: 77px;
+    overflow: hidden;
+
+    border: 2px solid;
+    transition: border-color .25s;
+
+    > div {
+        margin: -2px;
+    }
+
+    &:hover {
+        border-color: #aaa;
+    }
+
     // minimum captcha width is 302px, which can not be changed
     // using transform to scale down to 296px
-    transform-origin: 0;
-    transform: scaleX(0.98);
+    // transform-origin: 0;
+    // transform: scaleX(0.98);
+}
+
+.darkCaptcha {
+    border-color: lighter($black);
+}
+
+.lightCaptcha {
+    border-color: #dcd8cd;
 }
 
 /**