Split components

src/components/alert/index.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react';
+import { translate } from 'react-i18next';
+import style from './theme.styl';
+
+export default (props) => (
+    <div className={style['success']}>
+        {props.message}
+        <i className="material-icons">check</i>
+    </div>
+)

src/components/alert/theme.styl

@@ -0,0 +1,35 @@
+.success
+    background: #33AA65
+    padding: 10px 30px
+    border-radius: 30px
+    z-index: 999
+    position fixed
+    bottom 25px
+    right 50px
+    color $Text1
+    font-family $MainFont, $AlternateFont
+    font-size 16px
+    i
+        font-size 14px
+
+    #checkmark-notify
+        display inline-block
+        width 20px
+        height 20px
+        transform rotate(45deg)
+
+    #stem-notify
+        position absolute
+        width 3px
+        height 12px
+        background-color $Text1
+        left 11px
+        top 6px
+
+    #kick-notify
+        position absolute
+        width 6px
+        height 3px
+        background-color $Text1
+        left 6px
+        top 15px

src/components/button/index.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+import { translate } from 'react-i18next';
+import style from './theme.styl';
+
+export default (props) => (
+    <div className={style.button}>
+       {props.text}
+    </div>
+)

src/components/button/theme.styl

@@ -0,0 +1,9 @@
+.button
+    font-family: $TitleFont
+    background: $MainColor
+    color: $Pure_White
+    text-transform: uppercase
+    display: inline-block
+    padding: 5px 10px
+    border-radius: 4px
+    cursor: pointer

src/row/theme.styl → src/components/row/theme.styl

@@ -6,7 +6,7 @@
     border-bottom 1px solid rgba(225,225,225,0.15)
     padding 35px 20px
     transition: all 0.3s ease
-    transition-property: transform, opacity;
+    transition-property: background, transform, opacity;
     background-color: $BgColor1
     &.advanced
         overflow: hidden
@@ -50,7 +50,7 @@
         input[type=text],
         input[type=number],
         input[type=password]
-            padding: 5px 10px
+            padding: 7px 10px
             border-radius 5px
             color #FFF
             outline 0
@@ -62,17 +62,3 @@
             background $InputBg
             -webkit-box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.85)
             transition background .2s ease
-
-
-        input[type=text]
-            &.dir-path
-                width: 225px
-
-        .btn
-            font-family: $TitleFont
-            background: $MainColor
-            color: $Pure_White
-            text-transform: uppercase
-            i
-                margin: 0 5px 0 0
-                font-size: 18px

src/switch/index.js → src/components/switch/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { translate } from 'react-i18next';
-import style from './styl/theme.styl';
+import style from './theme.styl';
 
 export default (props) => (
     <label className={style.switch}>

src/index.js

@@ -2,8 +2,10 @@ import React, { Component } from 'react';
 import { translate } from 'react-i18next';
 import style from './styl/theme.styl';
 
-import Row from './row';
-import Switch from './switch';
+import Row from './components/row';
+import Alert from './components/alert';
+import Button from './components/button';
+import Switch from './components/switch';
 
 let GoBackButton = (props) => (
     <div className={style['go-back']}>
@@ -29,13 +31,6 @@ let ActionBar = (props) => (
     </div>
 )
 
-let SuccessAlert = (props) => (
-    <div className={style['success_alert']} style={{display:'none'}}>
-        {props.t('Saved')}
-        <i className={style['material-icons']}>check</i>
-    </div>
-                               )
-
 let CloseButton = (props) => (props)
 
 let NavTabs = (props) => (
@@ -57,10 +52,13 @@ class Settings extends Component {
         return (
             <div>
                 <Row icon="collections_bookmark" title="Torrent Collection" helper="Display a view with your Torrent Collection" action={<Switch/>}/>
+                <Row icon="folder" title="Cache Directory" helper="Open the Directory where Butter keep it's cache" action={<Button text={props.t('Open')}/>}/>
+                <Row icon="location_on" title="IP Adress" helper="Set this machine's IP Adress" action={<input type="text"/>}/>
+
                 <div className={[style['settings'], props.settings.showAdvancedsettings?'show-advanced':''].join(' ')}>
 
                     <div className={style['settings-container']}>
-                        <SuccessAlert {...props}/>
+                        <Alert message={props.t('Saved')}/>
                         <ActionBar {...props}/>
                         <NavTabs {...props}/>
                         <div className={style['tab-content-wrapper']}></div>