Merge pull request #383 from Altalogy/launchpad/feature/dark-mode-upd…

…ate-fixed

feat: dark mode update #1

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 <a /> 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}
  * </Button>
  */
+
 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}

applications/launchpad/gui-react/src/components/Button/styles.ts

@@ -9,7 +9,7 @@ const getButtonBackgroundColor = ({
   theme,
 }: Pick<ButtonProps, 'variant' | 'disabled'> & { 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'

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

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

applications/launchpad/gui-react/src/components/HelpTip/styles.ts

@@ -6,4 +6,5 @@ export const StyledHelpTipWrapper = styled.div<Pick<HelpTipProps, 'header'>>`
   display: flex;
   ${({ theme, header }) =>
     header ? `margin-top: ${theme.spacingVertical(3)};` : ''}
+  color: ${({ theme }) => theme.helpTipText}
 `

applications/launchpad/gui-react/src/components/Inputs/Input/styles.ts

@@ -23,7 +23,7 @@ export const StyledInput = styled.input<InputHTMLAttributes<HTMLInputElement>>`
   border: none;
   border-radius: 8px;
   ::placeholder {
-    color: ${({ theme }) => theme.placeholderText};
+    color: ${({ theme }) => theme.inputPlaceholder};
   }
   &:focus {
     outline: none;

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 (
     <Box testId={testId} style={style}>
       <BoxHeader>
@@ -62,7 +66,8 @@ const NodeBox = ({
           >
             <SvgQuestion
               onClick={onHelpPromptClick}
-              useGradient={tag?.type !== 'running'}
+              useGradient={helpSvgGradient}
+              color={tag?.type === 'light' ? theme.accent : 'inherit'}
             />
           </SvgContainer>
         )}

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`

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
 }
 

applications/launchpad/gui-react/src/components/RunningButton/index.tsx

@@ -50,14 +50,14 @@ const RunningButton = ({
       data-testid={testId || 'running-button-cmp'}
     >
       <TimeWrapper>
-        <Text as='span' color={theme.inverted.secondary} testId='timer-test-id'>
+        <Text as='span' color={theme.textSecondary} testId='timer-test-id'>
           <Time startedAt={startedAt} active={active} />
         </Text>
       </TimeWrapper>
       <TextWrapper>
         <Text
           as='span'
-          color={theme.inverted.secondary}
+          color={theme.textSecondary}
           style={{ textAlign: 'center' }}
         >
           {t.common.verbs.pause}

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;
 `
 

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 =

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};

applications/launchpad/gui-react/src/components/TabContent/index.tsx

@@ -19,7 +19,7 @@ const TabContent = ({
     <StyledTabContent>
       <TabMainText>{text}</TabMainText>
       {running && !pending ? (
-        <Tag variant='small' type='running' subText={tagSubText}>
+        <Tag variant='small' type='running' subText={tagSubText} dark>
           {t.common.adjectives.running}
         </Tag>
       ) : null}

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

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
  * <Tag type='running' style={extraStyles} icon={<someIconComponent/>} 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 && (
         <Text
-          style={{ marginLeft: '4px' }}
+          style={{ marginLeft: '6px' }}
           type='microMedium'
           color={theme.onTextLight}
         >

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
 }