Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(theme): themes flexibility #3196

Merged
merged 15 commits into from
May 1, 2024
Merged

refactor(theme): themes flexibility #3196

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c025e4e
refactor(theme): themes flex
stackchain Apr 15, 2024
e57f9ee
refactor(theme): preparing for multi-theme + sub vars
stackchain Apr 15, 2024
f40b48d
refactor(theme): break master and themed palletes
stackchain Apr 16, 2024
b211710
refactor(theme): moved away from master wording
stackchain Apr 16, 2024
bfb414c
chore(wallet-mobile): added story for palettes
stackchain Apr 16, 2024
f4b9298
add atoms in theme
SorinC6 Apr 18, 2024
b0f7bf5
refactor to new theme format - wip
SorinC6 Apr 18, 2024
7b166f5
Merge branch 'develop' into chore/theme
SorinC6 Apr 29, 2024
5af7ea1
refactor - wip
SorinC6 Apr 29, 2024
2e19934
refactor - wip
SorinC6 Apr 29, 2024
74cc966
fix ts
SorinC6 Apr 30, 2024
997d992
update status bar
SorinC6 Apr 30, 2024
85524a3
ts fixes
SorinC6 Apr 30, 2024
e2dea11
add storage
SorinC6 Apr 30, 2024
0179986
add package in transformIgnorePatterns
SorinC6 Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/wallet-mobile/.storybook/stories/Button/ExampleButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ export const ExampleButton = ({onPress, disabled, text}) => {

const useStyles = () => {
const {theme} = useTheme()
const {color, padding} = theme
const {color, atoms} = theme
const styles = StyleSheet.create({
container: {
...padding['x-l'],
...padding['y-s'],
backgroundColor: color.primary[500],
...atoms.px_lg,
...atoms.py_sm,
backgroundColor: color.primary_c500,
borderRadius: 8,
},
text: {color: color.gray.min},
text: {color: color.gray_cmin},
})

return styles
Expand Down
1 change: 1 addition & 0 deletions apps/wallet-mobile/.storybook/storybook.requires.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 2 additions & 10 deletions apps/wallet-mobile/ios/yoroi.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -986,11 +986,7 @@
"-DFOLLY_MOBILE=1",
"-DFOLLY_USE_LIBCPP=1",
);
OTHER_LDFLAGS = (
"$(inherited)",
"-Wl",
"-ld_classic",
);
OTHER_LDFLAGS = "$(inherited)";
REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
SDKROOT = iphoneos;
};
Expand Down Expand Up @@ -1059,11 +1055,7 @@
"-DFOLLY_MOBILE=1",
"-DFOLLY_USE_LIBCPP=1",
);
OTHER_LDFLAGS = (
"$(inherited)",
"-Wl",
"-ld_classic",
);
OTHER_LDFLAGS = "$(inherited)";
REACT_NATIVE_PATH = "${PODS_ROOT}/../../../../node_modules/react-native";
SDKROOT = iphoneos;
VALIDATE_PRODUCT = YES;
Expand Down
18 changes: 9 additions & 9 deletions apps/wallet-mobile/src/Catalyst/QrCode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,34 +131,34 @@ const messages = defineMessages({

const useStyles = () => {
const {theme} = useTheme()
const {color, padding} = theme
const {color, atoms} = theme
const styles = StyleSheet.create({
safeAreaView: {
flex: 1,
backgroundColor: color.gray.min,
backgroundColor: color.gray_cmin,
},
alertBox: {
...padding['l'],
...atoms.p_lg,
backgroundColor: 'rgba(255, 16, 81, 0.06)',
borderRadius: 8,
},
contentContainer: {
...padding['x-l'],
...atoms.px_lg,
},
note: {
color: color.gray[900],
color: color.gray_c900,
fontWeight: 'bold',
},
qrCodeBackground: {
borderRadius: 8,
...padding['l'],
backgroundColor: color.gray[50],
...atoms.p_lg,
backgroundColor: color.gray_c50,
alignSelf: 'center',
},
secretCodeBox: {
backgroundColor: color.gray[50],
backgroundColor: color.gray_c50,
borderRadius: 8,
...padding['l'],
...atoms.p_lg,
flexDirection: 'row',
},
})
Expand Down
15 changes: 7 additions & 8 deletions apps/wallet-mobile/src/Catalyst/VotingBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,28 +81,27 @@ const messages = defineMessages({
})

const useStyles = () => {
const {theme} = useTheme()
const {color, padding} = theme
const {color, atoms} = useTheme()
const styles = StyleSheet.create({
container: {
...padding['y-l'],
...atoms.py_lg,
alignItems: 'center',
},
button: {
flexDirection: 'row',
alignItems: 'center',
borderRadius: 8,
borderWidth: 1,
borderColor: color.secondary[500],
...padding['y-m'],
...padding['x-xl'],
borderColor: color.secondary_c500,
...atoms.py_md,
...atoms.px_xl,
},
text: {
color: color.secondary[500],
color: color.secondary_c500,
},
})
const colors = {
iconColor: color.secondary[500],
iconColor: color.secondary_c500,
}
return {styles, colors}
}
Expand Down
20 changes: 10 additions & 10 deletions apps/wallet-mobile/src/Dashboard/EpochProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,14 @@

const useStyles = () => {
const {theme} = useTheme()
const {color, typography, padding} = theme

Check failure on line 72 in apps/wallet-mobile/src/Dashboard/EpochProgress.tsx

View workflow job for this annotation

GitHub Actions / check 

'typography' is assigned a value but never used. Allowed unused vars must match /^_/u
const styles = StyleSheet.create({
wrapper: {},
stats: {
flex: 1,
flexDirection: 'column',
...padding['l-l'],
...padding['b-s'],
...atoms.pl_lg,
...atoms.pb_sm,
flexWrap: 'wrap',
},
row: {
Expand All @@ -86,23 +86,23 @@
alignItems: 'flex-start',
},
label: {
color: color.gray[900],
color: color.gray_c900,
...padding['r-m'],
...typography['body-2-m-regular'],
...atoms.body_2_md_regular,
},
value: {
...typography['body-1-l-regular'],
color: color.gray[700],
...atoms.body_1_lg_regular,
color: color.gray_c700,
},
timeWrapper: {
flexDirection: 'row',
flexWrap: 'nowrap',
},
timeBlock: {
...typography['body-1-l-regular'],
...padding['x-xs'],
backgroundColor: color.gray[900],
color: color.gray[900],
...atoms.body_1_lg_regular,
...atoms.py_xs,
backgroundColor: color.gray_c900,
color: color.gray_c900,
marginHorizontal: 4,
borderRadius: 2,
textAlign: 'center',
Expand Down
9 changes: 4 additions & 5 deletions apps/wallet-mobile/src/Dashboard/NotDelegatedInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ export const NotDelegatedInfo = () => {
}

const useStyles = () => {
const {theme} = useTheme()
const {color, typography} = theme
const {color, atoms} = useTheme()
const styles = StyleSheet.create({
wrapper: {
marginTop: 24,
Expand All @@ -39,15 +38,15 @@ const useStyles = () => {
},
text: {
textAlign: 'center',
color: color.gray[900],
color: color.gray_c900,
lineHeight: 22,
},
textFirstLine: {
...typography['body-1-l-regular'],
...atoms.body_1_lg_regular,
marginBottom: 12,
},
textSecondLine: {
...typography['body-2-m-regular'],
...atoms.body_2_md_regular,
marginBottom: 16,
},
})
Expand Down
21 changes: 10 additions & 11 deletions apps/wallet-mobile/src/Dashboard/StakePoolInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,34 +92,33 @@ export const useStakePoolInfoAndHistory = (
}

const useStyles = () => {
const {theme} = useTheme()
const {color, padding, typography} = theme
const {color, atoms} = useTheme()
const styles = StyleSheet.create({
topBlock: {
...padding['y-s'],
...padding['y-l'],
...atoms.py_sm,
...atoms.py_lg,
},
poolName: {
...typography['body-1-l-regular'],
...atoms.body_1_lg_regular,
},
poolIdBlock: {
flexDirection: 'row',
},
poolId: {
color: color.gray[700],
...typography['body-2-m-regular'],
color: color.gray_c700,
...atoms.body_2_md_regular,
flex: 1,
},
bottomBlock: {
...padding['x-l'],
...padding['y-xl'],
...atoms.px_lg,
...atoms.py_xl,
},
warning: {
...padding['s'],
...atoms.p_sm,
},
warningText: {
fontStyle: 'italic',
...typography['body-3-s-regular'],
...atoms.body_3_sm_regular,
},
})
return styles
Expand Down
19 changes: 9 additions & 10 deletions apps/wallet-mobile/src/Dashboard/UserSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,7 @@ export const UserSummary = ({totalAdaSum, totalRewards, totalDelegated, onWithdr
}

const useStyles = () => {
const {theme} = useTheme()
const {color, padding, typography} = theme
const {color, atoms} = useTheme()
const styles = StyleSheet.create({
wrapper: {
flex: 1,
Expand All @@ -116,28 +115,28 @@ const useStyles = () => {
},
row: {
flex: 1,
...padding['y-s'],
...atoms.py_sm,
flexDirection: 'row',
},
icon: {
paddingLeft: 8,
...padding['s'],
...padding['r-l'],
...atoms.p_sm,
...atoms.pr_lg,
},
amountBlock: {
flexDirection: 'column',
},
label: {
color: color.gray[900],
...typography['body-2-m-regular'],
color: color.gray_c900,
...atoms.body_2_md_regular,
},
value: {
color: color.gray[800],
...typography['body-1-l-regular'],
color: color.gray_c800,
...atoms.body_1_lg_regular,
},
withdrawBlock: {
flex: 1,
...padding['xs'],
...atoms.p_xs,
justifyContent: 'flex-end',
flexDirection: 'row',
},
Expand Down
4 changes: 2 additions & 2 deletions apps/wallet-mobile/src/Dashboard/WithdrawStakingRewards/TransferSummary/TransferSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,14 +191,14 @@

const useStyles = () => {
const {theme} = useTheme()
const {color, typography, padding} = theme

Check failure on line 194 in apps/wallet-mobile/src/Dashboard/WithdrawStakingRewards/TransferSummary/TransferSummary.tsx

View workflow job for this annotation

GitHub Actions / check 

'typography' is assigned a value but never used. Allowed unused vars must match /^_/u
const styles = StyleSheet.create({
item: {
...padding['b-xs'],
},
balanceAmount: {
color: color.secondary[500],
...typography['body-1-l-regular'],
color: color.secondary_c500,
...atoms.body_1_lg_regular,
},
})
return styles
Expand Down
8 changes: 4 additions & 4 deletions apps/wallet-mobile/src/HW/LedgerConnect/DeviceItem/DeviceItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,23 @@

const useStyles = () => {
const {theme} = useTheme()
const {color, padding, typography} = theme

Check failure on line 42 in apps/wallet-mobile/src/HW/LedgerConnect/DeviceItem/DeviceItem.tsx

View workflow job for this annotation

GitHub Actions / check 

'typography' is assigned a value but never used. Allowed unused vars must match /^_/u
const styles = StyleSheet.create({
deviceItem: {
...padding['y-l'],
...atoms.py_lg,
...padding['x-xxl'],
marginVertical: 8,
marginHorizontal: 16,
borderColor: color.secondary[500],
borderColor: color.secondary_c500,
borderWidth: 1,
borderRadius: 8,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
deviceName: {
...typography['heading-3-medium'],
color: color.secondary[500],
...atoms.heading_3_medium,
color: color.secondary_c500,
},
disabled: {
opacity: 0.5,
Expand Down
14 changes: 7 additions & 7 deletions apps/wallet-mobile/src/NftDetails/NftDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@

const useStyles = () => {
const {theme} = useTheme()
const {color, typography} = theme

Check failure on line 241 in apps/wallet-mobile/src/NftDetails/NftDetails.tsx

View workflow job for this annotation

GitHub Actions / check 

'typography' is assigned a value but never used. Allowed unused vars must match /^_/u
const styles = StyleSheet.create({
copyButton: {
flex: 1,
Expand All @@ -253,14 +253,14 @@
flexDirection: 'row',
},
linkText: {
color: color.primary[500],
...typography['body-1-l-regular'],
color: color.primary_c500,
...atoms.body_1_lg_regular,
flex: 1,
textDecorationLine: 'underline',
},
copyText: {
color: color.gray[900],
...typography['body-2-m-medium'],
color: color.gray_c900,
...atoms.body_2_md_medium,
textTransform: 'uppercase',
},
container: {
Expand Down Expand Up @@ -292,11 +292,11 @@
flexDirection: 'row',
},
title: {
...typography['body-1-l-medium'],
...(atoms.body - 1 - lg - medium),
},
name: {
color: color.gray[600],
...typography['body-2-m-regular'],
color: color.gray_c600,
...atoms.body_2_md_regular,
},
})
return styles
Expand Down
Loading
Loading