From 313e8b8c9815bb43a520ba57f717548e363c3aa9 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 6 Apr 2017 22:11:59 +0900 Subject: [PATCH 01/50] Fix the dark theme layout of Sidebar and NoteList --- browser/components/NoteItem.styl | 8 ++++---- browser/components/NoteItemSimple.styl | 8 ++++---- browser/components/SideNavFilter.styl | 9 ++++++--- browser/main/NoteList/NoteList.styl | 8 +++++++- browser/main/global.styl | 4 ++-- browser/styles/index.styl | 3 ++- 6 files changed, 25 insertions(+), 15 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index ad3ec91f..edeb6963 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -127,9 +127,9 @@ body[data-theme="dark"] border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor &:active - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor &:hover - background-color alpha($ui-active-color, 20%) + background-color alpha($ui-dark-button--active-backgroundColor, 20%) .item-wrapper border-color $ui-dark-borderColor @@ -137,7 +137,7 @@ body[data-theme="dark"] .item--active @extend .item border-color $ui-dark-borderColor - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor .item-wrapper border-color transparent .item-title @@ -148,7 +148,7 @@ body[data-theme="dark"] .item-bottom-tagList-empty color white &:hover - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor .item-title color $ui-dark-text-color diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 29a2e76f..3c7e8899 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -63,20 +63,20 @@ body[data-theme="dark"] border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor &:active - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor &:hover - background-color alpha($ui-active-color, 20%) + background-color alpha($ui-dark-button--active-backgroundColor, 20%) .item-simple--active @extend .item-simple border-color $ui-dark-borderColor - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor .item-simple-title .item-simple-title-empty color white border-color transparent &:hover - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor .item-simple-title color $ui-dark-text-color diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 10567f0b..71a41472 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -49,10 +49,13 @@ body[data-theme="dark"] .menu-button navDarkButtonColor() + &:active + background-color $ui-dark-button--active-backgroundColor + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) .menu-button--active - @extend .menu-button - background-color $ui-dark-button--active-backgroundColor color $ui-dark-button--active-color - &:hover + background-color $ui-dark-button--active-backgroundColor + &:active background-color $ui-dark-button--active-backgroundColor diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index 0adb3678..3484100e 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -26,6 +26,8 @@ $control-height = 30px padding 0 border none background-color transparent + outline none + cursor pointer font-size 10px .control-button @@ -67,4 +69,8 @@ body[data-theme="dark"] color $ui-dark-inactive-text-color &:hover color $ui-dark-text-color - + + .control-button--active + color $ui-dark-text-color + &:active + color $ui-dark-text-color \ No newline at end of file diff --git a/browser/main/global.styl b/browser/main/global.styl index b0b643b6..552e0d6c 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -1,6 +1,6 @@ global-reset() -DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif +DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif html, body width 100% @@ -11,7 +11,7 @@ body font-family DEFAULT_FONTS color textColor font-size fontSize - font-weight 400 + font-weight 200 button, input, select, textarea font-family DEFAULT_FONTS diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 26a00f1b..b72d1a73 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -158,6 +158,7 @@ topBarButtonLight() opacity 1 // Dark theme +$ui-dark-active-color = #3A404C $ui-dark-borderColor = lighten(#21252B, 20%) $ui-dark-backgroundColor = #1D1D1D $ui-dark-noteList-backgroundColor = #181818 @@ -166,7 +167,7 @@ $ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3) $dark-background-color = lighten($ui-dark-backgroundColor, 10%) $ui-dark-text-color = #DDDDDD $ui-dark-button--active-color = white -$ui-dark-button--active-backgroundColor = #6AA5E9 +$ui-dark-button--active-backgroundColor = #3A404C $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-topbar-button-color = #939395 From d45033ae8ead5b3e62f00addd3b23da5d7e90284 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 6 Apr 2017 22:59:09 +0900 Subject: [PATCH 02/50] Change the font-size at NoteList --- browser/components/NoteItem.styl | 8 ++++---- browser/components/NoteItemSimple.styl | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index edeb6963..93899a60 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -50,7 +50,7 @@ $control-height = 30px background-color $ui-active-color .item-title - font-size 14px + font-size 12px height 40px box-sizing border-box line-height 24px @@ -63,7 +63,7 @@ $control-height = 30px position absolute top 20px right 25px - font-size 14px + font-size 12px color $ui-inactive-text-color .item-title-empty @@ -105,7 +105,7 @@ $control-height = 30px .item-bottom-time color $ui-inactive-text-color - font-size 12px + font-size 10px .item-star position absolute @@ -114,7 +114,7 @@ $control-height = 30px width 34px height 34px color $ui-favorite-star-button-color - font-size 14px + font-size 12px padding 0 border-radius 17px diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 3c7e8899..be546f70 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -36,7 +36,7 @@ $control-height = 30px background-color $ui-active-color .item-simple-title - font-size 14px + font-size 12px height 40px box-sizing border-box line-height 24px From 0a89dcc6d898bbff0613f5e2a312f4742fc05db2 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 6 Apr 2017 23:09:24 +0900 Subject: [PATCH 03/50] Change the font-size at SideNav --- browser/components/SideNavFilter.styl | 2 +- browser/components/StorageItem.styl | 4 ++-- browser/main/SideNav/SideNav.styl | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 71a41472..148ad401 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -5,7 +5,7 @@ navButtonColor() height 32px padding 0 15px - font-size 14px + font-size 12px width 100% text-align left overflow ellipsis diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index 6bb0ca8a..796a4816 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -13,7 +13,7 @@ text-align left border none overflow ellipsis - font-size 14px + font-size 12px &:first-child margin-top 0 &:hover @@ -67,4 +67,4 @@ .folderList-item-name--folded @extend .folderList-item-name - padding-left 14px + padding-left 12px diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 8a239daf..6ed5c215 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -12,7 +12,7 @@ navButtonColor() height $topBar-height padding 0 15px - font-size 14px + font-size 12px width 100% text-align left From 573d3ce11e3453e8771dccc0c7c6072f915f86db Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 6 Apr 2017 23:25:38 +0900 Subject: [PATCH 04/50] Fix the layout on NoteList --- browser/components/NoteItem.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 93899a60..ca28eccb 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -28,7 +28,7 @@ $control-height = 30px color white .item-wrapper - padding 20px 0 + padding 15px 0 border-bottom $ui-border .item--active From c1051afdc0fcbf249095e33e70f8fb607b4a495f Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 00:38:49 +0900 Subject: [PATCH 05/50] Change the SideNav layout --- browser/components/SideNavFilter.styl | 2 +- browser/components/StorageItem.styl | 22 +++++++++++++++++++++- browser/main/SideNav/SideNav.styl | 9 +++++---- browser/main/SideNav/StorageItem.styl | 25 +++++++++++++++---------- 4 files changed, 42 insertions(+), 16 deletions(-) diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 148ad401..a1933095 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -53,7 +53,7 @@ body[data-theme="dark"] background-color $ui-dark-button--active-backgroundColor &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) - + color $ui-button--active-color .menu-button--active color $ui-dark-button--active-color background-color $ui-dark-button--active-backgroundColor diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index 796a4816..96d232d8 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -33,7 +33,7 @@ .folderList-item-name display block flex 1 - padding 0 30px + padding 0 15px height 26px line-height 26px border-width 0 0 0 3px @@ -68,3 +68,23 @@ .folderList-item-name--folded @extend .folderList-item-name padding-left 12px + + +body[data-theme="dark"] + .folderList-item + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-button--active-color + &:active + color $ui-button--active-color + background-color $ui-dark-button--active-backgroundColor + + .folderList-item--active + @extend .folderList-item + color $ui-button--active-color + background-color $ui-dark-button--active-backgroundColor + &:active + background-color $ui-dark-button--active-backgroundColor + &:hover + color $ui-button--active-color + background-color $ui-dark-button--active-backgroundColor diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 6ed5c215..c06a9272 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -110,10 +110,11 @@ body[data-theme="dark"] .top-menu navDarkButtonColor() + &:active + background-color $ui-dark-button--active-backgroundColor + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-button--active-color .storageList-empty color $ui-dark-inactive-text-color - - .navToggle - navDarkButtonColor() - diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index eeef3bf4..b4940fc8 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -108,16 +108,21 @@ margin 0 5px body[data-theme="dark"] - .header-toggleButton - .header-addFolderButton - color $ui-dark-inactive-text-color + .header &:hover - color $ui-dark-text-color + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-button--active-color &:active - color $ui-dark-active-color + color $ui-button--active-color + background-color $ui-dark-button--active-backgroundColor + .header--active - .header-toggleButton - .header-addFolderButton - color white - &:active - color white + @extend .header + .header-info + color $ui-button--active-color + background-color $ui-dark-button--active-backgroundColor + &:active + background-color $ui-dark-button--active-backgroundColor + &:hover + color $ui-button--active-color + background-color $ui-dark-button--active-backgroundColor From af6cd10e285e1c583791f2e8b090229d5730a1ea Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 14:24:38 +0900 Subject: [PATCH 06/50] Change the layout at SideNav --- browser/components/SideNavFilter.styl | 9 ++++++++- browser/components/StorageItem.styl | 7 ++++--- browser/main/SideNav/SideNav.styl | 6 ++++++ browser/main/SideNav/StorageItem.styl | 13 +++++++------ browser/styles/index.styl | 2 +- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index a1933095..28a37c8d 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -3,6 +3,12 @@ .menu-button navButtonColor() + &:active + background-color alpha($ui-button--active-backgroundColor, 20%) + color $ui-text-color + &:hover + background-color alpha($ui-button--active-backgroundColor, 20%) + color $ui-text-color height 32px padding 0 15px font-size 12px @@ -12,10 +18,11 @@ .menu-button--active @extend .menu-button + color $ui-text-color background-color $ui-button--active-backgroundColor - color $ui-button--active-color &:hover background-color $ui-button--active-backgroundColor + color $ui-text-color .menu-button-label margin-left 5px diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index 96d232d8..acea72fc 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -17,17 +17,18 @@ &:first-child margin-top 0 &:hover + color $ui-text-color background-color $ui-button--hover-backgroundColor &:active - color $ui-button--active-color + color $ui-text-color background-color $ui-button--active-backgroundColor .folderList-item--active @extend .folderList-item - color $ui-button--active-color + color $ui-text-color background-color $ui-button--active-backgroundColor &:hover - color $ui-button--active-color + color $ui-text-color background-color $ui-button--active-backgroundColor .folderList-item-name diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index c06a9272..6b0bfbd3 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -15,6 +15,12 @@ font-size 12px width 100% text-align left + &:hover + color $ui-text-color + background-color $ui-button--hover-backgroundColor + &:active + color $ui-text-color + background-color $ui-button--active-backgroundColor .top-menu-label margin-left 5px diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index b4940fc8..12c71d1b 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -9,26 +9,27 @@ margin-bottom 5px transition 0.15s &:hover + color $ui-text-color background-color $ui-button--hover-backgroundColor &:active .header-toggleButton .header-addFolderButton - color white + color $ui-text-color &:active - color $ui-active-color + color $ui-text-color .header--active @extend .header .header-info - color $ui-button--active-color + color $ui-text-color background-color $ui-button--active-backgroundColor .header-toggleButton .header-addFolderButton - color white + color $ui-text-color &:active &:hover &:hover:active - color white + color $ui-text-color .header-toggleButton position absolute @@ -42,7 +43,7 @@ &:hover color $ui-text-color &:active - color $ui-active-color + color $ui-text-color .header-info display block diff --git a/browser/styles/index.styl b/browser/styles/index.styl index b72d1a73..9dac878c 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -25,7 +25,7 @@ $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3) $ui-button-color = #939395 $ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08) $ui-button--active-color = white -$ui-button--active-backgroundColor = #6AA5E9 +$ui-button--active-backgroundColor = #D4D4D4 $ui-button--focus-borderColor = lighten(#369DCD, 25%) // UI Tooltip From a27d8192eedfba50de79aa8fd17c55fba7d818fa Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 15:05:18 +0900 Subject: [PATCH 07/50] Change the white theme layout of NoteList --- browser/components/NoteItem.styl | 21 ++++++++++----------- browser/components/NoteItemSimple.styl | 20 ++++++++++---------- browser/main/NoteList/NoteList.styl | 10 +++++----- 3 files changed, 25 insertions(+), 26 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index ca28eccb..2e643789 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -13,19 +13,18 @@ $control-height = 30px background-color $ui-noteList-backgroundColor transition background-color 0.15s &:hover - background-color alpha($ui-active-color, 20%) + background-color alpha($ui-button--active-backgroundColor, 40%) &:active - background-color $ui-active-color - color white + background-color $ui-button--active-backgroundColor + color $ui-text-color .item-title .item-title-empty .item-bottom-tagList-empty .item-bottom-time .item-title-icon - color white .item-bottom-tagList-item background-color transparent - color white + color $ui-text-color .item-wrapper padding 15px 0 @@ -33,21 +32,21 @@ $control-height = 30px .item--active @extend .item - background-color $ui-active-color - color white + background-color $ui-button--active-backgroundColor + color $ui-text-color .item-title .item-title-empty .item-bottom-tagList-empty .item-bottom-time .item-title-icon - color white + color $ui-text-color .item-bottom-tagList-item background-color transparent - color white + color $ui-text-color .item-wrapper border-color transparent &:hover - background-color $ui-active-color + background-color $ui-button--active-backgroundColor .item-title font-size 12px @@ -57,7 +56,7 @@ $control-height = 30px padding-top 5px padding-bottom 20px overflow ellipsis - color $ui-text-color + color $ui-inactive-text-color .item-title-icon position absolute diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index be546f70..a51deb17 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -13,27 +13,27 @@ $control-height = 30px background-color $ui-noteList-backgroundColor transition background-color 0.15s &:hover - background-color alpha($ui-active-color, 20%) + background-color alpha($ui-button--active-backgroundColor, 40%) &:active - background-color $ui-active-color - color white + background-color $ui-button--active-backgroundColor + color $ui-text-color .item-simple-title .item-simple-title-empty .item-simple-title-icon - color white + color $ui-text-color .item-simple--active @extend .item-simple - background-color $ui-active-color - color white + background-color $ui-button--active-backgroundColor + color $ui-text-color .item-simple-title .item-simple-title-empty border-color transparent - color white + color $ui-text-color .item-simple-title-icon - color white + color $ui-text-color &:hover - background-color $ui-active-color + background-color $ui-button--active-backgroundColor .item-simple-title font-size 12px @@ -42,7 +42,7 @@ $control-height = 30px line-height 24px padding-top 8px overflow ellipsis - color $ui-text-color + color $ui-inactive-text-color border-bottom $ui-border .item-simple-title-icon diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index 3484100e..d4e68574 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -35,18 +35,18 @@ $control-height = 30px padding 0 background-color transparent border none - color $ui-inactive-text-color + color alpha($ui-inactive-text-color, 60%) transition 0.15s &:active, &:active:hover - color $ui-active-color + color $ui-inactive-text-color &:hover - color $ui-text-color + color $ui-inactive-text-color .control-button--active @extend .control-button - color $ui-active-color + color $ui-inactive-text-color &:hover - color $ui-active-color + color $ui-inactive-text-color .list absolute left right bottom From 62d39e67151a40d9bafef2fbe7e20eec70442d84 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 15:12:46 +0900 Subject: [PATCH 08/50] Change the StorageList layout --- browser/components/StorageItem.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index acea72fc..1da4e7de 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -37,7 +37,7 @@ padding 0 15px height 26px line-height 26px - border-width 0 0 0 3px + border-width 0 0 0 2px border-style solid border-color transparent overflow hidden From 657d69a0fb7b3df8317c3db799a8eeada6d2145a Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 15:25:59 +0900 Subject: [PATCH 09/50] Fix the dark theme layout at NoteList --- browser/components/NoteItem.styl | 12 ++++++++---- browser/components/NoteItemSimple.styl | 9 ++++++++- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 2e643789..2934eab7 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -11,7 +11,7 @@ $control-height = 30px user-select none cursor pointer background-color $ui-noteList-backgroundColor - transition background-color 0.15s + transition background-color 0.2s &:hover background-color alpha($ui-button--active-backgroundColor, 40%) &:active @@ -141,6 +141,10 @@ body[data-theme="dark"] border-color transparent .item-title color white + .item-title-icon + color white + .item-bottom-time + color white .item-bottom-tagList-item background-color transparent color white @@ -150,13 +154,13 @@ body[data-theme="dark"] background-color $ui-dark-button--active-backgroundColor .item-title - color $ui-dark-text-color + color $ui-inactive-text-color .item-title-icon - color $ui-darkinactive-text-color + color $ui-inactive-text-color .item-title-empty - color $ui-dark-inactive-text-color + color $ui-inactive-text-color .item-bottom-tagList-item background-color $ui-dark-tag-backgroundColor diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index a51deb17..c07c1817 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -63,6 +63,7 @@ body[data-theme="dark"] border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor &:active + color white background-color $ui-dark-button--active-backgroundColor &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) @@ -71,15 +72,21 @@ body[data-theme="dark"] @extend .item-simple border-color $ui-dark-borderColor background-color $ui-dark-button--active-backgroundColor + color white .item-simple-title + color white + .item-simple-title-icon + color white .item-simple-title-empty color white border-color transparent + &:active + color white &:hover background-color $ui-dark-button--active-backgroundColor .item-simple-title - color $ui-dark-text-color + color $ui-inactive-text-color border-color $ui-dark-borderColor .item-simple-title-icon From 64d53c611bc90e51e1859811d84f7fcd3ca8571a Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 18:43:36 +0900 Subject: [PATCH 10/50] Fix the tag layout of dark theme at NoteList --- browser/components/NoteItem.js | 2 +- browser/components/NoteItem.styl | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index 0a7318dc..321c1204 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -13,7 +13,7 @@ import styles from './NoteItem.styl' */ const TagElement = ({ tagName }) => ( - {tagName} + #{tagName} ) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 2934eab7..e68b6c30 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -86,9 +86,9 @@ $control-height = 30px color #FFFFFF .item-bottom-tagList-item - font-size 12px + font-size 10px margin-right 8px - padding 0 10px + padding 0 height 20px box-sizing border-box border-radius 20px @@ -129,7 +129,7 @@ body[data-theme="dark"] background-color $ui-dark-button--active-backgroundColor &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) - + .item-wrapper border-color $ui-dark-borderColor @@ -163,8 +163,8 @@ body[data-theme="dark"] color $ui-inactive-text-color .item-bottom-tagList-item - background-color $ui-dark-tag-backgroundColor - color $ui-dark-text-color + background-color transparent + color $ui-inactive-text-color .item-bottom-tagList-empty color $ui-inactive-text-color From 11ab5c759829dd658414b8e7536770f5a5cf2821 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 18:45:16 +0900 Subject: [PATCH 11/50] Fix the tag layout of white theme at NoteList --- browser/components/NoteItem.styl | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index e68b6c30..dd0ad46e 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -83,7 +83,6 @@ $control-height = 30px flex 1 overflow ellipsis line-height 20px - color #FFFFFF .item-bottom-tagList-item font-size 10px @@ -93,8 +92,8 @@ $control-height = 30px box-sizing border-box border-radius 20px vertical-align middle - background-color $ui-tag-backgroundColor - color #FFFFFF + background-color transparent + color $ui-inactive-text-color .item-bottom-tagList-empty color $ui-inactive-text-color From 7b4ff9906e447a17eb672a7eb0dbcbc9c4f5de87 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 18:51:34 +0900 Subject: [PATCH 12/50] Change the note-title-icon position at NoteList --- browser/components/NoteItem.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index dd0ad46e..0f5a5265 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -60,7 +60,7 @@ $control-height = 30px .item-title-icon position absolute - top 20px + top 15px right 25px font-size 12px color $ui-inactive-text-color From 041a51a70f608627be2471dfaa2ca07f3d7b0802 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 7 Apr 2017 19:04:09 +0900 Subject: [PATCH 13/50] Fix the tag layout of dark theme at NoteDetail --- browser/main/Detail/TagSelect.js | 2 +- browser/main/Detail/TagSelect.styl | 6 +++--- browser/styles/index.styl | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js index 4fce3c68..bebf39de 100644 --- a/browser/main/Detail/TagSelect.js +++ b/browser/main/Detail/TagSelect.js @@ -107,7 +107,7 @@ class TagSelect extends React.Component { - {tag} + #{tag} @@ -95,7 +95,7 @@ class CreateFolderModal extends React.Component { diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl index 6b1d208b..dd4092d9 100644 --- a/browser/main/modals/CreateFolderModal.styl +++ b/browser/main/modals/CreateFolderModal.styl @@ -1,15 +1,15 @@ .root modal() - width 700px - height 200px + width 500px + height 270px overflow hidden position relative padding 0 40px .header - height 50px + height 70px margin-bottom 10px - margin-top 10px + margin-top 20px font-size 18px line-height 50px background-color $ui-backgroundColor @@ -19,34 +19,34 @@ font-size 15px .close - height 50px + height 70px position absolute background-color transparent color $ui-inactive-text-color border none top 7px - right 10px + right 30px text-align center width top-bar--height height top-bar--height .control-folder-label text-align left - font-size 14px + font-size 12px color $ui-text-color .control-folder-input display block height 30px - width 620px + width 420px padding 0 5px margin 10px auto 15px border 1px solid #C9C9C9 // TODO: use variable. - border-radius 5px + border-radius 2px background-color transparent outline none vertical-align middle - font-size 18px + font-size 14px &:disabled background-color $ui-input--disabled-backgroundColor &:focus, &:active @@ -54,13 +54,14 @@ .control-confirmButton display block + float right height 30px - width 620px + width 100px border none - border-radius 5px + border-radius 2px padding 0 25px margin 20px auto - font-size 14px + font-size 12px colorPrimaryButton() body[data-theme="dark"] diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 55c63c9a..3952d424 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -78,7 +78,7 @@ colorDefaultButton() background-color $default-button-background--active // Primary button(Brand color) -$primary-button-background = $brand-color +$primary-button-background = alpha($brand-color, 60%) $primary-button-background--hover = darken($brand-color, 5%) $primary-button-background--active = darken($brand-color, 10%) From a36c62044bc2d1e079983a53aa71c8adf6cd1e05 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 15:49:43 +0900 Subject: [PATCH 18/50] Fix the create folder modal layout at dark theme --- browser/main/modals/CreateFolderModal.styl | 7 +++++-- browser/styles/index.styl | 13 +++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/browser/main/modals/CreateFolderModal.styl b/browser/main/modals/CreateFolderModal.styl index dd4092d9..740f9cad 100644 --- a/browser/main/modals/CreateFolderModal.styl +++ b/browser/main/modals/CreateFolderModal.styl @@ -67,8 +67,8 @@ body[data-theme="dark"] .root modalDark() - width 700px - height 200px + width 500px + height 270px overflow hidden position relative padding 0 40px @@ -92,3 +92,6 @@ body[data-theme="dark"] .description color $ui-inactive-text-color + + .control-confirmButton + colorDarkPrimaryButton() \ No newline at end of file diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 3952d424..f4bfc13a 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -91,6 +91,19 @@ colorPrimaryButton() &:active:hover background-color $primary-button-background--active +// Dark Primary button(Brand color) +$dark-primary-button-background = alpha(#3A404C, 80%) +$dark-primary-button-background--hover = #3A404C +$dark-primary-button-background--active = #3A404C +colorDarkPrimaryButton() + color white + background-color $dark-primary-button-background + &:hover + background-color $dark-primary-button-background--hover + &:active + &:active:hover + background-color $dark-primary-button-background--active + // Danger button(Brand color) $danger-button-background = #c9302c $danger-button-background--hover = darken(#c9302c, 5%) From 8996ebb819568c50d5dbea7a507c46536164146b Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 15:53:31 +0900 Subject: [PATCH 19/50] Fix the make note modal layout at dark theme --- browser/main/modals/NewNoteModal.js | 2 +- browser/main/modals/NewNoteModal.styl | 2 +- browser/styles/index.styl | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js index 356af05f..d1d258b6 100644 --- a/browser/main/modals/NewNoteModal.js +++ b/browser/main/modals/NewNoteModal.js @@ -103,7 +103,7 @@ class NewNoteModal extends React.Component {
Make a Note
diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl index 105d2833..ed154090 100644 --- a/browser/main/modals/NewNoteModal.styl +++ b/browser/main/modals/NewNoteModal.styl @@ -73,7 +73,7 @@ body[data-theme="dark"] color $ui-dark-text-color background-color transparent &:focus - colorPrimaryButton() + colorDarkPrimaryButton() .description color $ui-inactive-text-color diff --git a/browser/styles/index.styl b/browser/styles/index.styl index f4bfc13a..b4ebd2d8 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -95,6 +95,7 @@ colorPrimaryButton() $dark-primary-button-background = alpha(#3A404C, 80%) $dark-primary-button-background--hover = #3A404C $dark-primary-button-background--active = #3A404C + colorDarkPrimaryButton() color white background-color $dark-primary-button-background From 64cf34e673d62da8a87b031df543f29fe2d64e70 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 15:57:59 +0900 Subject: [PATCH 20/50] Fix the make note modal layout at white theme --- browser/styles/index.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/styles/index.styl b/browser/styles/index.styl index b4ebd2d8..287be1b8 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -72,7 +72,7 @@ $default-button-background--active = #d4d4d4 colorDefaultButton() background-color $default-button-background &:hover - background-color $default-button-background--hover + background-color transparent &:active &:active:hover background-color $default-button-background--active From 31eb9caee44b2c3f3fd2966fe4a72fa53f055b05 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 16:03:53 +0900 Subject: [PATCH 21/50] Fix the dark layout at NoteList --- browser/components/NoteItem.styl | 1 - 1 file changed, 1 deletion(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 0f5a5265..898f039d 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -133,7 +133,6 @@ body[data-theme="dark"] border-color $ui-dark-borderColor .item--active - @extend .item border-color $ui-dark-borderColor background-color $ui-dark-button--active-backgroundColor .item-wrapper From 6b29aed6c4c9e8c6fa11f8d32e17bf376c1eb3cb Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 16:40:26 +0900 Subject: [PATCH 22/50] Fix the search modal layout --- browser/main/TopBar/TopBar.styl | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl index 9eccccb4..cb1aae31 100644 --- a/browser/main/TopBar/TopBar.styl +++ b/browser/main/TopBar/TopBar.styl @@ -44,12 +44,13 @@ $control-height = 34px .control-search-optionList position fixed z-index 200 - width 275px - height 175px + width 500px + height 250px overflow-y auto background-color $modal-background border-radius 2px - box-shadow 2px 2px 10px gray + border-none + box-shadow 0 0 1px rgba(76,86,103,.25), 0 2px 18px rgba(31,37,50,.32) .control-search-optionList-item height 50px @@ -59,10 +60,10 @@ $control-height = 34px cursor pointer overflow ellipsis &:hover - background-color alpha($ui-active-color, 10%) + background-color alpha(#D4D4D4, 30%) .control-search-optionList-item-folder - border-left 4px solid transparent + border-left 2px solid transparent padding 2px 5px color $ui-text-color overflow ellipsis From 97441ccacb99e0eb3dd96f89c8fbe5661c920098 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 16:46:11 +0900 Subject: [PATCH 23/50] Fix the box-shadow --- browser/styles/index.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 287be1b8..57b398ee 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -151,7 +151,7 @@ modal() background-color $modal-background overflow hidden border-radius $modal-border-radius - box-shadow 2px 2px 10px gray + box-shadow 0 0 1px rgba(76,86,103,.15), 0 2px 18px rgba(31,37,50,.22) topBarButtonLight() width 34px From 28ef1e625cd6d438a478996bc84b6e3ef664e486 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 16:49:35 +0900 Subject: [PATCH 24/50] Fix the rename folder modal layout --- browser/main/modals/RenameFolderModal.styl | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/browser/main/modals/RenameFolderModal.styl b/browser/main/modals/RenameFolderModal.styl index 61195490..41420e74 100644 --- a/browser/main/modals/RenameFolderModal.styl +++ b/browser/main/modals/RenameFolderModal.styl @@ -6,7 +6,7 @@ .header height 50px - font-size 18px + font-size 16px line-height 50px padding 0 15px background-color $ui-backgroundColor @@ -40,7 +40,7 @@ background-color transparent outline none vertical-align middle - font-size 18px + font-size 14px text-align center &:disabled background-color $ui-input--disabled-backgroundColor @@ -76,3 +76,6 @@ body[data-theme="dark"] .control-input border-color $ui-dark-borderColor color $ui-dark-text-color + + .control-confirmButton + colorDarkPrimaryButton() \ No newline at end of file From c5076e4e9593c69b1625198dbfc9b05996fb35e2 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 16:54:36 +0900 Subject: [PATCH 25/50] Change the star background-color when hover --- browser/main/Detail/StarButton.styl | 1 + 1 file changed, 1 insertion(+) diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl index 4b479c54..446ceb06 100644 --- a/browser/main/Detail/StarButton.styl +++ b/browser/main/Detail/StarButton.styl @@ -3,6 +3,7 @@ top 0 padding 0 &:hover + background-color #272B32 .icon transform rotate(-72deg) .tooltip From 58f5035ec6f1f76593a09a5c81e3a743651e4d26 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 8 Apr 2017 16:58:52 +0900 Subject: [PATCH 26/50] Change the star background-color when hover at NoteDetail --- browser/main/Detail/StarButton.styl | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl index 446ceb06..f8236ccb 100644 --- a/browser/main/Detail/StarButton.styl +++ b/browser/main/Detail/StarButton.styl @@ -3,7 +3,7 @@ top 0 padding 0 &:hover - background-color #272B32 + background-color #DCDCDC .icon transform rotate(-72deg) .tooltip @@ -19,3 +19,8 @@ .icon transition transform 0.15s + +body[data-theme="dark"] + .root + &:hover + background-color #272B32 \ No newline at end of file From d092e75f3c497637aa8837c094f6842b7ec7554f Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Mon, 10 Apr 2017 22:11:44 +0900 Subject: [PATCH 27/50] Delete the border line at Statusbar --- browser/main/StatusBar/StatusBar.styl | 4 ---- 1 file changed, 4 deletions(-) diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index 6c14b86b..027f6d1d 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -4,7 +4,6 @@ absolute bottom left right height $statusBar-height background-color $ui-noteDetail-backgroundColor - border-top $ui-border display flex box-shadow $note-detail-box-shadow @@ -24,9 +23,6 @@ .zoom navButtonColor() height 24px - border-width 0 1px - border-style solid - border-color $ui-borderColor .update navButtonColor() From 658a90bf153288fe97fe49548824e41e50b39d20 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Mon, 10 Apr 2017 23:08:06 +0900 Subject: [PATCH 28/50] Fix the layout at NoteItem --- browser/components/NoteItem.js | 21 ++++++++----------- browser/components/NoteItem.styl | 35 +++++++++++++++----------------- 2 files changed, 25 insertions(+), 31 deletions(-) diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index 321c1204..cee7698d 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -52,8 +52,10 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)} >
-
{dateDisplay}
- + {note.type === 'SNIPPET_NOTE' + ? + : + }
{note.title.trim().length > 0 ? note.title @@ -61,23 +63,18 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont }
+
{dateDisplay}
+ {note.isStarred + ? : '' + }
{note.tags.length > 0 ? TagElementList(note.tags) - : '' + : }
- - {note.type === 'SNIPPET_NOTE' - ? - : - } - - {note.isStarred - ? : '' - }
) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 898f039d..e465d2b4 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -7,7 +7,7 @@ $control-height = 30px .item position relative - padding 0 25px + padding 0 20px user-select none cursor pointer background-color $ui-noteList-backgroundColor @@ -48,21 +48,19 @@ $control-height = 30px &:hover background-color $ui-button--active-backgroundColor -.item-title +.item-title-icon + position relative font-size 12px - height 40px - box-sizing border-box - line-height 24px - padding-top 5px - padding-bottom 20px - overflow ellipsis color $ui-inactive-text-color -.item-title-icon - position absolute - top 15px - right 25px - font-size 12px +.item-title + font-size 13px + position relative + top -12px + left 20px + padding-right 15px + padding-bottom 4px + overflow ellipsis color $ui-inactive-text-color .item-title-empty @@ -83,6 +81,7 @@ $control-height = 30px flex 1 overflow ellipsis line-height 20px + padding-left 2px .item-bottom-tagList-item font-size 10px @@ -96,19 +95,17 @@ $control-height = 30px color $ui-inactive-text-color .item-bottom-tagList-empty - color $ui-inactive-text-color - vertical-align middle - font-size 10px - margin-left 5px .item-bottom-time color $ui-inactive-text-color font-size 10px + padding-left 2px + padding-bottom 2px .item-star position absolute - top 20px - right 29px + top 19px + left 5px width 34px height 34px color $ui-favorite-star-button-color From 1b58e320aa2d8bb4ae39640632b0f3e9787387eb Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Tue, 11 Apr 2017 00:47:13 +0900 Subject: [PATCH 29/50] Change the font color at dark theme --- browser/components/NoteItem.styl | 12 ++---- browser/components/SideNavFilter.styl | 7 ++-- browser/components/SnippetTab.styl | 8 ++-- browser/components/StorageItem.styl | 8 ++-- browser/main/Detail/SnippetNoteDetail.styl | 2 +- browser/main/SideNav/SideNav.styl | 3 +- browser/main/SideNav/StorageItem.styl | 43 +++++++++++++++------- browser/styles/index.styl | 5 +-- 8 files changed, 49 insertions(+), 39 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index e465d2b4..b4bbed23 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -135,18 +135,14 @@ body[data-theme="dark"] .item-wrapper border-color transparent .item-title - color white + color $ui-dark-text-color .item-title-icon - color white + color $ui-dark-text-color .item-bottom-time - color white + color $ui-dark-text-color .item-bottom-tagList-item background-color transparent - color white - .item-bottom-tagList-empty - color white - &:hover - background-color $ui-dark-button--active-backgroundColor + color $ui-dark-text-color .item-title color $ui-inactive-text-color diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 28a37c8d..50417002 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -55,14 +55,15 @@ body[data-theme="dark"] .menu-button - navDarkButtonColor() &:active background-color $ui-dark-button--active-backgroundColor + color $ui-dark-text-color &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) - color $ui-button--active-color + color $ui-dark-text-color .menu-button--active - color $ui-dark-button--active-color + color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor &:active background-color $ui-dark-button--active-backgroundColor + color $ui-dark-text-color \ No newline at end of file diff --git a/browser/components/SnippetTab.styl b/browser/components/SnippetTab.styl index 2bec7ead..8d4d1b04 100644 --- a/browser/components/SnippetTab.styl +++ b/browser/components/SnippetTab.styl @@ -60,7 +60,7 @@ body[data-theme="dark"] &:hover background-color darken($ui-dark-button--hover-backgroundColor, 15%) &:active - color white + color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor .root--active @@ -73,7 +73,7 @@ body[data-theme="dark"] &:hover background-color darken($ui-dark-button--hover-backgroundColor, 15%) &:active - color white + color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor .button @@ -83,9 +83,9 @@ body[data-theme="dark"] transition color background-color 0.15s border-left 4px solid transparent &:hover - color white + color $ui-dark-text-color background-color $ui-dark-button--hover-backgroundColor .input background-color $ui-dark-button--hover-backgroundColor - color white + color $ui-dark-text-color diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index 1da4e7de..24b58d64 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -75,17 +75,17 @@ body[data-theme="dark"] .folderList-item &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) - color $ui-button--active-color + color $ui-dark-text-color &:active - color $ui-button--active-color + color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor .folderList-item--active @extend .folderList-item - color $ui-button--active-color + color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor &:active background-color $ui-dark-button--active-backgroundColor &:hover - color $ui-button--active-color + color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl index 25ef0834..ccc72821 100644 --- a/browser/main/Detail/SnippetNoteDetail.styl +++ b/browser/main/Detail/SnippetNoteDetail.styl @@ -84,7 +84,7 @@ body[data-theme="dark"] .body .description textarea background-color $ui-dark-noteDetail-backgroundColor - color white + color $ui-dark-text-color .tabList background-color $ui-button--active-backgroundColor diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 6b0bfbd3..27706c4b 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -117,10 +117,9 @@ body[data-theme="dark"] .top-menu navDarkButtonColor() &:active - background-color $ui-dark-button--active-backgroundColor + background-color alpha($ui-dark-button--active-backgroundColor, 20%) &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) - color $ui-button--active-color .storageList-empty color $ui-dark-inactive-text-color diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index 12c71d1b..1ccae8ed 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -53,7 +53,7 @@ padding-right 10px line-height 26px cursor pointer - font-size 14px + font-size 13px border none overflow ellipsis text-align left @@ -109,21 +109,36 @@ margin 0 5px body[data-theme="dark"] - .header +.header + &:hover + color $ui-dark-text-color + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + &:active + .header-toggleButton + .header-addFolderButton + &:active + color $ui-dark-text-color + +.header-info &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) - color $ui-button--active-color + color $ui-dark-text-color &:active - color $ui-button--active-color - background-color $ui-dark-button--active-backgroundColor + .header-toggleButton + .header-addFolderButton + &:active + color $ui-dark-text-color - .header--active - @extend .header - .header-info - color $ui-button--active-color - background-color $ui-dark-button--active-backgroundColor +.header--active + @extend .header + .header-info + color $ui-dark-text-color + background-color $ui-dark-button--active-backgroundColor + .header-toggleButton + .header-addFolderButton + color $ui-dark-text-color &:active - background-color $ui-dark-button--active-backgroundColor - &:hover - color $ui-button--active-color - background-color $ui-dark-button--active-backgroundColor + .header-toggleButton + .header-addFolderButton + &:active + color $ui-dark-text-color diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 57b398ee..da62c942 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -217,12 +217,11 @@ navDarkButtonColor() background-color transparent transition color background-color 0.15s &:hover - color white + color $ui-dark-text-color background-color $ui-dark-button--hover-backgroundColor &:active &:active:hover - background-color $ui-dark-button--active-backgroundColor - color $ui-dark-button--active-color + color $ui-dark-text-color topBarButtonDark() border-color $ui-dark-borderColor From 32bd6d76ee5dff9a434ad181900d713e1dcfc7d6 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Wed, 12 Apr 2017 14:48:52 +0900 Subject: [PATCH 30/50] Change the All Notes icon at SideNavFilter --- browser/components/SideNavFilter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js index a10d2d98..01af53e2 100644 --- a/browser/components/SideNavFilter.js +++ b/browser/components/SideNavFilter.js @@ -21,7 +21,7 @@ const SideNavFilter = ({
From 4ada75579335ec682e3f0b51be57aef83252949f Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Wed, 12 Apr 2017 22:22:22 +0900 Subject: [PATCH 35/50] Change the info at InfoTag modal --- .../main/modals/PreferencesModal/InfoTab.js | 37 ++++++++++++------- .../main/modals/PreferencesModal/InfoTab.styl | 28 ++++---------- 2 files changed, 31 insertions(+), 34 deletions(-) diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js index 39273ed8..3af565fd 100644 --- a/browser/main/modals/PreferencesModal/InfoTab.js +++ b/browser/main/modals/PreferencesModal/InfoTab.js @@ -34,24 +34,33 @@ class InfoTab extends React.Component {
-
- -
© 2017 MAISIN&CO.
diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl index 2c17ae17..4947c3bc 100644 --- a/browser/main/modals/PreferencesModal/InfoTab.styl +++ b/browser/main/modals/PreferencesModal/InfoTab.styl @@ -4,11 +4,9 @@ padding 15px white-space pre line-height 1.4 - color $ui-text-color + color alpha($ui-text-color, 90%) width 100% - -.clear - clear both + font-size 14px .top text-align left @@ -34,26 +32,16 @@ .description font-size 14px -.madeBy - font-size 14px - $ui-inactive-text-color - -.copyright - font-size 14px - $ui-inactive-text-color - .list list-style square padding-left 2em li white-space normal - + padding-bottom 10px + a + color #4E8EC6 + text-decoration none + body[data-theme="dark"] .root - color $tab--dark-text-color - - .madeBy - color $ui-dark-inactive-text-color - - .copyright - color $ui-dark-inactive-text-color + color alpha($tab--dark-text-color, 80%) \ No newline at end of file From adeb45a9ce2cae0350cc5b3e360eed2e7ac149de Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Wed, 12 Apr 2017 23:10:29 +0900 Subject: [PATCH 36/50] Fix the storage-btn layout at SideNav --- browser/main/SideNav/StorageItem.styl | 33 ++++++++++++--------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index be89d1e8..1dd41664 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -106,34 +106,29 @@ body[data-theme="dark"] .header - &:hover - color $ui-dark-text-color - background-color alpha($ui-dark-button--active-backgroundColor, 20%) &:active + color $ui-dark-text-color + background-color $ui-dark-button--active-backgroundColor + +.header + &:hover .header-info .header-toggleButton .header-addFolderButton color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor -.header-info - &:hover - background-color alpha($ui-dark-button--active-backgroundColor, 20%) - &:active - .header-toggleButton - .header-addFolderButton - color $ui-dark-text-color - .header--active - @extend .header .header-info - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor .header-toggleButton .header-addFolderButton color $ui-dark-text-color - &:active - .header-toggleButton - .header-addFolderButton - &:active - color $ui-dark-text-color + background-color $ui-dark-button--active-backgroundColor + +.header--active + &:active + .header-info + .header-toggleButton + .header-addFolderButton + color $ui-dark-text-color + background-color $ui-dark-button--active-backgroundColor \ No newline at end of file From 41d65e413279f66435894bfb3a2a9d6883b2e290 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 13 Apr 2017 11:46:41 +0900 Subject: [PATCH 37/50] Change the border-width at folder list --- browser/components/StorageItem.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl index 8d6602bf..bbaf16db 100644 --- a/browser/components/StorageItem.styl +++ b/browser/components/StorageItem.styl @@ -38,7 +38,7 @@ padding 0 15px height 26px line-height 26px - border-width 0 0 0 2px + border-width 0 0 0 1px border-style solid border-color transparent overflow hidden From c510c2e5408681c7fddf55896e2e246fece72763 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 13 Apr 2017 12:04:51 +0900 Subject: [PATCH 38/50] Change the add-storage-btn at setting modal --- browser/main/modals/PreferencesModal/StoragesTab.styl | 3 +++ 1 file changed, 3 insertions(+) diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl index 7bd98f0d..e5e32645 100644 --- a/browser/main/modals/PreferencesModal/StoragesTab.styl +++ b/browser/main/modals/PreferencesModal/StoragesTab.styl @@ -28,6 +28,9 @@ .list-control height 30px .list-control-addStorageButton + position absolute + top 7px + right 20px height $tab--button-height padding 0 15px border $ui-border From e103605956be14e64a477978a193f45dce5d2fd3 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 13 Apr 2017 12:05:10 +0900 Subject: [PATCH 39/50] Change the border-left at setting modal --- browser/main/modals/PreferencesModal/StorageItem.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl index 34ed9c91..e2a9407c 100644 --- a/browser/main/modals/PreferencesModal/StorageItem.styl +++ b/browser/main/modals/PreferencesModal/StorageItem.styl @@ -71,7 +71,7 @@ background-color darken(white, 3%) .folderList-item-left height 30px - border-left solid 4px transparent + border-left solid 1px transparent padding 0 10px line-height 30px float left From 29dc3bd55058203ba06246c46d08f58a257f10ca Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 13 Apr 2017 12:14:36 +0900 Subject: [PATCH 40/50] Fix the layout of nav-btn at setting modal --- .../PreferencesModal/PreferencesModal.styl | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl index ec16a2be..03dfb47e 100644 --- a/browser/main/modals/PreferencesModal/PreferencesModal.styl +++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl @@ -45,22 +45,20 @@ top-bar--height = 50px text-align left width 100px margin 4px 0 - padding 7px 0 - padding-left 7px + padding 5px 0 + padding-left 10px border none - border-radius 3px + border-radius 2px background-color transparent color $ui-text-color font-size 14px - &:hover - color $ui-active-color .nav-button--active @extend .nav-button - color white - background-color $ui-active-color + color $ui-text-color + background-color $ui-button--active-backgroundColor &:hover - color white + color $ui-text-color .nav-button-icon display block @@ -91,3 +89,10 @@ body[data-theme="dark"] color $tab--dark-text-color &:hover color $ui-dark-text-color + + .nav-button--active + @extend .nav-button + color white + background-color $dark-primary-button-background--active + &:hover + color white \ No newline at end of file From a6f5452a8516813fdd9f4659abae0b0bf12ea09f Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 13 Apr 2017 20:45:26 +0900 Subject: [PATCH 41/50] Change the button color at setting modal --- browser/main/modals/PreferencesModal/ConfigTab.styl | 12 ++++++------ .../main/modals/PreferencesModal/StoragesTab.styl | 2 +- browser/main/modals/PreferencesModal/UiTab.js | 2 +- browser/styles/index.styl | 8 ++++---- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index 896b06ed..c964d9bc 100644 --- a/browser/main/modals/PreferencesModal/ConfigTab.styl +++ b/browser/main/modals/PreferencesModal/ConfigTab.styl @@ -38,7 +38,7 @@ width 400px font-size $tab--button-font-size border solid 1px $border-color - border-radius $tab--input-border-radius + border-radius 2px padding 0 5px &:disabled background-color $ui-input--disabled-backgroundColor @@ -64,7 +64,7 @@ .group-control-leftButton colorDefaultButton() border none - border-radius 5px + border-radius 2px font-size $tab--button-font-size height $tab--button-height padding 0 15px @@ -74,17 +74,17 @@ float right colorPrimaryButton() border none - border-radius $tab--button-border-radius + border-radius 2px font-size $tab--button-font-size - height $tab--button-height - padding 0 15px + height 35px + width 100px margin-right 10px .group-hint border $ui-border padding 10px 15px margin 15px 0 - border-radius 5px + border-radius 2px background-color $ui-backgroundColor color $ui-inactive-text-color ul diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl index e5e32645..966a8eab 100644 --- a/browser/main/modals/PreferencesModal/StoragesTab.styl +++ b/browser/main/modals/PreferencesModal/StoragesTab.styl @@ -36,7 +36,7 @@ border $ui-border colorDefaultButton() font-size $tab--button-font-size - border-radius $tab--button-border-radius + border-radius 2px .addStorage margin-bottom 15px diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 47903f87..f49912d3 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -253,7 +253,7 @@ class UiTab extends React.Component { diff --git a/browser/styles/index.styl b/browser/styles/index.styl index e96dbabf..9e607269 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -83,13 +83,13 @@ $primary-button-background--hover = darken($brand-color, 5%) $primary-button-background--active = darken($brand-color, 10%) colorPrimaryButton() - color white - background-color $primary-button-background + color $ui-text-color + background-color $default-button-background--hover &:hover - background-color $primary-button-background--hover + background-color $default-button-background--active &:active &:active:hover - background-color $primary-button-background--active + background-color $default-button-background--active // Dark Primary button(Brand color) $dark-primary-button-background = alpha(#3A404C, 80%) From 39baadeb04262e18cebd8d8d1384f7b6a94951db Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 14 Apr 2017 15:23:52 +0900 Subject: [PATCH 42/50] Fix hover/active layout at NoteItem --- browser/components/NoteItem.styl | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index b4bbed23..a0e39b83 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -123,8 +123,20 @@ body[data-theme="dark"] background-color $ui-dark-noteList-backgroundColor &:active background-color $ui-dark-button--active-backgroundColor + .item-title + .item-title-icon + .item-bottom-time + .item-bottom-tagList-item + transition 0.15s + color $ui-dark-text-color &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) + .item-title + .item-title-icon + .item-bottom-time + .item-bottom-tagList-item + transition 0.15s + color $ui-dark-text-color .item-wrapper border-color $ui-dark-borderColor @@ -135,9 +147,7 @@ body[data-theme="dark"] .item-wrapper border-color transparent .item-title - color $ui-dark-text-color .item-title-icon - color $ui-dark-text-color .item-bottom-time color $ui-dark-text-color .item-bottom-tagList-item From 97b42d6be1c8d382dff3cc6372d3e9d1198753fc Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 14 Apr 2017 15:26:45 +0900 Subject: [PATCH 43/50] Fix the hover/active layout at NoteItem in white theme --- browser/components/NoteItem.styl | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index a0e39b83..ec90fd2b 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -14,16 +14,20 @@ $control-height = 30px transition background-color 0.2s &:hover background-color alpha($ui-button--active-backgroundColor, 40%) + .item-title + .item-title-icon + .item-bottom-time + .item-bottom-tagList-item + transition 0.15s + color $ui-text-color &:active background-color $ui-button--active-backgroundColor color $ui-text-color .item-title - .item-title-empty - .item-bottom-tagList-empty - .item-bottom-time .item-title-icon + .item-bottom-time .item-bottom-tagList-item - background-color transparent + transition 0.15s color $ui-text-color .item-wrapper From 2df12b689164b142a517702494166fa103c0da89 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 14 Apr 2017 15:28:27 +0900 Subject: [PATCH 44/50] Fix the hover layout at NoteNavFilter in white theme --- browser/styles/index.styl | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 9e607269..3e6b7d7e 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -131,9 +131,10 @@ navButtonColor() &:hover background-color alpha($ui-button--active-backgroundColor, 20%) transition color background-color 0.15s + color $ui-text-color &:active, &:active:hover background-color $ui-button--active-backgroundColor - color black + color $ui-text-color transition color background-color 0.15s /** * # Modal Stuff From 7891d14a0abd97b71fd528646e81e86b90f4eeec Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 14 Apr 2017 15:38:45 +0900 Subject: [PATCH 45/50] Fix the hover/active layout at NoteItemSimple --- browser/components/NoteItemSimple.styl | 33 ++++++++++++++++---------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index c07c1817..dbd09a37 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -14,6 +14,10 @@ $control-height = 30px transition background-color 0.15s &:hover background-color alpha($ui-button--active-backgroundColor, 40%) + .item-simple-title + .item-simple-title-empty + .item-simple-title-icon + color $ui-text-color &:active background-color $ui-button--active-backgroundColor color $ui-text-color @@ -63,27 +67,32 @@ body[data-theme="dark"] border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor &:active - color white background-color $ui-dark-button--active-backgroundColor + .item-simple-title + .item-simple-title-icon + .item-simple-bottom-time + .item-simple-bottom-tagList-item + transition 0.15s + color $ui-dark-text-color &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) + .item-simple-title + .item-simple-title-icon + .item-simple-bottom-time + .item-simple-bottom-tagList-item + transition 0.15s + color $ui-dark-text-color .item-simple--active - @extend .item-simple border-color $ui-dark-borderColor background-color $ui-dark-button--active-backgroundColor - color white .item-simple-title - color white .item-simple-title-icon - color white - .item-simple-title-empty - color white - border-color transparent - &:active - color white - &:hover - background-color $ui-dark-button--active-backgroundColor + .item-simple-bottom-time + color $ui-dark-text-color + .item-simple-bottom-tagList-item + background-color transparent + color $ui-dark-text-color .item-simple-title color $ui-inactive-text-color From 614506cada0f78163233787efcef24c55b95bd87 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 14 Apr 2017 15:45:52 +0900 Subject: [PATCH 46/50] Fix the hover/active layout at menubar in white theme --- browser/main/SideNav/SideNav.styl | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 27706c4b..353e5d70 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -17,10 +17,9 @@ text-align left &:hover color $ui-text-color - background-color $ui-button--hover-backgroundColor - &:active + &:active, &:active:hover color $ui-text-color - background-color $ui-button--active-backgroundColor + background-color alpha($ui-button--active-backgroundColor, 20%) .top-menu-label margin-left 5px From 0f311120af8d7ca849a26580febeb3bc9589d335 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 14 Apr 2017 16:42:01 +0900 Subject: [PATCH 47/50] Fix the layout of NoteItem at SideNav --- browser/main/SideNav/StorageItem.styl | 94 +++++++++++++-------------- browser/styles/index.styl | 2 +- 2 files changed, 47 insertions(+), 49 deletions(-) diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl index 1dd41664..6cc36e68 100644 --- a/browser/main/SideNav/StorageItem.styl +++ b/browser/main/SideNav/StorageItem.styl @@ -8,41 +8,37 @@ width 100% margin-bottom 5px transition 0.15s - &:hover - color $ui-text-color - background-color alpha($ui-button--hover-backgroundColor, 20%) - &:active - .header-info - .header-toggleButton - .header-addFolderButton - color $ui-text-color - background-color $ui-button--hover-backgroundColor .header--active - @extend .header + background-color $ui-button--active-backgroundColor + transition color background-color 0.15s + +.header--active + .header-toggleButton + color $ui-text-color + +.header--active .header-info color $ui-text-color - background-color $ui-button--hover-backgroundColor - .header-toggleButton + +.header--active .header-addFolderButton color $ui-text-color - &:active - .header-toggleButton - .header-addFolderButton - &:active - color $ui-text-color .header-toggleButton + navButtonColor() position absolute left 0 width 25px height 26px padding 0 border none - color $ui-inactive-text-color - background-color transparent + &:hover + background-color transparent + color $ui-text-color .header-info + navButtonColor() display block width 100% height 30px @@ -54,28 +50,22 @@ border none overflow ellipsis text-align left - background-color transparent - color $ui-inactive-text-color - &:hover - background-color alpha($ui-button--hover-backgroundColor, 20%) - &:active - .header-toggleButton - .header-addFolderButton - color $ui-text-color .header-info-path font-size 10px margin 0 5px .header-addFolderButton + navButtonColor() position absolute right 0 width 25px height 26px padding 0 border none - color $ui-inactive-text-color - background-color transparent + &:hover + background-color transparent + color $ui-text-color .root--folded @extend .root @@ -105,30 +95,38 @@ margin 0 5px body[data-theme="dark"] -.header - &:active - color $ui-dark-text-color + .header--active background-color $ui-dark-button--active-backgroundColor + transition color background-color 0.15s -.header - &:hover - .header-info + .header--active .header-toggleButton + color $ui-dark-text-color + + .header--active + .header-info + color $ui-dark-text-color + background-color $ui-dark-button--active-backgroundColor + &:active + color $ui-dark-text-color + background-color $ui-dark-button--active-backgroundColor + + .header--active .header-addFolderButton color $ui-dark-text-color + + .header-toggleButton + &:hover + color $ui-dark-text-color + + .header-info + &:hover + color $ui-dark-text-color + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + &:active, &:active:hover + color $ui-dark-text-color background-color $ui-dark-button--active-backgroundColor -.header--active - .header-info - .header-toggleButton .header-addFolderButton - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor - -.header--active - &:active - .header-info - .header-toggleButton - .header-addFolderButton - color $ui-dark-text-color - background-color $ui-dark-button--active-backgroundColor \ No newline at end of file + &:hover + color $ui-dark-text-color \ No newline at end of file diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 3e6b7d7e..84deb0be 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -135,7 +135,7 @@ navButtonColor() &:active, &:active:hover background-color $ui-button--active-backgroundColor color $ui-text-color - transition color background-color 0.15s + transition color background-color 0.15s /** * # Modal Stuff * These will be moved lib/modal From 09cf94d8078a99fc4cca2224bfee9317ee2f5496 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 14 Apr 2017 17:10:37 +0900 Subject: [PATCH 48/50] Fix to outline:none --- browser/main/modals/PreferencesModal/ConfigTab.styl | 4 ++++ browser/main/modals/PreferencesModal/StorageItem.styl | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index c964d9bc..b9c9ebde 100644 --- a/browser/main/modals/PreferencesModal/ConfigTab.styl +++ b/browser/main/modals/PreferencesModal/ConfigTab.styl @@ -32,6 +32,9 @@ .group-section-control flex 1 +.group-section-control select + outline none + .group-section-control-input height 30px vertical-align middle @@ -40,6 +43,7 @@ border solid 1px $border-color border-radius 2px padding 0 5px + outline none &:disabled background-color $ui-input--disabled-backgroundColor diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl index e2a9407c..d7fb54bc 100644 --- a/browser/main/modals/PreferencesModal/StorageItem.styl +++ b/browser/main/modals/PreferencesModal/StorageItem.styl @@ -35,7 +35,7 @@ border $ui-border border-radius 2px padding 0 5px - + outline none .header-control float right @@ -105,6 +105,7 @@ border $ui-border border-radius 2px padding 0 5px + outline none .folderList-item-right float right From 343e35bb54fc95a3011fb938ad7613d19b01405e Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Fri, 14 Apr 2017 17:14:45 +0900 Subject: [PATCH 49/50] Fix the select-btn layout at setting modal in white theme --- browser/main/modals/PreferencesModal/ConfigTab.styl | 2 ++ 1 file changed, 2 insertions(+) diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl index b9c9ebde..9bf0c606 100644 --- a/browser/main/modals/PreferencesModal/ConfigTab.styl +++ b/browser/main/modals/PreferencesModal/ConfigTab.styl @@ -34,6 +34,8 @@ .group-section-control select outline none + border 1px solid $ui-borderColor + background-color transparent .group-section-control-input height 30px From 6ce6a7036b910d3fb6f56514f4028cb731a830ab Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Sat, 15 Apr 2017 12:33:16 +0900 Subject: [PATCH 50/50] Fix typo --- browser/components/NoteItem.js | 2 +- browser/components/NoteItem.styl | 2 -- browser/main/modals/PreferencesModal/InfoTab.js | 4 ++-- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/browser/components/NoteItem.js b/browser/components/NoteItem.js index cee7698d..24ac2437 100644 --- a/browser/components/NoteItem.js +++ b/browser/components/NoteItem.js @@ -71,7 +71,7 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
{note.tags.length > 0 ? TagElementList(note.tags) - : + : }
diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index ec90fd2b..36245606 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -98,8 +98,6 @@ $control-height = 30px background-color transparent color $ui-inactive-text-color -.item-bottom-tagList-empty - .item-bottom-time color $ui-inactive-text-color font-size 10px diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js index 3af565fd..7cd08150 100644 --- a/browser/main/modals/PreferencesModal/InfoTab.js +++ b/browser/main/modals/PreferencesModal/InfoTab.js @@ -56,10 +56,10 @@ class InfoTab extends React.Component { onClick={(e) => this.handleLinkClick(e)} >GitHub Issue: Let us hear your feedback 🙌 -
  • +
  • Copyright (C) 2017 Maisin&Co.
    • -
  • +
  • License: GPL v3