From e909ded47f8a9849025c4e6f0a06bbaabbacf2f9 Mon Sep 17 00:00:00 2001 From: Igor Matuszewski Date: Mon, 4 Apr 2022 17:13:51 +0200 Subject: [PATCH 1/2] Style buttons like in the live app version --- src/styles/customTheme.ts | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/styles/customTheme.ts b/src/styles/customTheme.ts index 2cbc996..5c58ba8 100644 --- a/src/styles/customTheme.ts +++ b/src/styles/customTheme.ts @@ -100,27 +100,24 @@ const customTheme = extendTheme({ }, variants: { solid: { - color: 'white', - bg: '#7c41ea', - boxShadow: '0 -3px 0 0 #703bd3, 0 3px 0 0 #4c2398, -3px 0 0 0 #6331c0, 3px 0 0 0 #6331c0, 0 0 0 3px #0f0c1b, 0 -6px 0 0 #0f0c1b, 0 6px 0 0 #0f0c1b, -6px 0 0 0 #0f0c1b, 6px 0 0 0 #0f0c1b', + textColor: 'white', + bg: "rgb(49 54 176)", + boxShadow: '0 -2px 0 0 #474cc3, 0 2px 0 0 #22268e, -2px 0 0 0 #393eba, 2px 0 0 0 #393eba, 0 0 0 2px #0f0c1b, 0 -4px 0 0 #0f0c1b, 0 4px 0 0 #0f0c1b, -4px 0 0 0 #0f0c1b, 4px 0 0 0 #0f0c1b', borderRadius: '1px', _focus: { - boxShadow: '0 -3px 0 0 #703bd3, 0 3px 0 0 #4c2398, -3px 0 0 0 #6331c0, 3px 0 0 0 #6331c0, 0 0 0 3px #0f0c1b, 0 -6px 0 0 #0f0c1b, 0 6px 0 0 #0f0c1b, -6px 0 0 0 #0f0c1b, 6px 0 0 0 #0f0c1b' - }, - _active: { - bg: '#7c41ea' + boxShadow: '0 -2px 0 0 #474cc3, 0 2px 0 0 #22268e, -2px 0 0 0 #393eba, 2px 0 0 0 #393eba, 0 0 0 2px #0f0c1b, 0 -4px 0 0 #0f0c1b, 0 4px 0 0 #0f0c1b, -4px 0 0 0 #0f0c1b, 4px 0 0 0 #0f0c1b', }, _hover: { - bg: '#7c41ea', - transform: 'scale(1.07)', + bg: "rgb(49 54 176)", + filter: "brightness(1.25)", _disabled: { - bg: '#7c41ea', - transform: 'none' + bg: "rgb(49 54 176)", + filter: "brightness(1)", } }, _disabled: { - opacity: 1, - boxShadow: '0 -3px 0 0 #703bd3, 0 3px 0 0 #4c2398, -3px 0 0 0 #6331c0, 3px 0 0 0 #6331c0, 0 0 0 3px #0f0c1b, 0 -6px 0 0 #0f0c1b, 0 6px 0 0 #0f0c1b, -6px 0 0 0 #0f0c1b, 6px 0 0 0 #0f0c1b' + opacity: 0.80, + boxShadow: '0 -2px 0 0 #474cc3, 0 2px 0 0 #22268e, -2px 0 0 0 #393eba, 2px 0 0 0 #393eba, 0 0 0 2px #0f0c1b, 0 -4px 0 0 #0f0c1b, 0 4px 0 0 #0f0c1b, -4px 0 0 0 #0f0c1b, 4px 0 0 0 #0f0c1b', } } } From 490e2a546c54adbe070ed32b96027cc29f6c0cda Mon Sep 17 00:00:00 2001 From: Igor Matuszewski Date: Mon, 4 Apr 2022 17:52:46 +0200 Subject: [PATCH 2/2] Add missing active variant --- src/styles/customTheme.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/styles/customTheme.ts b/src/styles/customTheme.ts index 5c58ba8..12375a0 100644 --- a/src/styles/customTheme.ts +++ b/src/styles/customTheme.ts @@ -107,6 +107,11 @@ const customTheme = extendTheme({ _focus: { boxShadow: '0 -2px 0 0 #474cc3, 0 2px 0 0 #22268e, -2px 0 0 0 #393eba, 2px 0 0 0 #393eba, 0 0 0 2px #0f0c1b, 0 -4px 0 0 #0f0c1b, 0 4px 0 0 #0f0c1b, -4px 0 0 0 #0f0c1b, 4px 0 0 0 #0f0c1b', }, + _active: { + bg: "rgb(49 54 176)", + filter: "brightness(1.5)", + boxShadow: '0 -2px 0 0 #474cc3, 0 2px 0 0 #22268e, -2px 0 0 0 #393eba, 2px 0 0 0 #393eba, 0 0 0 2px #0f0c1b, 0 -4px 0 0 #0f0c1b, 0 4px 0 0 #0f0c1b, -4px 0 0 0 #0f0c1b, 4px 0 0 0 #0f0c1b', + }, _hover: { bg: "rgb(49 54 176)", filter: "brightness(1.25)",