mirror of
https://github.com/lemeow125/StudE-Frontend.git
synced 2025-05-17 11:58:06 +08:00
Added react navigation drawer, initial template pages, and drawer sidebar design
This commit is contained in:
parent
1bb5be84ea
commit
428a228278
19 changed files with 978 additions and 17 deletions
23
src/components/Button/DrawerButton.tsx
Normal file
23
src/components/Button/DrawerButton.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import * as React from "react";
|
||||
import { Text, Pressable, GestureResponderEvent } from "react-native";
|
||||
import styles from "../../styles";
|
||||
|
||||
export interface props {
|
||||
children: React.ReactNode;
|
||||
onPress: (event: GestureResponderEvent) => void;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function DrawerButton(props: props) {
|
||||
return (
|
||||
<Pressable
|
||||
onPress={props.onPress}
|
||||
style={{
|
||||
...styles.button_template,
|
||||
...{ backgroundColor: props.color, width: "95%" },
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
57
src/components/DrawerSettings/CustomDrawerContent.tsx
Normal file
57
src/components/DrawerSettings/CustomDrawerContent.tsx
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import * as React from "react";
|
||||
import { DrawerContentScrollView } from "@react-navigation/drawer";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { Text, View } from "react-native";
|
||||
import { colors } from "../../styles";
|
||||
import styles from "../../styles";
|
||||
|
||||
import { RootDrawerParamList } from "../../interfaces/Interfaces";
|
||||
import AppIcon from "../../icons/AppIcon/AppIcon";
|
||||
import HomeIcon from "../../icons/HomeIcon/HomeIcon";
|
||||
import LoginIcon from "../../icons/LoginIcon/LoginIcon";
|
||||
import SignupIcon from "../../icons/SignupIcon/SignupIcon";
|
||||
import DrawerButton from "../Button/DrawerButton";
|
||||
|
||||
export default function CustomDrawerContent(props: {}) {
|
||||
const navigation = useNavigation<RootDrawerParamList>();
|
||||
return (
|
||||
<DrawerContentScrollView {...props}>
|
||||
<View
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ justifyContent: "center" },
|
||||
}}
|
||||
>
|
||||
<AppIcon size={32} color={colors.icon_color} />
|
||||
<Text style={styles.text_white_medium}>Stud-E</Text>
|
||||
</View>
|
||||
<DrawerButton
|
||||
color={colors.blue_2}
|
||||
onPress={() => {
|
||||
navigation.navigate("Home");
|
||||
}}
|
||||
>
|
||||
<HomeIcon size={32} color={colors.icon_color} />
|
||||
<Text style={styles.text_white_medium}>Home</Text>
|
||||
</DrawerButton>
|
||||
<DrawerButton
|
||||
color={colors.blue_2}
|
||||
onPress={() => {
|
||||
navigation.navigate("Login");
|
||||
}}
|
||||
>
|
||||
<LoginIcon size={32} color={colors.icon_color} />
|
||||
<Text style={styles.text_white_medium}>Login</Text>
|
||||
</DrawerButton>
|
||||
<DrawerButton
|
||||
color={colors.blue_2}
|
||||
onPress={() => {
|
||||
navigation.navigate("Register");
|
||||
}}
|
||||
>
|
||||
<SignupIcon size={32} color={colors.icon_color} />
|
||||
<Text style={styles.text_white_medium}>Register</Text>
|
||||
</DrawerButton>
|
||||
</DrawerContentScrollView>
|
||||
);
|
||||
}
|
||||
31
src/components/DrawerSettings/DrawerScreenSettings.tsx
Normal file
31
src/components/DrawerSettings/DrawerScreenSettings.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import type { DrawerNavigationOptions } from "@react-navigation/drawer";
|
||||
import { View } from "react-native";
|
||||
import { colors } from "../../styles";
|
||||
import { font_sizes } from "../../styles";
|
||||
import AppIcon from "../../icons/AppIcon/AppIcon";
|
||||
|
||||
const DrawerScreenSettings: DrawerNavigationOptions = {
|
||||
headerTitleStyle: {
|
||||
color: colors.text_default,
|
||||
fontSize: font_sizes.medium,
|
||||
},
|
||||
unmountOnBlur: true,
|
||||
headerStyle: { backgroundColor: colors.blue_3 },
|
||||
headerTintColor: colors.text_default,
|
||||
drawerType: "slide",
|
||||
drawerLabelStyle: {
|
||||
color: colors.text_default,
|
||||
},
|
||||
drawerStyle: {
|
||||
backgroundColor: colors.blue_3,
|
||||
width: 260,
|
||||
},
|
||||
headerRight: () => (
|
||||
<View
|
||||
style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
|
||||
>
|
||||
<AppIcon size={32} color={colors.icon_color} />
|
||||
</View>
|
||||
),
|
||||
};
|
||||
export default DrawerScreenSettings;
|
||||
26
src/icons/AddIcon/AddIcon.tsx
Normal file
26
src/icons/AddIcon/AddIcon.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function AddIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></Path>
|
||||
<Path d="M9 12l6 0"></Path>
|
||||
<Path d="M12 9l0 6"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
19
src/icons/AppIcon/AppIcon.tsx
Normal file
19
src/icons/AppIcon/AppIcon.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function AppIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
fill={props.color}
|
||||
height={props.size + "px"}
|
||||
width={props.size + "px"}
|
||||
viewBox="0 0 375.775 375.775"
|
||||
>
|
||||
<Path d="M187.886,375.775c-16.216,0-29.409-13.193-29.409-29.411s13.193-29.412,29.409-29.412c16.218,0,29.412,13.194,29.412,29.412 S204.104,375.775,187.886,375.775z M187.886,332.952c-7.394,0-13.409,6.017-13.409,13.412c0,7.395,6.015,13.411,13.409,13.411 c7.395,0,13.412-6.017,13.412-13.411C201.298,338.969,195.281,332.952,187.886,332.952z M244.851,342.665 c-3.207,0-6.233-1.941-7.461-5.11c-1.597-4.12,0.449-8.754,4.568-10.351c40.127-15.554,71.73-47.612,86.706-87.957 c1.537-4.142,6.142-6.253,10.284-4.716s6.253,6.142,4.716,10.284c-16.568,44.633-51.531,80.101-95.924,97.307 C246.79,342.49,245.812,342.665,244.851,342.665z M130.671,342.665c-0.961,0-1.939-0.174-2.889-0.543 c-44.393-17.206-79.356-52.674-95.925-97.307c-1.538-4.143,0.574-8.746,4.716-10.284c4.144-1.538,8.746,0.573,10.284,4.716 c14.977,40.345,46.58,72.403,86.707,87.957c4.12,1.597,6.165,6.23,4.568,10.351C136.904,340.724,133.877,342.665,130.671,342.665z M196.589,305.682h-17.403c-25.12,0-36.188-20.112-42.33-35.241l-2.277-5.612c-1.661-4.095,0.312-8.76,4.406-10.421 c4.095-1.662,8.759,0.312,10.42,4.405l2.276,5.612c3.44,8.475,7.034,14.579,11.16,18.661l18.583-25.466 c1.506-2.063,3.907-3.284,6.462-3.284c2.555,0,4.956,1.22,6.462,3.284l18.585,25.465c4.126-4.082,7.719-10.187,11.159-18.662 l2.277-5.611c1.661-4.095,6.327-6.064,10.421-4.404c4.094,1.662,6.066,6.327,4.404,10.422l-2.277,5.611 C232.778,285.568,221.71,305.682,196.589,305.682z M177.857,289.652c0.438,0.02,0.88,0.029,1.329,0.029h17.402 c0.45,0,0.892-0.01,1.331-0.029l-10.031-13.745L177.857,289.652z M113.951,241.785c-1.002,0-2.02-0.189-3.005-0.589l-5.611-2.277 c-15.129-6.142-35.242-17.21-35.242-42.33v-17.401c0-25.12,20.113-36.189,35.241-42.33l5.612-2.278 c4.092-1.661,8.759,0.311,10.421,4.404c1.662,4.095-0.31,8.76-4.404,10.422l-5.611,2.277c-8.475,3.439-14.579,7.032-18.662,11.158 l25.467,18.585c2.064,1.506,3.284,3.907,3.284,6.462s-1.22,4.956-3.284,6.462l-25.467,18.584c4.082,4.126,10.187,7.72,18.662,11.159 l5.611,2.277c4.094,1.662,6.066,6.327,4.404,10.422C120.105,239.9,117.111,241.785,113.951,241.785z M86.123,177.855 c-0.02,0.438-0.03,0.881-0.03,1.33v17.403c0,0.449,0.01,0.893,0.03,1.33l13.747-10.031L86.123,177.855z M261.823,241.785 c-3.161,0-6.154-1.885-7.416-4.994c-1.661-4.094,0.311-8.76,4.405-10.421l5.612-2.277c8.475-3.44,14.579-7.033,18.661-11.159 l-25.467-18.584c-2.064-1.506-3.284-3.907-3.284-6.462s1.22-4.956,3.284-6.462l25.466-18.585 c-4.082-4.125-10.187-7.719-18.661-11.158l-5.611-2.277c-4.094-1.661-6.066-6.327-4.405-10.421s6.328-6.064,10.421-4.405 l5.612,2.277c15.129,6.142,35.242,17.21,35.242,42.329v17.403c0,25.12-20.112,36.188-35.241,42.329l-5.613,2.278 C263.843,241.596,262.825,241.785,261.823,241.785z M275.906,187.888l13.746,10.031c0.02-0.438,0.03-0.881,0.03-1.33v-17.401 c0-0.449-0.01-0.894-0.03-1.332L275.906,187.888z M346.363,217.299c-16.217,0-29.411-13.193-29.411-29.41 c0-16.218,13.194-29.412,29.411-29.412c16.218,0,29.412,13.194,29.412,29.412C375.775,204.105,362.581,217.299,346.363,217.299z M346.363,174.477c-7.395,0-13.411,6.017-13.411,13.412c0,7.395,6.016,13.41,13.411,13.41c7.395,0,13.412-6.016,13.412-13.41 C359.775,180.493,353.758,174.477,346.363,174.477z M29.411,217.299c-16.217,0-29.41-13.193-29.41-29.41 c0-16.218,13.193-29.412,29.41-29.412c16.217,0,29.411,13.194,29.411,29.412C58.822,204.105,45.628,217.299,29.411,217.299z M29.411,174.477c-7.395,0-13.41,6.017-13.41,13.412c0,7.395,6.016,13.41,13.41,13.41c7.395,0,13.411-6.016,13.411-13.41 C42.822,180.493,36.806,174.477,29.411,174.477z M336.165,140.768c-3.249,0-6.304-1.993-7.501-5.218 c-14.976-40.345-46.579-72.403-86.706-87.957c-4.12-1.597-6.165-6.23-4.568-10.351c1.596-4.119,6.231-6.168,10.351-4.567 c44.393,17.206,79.355,52.673,95.924,97.307c1.538,4.143-0.574,8.747-4.716,10.284C338.03,140.606,337.089,140.768,336.165,140.768z M39.356,140.768c-0.925,0-1.865-0.161-2.783-0.502c-4.142-1.538-6.253-6.143-4.716-10.284 c16.569-44.634,51.532-80.101,95.925-97.307c4.119-1.596,8.753,0.448,10.351,4.567c1.597,4.12-0.449,8.754-4.568,10.351 c-40.126,15.554-71.73,47.612-86.707,87.957C45.66,138.773,42.604,140.768,39.356,140.768z M141.99,121.957 c-1.001,0-2.02-0.189-3.004-0.589c-4.094-1.661-6.067-6.326-4.406-10.421l2.276-5.611c6.142-15.13,17.211-35.243,42.33-35.243 h17.402c25.121,0,36.189,20.113,42.33,35.242l2.277,5.611c1.662,4.095-0.31,8.76-4.404,10.422c-4.096,1.659-8.76-0.312-10.421-4.404 l-2.277-5.611c-3.44-8.476-7.033-14.58-11.159-18.663l-18.585,25.466c-1.506,2.063-3.907,3.284-6.462,3.284l0,0 c-2.555,0-4.957-1.221-6.462-3.284l-18.583-25.466c-4.126,4.082-7.72,10.188-11.16,18.663l-2.276,5.61 C148.145,120.071,145.15,121.957,141.99,121.957z M177.857,86.122l10.031,13.746l10.031-13.746c-0.438-0.02-0.881-0.029-1.33-0.029 h-17.403C178.737,86.093,178.294,86.103,177.857,86.122z M187.886,58.822c-16.216,0-29.409-13.193-29.409-29.411S171.67,0,187.886,0 c16.218,0,29.412,13.193,29.412,29.411S204.104,58.822,187.886,58.822z M187.886,16c-7.394,0-13.409,6.017-13.409,13.411 s6.015,13.411,13.409,13.411c7.395,0,13.412-6.017,13.412-13.411S195.281,16,187.886,16z"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/icons/HomeIcon/HomeIcon.tsx
Normal file
26
src/icons/HomeIcon/HomeIcon.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function HomeIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M5 12l-2 0l9 -9l9 9l-2 0"></Path>
|
||||
<Path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></Path>
|
||||
<Path d="M10 12h4v4h-4z"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/icons/LoginIcon/LoginIcon.tsx
Normal file
25
src/icons/LoginIcon/LoginIcon.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function LoginIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></Path>
|
||||
<Path d="M20 12h-13l3 -3m0 6l-3 -3"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/icons/LogoutIcon/LogoutIcon.tsx
Normal file
25
src/icons/LogoutIcon/LogoutIcon.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function LogoutIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></Path>
|
||||
<Path d="M7 12h14l-3 -3m0 6l3 -3"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/icons/SignupIcon/SignupIcon.tsx
Normal file
26
src/icons/SignupIcon/SignupIcon.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function SignupIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></Path>
|
||||
<Path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></Path>
|
||||
<Path d="M16 11h6m-3 -3v6"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/icons/UserIcon/UserIcon.tsx
Normal file
25
src/icons/UserIcon/UserIcon.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from "react";
|
||||
import { IconProps } from "../../interfaces/Interfaces";
|
||||
|
||||
import { Svg, Path } from "react-native-svg";
|
||||
|
||||
export default function UserIcon(props: IconProps) {
|
||||
return (
|
||||
<>
|
||||
<Svg
|
||||
width={props.size}
|
||||
height={props.size}
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke={props.color}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
|
||||
<Path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></Path>
|
||||
<Path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></Path>
|
||||
</Svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
41
src/interfaces/Interfaces.tsx
Normal file
41
src/interfaces/Interfaces.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
export interface IconProps {
|
||||
size: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export interface RootDrawerParamList {
|
||||
navigate: any;
|
||||
}
|
||||
|
||||
// Redux Interfaces
|
||||
export interface LoginState {
|
||||
Login: { logged_in: boolean };
|
||||
}
|
||||
|
||||
export interface LoggedInUserState {
|
||||
LoggedInUser: {
|
||||
value: {
|
||||
email: string;
|
||||
id: number;
|
||||
username: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
// API Interfaces
|
||||
|
||||
export interface RegistrationParams {
|
||||
email: string;
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface LoginParams {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface ActivationParams {
|
||||
uid: string;
|
||||
token: string;
|
||||
}
|
||||
20
src/routes/Home/Home.tsx
Normal file
20
src/routes/Home/Home.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import * as React from "react";
|
||||
import styles from "../../styles";
|
||||
import { font_sizes } from "../../styles";
|
||||
import { View, Text } from "react-native";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: font_sizes.large,
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Template Homepage
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
20
src/routes/Login/Login.tsx
Normal file
20
src/routes/Login/Login.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import * as React from "react";
|
||||
import styles from "../../styles";
|
||||
import { font_sizes } from "../../styles";
|
||||
import { View, Text } from "react-native";
|
||||
|
||||
export default function Login() {
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: font_sizes.large,
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Template Login Page
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
20
src/routes/Register/Register.tsx
Normal file
20
src/routes/Register/Register.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import * as React from "react";
|
||||
import styles from "../../styles";
|
||||
import { font_sizes } from "../../styles";
|
||||
import { View, Text } from "react-native";
|
||||
|
||||
export default function Register() {
|
||||
return (
|
||||
<View style={styles.background}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: font_sizes.large,
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Template Register Page
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
80
src/styles.tsx
Normal file
80
src/styles.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import { StyleSheet } from "react-native";
|
||||
|
||||
export const colors = {
|
||||
orange_1: "#FFBC72",
|
||||
orange_2: "#FFE2C1",
|
||||
orange_3: "#C07624",
|
||||
blue_1: "#4C87A1",
|
||||
blue_2: "#77ACC3",
|
||||
blue_3: "#1B5D79",
|
||||
text_default: "white",
|
||||
icon_color: "white",
|
||||
};
|
||||
|
||||
export const font_sizes = {
|
||||
tiny: 12,
|
||||
small: 16,
|
||||
medium: 24,
|
||||
large: 36,
|
||||
xl: 48,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
background: {
|
||||
backgroundColor: colors.orange_1,
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
},
|
||||
flex_row: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
flex_column: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
},
|
||||
text_white_tiny: {
|
||||
color: colors.text_default,
|
||||
fontSize: font_sizes.tiny,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
text_white_small: {
|
||||
color: colors.text_default,
|
||||
fontSize: font_sizes.small,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
text_white_medium: {
|
||||
color: colors.text_default,
|
||||
fontSize: font_sizes.medium,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
text_white_large: {
|
||||
color: colors.text_default,
|
||||
fontSize: font_sizes.large,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
text_white_xl: {
|
||||
color: colors.text_default,
|
||||
fontSize: font_sizes.xl,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
button_template: {
|
||||
justifyContent: "flex-start",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
margin: 8,
|
||||
padding: 8,
|
||||
borderRadius: 16,
|
||||
},
|
||||
});
|
||||
|
||||
export default styles;
|
||||
Loading…
Add table
Add a link
Reference in a new issue