From 0b82b11f0d7e03e74c6bddd8d8fb7d6e7c033bbf Mon Sep 17 00:00:00 2001 From: dragnoir Date: Thu, 16 May 2024 19:22:08 +0100 Subject: [PATCH 1/3] Fix: add darker color for markdown --- src/styles/index.ts | 2 +- src/styles/theme/themes/dark.ts | 1 + src/styles/theme/themes/light.ts | 1 + src/styles/theme/types.ts | 1 + 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index 45e11dbe6cb9..c111d57a6247 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -173,7 +173,7 @@ const webViewStyles = (theme: ThemeColors) => }, blockquote: { - borderLeftColor: theme.border, + borderLeftColor: theme.borderDarker, borderLeftWidth: 4, paddingLeft: 12, marginTop: 4, diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index f0493a815747..bc1100b9d0aa 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -11,6 +11,7 @@ const darkTheme = { highlightBG: colors.productDark200, border: colors.productDark400, borderLighter: colors.productDark400, + borderDarker: colors.productDark500, borderFocus: colors.green400, icon: colors.productDark700, iconMenu: colors.green400, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index cf490a90a7f7..8382ae0737ac 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -11,6 +11,7 @@ const lightTheme = { highlightBG: colors.productLight200, border: colors.productLight400, borderLighter: colors.productLight400, + borderDarker: colors.productLight500, borderFocus: colors.green400, icon: colors.productLight700, iconMenu: colors.green400, diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts index 8be9f3226fe5..2479dca81e0c 100644 --- a/src/styles/theme/types.ts +++ b/src/styles/theme/types.ts @@ -14,6 +14,7 @@ type ThemeColors = { messageHighlightBG: Color; border: Color; borderLighter: Color; + borderDarker: Color; borderFocus: Color; icon: Color; iconMenu: Color; From 55bf6a5367540ffbdfeb1895e23e090c6ca67c9a Mon Sep 17 00:00:00 2001 From: dragnoir Date: Thu, 16 May 2024 19:25:24 +0100 Subject: [PATCH 2/3] apply style to all markdowns --- src/hooks/useMarkdownStyle.ts | 2 +- src/styles/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index 57d17ffefb0b..d2f3e8da1c96 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -37,7 +37,7 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array }, blockquote: { - borderLeftColor: theme.border, + borderLeftColor: theme.borderDarker, borderLeftWidth: 4, paddingLeft: 12, marginVertical: 4, From 74618dfbcd3c403bba0e5514cbe3386dafc90aad Mon Sep 17 00:00:00 2001 From: dragnoir Date: Thu, 16 May 2024 21:00:02 +0100 Subject: [PATCH 3/3] fix hover color --- src/hooks/useMarkdownStyle.ts | 2 +- src/styles/index.ts | 4 ++-- src/styles/theme/themes/dark.ts | 1 - src/styles/theme/themes/light.ts | 1 - src/styles/theme/types.ts | 1 - src/styles/utils/index.ts | 2 +- 6 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/hooks/useMarkdownStyle.ts b/src/hooks/useMarkdownStyle.ts index d2f3e8da1c96..57d17ffefb0b 100644 --- a/src/hooks/useMarkdownStyle.ts +++ b/src/hooks/useMarkdownStyle.ts @@ -37,7 +37,7 @@ function useMarkdownStyle(message: string | null = null, excludeStyles: Array }, blockquote: { - borderLeftColor: theme.borderDarker, + borderLeftColor: theme.border, borderLeftWidth: 4, paddingLeft: 12, marginTop: 4, @@ -3228,7 +3228,7 @@ const styles = (theme: ThemeColors) => }, blockquote: { - borderLeftColor: theme.borderDarker, + borderLeftColor: theme.border, borderLeftWidth: 4, paddingLeft: 12, marginVertical: 4, diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index bc1100b9d0aa..f0493a815747 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -11,7 +11,6 @@ const darkTheme = { highlightBG: colors.productDark200, border: colors.productDark400, borderLighter: colors.productDark400, - borderDarker: colors.productDark500, borderFocus: colors.green400, icon: colors.productDark700, iconMenu: colors.green400, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 8382ae0737ac..cf490a90a7f7 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -11,7 +11,6 @@ const lightTheme = { highlightBG: colors.productLight200, border: colors.productLight400, borderLighter: colors.productLight400, - borderDarker: colors.productLight500, borderFocus: colors.green400, icon: colors.productLight700, iconMenu: colors.green400, diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts index 2479dca81e0c..8be9f3226fe5 100644 --- a/src/styles/theme/types.ts +++ b/src/styles/theme/types.ts @@ -14,7 +14,6 @@ type ThemeColors = { messageHighlightBG: Color; border: Color; borderLighter: Color; - borderDarker: Color; borderFocus: Color; icon: Color; iconMenu: Color; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 4c2f9a180518..5348584348a8 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1329,7 +1329,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ case CONST.BUTTON_STATES.PRESSED: return {backgroundColor: theme.buttonPressedBG}; case CONST.BUTTON_STATES.ACTIVE: - return isMenuItem ? {backgroundColor: theme.border} : {backgroundColor: theme.buttonHoveredBG}; + return isMenuItem ? {backgroundColor: theme.hoverComponentBG} : {backgroundColor: theme.buttonHoveredBG}; case CONST.BUTTON_STATES.DISABLED: case CONST.BUTTON_STATES.DEFAULT: default: