1
0
mirror of https://github.com/tooot-app/app synced 2025-06-05 22:19:13 +02:00

Implemented new dark theme

This commit is contained in:
Zhiyuan Zheng
2022-02-12 14:51:01 +01:00
parent 50141b2963
commit 6f0c318d06
108 changed files with 863 additions and 571 deletions

View File

@ -1,7 +1,7 @@
import Icon from '@components/Icon'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { getTheme } from '@utils/styles/themes'
import { getColors, Theme } from '@utils/styles/themes'
import React, { RefObject } from 'react'
import { AccessibilityInfo } from 'react-native'
import FlashMessage, {
@ -17,7 +17,7 @@ const displayMessage = ({
message,
description,
onPress,
mode,
theme,
type
}:
| {
@ -27,7 +27,7 @@ const displayMessage = ({
message: string
description?: string
onPress?: () => void
mode?: undefined
theme?: undefined
type?: undefined
}
| {
@ -37,7 +37,7 @@ const displayMessage = ({
message: string
description?: string
onPress?: () => void
mode: 'light' | 'dark'
theme: Theme
type: 'success' | 'error' | 'warning'
}) => {
AccessibilityInfo.announceForAccessibility(message + '.' + description)
@ -64,14 +64,14 @@ const displayMessage = ({
message,
description,
onPress,
...(mode &&
...(theme &&
type && {
renderFlashMessageIcon: () => {
return (
<Icon
name={iconMapping[type]}
size={StyleConstants.Font.LineHeight.M}
color={getTheme(mode)[colorMapping[type]]}
color={getColors(theme)[colorMapping[type]]}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
)
@ -85,14 +85,14 @@ const displayMessage = ({
message,
description,
onPress,
...(mode &&
...(theme &&
type && {
renderFlashMessageIcon: () => {
return (
<Icon
name={iconMapping[type]}
size={StyleConstants.Font.LineHeight.M}
color={getTheme(mode)[colorMapping[type]]}
color={getColors(theme)[colorMapping[type]]}
style={{ marginRight: StyleConstants.Spacing.S }}
/>
)
@ -111,7 +111,7 @@ const removeMessage = () => {
}
const Message = React.forwardRef<FlashMessage>((_, ref) => {
const { mode, theme } = useTheme()
const { colors, theme } = useTheme()
return (
<FlashMessage
@ -120,19 +120,19 @@ const Message = React.forwardRef<FlashMessage>((_, ref) => {
position='top'
floating
style={{
backgroundColor: theme.backgroundDefault,
shadowColor: theme.primaryDefault,
backgroundColor: colors.backgroundDefault,
shadowColor: colors.primaryDefault,
shadowOffset: { width: 0, height: 0 },
shadowOpacity: mode === 'light' ? 0.16 : 0.24,
shadowOpacity: theme === 'light' ? 0.16 : 0.24,
shadowRadius: 4
}}
titleStyle={{
color: theme.primaryDefault,
color: colors.primaryDefault,
...StyleConstants.FontStyle.M,
fontWeight: StyleConstants.Font.Weight.Bold
}}
textStyle={{
color: theme.primaryDefault,
color: colors.primaryDefault,
...StyleConstants.FontStyle.S
}}
// @ts-ignore