From 7e087bfbabf7c2d7bacb56408fa4d58ab054605e Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Mon, 10 Jul 2017 17:07:44 +0900
Subject: [PATCH] Fix info panel layout

---
 browser/main/Detail/InfoPanel.js   |  4 +--
 browser/main/Detail/InfoPanel.styl | 48 +++++++++++++++++++-----------
 browser/styles/index.styl          |  2 +-
 3 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/browser/main/Detail/InfoPanel.js b/browser/main/Detail/InfoPanel.js
index 5a1437f7..33858665 100644
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -24,7 +24,7 @@ const InfoPanel = ({
     </div>
     <div styleName='group-section'>
       <div styleName='group-section-label'>
-        CreatedAt
+        Created at
       </div>
       <div styleName='group-section-control'>
         {createdAt}
@@ -32,7 +32,7 @@ const InfoPanel = ({
     </div>
     <div styleName='group-section'>
       <div styleName='group-section-label'>
-        UpdatedAt
+        Updated at
       </div>
       <div styleName='group-section-control'>
         {updatedAt}
diff --git a/browser/main/Detail/InfoPanel.styl b/browser/main/Detail/InfoPanel.styl
index 08b22bd4..f0fd46ad 100644
--- a/browser/main/Detail/InfoPanel.styl
+++ b/browser/main/Detail/InfoPanel.styl
@@ -3,42 +3,54 @@
   pointer-events none
   top 50px
   z-index 200
-  padding 5px
   line-height normal
-  border-radius 2px
+  border-radius 4px
   opacity 0
-  transition 0.1s
+  transition 0.2s
 
 .control-infoButton-panel
   z-index 200
-  margin-top 60px
-  margin-left -160px
+  margin-top 45px
+  margin-left -210px
   position absolute
-  padding 10px
-  padding-left 15px
-  width 300px
-  background-color #EAEAEA
-  border 1px solid #d0d0d0
-  box-shadow 0 0 1px rgba(76,86,103,0.15), 0 2px 18px rgba(31,37,50,0.22)
+  padding 20px
+  width 340px
+  background-color $ui-noteList-backgroundColor
+  border 1px solid $border-color
 
 .group-section
   display flex
   line-height 30px
-  font-size 12px
+  font-size 13px
 
 .group-section-label
   width 70px
   height 20px
   text-align left
-  margin-right 30px
-  font-size 11px
-  color #939395
+  margin-right 50px
+  font-size 13px
+  color $ui-inactive-text-color
 
 .group-section-control
   flex 1
+  font-size 13px
+  color $ui-text-color
+
+.group-section-control input
+  width 160px
+  height 25px
 
 body[data-theme="dark"]
   .control-infoButton-panel
-    background-color #3a404c
-    border 1px solid #474f5c
-    color #ffffff
+    background-color $ui-dark-noteList-backgroundColor
+    border 1px solid $ui-dark-borderColor
+
+  .group-section-label
+    color $ui-inactive-text-color
+
+  .group-section-control
+    color $ui-dark-text-color
+
+  .group-section-control input
+    background-color alpha($ui-dark-borderColor, 80%)
+    color $ui-dark-text-color
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 206d9006..16c6ccb2 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -181,7 +181,7 @@ $ui-dark-noteDetail-backgroundColor = #2D3033
 $ui-dark-tag-backgroundColor = #3A404C
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD
-$ui-dark-button--active-color = white
+$ui-dark-button--active-color = #f4f4f4
 $ui-dark-button--active-backgroundColor = #3A404C
 $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)