From 551635c3747625b65c7a9edb0b9f816987e7fa2c Mon Sep 17 00:00:00 2001 From: SorinC6 Date: Thu, 11 Jan 2024 11:08:22 +0200 Subject: [PATCH] remove components from app theme --- .../.storybook/storybook.requires.js | 3 - .../src/theme/Palette.stories.tsx | 188 ------------------ .../wallet-mobile/src/theme/Theme.stories.tsx | 37 ---- .../wallet-mobile/src/theme/ThemeProvider.tsx | 69 ------- .../src/theme/Typography.stories.tsx | 27 --- apps/wallet-mobile/src/theme/darkTheme.ts | 10 - apps/wallet-mobile/src/theme/index.ts | 1 - apps/wallet-mobile/src/theme/lightTheme.ts | 10 - apps/wallet-mobile/src/theme/spacing.ts | 16 -- .../src/theme/transitions/screenOptions.ts | 55 ----- apps/wallet-mobile/src/theme/typography.ts | 178 ----------------- .../src/TxHistory/TxHistoryNavigator.json | 64 +++--- packages/theme/src/Theme.stories.tsx | 2 +- 13 files changed, 33 insertions(+), 627 deletions(-) delete mode 100644 apps/wallet-mobile/src/theme/Palette.stories.tsx delete mode 100644 apps/wallet-mobile/src/theme/Theme.stories.tsx delete mode 100644 apps/wallet-mobile/src/theme/ThemeProvider.tsx delete mode 100644 apps/wallet-mobile/src/theme/Typography.stories.tsx delete mode 100644 apps/wallet-mobile/src/theme/darkTheme.ts delete mode 100644 apps/wallet-mobile/src/theme/lightTheme.ts delete mode 100644 apps/wallet-mobile/src/theme/spacing.ts delete mode 100644 apps/wallet-mobile/src/theme/transitions/screenOptions.ts delete mode 100644 apps/wallet-mobile/src/theme/typography.ts diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js index 4fcb4f24d1..44b28cf79a 100644 --- a/apps/wallet-mobile/.storybook/storybook.requires.js +++ b/apps/wallet-mobile/.storybook/storybook.requires.js @@ -225,9 +225,6 @@ const getStories = () => { "./src/Staking/PoolDetails/PoolDetailScreen.stories.tsx": require("../src/Staking/PoolDetails/PoolDetailScreen.stories.tsx"), "./src/Staking/PoolWarningModal/PoolWarningModal.stories.tsx": require("../src/Staking/PoolWarningModal/PoolWarningModal.stories.tsx"), "./src/Staking/StakingCenter/StakingCenter.stories.tsx": require("../src/Staking/StakingCenter/StakingCenter.stories.tsx"), - "./src/theme/Palette.stories.tsx": require("../src/theme/Palette.stories.tsx"), - "./src/theme/Theme.stories.tsx": require("../src/theme/Theme.stories.tsx"), - "./src/theme/Typography.stories.tsx": require("../src/theme/Typography.stories.tsx"), "./src/TxHistory/AssetList/ActionsBanner.stories.tsx": require("../src/TxHistory/AssetList/ActionsBanner.stories.tsx"), "./src/TxHistory/AssetList/ChipButton/ChipButton.stories.tsx": require("../src/TxHistory/AssetList/ChipButton/ChipButton.stories.tsx"), "./src/TxHistory/BalanceBanner.stories.tsx": require("../src/TxHistory/BalanceBanner.stories.tsx"), diff --git a/apps/wallet-mobile/src/theme/Palette.stories.tsx b/apps/wallet-mobile/src/theme/Palette.stories.tsx deleted file mode 100644 index fa5a7cc849..0000000000 --- a/apps/wallet-mobile/src/theme/Palette.stories.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import {storiesOf} from '@storybook/react-native' -import * as React from 'react' -import {ScrollView, Switch, Text as RNText, TextProps, View} from 'react-native' -import LinearGradient from 'react-native-linear-gradient' - -import {darkPalette, lightPalette} from './palettes' - -storiesOf('Palette', module).add('Palette', () => ) - -const Palette = () => { - const [colorScheme, setColorScheme] = useColorScheme() - const palette = colorScheme === 'dark' ? darkPalette : lightPalette - - return ( - - - colorScheme: {colorScheme} - - - - setColorScheme(colorScheme === 'light' ? 'dark' : 'light')} - /> - - -
- - - - - - - - - - - - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - -
- -
- - - - - -
- -
- - - -
- -
- - - - - -
- - ) -} - -const Section = ({title, children}: {title: string; children: React.ReactNode}) => { - const [colorScheme] = useColorScheme() - - return ( - - {title} - - {children} - - ) -} - -const Item = ({title, color}: {title: string; color: string}) => { - return ( - - {title} - - {color} - - - - ) -} - -const Gradient = ({title, colors}: {title: string; colors: [string, string]}) => { - return ( - - {title} - - {colors[0]} - - - - {colors[1]} - - ) -} - -const Text = (props: TextProps) => { - const [colorScheme] = useColorScheme() - - return -} - -const ColorSchemeContext = React.createContext void]>( - undefined, -) -const WithColorScheme = () => { - return ( - ('light')}> - - - ) -} -const useColorScheme = () => { - const context = React.useContext(ColorSchemeContext) - if (!context) { - throw new Error('Missing ColorSchemeContext') - } - - return context -} diff --git a/apps/wallet-mobile/src/theme/Theme.stories.tsx b/apps/wallet-mobile/src/theme/Theme.stories.tsx deleted file mode 100644 index 5056539779..0000000000 --- a/apps/wallet-mobile/src/theme/Theme.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import {storiesOf} from '@storybook/react-native' -import {useTheme} from '@yoroi/theme' -import * as React from 'react' -import {ScrollView, Switch, Text, View} from 'react-native' - -import {Spacer} from '../components' - -storiesOf('ThemeProvider', module).add('ThemeProvider', () => ) - -const ThemeGallery = () => { - const {theme, colorScheme, selectColorScheme} = useTheme() - - return ( - <> - - colorScheme: {colorScheme} - - selectColorScheme(colorScheme === 'light' ? 'dark' : 'light')} - /> - - - - Palette: {JSON.stringify(theme.color, null, 2)} - - - - - - - - Typography: {JSON.stringify(theme.typography, null, 2)} - - - ) -} diff --git a/apps/wallet-mobile/src/theme/ThemeProvider.tsx b/apps/wallet-mobile/src/theme/ThemeProvider.tsx deleted file mode 100644 index ba98ff7712..0000000000 --- a/apps/wallet-mobile/src/theme/ThemeProvider.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import {parseSafe, useStorage} from '@yoroi/common' -import React from 'react' -import {useColorScheme} from 'react-native' -import {useMutation, UseMutationOptions, useQuery, useQueryClient} from 'react-query' - -import {darkTheme} from './darkTheme' -import {lightTheme} from './lightTheme' -import {Theme} from './types' - -const ThemeContext = React.createContext(undefined) -export const ThemeProvider = ({children}: {children: React.ReactNode}) => { - const systemColorScheme = useColorScheme() ?? 'light' - const savedColorScheme = useSavedColorScheme() - - const selectColorScheme = useSaveColorScheme() - const colorScheme = savedColorScheme ?? systemColorScheme - const theme = themes[isColorScheme(colorScheme) ? colorScheme : systemColorScheme] - - return {children} -} - -export const useTheme = () => React.useContext(ThemeContext) || missingProvider() - -const missingProvider = () => { - throw new Error('ThemeProvider is missing') -} - -const useSavedColorScheme = () => { - const storage = useStorage() - const query = useQuery({ - queryKey: ['colorScheme'], - queryFn: () => storage.join('appSettings/').getItem('colorScheme', parseColorScheme), - suspense: true, - }) - - return query.data -} - -const useSaveColorScheme = (options: UseMutationOptions = {}) => { - const queryClient = useQueryClient() - const storage = useStorage() - const mutation = useMutation({ - mutationFn: async (colorScheme) => storage.join('appSettings/').setItem('colorScheme', colorScheme), - onSuccess: () => queryClient.invalidateQueries('colorScheme'), - ...options, - }) - - return mutation.mutate -} - -type SelectColorScheme = ReturnType -type ColorSchemeOption = 'light' | 'dark' | 'system' -type ThemeContext = { - theme: Theme - colorScheme: ColorSchemeOption - selectColorScheme: SelectColorScheme -} - -const themes: Record<'light' | 'dark', Theme> = { - light: lightTheme, - dark: darkTheme, -} - -const isColorScheme = (data: unknown): data is 'light' | 'dark' => data === 'light' || data === 'dark' -const parseColorScheme = (data: unknown) => { - const parsed = parseSafe(data) - - return isColorScheme(parsed) ? parsed : undefined -} diff --git a/apps/wallet-mobile/src/theme/Typography.stories.tsx b/apps/wallet-mobile/src/theme/Typography.stories.tsx deleted file mode 100644 index 74477960ad..0000000000 --- a/apps/wallet-mobile/src/theme/Typography.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import {storiesOf} from '@storybook/react-native' -import * as React from 'react' -import {ScrollView, Text, View} from 'react-native' - -import {typography} from './typography' - -storiesOf('Typography', module).add('default', () => ) - -const Typography = () => { - return ( - - {Object.entries(typography).map(([name, textStyle]) => { - const title = name.split('-').join(' ') - - return ( - - {title} - - ) - })} - - ) -} - -const Row = ({children}: {children: React.ReactNode}) => { - return {children} -} diff --git a/apps/wallet-mobile/src/theme/darkTheme.ts b/apps/wallet-mobile/src/theme/darkTheme.ts deleted file mode 100644 index 02ca3ce57a..0000000000 --- a/apps/wallet-mobile/src/theme/darkTheme.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {darkPalette} from './palettes' -import {spacing} from './spacing' -import {Theme} from './types' -import {typography} from './typography' - -export const darkTheme: Theme = { - color: darkPalette, - typography: typography, - spacing: spacing, -} diff --git a/apps/wallet-mobile/src/theme/index.ts b/apps/wallet-mobile/src/theme/index.ts index edcba742a3..2a5c25e7f2 100644 --- a/apps/wallet-mobile/src/theme/index.ts +++ b/apps/wallet-mobile/src/theme/index.ts @@ -1,3 +1,2 @@ export * from './config' export * from './palettes' -export * from './ThemeProvider' diff --git a/apps/wallet-mobile/src/theme/lightTheme.ts b/apps/wallet-mobile/src/theme/lightTheme.ts deleted file mode 100644 index 2c9965beb2..0000000000 --- a/apps/wallet-mobile/src/theme/lightTheme.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {lightPalette} from './palettes' -import {spacing} from './spacing' -import {Theme} from './types' -import {typography} from './typography' - -export const lightTheme: Theme = { - color: lightPalette, - typography: typography, - spacing: spacing, -} diff --git a/apps/wallet-mobile/src/theme/spacing.ts b/apps/wallet-mobile/src/theme/spacing.ts deleted file mode 100644 index ab3275a599..0000000000 --- a/apps/wallet-mobile/src/theme/spacing.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {Spacing} from './types' - -export const spacing: Spacing = { - 'spacing-2': '2px', - 'spacing-4': '4px', - 'spacing-6': '6px', - 'spacing-8': '8px', - 'spacing-10': '10px', - 'spacing-12': '12px', - 'spacing-16': '16px', - 'spacing-24': '24px', - 'spacing-32': '32px', - 'spacing-40': '40px', - 'spacing-48': '48px', - 'spacing-80': '80px', -} diff --git a/apps/wallet-mobile/src/theme/transitions/screenOptions.ts b/apps/wallet-mobile/src/theme/transitions/screenOptions.ts deleted file mode 100644 index e23a3abfef..0000000000 --- a/apps/wallet-mobile/src/theme/transitions/screenOptions.ts +++ /dev/null @@ -1,55 +0,0 @@ -import {Easing} from 'react-native-reanimated' - -/** - * Options to be added in Stack.Screen to change transition - * see more: https://reactnavigation.org/docs/stack-navigator/#animations - */ - -const topToBottomTransitionSpec = { - open: { - animation: 'spring', - config: { - stiffness: 300, - damping: 25, - mass: 1, - overshootClamping: false, - restDisplacementThreshold: 0.01, - restSpeedThreshold: 2, - }, - }, - close: { - animation: 'timing', - config: { - easing: Easing.inOut(Easing.sin), - duration: 300, - }, - }, -} as const - -const topToBottomCardStyleInterpolator = ({current, layouts}) => - ({ - cardStyle: { - opacity: current.progress, - transform: [ - { - translateY: current.progress.interpolate({ - inputRange: [0, 1], - outputRange: [-layouts.screen.height, 0], - }), - }, - ], - }, - } as const) - -/** - * Usage: - * - */ -export const topToBottom = { - cardStyleInterpolator: topToBottomCardStyleInterpolator, - transitionSpec: topToBottomTransitionSpec, -} diff --git a/apps/wallet-mobile/src/theme/typography.ts b/apps/wallet-mobile/src/theme/typography.ts deleted file mode 100644 index 891e9a5773..0000000000 --- a/apps/wallet-mobile/src/theme/typography.ts +++ /dev/null @@ -1,178 +0,0 @@ -import {TextStyle} from 'react-native' - -import {Typography} from './types' - -const weight: Record = { - regular: { - fontFamily: 'Rubik', - }, - medium: { - fontFamily: 'Rubik-Medium', - }, -} - -const size: Record = { - h1: { - fontSize: 28, - lineHeight: 36, - }, - h2: { - fontSize: 24, - lineHeight: 32, - }, - h3: { - fontSize: 20, - lineHeight: 30, - }, - h4: { - fontSize: 18, - lineHeight: 26, - }, - h5: { - fontSize: 16, - lineHeight: 24, - letterSpacing: 0.6, - }, - body1: { - fontSize: 16, - lineHeight: 24, - }, - body2: { - fontSize: 14, - lineHeight: 22, - }, - body3: { - fontSize: 12, - lineHeight: 18, - }, - caption: { - fontSize: 10, - lineHeight: 18, - }, -} - -export const typography: Typography = { - 'heading-1-medium': { - ...weight.medium, - ...size.h1, - }, - 'heading-1-regular': { - ...weight.regular, - ...size.h1, - }, - 'heading-2-medium': { - ...weight.medium, - ...size.h2, - }, - 'heading-2-regular': { - ...weight.regular, - ...size.h2, - }, - 'heading-3-medium': { - ...weight.medium, - ...size.h3, - }, - 'heading-3-regular': { - ...weight.regular, - ...size.h3, - }, - 'heading-4-medium': { - ...weight.medium, - ...size.h4, - }, - 'heading-4-regular': { - ...weight.regular, - ...size.h4, - }, - 'heading-5-medium': { - ...weight.medium, - ...size.h5, - textTransform: 'uppercase', - }, - 'heading-5-regular': { - ...weight.regular, - ...size.h5, - textTransform: 'uppercase', - }, - 'body-1-medium': { - ...weight.medium, - ...size.body1, - }, - 'body-1-regular': { - ...weight.regular, - ...size.body1, - }, - 'body-2-medium': { - ...weight.medium, - ...size.body2, - }, - 'body-2-regular': { - ...weight.regular, - ...size.body2, - }, - 'body-3-medium': { - ...weight.medium, - ...size.body3, - }, - 'body-3-regular': { - ...weight.regular, - ...size.body3, - }, - 'button-1': { - ...weight.medium, - fontSize: 16, - lineHeight: 24, - letterSpacing: 0.5, - textTransform: 'uppercase', - }, - 'button-2': { - ...weight.medium, - fontSize: 14, - lineHeight: 20, - letterSpacing: 0.5, - textTransform: 'uppercase', - }, - 'button-3': { - ...weight.medium, - fontSize: 12, - lineHeight: 19, - letterSpacing: 0.3, - textTransform: 'uppercase', - }, - 'link-1': { - ...weight.regular, - fontSize: 16, - lineHeight: 22, - }, - 'link-1-underline': { - ...weight.regular, - fontSize: 16, - lineHeight: 24, - textDecorationLine: 'underline', - }, - 'link-2': { - ...weight.regular, - fontSize: 14, - lineHeight: 20, - }, - 'link-2-underline': { - ...weight.regular, - fontSize: 14, - lineHeight: 22, - textDecorationLine: 'underline', - }, - overline: { - ...weight.regular, - fontSize: 10, - lineHeight: 18, - textTransform: 'uppercase', - }, - 'caption-medium': { - ...weight.medium, - ...size.caption, - }, - 'caption-regular': { - ...weight.regular, - ...size.caption, - }, -} diff --git a/apps/wallet-mobile/translations/messages/src/TxHistory/TxHistoryNavigator.json b/apps/wallet-mobile/translations/messages/src/TxHistory/TxHistoryNavigator.json index 45480744fb..77ff7432d8 100644 --- a/apps/wallet-mobile/translations/messages/src/TxHistory/TxHistoryNavigator.json +++ b/apps/wallet-mobile/translations/messages/src/TxHistory/TxHistoryNavigator.json @@ -4,12 +4,12 @@ "defaultMessage": "!!!Receive", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 347, + "line": 350, "column": 16, "index": 13141 }, "end": { - "line": 350, + "line": 353, "column": 3, "index": 13230 } @@ -19,12 +19,12 @@ "defaultMessage": "!!!Swap", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 351, + "line": 354, "column": 13, "index": 13245 }, "end": { - "line": 354, + "line": 357, "column": 3, "index": 13318 } @@ -34,12 +34,12 @@ "defaultMessage": "!!!Swap from", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 355, + "line": 358, "column": 17, "index": 13337 }, "end": { - "line": 358, + "line": 361, "column": 3, "index": 13414 } @@ -49,12 +49,12 @@ "defaultMessage": "!!!Swap to", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 359, + "line": 362, "column": 15, "index": 13431 }, "end": { - "line": 362, + "line": 365, "column": 3, "index": 13504 } @@ -64,12 +64,12 @@ "defaultMessage": "!!!Slippage Tolerance", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 363, + "line": 366, "column": 21, "index": 13527 }, "end": { - "line": 366, + "line": 369, "column": 3, "index": 13622 } @@ -79,12 +79,12 @@ "defaultMessage": "!!!Select pool", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 367, + "line": 370, "column": 14, "index": 13638 }, "end": { - "line": 370, + "line": 373, "column": 3, "index": 13719 } @@ -94,12 +94,12 @@ "defaultMessage": "!!!Send", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 371, + "line": 374, "column": 13, "index": 13734 }, "end": { - "line": 374, + "line": 377, "column": 3, "index": 13814 } @@ -109,12 +109,12 @@ "defaultMessage": "!!!Scan QR code address", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 375, + "line": 378, "column": 18, "index": 13834 }, "end": { - "line": 378, + "line": 381, "column": 3, "index": 13935 } @@ -124,12 +124,12 @@ "defaultMessage": "!!!Select asset", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 379, + "line": 382, "column": 20, "index": 13957 }, "end": { - "line": 382, + "line": 385, "column": 3, "index": 14046 } @@ -139,12 +139,12 @@ "defaultMessage": "!!!Selected tokens", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 383, + "line": 386, "column": 26, "index": 14074 }, "end": { - "line": 386, + "line": 389, "column": 3, "index": 14178 } @@ -154,12 +154,12 @@ "defaultMessage": "!!!Edit amount", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 387, + "line": 390, "column": 19, "index": 14199 }, "end": { - "line": 390, + "line": 393, "column": 3, "index": 14292 } @@ -169,12 +169,12 @@ "defaultMessage": "!!!Confirm", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 391, + "line": 394, "column": 16, "index": 14310 }, "end": { - "line": 394, + "line": 397, "column": 3, "index": 14396 } @@ -184,12 +184,12 @@ "defaultMessage": "!!!Share this address to receive payments. To protect your privacy, new addresses are generated automatically once you use them.", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 395, + "line": 398, "column": 19, "index": 14417 }, "end": { - "line": 401, + "line": 404, "column": 3, "index": 14655 } @@ -199,12 +199,12 @@ "defaultMessage": "!!!Confirm transaction", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 402, + "line": 405, "column": 27, "index": 14684 }, "end": { - "line": 405, + "line": 408, "column": 3, "index": 14777 } @@ -214,12 +214,12 @@ "defaultMessage": "!!!Please scan a QR code", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 406, + "line": 409, "column": 13, "index": 14792 }, "end": { - "line": 409, + "line": 412, "column": 3, "index": 14867 } @@ -229,12 +229,12 @@ "defaultMessage": "!!!Success", "file": "src/TxHistory/TxHistoryNavigator.tsx", "start": { - "line": 410, + "line": 413, "column": 25, "index": 14894 }, "end": { - "line": 413, + "line": 416, "column": 3, "index": 14968 } diff --git a/packages/theme/src/Theme.stories.tsx b/packages/theme/src/Theme.stories.tsx index 23573927ba..7b9d88ed12 100644 --- a/packages/theme/src/Theme.stories.tsx +++ b/packages/theme/src/Theme.stories.tsx @@ -3,7 +3,7 @@ import {storiesOf} from '@storybook/react-native' import * as React from 'react' import {ScrollView, Switch, Text, View} from 'react-native' -import {useTheme} from '@yoroi/theme' +import {useTheme} from './ThemeProvider' storiesOf('ThemeProvider', module).add('ThemeProvider', () => )