From b0e3b0bd67ec083ae4a8b54909d79a4ab3bef4a1 Mon Sep 17 00:00:00 2001 From: William Grant Date: Thu, 29 Feb 2024 13:20:13 +1100 Subject: [PATCH] feat: styled start conversation button --- ts/components/buttons/MenuButton.tsx | 12 +++++++++--- ts/themes/classicDark.ts | 9 ++++++--- ts/themes/classicLight.ts | 7 +++++-- ts/themes/oceanDark.ts | 9 ++++++--- ts/themes/oceanLight.ts | 9 ++++++--- ts/themes/variableColors.tsx | 3 +++ 6 files changed, 35 insertions(+), 14 deletions(-) diff --git a/ts/components/buttons/MenuButton.tsx b/ts/components/buttons/MenuButton.tsx index 3bd00f1d0..a2fe56d35 100644 --- a/ts/components/buttons/MenuButton.tsx +++ b/ts/components/buttons/MenuButton.tsx @@ -13,7 +13,8 @@ const StyledMenuButton = styled.button` align-items: center; background: var(--menu-button-background-color); - border-radius: 2px; + border: 1.5px solid var(--menu-button-border-color); + border-radius: 7px; width: 51px; height: 33px; cursor: pointer; @@ -22,6 +23,10 @@ const StyledMenuButton = styled.button` :hover { background: var(--menu-button-background-hover-color); + border-color: var(--menu-button-border-hover-color); + svg path { + fill: var(--menu-button-icon-hover-color); + } } `; @@ -41,10 +46,11 @@ export const MenuButton = () => { return ( diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index 8c0f2a2f6..018ce13a1 100644 --- a/ts/themes/classicDark.ts +++ b/ts/themes/classicDark.ts @@ -25,9 +25,12 @@ export const classicDark: ThemeColorVariables = { '--message-bubbles-sent-text-color': 'var(--background-primary-color)', '--message-bubbles-received-text-color': 'var(--text-primary-color)', - '--menu-button-background-color': 'var(--primary-color)', - '--menu-button-background-hover-color': THEMES.CLASSIC_DARK.COLOR4, - '--menu-button-icon-color': THEMES.CLASSIC_DARK.COLOR6, + '--menu-button-background-color': 'transparent', + '--menu-button-background-hover-color': 'var(--primary-color)', + '--menu-button-icon-color': 'var(--primary-color)', + '--menu-button-icon-hover-color': 'var(--text-primary-color)', + '--menu-button-border-color': 'var(--primary-color)', + '--menu-button-border-hover-color': 'var(--primary-color)', '--chat-buttons-background-color': THEMES.CLASSIC_DARK.COLOR2, '--chat-buttons-background-hover-color': THEMES.CLASSIC_DARK.COLOR3, diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index 7542b5fa9..be0734eee 100644 --- a/ts/themes/classicLight.ts +++ b/ts/themes/classicLight.ts @@ -25,9 +25,12 @@ export const classicLight: ThemeColorVariables = { '--message-bubbles-sent-text-color': 'var(--text-primary-color)', '--message-bubbles-received-text-color': 'var(--text-primary-color)', - '--menu-button-background-color': THEMES.CLASSIC_LIGHT.COLOR0, + '--menu-button-background-color': 'transparent', '--menu-button-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR1, - '--menu-button-icon-color': THEMES.CLASSIC_LIGHT.COLOR6, + '--menu-button-icon-color': 'var(--text-primary-color)', + '--menu-button-icon-hover-color': THEMES.CLASSIC_LIGHT.COLOR6, + '--menu-button-border-color': 'var(--text-primary-color)', + '--menu-button-border-hover-color': THEMES.CLASSIC_LIGHT.COLOR1, '--chat-buttons-background-color': THEMES.CLASSIC_LIGHT.COLOR4, '--chat-buttons-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR3, diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index 5c09a8e8b..223619b79 100644 --- a/ts/themes/oceanDark.ts +++ b/ts/themes/oceanDark.ts @@ -25,9 +25,12 @@ export const oceanDark: ThemeColorVariables = { '--message-bubbles-sent-text-color': THEMES.OCEAN_DARK.COLOR0, '--message-bubbles-received-text-color': 'var(--text-primary-color)', - '--menu-button-background-color': 'var(--primary-color)', - '--menu-button-background-hover-color': THEMES.OCEAN_DARK.COLOR6, - '--menu-button-icon-color': THEMES.OCEAN_DARK.COLOR7!, + '--menu-button-background-color': 'transparent', + '--menu-button-background-hover-color': 'var(--primary-color)', + '--menu-button-icon-color': 'var(--primary-color)', + '--menu-button-icon-hover-color': 'var(--text-primary-color)', + '--menu-button-border-color': 'var(--primary-color)', + '--menu-button-border-hover-color': 'var(--primary-color)', '--chat-buttons-background-color': THEMES.OCEAN_DARK.COLOR2, '--chat-buttons-background-hover-color': THEMES.OCEAN_DARK.COLOR4, diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts index d85dd08c5..0e565bfa4 100644 --- a/ts/themes/oceanLight.ts +++ b/ts/themes/oceanLight.ts @@ -25,9 +25,12 @@ export const oceanLight: ThemeColorVariables = { '--message-bubbles-sent-text-color': 'var(--text-primary-color)', '--message-bubbles-received-text-color': 'var(--text-primary-color)', - '--menu-button-background-color': 'var(--primary-color)', - '--menu-button-background-hover-color': THEMES.OCEAN_LIGHT.COLOR3, - '--menu-button-icon-color': THEMES.OCEAN_LIGHT.COLOR1, + '--menu-button-background-color': 'transparent', + '--menu-button-background-hover-color': 'var(--primary-color)', + '--menu-button-icon-color': 'var(--primary-color)', + '--menu-button-icon-hover-color': THEMES.OCEAN_LIGHT.COLOR5, + '--menu-button-border-color': 'var(--primary-color)', + '--menu-button-border-hover-color': 'var(--primary-color)', '--chat-buttons-background-color': THEMES.OCEAN_LIGHT.COLOR5, '--chat-buttons-background-hover-color': THEMES.OCEAN_LIGHT.COLOR3, diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx index fbfa72fbc..ace968b83 100644 --- a/ts/themes/variableColors.tsx +++ b/ts/themes/variableColors.tsx @@ -31,6 +31,9 @@ export type ThemeColorVariables = { '--menu-button-background-color': string; '--menu-button-background-hover-color': string; '--menu-button-icon-color': string; + '--menu-button-icon-hover-color': string; + '--menu-button-border-color': string; + '--menu-button-border-hover-color': string; /* Chat (Interaction) Buttons */ /* Also used for Reaction Bar Buttons */