add PersonalSettingModal

browser/styles/main/containers/UserContainer.styl

@@ -5,19 +5,23 @@
     width 50px
     text-align center
     box-sizing border-box
-    a.userConfig
+    .userButton
       display block
       width 50px
       height 50px
       background-color black
+      margin 0
+      padding 0
+      border none
+      cursor pointer
       img
         transition 0.1s
-        opacity 0.6
+        opacity 0.8
       box-sizing border-box
       &.active, &:active, &.focus, &:focus, &.hover, &:hover
         img
           opacity 1
-    ul>li
+    ul.planetList>li
       padding 10px 3px
       .shortCut
         margin-top 5px
@@ -68,3 +72,29 @@
         border-color darken(brandBorderColor, 10%)
         background-color brandColor
         color white
+  .UserHome
+    absolute top bottom right
+    left 50px
+    box-sizing border-box
+    padding 15px
+    h1
+      margin 15px 0
+    .userProfile
+      clearfix()
+      .userPhoto
+        circle()
+        float left
+        margin 25px
+      .userIntro
+        float left
+        margin-top 25px
+        .userProfileName
+          font-size 2em
+          margin-bottom 15px
+        .userName
+          font-size 1.5em
+    .userPlanetList
+      padding-left 20px
+      li
+        font-size 1.3em
+        margin 10px

browser/styles/mixins/btnStyle.styl

@@ -1,16 +1,19 @@
 btnDefault()
   border-style solid
   border-width 1px
-  border-color brandBorderColor
+  border-color lightButtonColor
   background-color transparent
-  color brandColor
+  color lightButtonColor
+
   &:hover, &.hover, &:focus, &.focus
-    border-color darken(brandBorderColor, 30%)
-    color darken(brandColor, 30%)
+    border-color darken(lightButtonColor, 50%)
+    color darken(lightButtonColor, 50%)
   &:active, &.active
+    border-color darken(brandBorderColor, 10%)
     background-color brandColor
     color white
-    
+
+
 btnPrimary()
   border-style solid
   border-width 1px

browser/styles/shared/modal.styl

@@ -107,7 +107,7 @@
       height 55px
       circle()
       btnPrimary()
-  .PlanetSettingModal.modal
+  .PlanetSettingModal.modal, .PersonalSettingModal.modal
     width 720px
     height 500px
     .settingNav
@@ -117,7 +117,7 @@
       padding 10px
       border-right solid 1px borderColor
       h1
-        margin 40px 15px
+        margin 40px auto
         font-size 1.5em
         color brandColor
       nav
@@ -139,11 +139,70 @@
             background-color hoverBackgroundColor
           &:active, &.active
             color brandColor
-
     .settingBody
       absolute top bottom right
       left 200px
       padding 15px
+  .PersonalSettingModal.modal
+    .settingBody
+      .profile
+        height 500px
+        padding-top 50px
+        .profileTop
+          box-sizing border-box
+          height 200px
+          border-bottom solid 1px borderColor
+        .profileBottom
+          margin-top 25px
+          height 200px
+        .profileFormRow
+          clearfix()
+          margin-bottom 15px
+          label
+            display block
+            float left
+            width 150px
+            line-height 33px
+            text-align left
+          input
+            float left
+            width 250px
+          .saveButton
+            float right
+      .contact
+        height 500px
+        padding-top 50px
+        p
+          text-align left
+          margin-bottom 15px
+          line-height 140%
+        input
+          margin-bottom 15px
+        textarea
+          margin-bottom 15px
+          max-height 250px
+        .contactFormRow
+          clearfix()
+          .saveButton
+            float right
+      .info
+        text-align left
+        .infoLabel
+          margin 75px 0 25px
+        .externalList
+          padding-left 10px
+          li
+            margin 15px
+      .logout
+        .logoutLabel
+          margin 100px 0 25px
+          font-size 1.4em
+        .userPhoto
+          margin-bottom 25px
+          circle()
+
+  .PlanetSettingModal.modal
+    .settingBody
       .planetProfile
         height 500px
         padding-top 50px
@@ -174,7 +233,7 @@
                 margin-right 0
             .deleteButton
               float left
-      .manageMember
+      .members
         height 500px
         box-sizing border-box
         padding-top 50px