From 250bb651a077ed82b17e50b261ffff55605d6694 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Mon, 16 Nov 2020 22:40:21 +0900 Subject: [PATCH 1/2] Added Team Switcher Colors --- src/lib/styled/BaseTheme.ts | 7 +++++++ src/themes/dark.ts | 8 ++++++++ src/themes/legacy.ts | 7 +++++++ src/themes/light.ts | 7 +++++++ src/themes/sepia.ts | 7 +++++++ src/themes/solarizedDark.ts | 9 ++++++++- 6 files changed, 44 insertions(+), 1 deletion(-) diff --git a/src/lib/styled/BaseTheme.ts b/src/lib/styled/BaseTheme.ts index b1e194131c..a9e128102e 100644 --- a/src/lib/styled/BaseTheme.ts +++ b/src/lib/styled/BaseTheme.ts @@ -41,6 +41,13 @@ export interface BaseTheme { noteNavEmptyItemColor: string noteNavItemBackgroundColor: string + // Team Switcher + teamSwitcherBackgroundColor: string + teamSwitcherBorderColor: string + teamSwitcherTextColor: string + teamSwitcherHoverBackgroundColor: string + teamSwitcherHoverTextColor: string + // Button primaryButtonLabelColor: string primaryButtonBackgroundColor: string diff --git a/src/themes/dark.ts b/src/themes/dark.ts index b6153a6c1e..b6fd12c7ec 100644 --- a/src/themes/dark.ts +++ b/src/themes/dark.ts @@ -6,6 +6,7 @@ const primaryColor = '#5580DC' const primaryDarkerColor = '#4070D8' const dangerColor = '#DC3545' +const dark54Color = 'rgba(0,0,0,0.54)' const dark26Color = 'rgba(0,0,0,0.26)' const light70Color = 'rgba(255,255,255,0.7)' const light30Color = 'rgba(255,255,255,0.3)' @@ -59,6 +60,13 @@ export const darkTheme: BaseTheme = { navItemActiveBackgroundColor: '#444', navItemHoverActiveBackgroundColor: '#555', + // Team Switcher + teamSwitcherBackgroundColor: light100Color, + teamSwitcherBorderColor: 'transparent', + teamSwitcherTextColor: dark54Color, + teamSwitcherHoverBackgroundColor: light100Color, + teamSwitcherHoverTextColor: dark54Color, + // NotePage noteNavEmptyItemColor: '#999', noteNavItemBackgroundColor: '#444', diff --git a/src/themes/legacy.ts b/src/themes/legacy.ts index 985f01d7e8..099375de31 100644 --- a/src/themes/legacy.ts +++ b/src/themes/legacy.ts @@ -62,6 +62,13 @@ export const legacyTheme: BaseTheme = { navItemActiveBackgroundColor: '#444', navItemHoverActiveBackgroundColor: '#555', + // Team Switcher + teamSwitcherBackgroundColor: light100Color, + teamSwitcherBorderColor: 'transparent', + teamSwitcherTextColor: dark54Color, + teamSwitcherHoverBackgroundColor: light100Color, + teamSwitcherHoverTextColor: dark54Color, + // NotePage noteNavEmptyItemColor: '#999', noteNavItemBackgroundColor: base2Color, diff --git a/src/themes/light.ts b/src/themes/light.ts index a2dc919b48..fbd4411297 100644 --- a/src/themes/light.ts +++ b/src/themes/light.ts @@ -69,6 +69,13 @@ export const lightTheme: BaseTheme = { navItemActiveBackgroundColor: uiVividBackgroundColor, navItemHoverActiveBackgroundColor: uiVivid2BackgroundColor, + // Team Switcher + teamSwitcherBackgroundColor: light100Color, + teamSwitcherBorderColor: dark12Color, + teamSwitcherTextColor: dark54Color, + teamSwitcherHoverBackgroundColor: light100Color, + teamSwitcherHoverTextColor: dark54Color, + // NotePage noteNavEmptyItemColor: uiDimColor, noteNavItemBackgroundColor: uiVividBackgroundColor, diff --git a/src/themes/sepia.ts b/src/themes/sepia.ts index e224951629..1591f29c62 100644 --- a/src/themes/sepia.ts +++ b/src/themes/sepia.ts @@ -63,6 +63,13 @@ export const sepiaTheme: BaseTheme = { navItemActiveBackgroundColor: '#eee8d6', navItemHoverActiveBackgroundColor: '#e0e0e0', + // Team Switcher + teamSwitcherBackgroundColor: '#eee8d6', + teamSwitcherBorderColor: 'transparent', + teamSwitcherTextColor: base3Color, + teamSwitcherHoverBackgroundColor: primaryColor, + teamSwitcherHoverTextColor: light100Color, + // NotePage noteNavEmptyItemColor: '#777', noteNavItemBackgroundColor: '#eee8d6', diff --git a/src/themes/solarizedDark.ts b/src/themes/solarizedDark.ts index 0b56b322c6..004660d33f 100644 --- a/src/themes/solarizedDark.ts +++ b/src/themes/solarizedDark.ts @@ -32,7 +32,7 @@ export const solarizedDarkTheme: BaseTheme = { primaryColor: primaryColor, primaryDarkerColor: primaryDarkerColor, dangerColor: dangerColor, - borderColor: dark26Color, + borderColor: light12Color, noteListIconColor: light30Color, noteListActiveIconColor: light70Color, noteDetailIconColor: light30Color, @@ -60,6 +60,13 @@ export const solarizedDarkTheme: BaseTheme = { navItemActiveBackgroundColor: light24Color, navItemHoverActiveBackgroundColor: light18Color, + // Team Switcher + teamSwitcherBackgroundColor: light12Color, + teamSwitcherBorderColor: dark26Color, + teamSwitcherTextColor: light100Color, + teamSwitcherHoverBackgroundColor: primaryColor, + teamSwitcherHoverTextColor: light100Color, + // NotePage noteNavEmptyItemColor: '#bbb', noteNavItemBackgroundColor: light12Color, From 1b5f9ee5d5ac1545833068752b3e6fe590d93bae Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Mon, 16 Nov 2020 22:41:10 +0900 Subject: [PATCH 2/2] Restyled App Navigators --- .../molecules/AppNavigatorStorageItem.tsx | 26 ++++++++++--------- src/components/organisms/AppNavigator.tsx | 6 ++--- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/components/molecules/AppNavigatorStorageItem.tsx b/src/components/molecules/AppNavigatorStorageItem.tsx index 32177f389c..4fa895971b 100644 --- a/src/components/molecules/AppNavigatorStorageItem.tsx +++ b/src/components/molecules/AppNavigatorStorageItem.tsx @@ -18,43 +18,45 @@ import { openContextMenu } from '../../lib/electronOnly' import { useStorageRouter } from '../../lib/storageRouter' const Container = styled.div` + ${flexCenter} position: relative; height: 48px; width: 48px; margin-bottom: 4px; - &:first-child { - margin-top: 10px; - } - ${flexCenter} border-radius: 14px; border-width: 3px; border-style: solid; border-color: transparent; + + &:first-child { + margin-top: 10px; + } + &:hover { + border-color: ${({ theme }) => theme.borderColor}; + } &.active { border-color: ${({ theme }) => theme.textColor}; } ` const MainButton = styled.button` + ${flexCenter} height: 36px; width: 36px; border-radius: 8px; - ${border} cursor: pointer; - ${flexCenter} font-size: 18px; border: none; - background-color: ${({ theme }) => theme.secondaryButtonBackgroundColor}; - color: ${({ theme }) => theme.secondaryButtonLabelColor}; - border: 1px solid ${({ theme }) => theme.borderColor}; + background-color: ${({ theme }) => theme.teamSwitcherBackgroundColor}; + border: 1px solid ${({ theme }) => theme.teamSwitcherBorderColor}; + color: ${({ theme }) => theme.teamSwitcherTextColor}; font-size: 13px; - &:hover, &:active, &.active { + background-color: ${({ theme }) => theme.teamSwitcherHoverBackgroundColor}; + color: ${({ theme }) => theme.teamSwitcherHoverTextColor}; cursor: pointer; - color: ${({ theme }) => theme.secondaryButtonHoverLabelColor}; - background-color: ${({ theme }) => theme.primaryColor}; } &:disabled { diff --git a/src/components/organisms/AppNavigator.tsx b/src/components/organisms/AppNavigator.tsx index a37decf033..2063971bee 100644 --- a/src/components/organisms/AppNavigator.tsx +++ b/src/components/organisms/AppNavigator.tsx @@ -2,7 +2,6 @@ import React, { useMemo, useCallback, MouseEventHandler } from 'react' import styled from '../../lib/styled' import { borderRight, - border, secondaryButtonStyle, flexCenter, } from '../../lib/styled/styleFunctions' @@ -238,11 +237,10 @@ const ControlContainer = styled.div` ` const NavigatorButton = styled.button` - position: relative; ${secondaryButtonStyle} + position: relative; height: 36px; width: 36px; - ${border} margin-bottom: 8px; display: flex; align-items: center; @@ -250,6 +248,8 @@ const NavigatorButton = styled.button` cursor: pointer; font-size: 22px; border-radius: 8px; + border: none; + &:first-child { margin-top: 5px; }