改善：Login/Register部分のデザイン

Author: Rokt33r

browser/main/Containers/LoginContainer.jsx

@@ -47,7 +47,7 @@ module.exports = React.createClass({
             <input className='stripInput' valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
           </div>
           <div className='form-group'>
-            <button className='btn-primary' type='submit'>Log In</button>
+            <button className='logInButton' type='submit'>Log In</button>
           </div>
         </form>
       </div>

browser/main/Containers/RegisterContainer.jsx

@@ -58,7 +58,7 @@ module.exports = React.createClass({
             <input className='stripInput' valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
           </div>
           <div className='form-group'>
-            <button className='btn-primary' type='submit'>Sign Up</button>
+            <button className='logInButton' type='submit'>Sign Up</button>
           </div>
         </form>
 

browser/styles/main/containers/LoginContainer.styl

@@ -1,11 +1,11 @@
 .LoginContainer, .RegisterContainer
-  margin 15px auto
+  margin 0 auto
   padding 25px 15px
   box-sizing border-box
   color inactiveTextColor
   .logo
-    width 215px
-    height 215px
+    width 150px
+    height 150px
     display block
     margin 0 auto
   .authNavigator
@@ -23,23 +23,24 @@
       margin-bottom 25px
     .facebookBtn, .githubBtn
       margin 0 45px
-      width 75px
-      height 75px
-      line-height 75px
-      font-size 35px
+      width 50px
+      height 50px
+      line-height 50px
+      font-size 25px
       text-align center
       background-image none
       color white
       border none
-      border-radius 37.5px
+      border-radius 25px
       cursor pointer
     .facebookBtn
       background-color facebookColor
       &:hover, &.hover
         background-color lighten(facebookColor, 25%)
     .githubBtn
       background-color githubBtn
-      font-size 42px
+      font-size 30px
+      line-height 30px
       &:hover, &.hover
         background-color lighten(githubBtn, 25%)
   .divider
@@ -55,13 +56,14 @@
     margin 0 auto 45px
     div.form-group:last-child
       margin-top 45px
-      .btn-primary
+      button.logInButton
+        btnPrimary()
+        height 44px
+        border-radius 22px
         display block
         width 200px
+        font-size 1em
         margin 0 auto
-        &.hover, &:hover
-          background-color brandColor
-          color white
   p.alert
     text-align center
     font-size 0.8em

browser/styles/main/index.styl

@@ -49,18 +49,11 @@ button
     margin-bottom 5px
 
 .stripInput
-  border none
-  border-bottom 1px solid borderColor
-  padding 5px 15px
-  width 100%
+  stripInput()
   display block
+  width 100%
   font-size 1em
   height 33px
-  box-sizing border-box
-  transition 0.1s
-  &:focus, &.focus
-    border-bottom 1px solid brandBorderColor
-    outline none
 
 .block-input, .inline-input
   border solid 1px borderColor

browser/styles/mixins/btnStyle.styl browser/styles/mixins/btn.stylbrowser/styles/mixins/btnStyle.styl renamed to browser/styles/mixins/btn.styl

@@ -0,0 +1,9 @@
+stripInput()
+  border none
+  border-bottom 1px solid borderColor
+  padding 5px 15px
+  box-sizing border-box
+  transition 0.1s
+  &:focus, &.focus
+    border-bottom 1px solid brandBorderColor
+    outline none