zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign profil with datafake for skills

Browse Source
This commit is contained in:
mathysPaul
2023-09-20 17:40:52 +02:00
parent 973f9bf5b3
commit 94a64d16e6
11 changed files with 1376 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/UI/ButtonBase.tsx
+4 -1
View File
@@ -107,12 +107,15 @@ const ButtonBase: React.FC<ButtonProps> = ({
>
{loading ? (
<ActivityIndicator
style={styles.content}
size="small"
color={type === 'outlined' ? '#6075F9' : '#FFFFFF'}
/>
) : (
<View style={styles.content}>
{icon && <MyIcon size={'18'} color={type === 'outlined' ? '#6075F9' : '#FFFFFF'}/>}
{icon && (
<MyIcon size={'18'} color={type === 'outlined' ? '#6075F9' : '#FFFFFF'} />
)}
{iconImage && <Image source={{ uri: iconImage }} style={styles.icon} />}
{title && <Text style={styles.text}>{title}</Text>}
</View>
front/components/UI/CheckboxBase.tsx
+82
View File
@@ -0,0 +1,82 @@
import React from 'react';
import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
import InteractiveBase from './InteractiveBase';
import { Checkbox } from 'native-base';
interface CheckboxProps {
title: string;
value: string;
// color: string;
check: boolean;
setCheck: (value: boolean) => void;
style?: StyleProp<ViewStyle>;
}
const CheckboxBase: React.FC<CheckboxProps> = ({
title,
value,
// color,
style,
check,
setCheck,
}) => {
const styleGlassmorphism = StyleSheet.create({
Default: {
scale: 1,
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
backgroundColor: 'rgba(16,16,20,0.5)',
},
onHover: {
scale: 1.01,
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
backgroundColor: 'rgba(16,16,20,0.4)',
},
onPressed: {
scale: 0.99,
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4,
backgroundColor: 'rgba(16,16,20,0.6)',
},
Disabled: {
scale: 1,
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
backgroundColor: 'rgba(16,16,20,0.5)',
},
});
return (
<InteractiveBase
style={[styles.container, style]}
styleAnimate={styleGlassmorphism}
onPress={async () => {
setCheck(!check);
}}
>
<View style={{ paddingVertical: 5, paddingHorizontal: 10 }}>
<Checkbox isChecked={check} style={styles.content} value={value}>
{title}
</Checkbox>
</View>
</InteractiveBase>
);
};
const styles = StyleSheet.create({
container: {
borderRadius: 8,
},
content: {
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
},
});
export default CheckboxBase;
front/components/UI/InteractiveBase.tsx
+1 -1
View File
@@ -233,7 +233,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({
shadowOpacity: styleAnimate.Disabled.shadowOpacity,
shadowRadius: styleAnimate.Disabled.shadowRadius,
elevation: styleAnimate.Disabled.elevation,
}
};
return (
<Animated.View style={[style, isDisabled ? disableStyle : animatedStyle]}>
front/components/UI/ScaffoldAuth.tsx
+102 -63
View File
@@ -1,73 +1,112 @@
import { LinearGradient } from "expo-linear-gradient";
import { Center, Flex, Stack, View, Text, Wrap, Image } from "native-base";
import { FunctionComponent } from "react";
import { Linking, useWindowDimensions } from "react-native";
import ButtonBase from "./ButtonBase";
import { translate } from "../../i18n/i18n";
import API from "../../API";
import SeparatorBase from "./SeparatorBase";
import LinkBase from "./LinkBase";
import { LinearGradient } from 'expo-linear-gradient';
import { Center, Flex, Stack, View, Text, Wrap, Image } from 'native-base';
import { FunctionComponent } from 'react';
import { Linking, useWindowDimensions } from 'react-native';
import ButtonBase from './ButtonBase';
import { translate } from '../../i18n/i18n';
import API from '../../API';
import SeparatorBase from './SeparatorBase';
import LinkBase from './LinkBase';
import ImageBanner from '../../assets/banner.jpg';
interface ScaffoldAuthProps {
title: string;
description: string;
form: React.ReactNode[];
submitButton: React.ReactNode;
link: {text: string, description: string, onPress: () => void};
title: string;
description: string;
form: React.ReactNode[];
submitButton: React.ReactNode;
link: { text: string; description: string; onPress: () => void };
}
const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({title, description, form, submitButton, link}) => {
const layout = useWindowDimensions();
const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
title,
description,
form,
submitButton,
link,
}) => {
const layout = useWindowDimensions();
return (
<Flex direction='row' justifyContent="space-between" style={{ flex: 1, backgroundColor: '#101014'}}>
<Center style={{ flex: 1}}>
<View style={{ width: '100%', maxWidth: 420, padding: 16 }}>
<Stack space={8} justifyContent="center" alignContent="center" alignItems="center" style={{ width: '100%', paddingBottom: 40}}>
<Text fontSize="4xl" textAlign="center">{title}</Text>
<Text fontSize="lg" textAlign="center">{description}</Text>
</Stack>
<Stack space={5} justifyContent="center" alignContent="center" alignItems="center" style={{ width: '100%'}}>
<ButtonBase
style={{width: '100%'}}
type='outlined'
iconImage='https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2008px-Google_%22G%22_Logo.svg.png'
title={translate('continuewithgoogle')}
onPress={() => Linking.openURL(`${API.baseUrl}/auth/login/google`)}
/>
<SeparatorBase>or</SeparatorBase>
<Stack space={3} justifyContent="center" alignContent="center" alignItems="center" style={{ width: '100%'}}>
{form}
</Stack>
{submitButton}
<Wrap style={{flexDirection: 'row', justifyContent: 'center'}}>
<Text>{link.description}</Text>
<LinkBase onPress={link.onPress}>
{link.text}
</LinkBase>
</Wrap>
</Stack>
</View>
</Center>
{
layout.width > 650 ?
<View style={{width: '50%', height: '100%', padding: 16}}>
<Image
source={ImageBanner}
alt="banner page"
style={{width: '100%', height: '100%', borderRadius: 8}}
/>
</View>
: <></>
}
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
colors={['#101014', '#6075F9']}
style={{top: 0, bottom: 0, right: 0, left: 0, width: '100%', height: '100%', position: 'absolute', zIndex: -2}}
/>
</Flex>
<Flex
direction="row"
justifyContent="space-between"
style={{ flex: 1, backgroundColor: '#101014' }}
>
<Center style={{ flex: 1 }}>
<View style={{ width: '100%', maxWidth: 420, padding: 16 }}>
<Stack
space={8}
justifyContent="center"
alignContent="center"
alignItems="center"
style={{ width: '100%', paddingBottom: 40 }}
>
<Text fontSize="4xl" textAlign="center">
{title}
</Text>
<Text fontSize="lg" textAlign="center">
{description}
</Text>
</Stack>
<Stack
space={5}
justifyContent="center"
alignContent="center"
alignItems="center"
style={{ width: '100%' }}
>
<ButtonBase
style={{ width: '100%' }}
type="outlined"
iconImage="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2008px-Google_%22G%22_Logo.svg.png"
title={translate('continuewithgoogle')}
onPress={() => Linking.openURL(`${API.baseUrl}/auth/login/google`)}
/>
<SeparatorBase>or</SeparatorBase>
<Stack
space={3}
justifyContent="center"
alignContent="center"
alignItems="center"
style={{ width: '100%' }}
>
{form}
</Stack>
{submitButton}
<Wrap style={{ flexDirection: 'row', justifyContent: 'center' }}>
<Text>{link.description}</Text>
<LinkBase onPress={link.onPress}>{link.text}</LinkBase>
</Wrap>
</Stack>
</View>
</Center>
{layout.width > 650 ? (
<View style={{ width: '50%', height: '100%', padding: 16 }}>
<Image
source={ImageBanner}
alt="banner page"
style={{ width: '100%', height: '100%', borderRadius: 8 }}
/>
</View>
) : (
<></>
)}
<LinearGradient
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
colors={['#101014', '#6075F9']}
style={{
top: 0,
bottom: 0,
right: 0,
left: 0,
width: '100%',
height: '100%',
position: 'absolute',
zIndex: -2,
}}
/>
</Flex>
);
};
front/components/UI/TextFieldBase.tsx
+7 -1
View File
@@ -103,7 +103,13 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
<InteractiveBase style={[style, { borderRadius: 12 }]} styleAnimate={styleAnimate}>
<View style={styles.container}>
<View style={styles.iconContainerLeft}>
{icon && <MyIcon size={'20'} color={iconColor ? iconColor : isFocused ? '#5f74f7' : '#394694'} variant="Bold"/>}
{icon && (
<MyIcon
size={'20'}
color={iconColor ? iconColor : isFocused ? '#5f74f7' : '#394694'}
variant="Bold"
/>
)}
</View>
<Input
variant="unstyled"