Merge pull request #887 from BoostIO/fix-layout

Fix layout

browser/main/NoteList/NoteList.styl

@@ -2,6 +2,7 @@ $control-height = 30px
 
 .root
   absolute left bottom
+  bottom 30px
   top $topBar-height - 1
   background-color $ui-noteList-backgroundColor
 

browser/main/modals/CreateFolderModal.styl

@@ -4,10 +4,9 @@
   height 270px
   overflow hidden
   position relative
-  padding 0 40px
 
 .header
-  height 70px
+  height 80px
   margin-bottom 10px
   margin-top 20px
   font-size 18px
@@ -15,23 +14,27 @@
   background-color $ui-backgroundColor
   color $ui-text-color
 
+.title
+  font-size 36px
+  font-weight 600
+
 .control-folder-label
   text-align left
-  font-size 12px
+  font-size 14px
   color $ui-text-color
 
 .control-folder-input
   display block
-  height 30px
-  width 420px
+  height 40px
+  width 490px
   padding 0 5px
-  margin 10px auto 15px
+  margin 10px 0
   border 1px solid #C9C9C9 // TODO: use variable.
   border-radius 2px
   background-color transparent
   outline none
   vertical-align middle
-  font-size 14px
+  font-size 16px
   &:disabled
     background-color $ui-input--disabled-backgroundColor
   &:focus, &:active
@@ -39,14 +42,13 @@
 
 .control-confirmButton
   display block
-  float right
-  height 30px
-  width 100px
+  height 35px
+  width 140px
   border none
   border-radius 2px
   padding 0 25px
   margin 20px auto
-  font-size 12px
+  font-size 14px
   colorPrimaryButton()
 
 body[data-theme="dark"]
@@ -56,7 +58,6 @@ body[data-theme="dark"]
     height 270px
     overflow hidden
     position relative
-    padding 0 40px
 
   .header
     background-color transparent

browser/main/modals/NewNoteModal.styl

@@ -9,16 +9,19 @@
   font-size 18px
   line-height 50px
   padding 0 15px
-  background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
   color $ui-text-color
+  margin-bottom 20px
+
+.title
+  font-size 36px
+  font-weight 600
 
 .control
-  padding 25px 15px 15px
+  padding 25px 0px
   text-align center
 
 .control-button
-  width 220px
+  width 240px
   height 220px
   margin 0 15px
   border $ui-border
@@ -30,8 +33,8 @@
     colorPrimaryButton()
 
 .control-button-icon
-  font-size 50px
-  margin-bottom 15px
+  font-size 48px
+  margin-bottom 25px
 
 .control-button-label
   font-size 18px
@@ -49,8 +52,6 @@ body[data-theme="dark"]
     modalDark()
 
   .header
-    background-color $ui-dark-button--hover-backgroundColor
-    border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
   .control-button

browser/styles/index.styl

@@ -150,8 +150,10 @@ modal()
   position relative
   z-index $modal-z-index
   width 100%
-  margin-left 40px
-  margin-right 40px
+  margin-left 80px
+  margin-right 80px
+  margin-bottom 80px
+  margin-top 100px
   background-color $modal-background
   overflow hidden
   border-radius $modal-border-radius