diff --git a/applications/launchpad/gui-react/src/components/Button/index.tsx b/applications/launchpad/gui-react/src/components/Button/index.tsx index 354022a6bf..160f754664 100644 --- a/applications/launchpad/gui-react/src/components/Button/index.tsx +++ b/applications/launchpad/gui-react/src/components/Button/index.tsx @@ -22,6 +22,7 @@ import { ButtonProps } from './types' * @param {ButtonSizeType} [size='medium'] - the size of the button * @param {string} [href] - if applied, it renders element with a given href * @param {ReactNode} [leftIcon] - element rendered on left side of the button + * @param {string} [leftIconColor] - custom icon color * @param {ReactNode} [rightIcon] - element rendered on right side of the button * @param {boolean} [autosizeIcons='true'] - by default, it resizes any svg element set as leftIcon or rightIcon to a given dimensions (16x16px) * @param {boolean} [loading] - displays the loader @@ -40,6 +41,7 @@ import { ButtonProps } from './types' * String or {ReactNode} * */ + const Button = ({ children, disabled, @@ -49,6 +51,7 @@ const Button = ({ size = 'medium', href, leftIcon, + leftIconColor, rightIcon, autosizeIcons = true, onClick, @@ -80,6 +83,7 @@ const Button = ({ $autosizeIcon={autosizeIcons} $variant={variant} $disabled={disabled} + $leftIconColor={leftIconColor} data-testid='button-left-icon' > {leftIcon} diff --git a/applications/launchpad/gui-react/src/components/Button/styles.ts b/applications/launchpad/gui-react/src/components/Button/styles.ts index 6f94139bcc..c1fa4c7a00 100644 --- a/applications/launchpad/gui-react/src/components/Button/styles.ts +++ b/applications/launchpad/gui-react/src/components/Button/styles.ts @@ -9,7 +9,7 @@ const getButtonBackgroundColor = ({ theme, }: Pick & { theme: DefaultTheme }) => { if ((disabled || variant === 'secondary') && variant !== 'text') { - return theme.backgroundImage + return theme.disabledPrimaryButton } switch (variant) { @@ -159,6 +159,7 @@ export const IconWrapper = styled.span<{ $autosizeIcon?: boolean $variant?: ButtonVariantType $disabled?: boolean + $leftIconColor?: string }>` display: inline-flex; ${({ $spacing, theme }) => { @@ -169,9 +170,11 @@ export const IconWrapper = styled.span<{ return '' }} - color: ${({ $disabled, theme }) => { + color: ${({ $disabled, theme, $leftIconColor }) => { if ($disabled) { - return theme.placeholderText + return theme.disabledPrimaryButtonText + } else if ($leftIconColor) { + return $leftIconColor } return 'inherit' @@ -196,7 +199,7 @@ export const ButtonContentWrapper = styled.span<{ display: inline-flex; color: ${({ disabled, theme }) => { if (disabled) { - return theme.placeholderText + return theme.disabledPrimaryButtonText } return 'inherit' diff --git a/applications/launchpad/gui-react/src/components/Button/types.ts b/applications/launchpad/gui-react/src/components/Button/types.ts index 3e933452f7..a5b894352c 100644 --- a/applications/launchpad/gui-react/src/components/Button/types.ts +++ b/applications/launchpad/gui-react/src/components/Button/types.ts @@ -20,6 +20,7 @@ export interface ButtonProps { href?: string variant?: ButtonVariantType leftIcon?: ReactNode + leftIconColor?: string rightIcon?: ReactNode autosizeIcons?: boolean onClick?: () => void diff --git a/applications/launchpad/gui-react/src/components/Callout/styles.ts b/applications/launchpad/gui-react/src/components/Callout/styles.ts index 0f8ca8b4eb..62582439f9 100644 --- a/applications/launchpad/gui-react/src/components/Callout/styles.ts +++ b/applications/launchpad/gui-react/src/components/Callout/styles.ts @@ -8,7 +8,9 @@ export const StyledCallout = styled.div<{ padding: ${({ theme }) => `${theme.spacingVertical(0.62)} ${theme.spacingHorizontal(0.5)}`}; background: ${({ theme, $inverted }) => { - return $inverted ? theme.inverted.backgroundSecondary : theme.warning + return $inverted + ? theme.inverted.backgroundSecondary + : theme.calloutBackground }}}; color: ${({ theme, $inverted }) => { return $inverted ? theme.inverted.warningText : theme.warningText diff --git a/applications/launchpad/gui-react/src/components/HelpTip/styles.ts b/applications/launchpad/gui-react/src/components/HelpTip/styles.ts index 2826193824..2f9c8088c1 100644 --- a/applications/launchpad/gui-react/src/components/HelpTip/styles.ts +++ b/applications/launchpad/gui-react/src/components/HelpTip/styles.ts @@ -6,4 +6,5 @@ export const StyledHelpTipWrapper = styled.div>` display: flex; ${({ theme, header }) => header ? `margin-top: ${theme.spacingVertical(3)};` : ''} + color: ${({ theme }) => theme.helpTipText} ` diff --git a/applications/launchpad/gui-react/src/components/Inputs/Input/styles.ts b/applications/launchpad/gui-react/src/components/Inputs/Input/styles.ts index 0919ab1663..b3e146181c 100644 --- a/applications/launchpad/gui-react/src/components/Inputs/Input/styles.ts +++ b/applications/launchpad/gui-react/src/components/Inputs/Input/styles.ts @@ -23,7 +23,7 @@ export const StyledInput = styled.input>` border: none; border-radius: 8px; ::placeholder { - color: ${({ theme }) => theme.placeholderText}; + color: ${({ theme }) => theme.inputPlaceholder}; } &:focus { outline: none; diff --git a/applications/launchpad/gui-react/src/components/NodeBox/index.tsx b/applications/launchpad/gui-react/src/components/NodeBox/index.tsx index aa9acfedae..0ef142618f 100644 --- a/applications/launchpad/gui-react/src/components/NodeBox/index.tsx +++ b/applications/launchpad/gui-react/src/components/NodeBox/index.tsx @@ -1,3 +1,4 @@ +import { useTheme } from 'styled-components' import SvgQuestion from '../../styles/Icons/Question' import Box from '../Box' import Tag from '../Tag' @@ -37,9 +38,12 @@ const NodeBox = ({ titleStyle, contentStyle, onHelpPromptClick, + helpSvgGradient, children, testId = 'node-box-cmp', }: NodeBoxProps) => { + const theme = useTheme() + return ( @@ -62,7 +66,8 @@ const NodeBox = ({ > )} diff --git a/applications/launchpad/gui-react/src/components/NodeBox/styles.ts b/applications/launchpad/gui-react/src/components/NodeBox/styles.ts index a58fce74ba..cd4eb9cbcc 100644 --- a/applications/launchpad/gui-react/src/components/NodeBox/styles.ts +++ b/applications/launchpad/gui-react/src/components/NodeBox/styles.ts @@ -15,7 +15,7 @@ export const SvgContainer = styled.div<{ running?: boolean }>` font-size: 20px; margin-left: ${({ theme }) => theme.spacingHorizontal(0.333)}; cursor: pointer; - color: ${({ theme, running }) => (running ? theme.inverted.secondary : null)}; + color: ${({ theme, running }) => (running ? theme.textSecondary : null)}; ` export const BoxContent = styled.div` diff --git a/applications/launchpad/gui-react/src/components/NodeBox/types.ts b/applications/launchpad/gui-react/src/components/NodeBox/types.ts index 305d67a2c2..bb4413ea78 100644 --- a/applications/launchpad/gui-react/src/components/NodeBox/types.ts +++ b/applications/launchpad/gui-react/src/components/NodeBox/types.ts @@ -13,6 +13,7 @@ export interface NodeBoxProps { contentStyle?: CSSWithSpring children?: ReactNode onHelpPromptClick?: () => void + helpSvgGradient?: boolean testId?: string } diff --git a/applications/launchpad/gui-react/src/components/RunningButton/index.tsx b/applications/launchpad/gui-react/src/components/RunningButton/index.tsx index 8ed79566ce..34f3eaa0d4 100644 --- a/applications/launchpad/gui-react/src/components/RunningButton/index.tsx +++ b/applications/launchpad/gui-react/src/components/RunningButton/index.tsx @@ -50,14 +50,14 @@ const RunningButton = ({ data-testid={testId || 'running-button-cmp'} > - + {t.common.verbs.pause} diff --git a/applications/launchpad/gui-react/src/components/RunningButton/styles.ts b/applications/launchpad/gui-react/src/components/RunningButton/styles.ts index a1df806e66..3a92e80c11 100644 --- a/applications/launchpad/gui-react/src/components/RunningButton/styles.ts +++ b/applications/launchpad/gui-react/src/components/RunningButton/styles.ts @@ -20,7 +20,7 @@ export const TimeWrapper = styled.span` `${theme.spacingVertical(0.2)} ${theme.spacingHorizontal( 0.83, )} ${theme.spacingVertical(0)} ${theme.spacingHorizontal(0.83)}`}; - border-right: 1px solid ${({ theme }) => theme.inverted.secondary}; + border-right: 1px solid ${({ theme }) => theme.resetBackground}; min-width: 61px; ` diff --git a/applications/launchpad/gui-react/src/components/Switch/index.tsx b/applications/launchpad/gui-react/src/components/Switch/index.tsx index 53a3556dc7..c4176b707a 100644 --- a/applications/launchpad/gui-react/src/components/Switch/index.tsx +++ b/applications/launchpad/gui-react/src/components/Switch/index.tsx @@ -45,6 +45,7 @@ const Switch = ({ const circleAnim = useSpring({ left: value ? 10 : -1, + background: value ? themeStyle.primary : themeStyle.switchController, }) const leftLabelColorAnim = useSpring({ @@ -58,7 +59,7 @@ const Switch = ({ }) const controllerAnim = useSpring({ - background: value ? themeStyle.accent : 'transparent', + background: value ? themeStyle.accent : themeStyle.switchController, }) const leftLabelEl = diff --git a/applications/launchpad/gui-react/src/components/Switch/styles.ts b/applications/launchpad/gui-react/src/components/Switch/styles.ts index 3c6de4fe1f..86d57b06ee 100644 --- a/applications/launchpad/gui-react/src/components/Switch/styles.ts +++ b/applications/launchpad/gui-react/src/components/Switch/styles.ts @@ -11,8 +11,9 @@ export const SwitchContainer = styled.label<{ disable?: boolean }>` export const SwitchController = styled(animated.div)<{ disable?: boolean }>` height: 14px; width: 24px; - border: 1px solid - ${({ theme, disable }) => (disable ? theme.disabledText : theme.primary)}; + border: 1.5px solid + ${({ theme, disable }) => + disable ? theme.disabledText : theme.switchBorder}; border-radius: 6px; position: relative; box-sizing: border-box; @@ -28,12 +29,14 @@ export const SwitchCircle = styled(animated.div)<{ disable?: boolean }>` width: 14px; height: 14px; top: 0; - margin-top: -1px; + margin-top: -1.5px; + margin-left: -0.5px; border-radius: 6px; box-sizing: border-box; - background: #fff; - border: 1px solid - ${({ theme, disable }) => (disable ? theme.disabledText : theme.primary)}; + background: ${({ theme }) => theme.switchCircle}; + border: 1.5px solid + ${({ theme, disable }) => + disable ? theme.disabledText : theme.switchBorder}; -webkit-box-shadow: 0px 0px 2px -1px ${colors.dark.primary}; -moz-box-shadow: 0px 0px 2px -1px ${colors.dark.primary}; box-shadow: 0px 0px 2px -1px ${colors.dark.primary}; diff --git a/applications/launchpad/gui-react/src/components/TabContent/index.tsx b/applications/launchpad/gui-react/src/components/TabContent/index.tsx index 8d7166d565..10e80b7044 100644 --- a/applications/launchpad/gui-react/src/components/TabContent/index.tsx +++ b/applications/launchpad/gui-react/src/components/TabContent/index.tsx @@ -19,7 +19,7 @@ const TabContent = ({ {text} {running && !pending ? ( - + {t.common.adjectives.running} ) : null} diff --git a/applications/launchpad/gui-react/src/components/Tabs/styles.ts b/applications/launchpad/gui-react/src/components/Tabs/styles.ts index 21a3ffc8e3..806e8e150f 100644 --- a/applications/launchpad/gui-react/src/components/Tabs/styles.ts +++ b/applications/launchpad/gui-react/src/components/Tabs/styles.ts @@ -39,6 +39,7 @@ export const Tab = styled.button<{ cursor: pointer; align-items: center; transition: ease-in-out 300ms; + color: ${({ theme }) => theme.primary}; &:hover { background-color: ${({ theme, $inverted }) => $inverted diff --git a/applications/launchpad/gui-react/src/components/Tag/index.tsx b/applications/launchpad/gui-react/src/components/Tag/index.tsx index e98f5b45d5..5cf2b45804 100644 --- a/applications/launchpad/gui-react/src/components/Tag/index.tsx +++ b/applications/launchpad/gui-react/src/components/Tag/index.tsx @@ -7,15 +7,17 @@ import { TagProps } from './types' import { TagContainer, IconWrapper } from './styles' /** - * @name Tag - * @typedef TagProps + * Tag component * * @prop {ReactNode} [children] - text content to display * @prop {CSSProperties} [style] - optional component styles * @prop {'info' | 'running' | 'warning' | 'expert' | 'light'} [type] - tag types to determine color settings + * @prop {boolean} [expertSec] - specific usage of expert tag type * @prop {ReactNode} [icon] - optional SVG icon * @prop {ReactNode} [subText] - optional additional tag text * @prop {boolean} [inverted] - optional prop indicating whether tag should be rendered in inverted coloring +// * @prop {boolean} [dark] - special style case + * @prop {boolean} [expertSec] - special style case for expert tag type * * @example * } subText='Mainnet'> @@ -31,26 +33,39 @@ const Tag = ({ icon, subText, inverted, + dark, + expertSec, }: TagProps) => { const theme = useTheme() let baseStyle: CSSProperties = {} let textStyle: CSSProperties = {} + let runningTagBackgroundColor + let runningTagTextColor + + if (dark) { + runningTagBackgroundColor = theme.dashboardRunningTagBackground + runningTagTextColor = theme.dashboardRunningTagText + } else { + runningTagBackgroundColor = theme.runningTagBackground + runningTagTextColor = theme.runningTagText + } + switch (type) { case 'running': baseStyle = { backgroundColor: inverted ? theme.transparent(theme.onText, 40) - : theme.on, + : runningTagBackgroundColor, } textStyle = { - color: inverted ? theme.inverted.accentSecondary : theme.onText, + color: inverted ? theme.onTextLight : runningTagTextColor, } break case 'warning': baseStyle = { - backgroundColor: theme.warning, + backgroundColor: theme.warningTag, } textStyle = { color: theme.warningText, @@ -60,10 +75,16 @@ const Tag = ({ baseStyle = { backgroundColor: theme.expert, } - textStyle = { - backgroundImage: theme.expertText, - WebkitBackgroundClip: 'text', - color: 'transparent', + if (expertSec) { + textStyle = { + color: theme.expertSecText, + } + } else { + textStyle = { + backgroundImage: theme.expertText, + WebkitBackgroundClip: 'text', + color: 'transparent', + } } break case 'light': @@ -77,7 +98,7 @@ const Tag = ({ // info tag type is default default: baseStyle = { - backgroundColor: theme.info, + backgroundColor: theme.infoTag, } textStyle = { color: theme.infoText, @@ -106,7 +127,7 @@ const Tag = ({ {subText && ( diff --git a/applications/launchpad/gui-react/src/components/Tag/types.ts b/applications/launchpad/gui-react/src/components/Tag/types.ts index 5697df0c6c..eb72d55f01 100644 --- a/applications/launchpad/gui-react/src/components/Tag/types.ts +++ b/applications/launchpad/gui-react/src/components/Tag/types.ts @@ -4,18 +4,6 @@ import { CSSProperties } from 'styled-components' export type TagVariantType = 'small' | 'large' export type TagType = 'info' | 'running' | 'warning' | 'expert' | 'light' -/** - * @typedef TagProps - * - * @prop {ReactNode} [children] - text content to display - * @prop {CSSProperties} [style] - optional component styles - * @prop {'info' | 'running' | 'warning' | 'expert'} [type] - tag types to determine color settings - * @prop {ReactNode} [icon] - optional SVG icon - * @prop {ReactNode} [subText] - optional additional tag text - * @prop {TagVariantType} [variant] - small or large size tag - * @prop {boolean} [inverted] - boolean indicated if inverted colors should be used - */ - export interface TagProps { children?: ReactNode style?: CSSProperties @@ -24,4 +12,6 @@ export interface TagProps { icon?: ReactNode subText?: ReactNode inverted?: boolean + dark?: boolean + expertSec?: boolean } diff --git a/applications/launchpad/gui-react/src/components/TitleBar/index.tsx b/applications/launchpad/gui-react/src/components/TitleBar/index.tsx index 0970506cd3..94bb82d222 100644 --- a/applications/launchpad/gui-react/src/components/TitleBar/index.tsx +++ b/applications/launchpad/gui-react/src/components/TitleBar/index.tsx @@ -28,6 +28,7 @@ import { WindowButtons, } from './styles' import { TitleBarProps } from './types' +import { useMemo } from 'react' const TitleBar = ({ drawerViewWidth = '50%', @@ -80,6 +81,14 @@ const TitleBar = ({ } } + const settingsIconColor = useMemo(() => { + if (expertView !== 'hidden') { + return theme.textSecondary + } else { + return theme.helpTipText + } + }, [theme, expertView]) + return ( } + leftIconColor={settingsIconColor} onClick={() => dispatch(settingsActions.open({}))} style={{ color: diff --git a/applications/launchpad/gui-react/src/containers/MiningContainer/MiningBox/index.tsx b/applications/launchpad/gui-react/src/containers/MiningContainer/MiningBox/index.tsx index 5bed8a7a5f..060cc215ca 100644 --- a/applications/launchpad/gui-react/src/containers/MiningContainer/MiningBox/index.tsx +++ b/applications/launchpad/gui-react/src/containers/MiningContainer/MiningBox/index.tsx @@ -144,17 +144,18 @@ const MiningBox = ({ }`, boxStyle: { color: theme.primary, - background: theme.background, + background: theme.nodeBackground, }, titleStyle: { - color: theme.primary, + color: theme.helpTipText, }, contentStyle: { color: theme.secondary, }, icon: { - color: theme.backgroundImage, + color: theme.nodeLightIcon, }, + helpSvgGradient: false, } const defaultStates: Partial<{ @@ -164,17 +165,28 @@ const MiningBox = ({ tag: { content: t.common.phrases.startHere, }, + helpSvgGradient: true, }, [MiningBoxStatus.Paused]: { tag: { content: t.common.adjectives.paused, type: 'light', }, + titleStyle: { + color: theme.helpTipText, + }, + boxStyle: { + background: theme.nodeBackground, + }, + icon: { + color: theme.nodeLightIcon, + }, }, [MiningBoxStatus.PausedNoSession]: { tag: { content: t.common.phrases.startHere, }, + helpSvgGradient: true, }, [MiningBoxStatus.Running]: { tag: { @@ -188,7 +200,7 @@ const MiningBox = ({ color: theme.inverted.primary, }, contentStyle: { - color: theme.inverted.secondary, + color: theme.inverted.primary, }, icon: { color: theme.accentDark, @@ -263,7 +275,9 @@ const MiningBox = ({ case MiningBoxStatus.Paused: return ( - {coins ? : null} + {coins ? ( + + ) : null} - +
+ + + {t.common.nouns.expert} + +
diff --git a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/index.tsx b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/index.tsx index a1fbaa7adc..756e7751a1 100644 --- a/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/index.tsx +++ b/applications/launchpad/gui-react/src/containers/WalletPasswordWizard/WalletPasswordForm/index.tsx @@ -35,11 +35,13 @@ const WalletPasswordForm = ({ {t.walletPasswordWizard.description} - {t.walletPasswordWizard.warning} + + {t.walletPasswordWizard.warning} + {t.walletPasswordWizard.warningBox} diff --git a/applications/launchpad/gui-react/src/custom.d.ts b/applications/launchpad/gui-react/src/custom.d.ts index 0a2033a71b..7b9404a678 100644 --- a/applications/launchpad/gui-react/src/custom.d.ts +++ b/applications/launchpad/gui-react/src/custom.d.ts @@ -46,22 +46,40 @@ declare module 'styled-components' { titleBar: string controlBackground: string - info: string + infoTag: string infoText: string on: string onText: string onTextLight: string warning: string + warningTag: string warningText: string warningDark: string success: string error: string expert: string expertText: string + expertSecText: string lightTag: string lightTagText: string placeholderText: string textSecondary: string + helpTipText: string + runningTagBackground: string + runningTagText: string + dashboardRunningTagText: string + dashboardRunningTagBackground: string + switchBorder: string + switchCircle: string + switchController: string + nodeBackground: string + nodeLightIcon: string + nodeSubHeading: string + nodeWarningText: string + calloutBackground: string + inputPlaceholder: string + disabledPrimaryButton: string + disabledPrimaryButtonText: string inverted: { controlBackground: string @@ -97,6 +115,20 @@ declare module 'styled-components' { expertText: string lightTag: string lightTagText: string + expert: string + expertText: string + expertSecText: string + switchBorder: string + switchCircle: string + switchController: string + nodeBackground: string + nodeLightIcon: string + nodeSubHeading: string + nodeWarningText: string + calloutBackground: string + inputPlaceholder: string + disabledPrimaryButton: string + disabledPrimaryButtonText: string } } } diff --git a/applications/launchpad/gui-react/src/styles/themes/dark.ts b/applications/launchpad/gui-react/src/styles/themes/dark.ts index a4f4ad2917..d7dfa0bca2 100644 --- a/applications/launchpad/gui-react/src/styles/themes/dark.ts +++ b/applications/launchpad/gui-react/src/styles/themes/dark.ts @@ -9,14 +9,14 @@ const darkTheme = { backgroundImage: styles.colors.light.backgroundImage, accent: styles.colors.tari.purple, accentDark: styles.colors.tari.purpleDark, - accentMerged: styles.colors.merged.dark, + accentMerged: styles.colors.darkMode.darkLogoCard, disabledText: styles.colors.dark.placeholder, tariGradient: styles.gradients.tariDark, tariTextGradient: styles.gradients.tariText, mergedGradient: styles.gradients.mergedDark, warningGradient: styles.gradients.warning, greenMedium: styles.colors.secondary.greenMedium, - borderColor: styles.colors.light.backgroundImage, + borderColor: styles.colors.darkMode.modalBackground, titleBar: styles.colors.dark.primary, borderColorLight: styles.colors.secondary.borderLight, @@ -24,22 +24,41 @@ const darkTheme = { resetBackgroundHover: styles.colors.light.overlayDark, moneroDark: styles.colors.monero.dark, controlBackground: 'rgba(255,255,255,.2)', - info: styles.colors.secondary.info, + infoTag: styles.colors.darkMode.tags, infoText: styles.colors.secondary.infoText, on: styles.colors.secondary.on, onText: styles.colors.secondary.onText, onTextLight: styles.colors.secondary.onTextLight, warning: styles.colors.secondary.warning, + warningTag: styles.colors.darkMode.modalBackground, warningText: styles.colors.secondary.warningText, warningDark: styles.colors.secondary.warningDark, success: styles.colors.secondary.onTextLight, error: styles.colors.secondary.error, - expert: 'rgba(147, 48, 255, 0.05)', + expert: 'rgba(255, 255, 255, 0.06)', expertText: styles.gradients.tari, - lightTag: styles.colors.light.backgroundImage, + expertSecText: 'rgba(255, 255, 255, 0.32)', + lightTag: styles.colors.darkMode.tags, lightTagText: styles.colors.dark.secondary, placeholderText: styles.colors.dark.placeholder, + textSecondary: styles.colors.light.textSecondary, mergedAccent: styles.colors.merged.dark, + helpTipText: styles.colors.light.textSecondary, + runningTagBackground: styles.colors.darkMode.tags, + runningTagText: styles.colors.secondary.onTextLight, + dashboardRunningTagText: styles.colors.light.primary, + dashboardRunningTagBackground: styles.colors.darkMode.modalBackground, + switchBorder: styles.colors.darkMode.input, + switchCircle: styles.colors.dark.secondary, + switchController: styles.colors.light.overlay, + nodeBackground: styles.colors.darkMode.modalBackground, + nodeLightIcon: styles.colors.darkMode.darkLogoCard, + nodeSubHeading: styles.colors.dark.secondary, + nodeWarningText: styles.colors.light.textSecondary, + calloutBackground: styles.colors.darkMode.tags, + inputPlaceholder: styles.colors.dark.secondary, + disabledPrimaryButton: styles.colors.darkMode.borders, + disabledPrimaryButtonText: styles.colors.darkMode.disabledText, inverted: { primary: styles.colors.light.primary, @@ -50,14 +69,14 @@ const darkTheme = { backgroundImage: styles.colors.light.backgroundImage, accent: styles.colors.tari.purple, accentDark: styles.colors.tari.purpleDark, - accentMerged: styles.colors.merged.dark, + accentMerged: styles.colors.darkMode.darkLogoCard, disabledText: styles.colors.dark.placeholder, tariGradient: styles.gradients.tariDark, tariTextGradient: styles.gradients.tariText, mergedGradient: styles.gradients.mergedDark, warningGradient: styles.gradients.warning, greenMedium: styles.colors.secondary.greenMedium, - info: styles.colors.secondary.info, + infoTag: styles.colors.secondary.info, infoText: styles.colors.secondary.infoText, on: styles.colors.secondary.on, onText: styles.colors.secondary.onText, @@ -67,16 +86,33 @@ const darkTheme = { warningDark: styles.colors.secondary.warningDark, success: styles.colors.secondary.onTextLight, error: styles.colors.secondary.error, - expert: 'rgba(147, 48, 255, 0.05)', + expert: 'rgba(255, 255, 255, 0.06)', expertText: styles.gradients.tari, + expertSecText: 'rgba(255, 255, 255, 0.32)', lightTag: styles.colors.light.backgroundImage, lightTagText: styles.colors.dark.secondary, + placeholderText: styles.colors.dark.placeholder, borderColor: styles.colors.light.backgroundImage, borderColorLight: styles.colors.secondary.borderLight, resetBackground: styles.colors.light.overlay, resetBackgroundHover: styles.colors.light.overlayDark, moneroDark: styles.colors.monero.dark, controlBackground: 'transparent', + helpTipText: styles.colors.light.textSecondary, + runningTagBackground: styles.colors.darkMode.tags, + runningTagText: styles.colors.secondary.onTextLight, + dashboardRunningTagText: styles.colors.light.primary, + dashboardRunningTagBackground: styles.colors.darkMode.modalBackground, + switchBorder: styles.colors.darkMode.input, + switchCircle: styles.colors.dark.secondary, + switchController: styles.colors.light.overlay, + nodeBackground: styles.colors.darkMode.modalBackground, + nodeLightIcon: styles.colors.darkMode.darkLogoCard, + nodeSubHeading: styles.colors.dark.secondary, + nodeWarningText: styles.colors.light.textSecondary, + calloutBackground: styles.colors.darkMode.tags, + inputPlaceholder: styles.colors.dark.secondary, + disabledPrimaryButtonText: styles.colors.darkMode.disabledText, }, } diff --git a/applications/launchpad/gui-react/src/styles/themes/light.ts b/applications/launchpad/gui-react/src/styles/themes/light.ts index 7cb8489be1..4716268e01 100644 --- a/applications/launchpad/gui-react/src/styles/themes/light.ts +++ b/applications/launchpad/gui-react/src/styles/themes/light.ts @@ -28,22 +28,40 @@ const lightTheme = { titleBar: styles.colors.light.background, controlBackground: 'transparent', - info: styles.colors.secondary.info, + infoTag: styles.colors.secondary.info, infoText: styles.colors.secondary.infoText, on: styles.colors.secondary.on, onText: styles.colors.secondary.onText, onTextLight: styles.colors.secondary.onTextLight, warning: styles.colors.secondary.warning, + warningTag: styles.colors.secondary.warning, warningText: styles.colors.secondary.warningText, warningDark: styles.colors.secondary.warningDark, success: styles.colors.secondary.onTextLight, error: styles.colors.secondary.error, expert: 'rgba(147, 48, 255, 0.05)', expertText: styles.gradients.tari, + expertSecText: styles.colors.tari.purple, lightTag: styles.colors.light.backgroundImage, lightTagText: styles.colors.dark.secondary, placeholderText: styles.colors.dark.placeholder, textSecondary: styles.colors.light.textSecondary, + helpTipText: styles.colors.dark.primary, + runningTagBackground: styles.colors.secondary.on, + runningTagText: styles.colors.secondary.onText, + dashboardRunningTagText: styles.colors.secondary.onText, + dashboardRunningTagBackground: styles.colors.secondary.on, + switchBorder: styles.colors.dark.primary, + switchCircle: styles.colors.light.background, + switchController: styles.colors.light.background, + nodeBackground: styles.colors.light.primary, + nodeLightIcon: styles.colors.light.backgroundImage, + nodeSubHeading: styles.colors.dark.primary, + nodeWarningText: styles.colors.dark.secondary, + calloutBackground: styles.colors.secondary.warning, + inputPlaceholder: styles.colors.dark.placeholder, + disabledPrimaryButton: styles.colors.light.backgroundImage, + disabledPrimaryButtonText: styles.colors.dark.placeholder, inverted: { primary: styles.colors.light.primary, @@ -63,7 +81,7 @@ const lightTheme = { mergedGradient: styles.gradients.merged, warningGradient: styles.gradients.warning, greenMedium: styles.colors.secondary.greenMedium, - info: styles.colors.secondary.info, + infoTag: styles.colors.secondary.info, infoText: styles.colors.secondary.infoText, on: styles.colors.secondary.on, onText: styles.colors.secondary.onText, @@ -75,6 +93,7 @@ const lightTheme = { error: styles.colors.secondary.error, expert: 'rgba(147, 48, 255, 0.05)', expertText: styles.gradients.tari, + expertSecText: styles.colors.tari.purple, lightTag: styles.colors.light.backgroundImage, lightTagText: styles.colors.dark.secondary, borderColor: styles.colors.secondary.borderLight, @@ -84,6 +103,21 @@ const lightTheme = { resetBackgroundHover: styles.colors.light.overlayDark, moneroDark: styles.colors.monero.dark, controlBackground: 'rgba(255,255,255,.2)', + helpTipText: styles.colors.dark.primary, + runningTagBackground: styles.colors.secondary.on, + runningTagText: styles.colors.secondary.onText, + dashboardRunningTagText: styles.colors.secondary.onText, + dashboardRunningTagBackground: styles.colors.secondary.on, + switchBorder: styles.colors.dark.primary, + switchController: styles.colors.light.background, + nodeBackground: styles.colors.light.primary, + nodeLightIcon: styles.colors.light.backgroundImage, + nodeSubHeading: styles.colors.dark.primary, + nodeWarningText: styles.colors.dark.secondary, + calloutBackground: styles.colors.secondary.warning, + inputPlaceholder: styles.colors.dark.placeholder, + disabledPrimaryButton: styles.colors.light.backgroundImage, + disabledPrimaryButtonText: styles.colors.dark.placeholder, }, }