KK
/
PartyApp
Archived
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme

master
Netcup Gituser 2023-12-03 00:26:37 +01:00
parent 2c2d661583
commit dde6178c8f
11 changed files with 114 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/MyButton.tsx
View File

@ -4,12 +4,14 @@ import {
ImageSourcePropType,
ImageStyle,
StyleProp,
Text,
TouchableOpacity,
ViewStyle,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {MyIcon} from './MyIcon';
import {useSelector} from 'react-redux';
import {RootState} from '@redux/store';
import { Text } from '@gluestack-ui/themed';
interface MyImageButtonProps {
image: ImageSourcePropType;
@ -18,10 +20,14 @@ interface MyImageButtonProps {
}
export function MyImageButton({image, imageStyle, text}: MyImageButtonProps) {
const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.themeColors,
);
return (
<TouchableOpacity
style={{
backgroundColor: '#26263f',
backgroundColor: currentTheme.backgroundDark300,
alignItems: 'center',
padding: 10,
flexDirection: 'row',
@ -32,7 +38,6 @@ export function MyImageButton({image, imageStyle, text}: MyImageButtonProps) {
style={{
flex: 1,
textAlign: 'center',
color: '#fff',
fontSize: 18,
fontWeight: 'bold',
}}>
@ -50,8 +55,12 @@ interface MyButtonProps {
}
export function MyButton({style, type, text, onPress}: MyButtonProps) {
const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.themeColors,
);
const ButtonText = () => (
<Text style={{color: '#fff', fontSize: 18, fontWeight: 'bold'}}>
<Text style={{color: currentTheme.white, fontSize: 18, fontWeight: 'bold'}}>
{text}
</Text>
);
@ -67,7 +76,7 @@ export function MyButton({style, type, text, onPress}: MyButtonProps) {
onPress={onPress}>
{type === 'primary' ? (
<LinearGradient
colors={['#931278', '#6030da']}
colors={[currentTheme.secondary, currentTheme.primary]}
start={{x: 0, y: 1}}
end={{x: 1, y: 0}}
style={{
@ -80,7 +89,7 @@ export function MyButton({style, type, text, onPress}: MyButtonProps) {
) : (
<View
style={{
backgroundColor: '#37375c',
backgroundColor: currentTheme.backgroundDark200,
alignItems: 'center',
padding: 10,
borderRadius: 10,

3
src/components/MyClickableText.tsx
View File

@ -1,4 +1,5 @@
import {StyleProp, Text, TextStyle} from 'react-native';
import { Text } from '@gluestack-ui/themed';
import {StyleProp, TextStyle} from 'react-native';
import {TouchableOpacity} from 'react-native';
interface MyClickableTextProps {

43
src/components/MyDivider.tsx
View File

@ -1,7 +1,22 @@
import {Text, View} from 'react-native';
import { Text } from '@gluestack-ui/themed';
import {RootState} from '@redux/store';
import {View} from 'react-native';
import {useSelector} from 'react-redux';
export function MyDivider() {
return <View style={{flex: 1, height: 1, backgroundColor: '#3b3b60'}} />;
const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.themeColors,
);
return (
<View
style={{
flex: 1,
height: 1,
backgroundColor: currentTheme.backgroundDark200,
}}
/>
);
}
interface MyDividerWithTextProps {
@ -9,16 +24,34 @@ interface MyDividerWithTextProps {
}
export function MyDividerWithText({text}: MyDividerWithTextProps) {
const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.themeColors,
);
return (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<MyDivider />
<Text style={{color: '#909090', marginHorizontal: 10}}>{text}</Text>
<Text color={currentTheme.warmGray400} style={{marginHorizontal: 10}}>
{text}
</Text>
<MyDivider />
</View>
);
}
export function MyVerticalDivider() {
const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.themeColors,
);
export function MyVerticalDivider(){
return <View style={{height: 44, marginTop: 2, backgroundColor: "#444444", width: 1}} />
return (
<View
style={{
height: 44,
marginTop: 2,
backgroundColor: currentTheme.warmGray600,
width: 1,
}}
/>
);
}

33
src/components/MyInput.tsx
View File

@ -1,5 +1,8 @@
import {KeyboardTypeOptions, Text, TextInput, View} from 'react-native';
import {KeyboardTypeOptions, TextInput, View} from 'react-native';
import {MyIcon} from './MyIcon';
import {useSelector} from 'react-redux';
import {RootState} from '@redux/store';
import { Text } from '@gluestack-ui/themed';
interface MyIconInputProps {
text: string;
@ -11,13 +14,31 @@ interface MyIconInputProps {
disableContainer?: boolean;
}
export function MyIconInput({text, iconName, keyboardType, secureTextEntry, value, onChangeText, disableContainer}: MyIconInputProps) {
export function MyIconInput({
text,
iconName,
keyboardType,
secureTextEntry,
value,
onChangeText,
disableContainer,
}: MyIconInputProps) {
const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.themeColors,
);
return (
<View
style={[{
style={[
{
flexDirection: 'row',
alignItems: 'center',
}, !disableContainer && { backgroundColor: '#26263f', borderRadius: 10}]}>
},
!disableContainer && {
backgroundColor: currentTheme.backgroundDark300,
borderRadius: 10,
},
]}>
<View style={{marginLeft: 12}}>
<MyIcon name={iconName} size={32} />
</View>
@ -26,10 +47,10 @@ export function MyIconInput({text, iconName, keyboardType, secureTextEntry, valu
<Text>{text}</Text>
<TextInput
style={{
backgroundColor: '#212137',
backgroundColor: currentTheme.backgroundDark400,
height: 40,
borderRadius: 10,
paddingLeft: 10
paddingLeft: 10,
}}
keyboardType={keyboardType}
secureTextEntry={secureTextEntry}

2
src/components/MyScreenContainer.tsx
View File

@ -2,7 +2,7 @@ import {ReactNode} from 'react';
import {ScrollView, StyleProp, View, ViewStyle} from 'react-native';
import { useSelector } from 'react-redux';
import {RootState, store} from '@redux/store';
import {RootState} from '@redux/store';
interface MyScreenContainerProps {

3
src/components/MyTitle.tsx
View File

@ -1,4 +1,4 @@
import { Text } from "react-native";
import { Text } from "@gluestack-ui/themed";
export function MyTitle({text}: {text: string}) {
return (
@ -7,7 +7,6 @@ export function MyTitle({text}: {text: string}) {
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
color: '#fff',
padding: 20,
}}>
{text}

20
src/configs/gluestack-ui.config.ts
View File

@ -211,9 +211,9 @@ export const gluestackUIConfig = createConfig({
warmGray100: '#f5f5f4',
warmGray200: '#e7e5e4',
warmGray300: '#d6d3d1',
warmGray400: '#a8a29e',
warmGray400: '#a8a29e', // divider with text
warmGray500: '#78716c',
warmGray600: '#57534e',
warmGray600: '#57534e', // vertical divider
warmGray700: '#44403c',
warmGray800: '#292524',
warmGray900: '#1c1917',
@ -311,6 +311,8 @@ export const gluestackUIConfig = createConfig({
light700: '#44403c',
light800: '#292524',
light900: '#1c1917',
primary: '#6030da',
/*
primary0: '#E5F1FB',
primary50: '#CCE9FF',
primary100: '#ADDBFF',
@ -322,8 +324,8 @@ export const gluestackUIConfig = createConfig({
primary700: '#004282',
primary800: '#002851',
primary900: '#011838',
primary950: '#000711',
secondary0: '#F6F6F6',
primary950: '#000711', */
/*secondary0: '#F6F6F6',
secondary50: '#F3F3F3',
secondary100: '#E9E9E9',
secondary200: '#DADADA',
@ -334,7 +336,8 @@ export const gluestackUIConfig = createConfig({
secondary700: '#404040',
secondary800: '#262626',
secondary900: '#171717',
secondary950: '#0C0C0C',
secondary950: '#0C0C0C', */
secondary: '#931278',
textLight0: '#FCFCFC',
textLight50: '#F5F5F5',
textLight100: '#E5E5E5',
@ -343,7 +346,7 @@ export const gluestackUIConfig = createConfig({
textLight400: '#A3A3A3',
textLight500: '#8C8C8C',
textLight600: '#737373',
textLight700: '#525252',
textLight700: '#fff', // text
textLight800: '#404040',
textLight900: '#262626',
textLight950: '#171717',
@ -383,11 +386,10 @@ export const gluestackUIConfig = createConfig({
borderLight800: '#404040',
borderLight900: '#262626',
borderLight950: '#171717',
backgroundDark50: '#3e3e88',
backgroundDark100: '#393972',
backgroundDark200: '#32325c',
backgroundDark300: '#2b2b48',
backgroundDark200: '#37375c', // divider
backgroundDark300: '#26263f', // container
backgroundDark400: '#212137', // primary background
backgroundDark500: '#1c1c2a',
backgroundDark600: '#16161f',

21
src/navigation/navigation.tsx
View File

@ -13,7 +13,7 @@ import ProfileTab, {
ProfileStackNavigatorParamList,
} from './tabs/main/ProfileTab';
import {FadeInView} from '@helper/animations';
import {Text, TouchableOpacity, View} from 'react-native';
import {TouchableOpacity, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
RegistrationScreenAnim,
@ -23,6 +23,7 @@ import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {MyIcon} from '@components/MyIcon';
import {useSelector} from 'react-redux';
import {RootState, store as reduxStore} from '@redux/store';
import { Text } from '@gluestack-ui/themed';
export type RootStackNavigatorParamList = {
Home: NavigatorScreenParams<HomeStackNavigatorParamList>;
@ -90,12 +91,16 @@ function ChatsTabAnim(props: any) {
const tabBarIcons = ['account-circle', 'calendar-month', 'map', 'chat'];
function CustomTabBar(props: BottomTabBarProps) {
const {state, descriptors, navigation} = props;
const {state, navigation} = props;
const lang = useSelector(
(state: RootState) => state.appVariables.lang.navigation.home,
);
const currentTheme = useSelector(
(state: RootState) => state.nonSaveVariables.themeColors,
);
const tabNames = [
lang.profile.tabName,
lang.calendar.tabName,
@ -104,12 +109,12 @@ function CustomTabBar(props: BottomTabBarProps) {
];
return (
<View style={{backgroundColor: '#212137'}}>
<View style={{backgroundColor: currentTheme.backgroundDark400}}>
<View
style={{
flexDirection: 'row',
margin: 10,
backgroundColor: '#26263f',
backgroundColor: currentTheme.backgroundDark300,
borderRadius: 20,
}}>
{state.routes.map((route, index) => {
@ -136,8 +141,8 @@ function CustomTabBar(props: BottomTabBarProps) {
// TODO: retrieve colors from theme
const gradientColors = isFocused
? ['#931278', '#6030da']
: ['#26263f', '#26263f'];
? [currentTheme.secondary, currentTheme.primary]
: [currentTheme.backgroundDark300, currentTheme.backgroundDark300];
return (
<TouchableOpacity
@ -165,11 +170,11 @@ function CustomTabBar(props: BottomTabBarProps) {
}}>
<MyIcon
name={tabBarIcons[index]}
color={isFocused ? '#fff' : '#ccc'}
color={isFocused ? currentTheme.white : '#ccc'}
size={20}
/>
{isFocused && (
<Text style={{color: '#fff'}}>{tabNames[index]}</Text>
<Text>{tabNames[index]}</Text>
)}
</LinearGradient>
</TouchableOpacity>

2
src/navigation/registration/registration.tsx
View File

@ -10,7 +10,6 @@ import {
Image,
ScrollView,
StyleSheet,
Text,
TextInput,
View,
} from 'react-native';
@ -30,6 +29,7 @@ import {KeyboardAvoidingView} from 'react-native';
import {MyTitle} from '@components/MyTitle';
import {useSelector} from 'react-redux';
import {RootState} from '@redux/store';
import { Text } from '@gluestack-ui/themed';
export type RegistrationStackNavigatorParamList = {
SignUpPreview: undefined;

2
src/navigation/tabs/main/ChatsTab.tsx
View File

@ -1,10 +1,10 @@
import {MyScreenContainer} from '@components/MyScreenContainer';
import { Text } from '@gluestack-ui/themed';
import {
createNativeStackNavigator,
NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {RootState} from '@redux/store';
import {Text} from 'react-native';
import {useSelector} from 'react-redux';
export const ChatsTabName = 'Chats';

2
src/navigation/tabs/main/MapTab.tsx
View File

@ -1,10 +1,10 @@
import { MyScreenContainer } from '@components/MyScreenContainer';
import { Text } from '@gluestack-ui/themed';
import {
createNativeStackNavigator,
NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {RootState} from '@redux/store';
import {Text} from 'react-native';
import {useSelector} from 'react-redux';
export const MapTabName = 'Map';