rewite whole code

add dataApi
renew PreferencesModal

browser/styles/index.styl

@@ -1,7 +1,7 @@
 $brand-color = #6AA5E9
 
-$danger-color = red
-$danger-lighten-color = #FFE5E6
+$danger-color = #c9302c
+$danger-lighten-color = lighten(#c9302c, 5%)
 
 // Layouts
 $statusBar-height = 24px
@@ -65,16 +65,32 @@ colorDefaultButton()
 // Primary button(Brand color)
 $primary-button-background = $brand-color
 $primary-button-background--hover = darken($brand-color, 5%)
-$primary-button-background--hover = darken($brand-color, 10%)
+$primary-button-background--active = darken($brand-color, 10%)
 
 colorPrimaryButton()
+  color white
   background-color $primary-button-background
   &:hover
     background-color $primary-button-background--hover
   &:active
     background-color $primary-button-background--active
   &:active:hover
-    background-color $primary-button-background--active
+    background-color $primary-button-background--activ
+
+// Danger button(Brand color)
+$danger-button-background = #c9302c
+$danger-button-background--hover = darken(#c9302c, 5%)
+$danger-button-background--active = darken(#c9302c, 10%)
+
+colorDangerButton()
+  color white
+  background-color $danger-button-background
+  &:hover
+    background-color $danger-button-background--hover
+  &:active
+    background-color $danger-button-background--active
+  &:active:hover
+    background-color $danger-button-background--active
 
 /**
 * Nav
@@ -101,7 +117,7 @@ navButtonColor()
 
 $modal-z-index = 1002
 $modal-background = white
-$modal-margin = 64px auto 0
+$modal-margin = 64px auto 64px
 $modal-border-radius = 5px
 
 modal()
@@ -111,3 +127,4 @@ modal()
   background-color $modal-background
   overflow hidden
   border-radius $modal-border-radius
+  box-shadow 2px 2px 10px gray

browser/styles/main/index.styl

@@ -1,8 +1,6 @@
 @import '../vars'
 @import '../mixins/*'
 global-reset()
-@import '../shared/*'
-@import './modal/*'
 @import '../theme/*'
 
 DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
@@ -86,3 +84,26 @@ textarea.block-input
 
 #content
   fullsize()
+
+modalZIndex= 1000
+modalBackColor = transparentify(black, 65%)
+
+.ModalBase
+  fixed top left bottom right
+  z-index modalZIndex
+  &.hide
+    display none
+  .modalBack
+    absolute top left bottom right
+    background-color modalBackColor
+    z-index modalZIndex + 1
+  .modal
+    position relative
+    width 650px
+    margin 50px auto 0
+    z-index modalZIndex + 2
+    background-color white
+    padding 15px
+    color #666666
+    border-radius 5px
+

browser/styles/main/modal/DeleteArticleModal.styl

@@ -1,33 +0,0 @@
-.DeleteArticleModal.modal
-  width 350px !important
-  top 100px
-  user-select none
-  .title
-    font-size 24px
-    margin-bottom 15px
-  .message
-    font-size 14px
-    margin-bottom 15px
-  .control
-    text-align right
-    button
-      border-radius 5px
-      height 33px
-      padding 0 15px
-      font-size 14px
-      background-color white
-      border 1px solid borderColor
-      border-radius 5px
-      margin-left 5px
-      &:hover
-        background-color darken(white, 10%)
-      &:focus
-        border-color focusBorderColor
-      &.danger
-        border-color #E9432A
-        background-color #E9432A
-        color white
-        &:hover
-          background-color lighten(#E9432A, 15%)
-        &:focus
-          background-color lighten(#E9432A, 15%)

browser/styles/main/modal/Preferences.styl

@@ -1,186 +0,0 @@
-menuColor = #808080
-menuBgColor = #E6E6E6
-closeBtnBgColor = #1790C6
-iptFocusBorderColor = #369DCD
-
-.Preferences.modal
-  padding 0
-  border-radius 5px
-  overflow hidden
-  width 720px
-  height 600px
-  &>.header
-    absolute top left right
-    height 50px
-    border-bottom 1px solid borderColor
-    background-color menuBgColor
-    &>.title
-      font-size 22px
-      font-weight bold
-      float left
-      padding-left 30px
-      line-height 50px
-    &>.closeBtn
-      float right
-      font-size 14px
-      background-color closeBtnBgColor
-      color white
-      padding 0 15px
-      height 33px
-      margin-top 9px
-      margin-right 15px
-      border none
-      border-radius 5px
-  &>.nav
-    absolute left bottom
-    top 50px
-    width 180px
-    background-color menuBgColor
-    border-right 1px solid borderColor
-    &>button
-      width 100%
-      height 44px
-      font-size 18px
-      color menuColor
-      border none
-      background-color transparent
-      transition 0.1s
-      text-align left
-      padding-left 15px
-      &:hover
-        background-color darken(menuBgColor, 10%)
-      &.active, &:active
-        background-color brandColor
-        color white
-  &>.content
-    absolute right bottom
-    top 50px
-    left 180px
-    overflow-y auto
-    &>.section
-      padding 10px 20px
-      border-bottom 1px solid borderColor
-      overflow-y auto
-      &:nth-last-child(1)
-        border-bottom none
-      &>.sectionTitle
-        font-size 18px
-        margin 10px 0 5px
-        color brandColor
-      &>.sectionCheck
-        margin-bottom 5px
-        height 33px
-        label
-          width 150px
-          padding-left 15px
-          line-height 33px
-          .sectionCheck-warn
-            font-size 12px
-            margin-left 10px
-            border-left 2px solid brandColor
-            padding-left 5px
-      &>.sectionInput
-        margin-bottom 5px
-        clearfix()
-        height 33px
-        label
-          width 150px
-          padding-left 15px
-          float left
-          line-height 33px
-        input
-          width 250px
-          float left
-          height 33px
-          border-radius 5px
-          border 1px solid borderColor
-          padding 0 10px
-          font-size 14px
-          outline none
-          &:focus
-            border-color iptFocusBorderColor
-      &>.sectionSelect
-        margin-bottom 5px
-        clearfix()
-        height 33px
-        label
-          width 150px
-          padding-left 15px
-          float left
-          line-height 33px
-        select
-          float left
-          width 200px
-          height 25px
-          margin-top 4px
-          border-radius 5px
-          border 1px solid borderColor
-          padding 0 10px
-          font-size 14px
-          outline none
-          &:focus
-            border-color iptFocusBorderColor
-      &>.sectionMultiSelect
-        margin-bottom 5px
-        clearfix()
-        height 33px
-        label
-          width 150px
-          padding-left 15px
-          float left
-          line-height 33px
-        .sectionMultiSelect-input
-          float left
-          select
-            width 80px
-            height 25px
-            margin-top 4px
-            border-radius 5px
-            border 1px solid borderColor
-            padding 0 10px
-            font-size 14px
-            outline none
-            margin-left 5px
-            margin-right 15px
-            &:focus
-              border-color iptFocusBorderColor
-      &>.sectionConfirm
-        clearfix()
-        padding 5px 15px
-        button
-          float right
-          background-color brandColor
-          color white
-          border none
-          border-radius 5px
-          height 33px
-          padding 0 15px
-          font-size 14px
-        .alert
-          float right
-          width 250px
-          padding 10px 15px
-          margin 0 10px 0
-    .alert
-      color infoTextColor
-      background-color infoBackgroundColor
-      font-size 14px
-      padding 15px 15px
-      width 330px
-      border-radius 5px
-      margin 10px auto
-      &.error
-        color errorTextColor
-        background-color errorBackgroundColor
-    &.ContactTab
-      padding 10px
-      .title
-        font-size 18px
-        color brandColor
-        margin-top 10px
-        margin-bottom 10px
-      p
-        line-height 2
-    &.AppSettingTab
-      .description
-        marked()

browser/styles/main/modal/modal.styl

@@ -1,21 +0,0 @@
-modalZIndex= 1000
-modalBackColor = transparentify(black, 65%)
-
-.ModalBase
-  fixed top left bottom right
-  z-index modalZIndex
-  &.hide
-    display none
-  .modalBack
-    absolute top left bottom right
-    background-color modalBackColor
-    z-index modalZIndex + 1
-  .modal
-    position relative
-    width 650px
-    margin 50px auto 0
-    z-index modalZIndex + 2
-    background-color white
-    padding 15px
-    color #666666
-    border-radius 5px