From d9d0651352a3ba0f6f5a952747bb7c069ff5d593 Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Thu, 29 Dec 2016 16:06:57 +0900
Subject: [PATCH] modify: adjust space on note-detail component

---
 browser/main/Detail/DetailVars.styl         | 7 +++++++
 browser/main/Detail/MarkdownNoteDetail.styl | 7 ++++++-
 browser/main/Detail/NoteDetailInfo.styl     | 5 +++++
 browser/main/Detail/SnippetNoteDetail.styl  | 7 ++++++-
 browser/main/Detail/TagSelect.styl          | 2 +-
 5 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 browser/main/Detail/DetailVars.styl

diff --git a/browser/main/Detail/DetailVars.styl b/browser/main/Detail/DetailVars.styl
new file mode 100644
index 00000000..a4e3d93d
--- /dev/null
+++ b/browser/main/Detail/DetailVars.styl
@@ -0,0 +1,7 @@
+/**
+ * Varibales for note detail space.
+ */
+
+// Margin on the left side and the right side for NoteDetail component.
+$note-detail-left-margin = 25px
+$note-detail-right-margin = 25px
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index a107cda9..5144464a 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -1,14 +1,18 @@
 @import('NoteDetailInfo')
+@import('DetailVars')
 
 .root
   absolute top right bottom
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
+  background-color $ui-noteDetail-backgroundColor
 
 .body
   absolute left right
-  top $info-height
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
   bottom $statusBar-height
 
 .body-noteEditor
@@ -17,3 +21,4 @@
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index 87a76259..8d34c3d0 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -1,7 +1,12 @@
+@import('DetailVars')
+
 $info-height = 60px
+$info-margin-under-border = 27px
 
 .info
   absolute top left right
+  left $note-detail-left-margin
+  right $note-detail-right-margin
   height $info-height
   border-bottom $ui-border
   background-color $ui-noteDetail-backgroundColor
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index 703e67b2..db0690b4 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -1,14 +1,18 @@
 @import('NoteDetailInfo')
+@import('DetailVars')
 
 .root
   absolute top bottom right
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
+  background-color $ui-noteDetail-backgroundColor
 
 .body
   absolute left right
-  top $info-height
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
   bottom $statusBar-height
   background-color $ui-noteDetail-backgroundColor
 
@@ -65,6 +69,7 @@
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .body
     background-color $ui-dark-noteDetail-backgroundColor
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index 9780e358..a02156aa 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -3,7 +3,7 @@
   position relative
   user-select none
   vertical-align middle
-  width 400px
+  width 300px
   overflow-x scroll
   white-space nowrap