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

redesign AuthenticationView

Browse Source
This commit is contained in:
mathysPaul
2023-09-20 10:27:24 +02:00
parent 6768b0b2a6
commit 973f9bf5b3
14 changed files with 624 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/ScoreGraph.tsx
+11 -11
View File
@@ -1,6 +1,5 @@
import { Box, useBreakpointValue, useTheme } from 'native-base';
import { LineChart } from 'react-native-chart-kit';
import { CardBorderRadius } from './Card';
import SongHistory from '../models/SongHistory';
import { useState } from 'react';
@@ -36,8 +35,7 @@ const ScoreGraph = (props: ScoreGraphProps) => {
return (
<Box
bgColor={theme.colors.primary[500]}
style={{ width: '100%', borderRadius: CardBorderRadius }}
style={{ width: '100%' }}
onLayout={(event) => setContainerWidth(event.nativeEvent.layout.width)}
>
<LineChart
@@ -48,10 +46,12 @@ const ScoreGraph = (props: ScoreGraphProps) => {
data: scores.map(({ score }) => score),
},
],
}}
}
}
width={containerWidth}
height={200} // Completely arbitrary
transparent={true}
withDots={false}
yAxisSuffix=" pts"
chartConfig={{
decimalPlaces: 0,
@@ -63,13 +63,13 @@ const ScoreGraph = (props: ScoreGraphProps) => {
},
}}
bezier
style={{
margin: 3,
shadowColor: theme.colors.primary[400],
shadowOpacity: 1,
shadowRadius: 20,
borderRadius: CardBorderRadius,
}}
// style={{
// margin: 3,
// shadowColor: theme.colors.primary[400],
// shadowOpacity: 1,
// shadowRadius: 20,
// borderRadius: CardBorderRadius,
// }}
/>
</Box>
);
front/components/UI/ButtonBase.tsx
+5 -4
View File
@@ -2,15 +2,16 @@ import React, { useState } from 'react';
import { StyleSheet, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native';
import InteractiveBase from './InteractiveBase';
import { Text, useTheme } from 'native-base';
import { Icon } from 'iconsax-react-native';
interface ButtonProps {
title?: string;
style?: StyleProp<ViewStyle>;
onPress?: () => Promise<void>;
isDisabled?: boolean;
icon?: (size: string, color: string) => React.ReactNode;
icon?: Icon;
iconImage?: string;
type: 'filled' | 'outlined' | 'menu';
type?: 'filled' | 'outlined' | 'menu';
}
const ButtonBase: React.FC<ButtonProps> = ({
@@ -88,6 +89,7 @@ const ButtonBase: React.FC<ButtonProps> = ({
});
const typeToStyleAnimator = { filled: styleButton, outlined: styleButton, menu: styleMenu };
const MyIcon: Icon = icon as Icon;
return (
<InteractiveBase
@@ -110,7 +112,7 @@ const ButtonBase: React.FC<ButtonProps> = ({
/>
) : (
<View style={styles.content}>
{icon && icon('18', 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>
@@ -132,7 +134,6 @@ const styles = StyleSheet.create({
icon: {
width: 18,
height: 18,
// marginRight: 8,
},
text: {
color: '#fff',
front/components/UI/InteractiveBase.tsx
+11 -1
View File
@@ -225,8 +225,18 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({
elevation: elevationValue,
};
const disableStyle = {
backgroundColor: isOutlined ? 'rgba(0,0,0,0.3)' : styleAnimate.Disabled.backgroundColor,
borderColor: isOutlined ? styleAnimate.Disabled.backgroundColor : 'transparent',
borderWidth: 2,
scale: styleAnimate.Disabled.scale,
shadowOpacity: styleAnimate.Disabled.shadowOpacity,
shadowRadius: styleAnimate.Disabled.shadowRadius,
elevation: styleAnimate.Disabled.elevation,
}
return (
<Animated.View style={[style, isDisabled ? styleAnimate.Disabled : animatedStyle]}>
<Animated.View style={[style, isDisabled ? disableStyle : animatedStyle]}>
<Pressable
disabled={isDisabled}
onHoverIn={handleMouseEnter}
front/components/UI/ScaffoldAuth.tsx
+74
View File
@@ -0,0 +1,74 @@
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};
}
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>
);
};
export default ScaffoldAuth;
front/components/UI/SeparatorBase.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
width: '100%',
flexDirection: 'row',
alignItems: 'center',
marginVertical: 20,
marginVertical: 2,
},
text: {
color: 'white',
front/components/UI/TextFieldBase.tsx
+4 -3
View File
@@ -1,4 +1,4 @@
import { Eye, EyeSlash } from 'iconsax-react-native';
import { Eye, EyeSlash, Icon } from 'iconsax-react-native';
import React, { useState } from 'react';
import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
import InteractiveBase from './InteractiveBase';
@@ -7,7 +7,7 @@ import { Input } from 'native-base';
export interface TextFieldBaseProps {
style?: StyleProp<ViewStyle>;
value?: string;
icon?: (size: string, color: string) => React.ReactNode;
icon?: Icon;
iconColor?: string;
placeholder?: string;
autoComplete?:
@@ -66,6 +66,7 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
}) => {
const [isPasswordVisible, setPasswordVisible] = useState(!isSecret);
const [isFocused, setFocused] = useState(false);
const MyIcon: Icon = icon as Icon;
const styleAnimate = StyleSheet.create({
Default: {
@@ -102,7 +103,7 @@ const TextFieldBase: React.FC<TextFieldBaseProps> = ({
<InteractiveBase style={[style, { borderRadius: 12 }]} styleAnimate={styleAnimate}>
<View style={styles.container}>
<View style={styles.iconContainerLeft}>
{icon && icon('20', iconColor ? iconColor : isFocused ? '#5f74f7' : '#394694')}
{icon && <MyIcon size={'20'} color={iconColor ? iconColor : isFocused ? '#5f74f7' : '#394694'} variant="Bold"/>}
</View>
<Input
variant="unstyled"
front/components/UI/TextFormField.tsx
-2
View File
@@ -59,9 +59,7 @@ const TextFormField: React.FC<TextFormFieldProps> = ({ error, style, ...textFiel
const styles = StyleSheet.create({
wrapper: {
flex: 1,
width: '100%',
// maxWidth: 400,
},
errorContainer: {
flexDirection: 'row',