keannu125/StudE-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/StudE-Frontend.git synced 2024-11-17 06:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Overhauled colors

Browse source
This commit is contained in:
Keannu Bernasol 2023-07-17 17:10:32 +08:00
parent dfd74cd06a
commit 1403657412
6 changed files with 26 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/AnimatedContainer/AnimatedContainer.tsx
View file

@ -13,7 +13,8 @@ export default function AnimatedContainer(props: props) {
contentContainerStyle={styles.container} contentContainerStyle={styles.container}
from={{ from={{
borderRadius: 0, borderRadius: 0,
backgroundColor: colors.primary_3, opacity: 0,
backgroundColor: colors.secondary_2,
paddingTop: 4, paddingTop: 4,
paddingBottom: 4, paddingBottom: 4,
marginHorizontal: "4%", marginHorizontal: "4%",
@ -21,13 +22,14 @@ export default function AnimatedContainer(props: props) {
}} }}
animate={{ animate={{
borderRadius: 15, borderRadius: 15,
backgroundColor: colors.primary_3, opacity: 1,
backgroundColor: colors.secondary_2,
paddingTop: 16, paddingTop: 16,
paddingBottom: 16, paddingBottom: 16,
marginHorizontal: "4%", marginHorizontal: "4%",
marginVertical: "5%", marginVertical: "5%",
}} }}
transition={{ type: "timing", duration: 300 }} transition={{ type: "timing", duration: 700 }}
> >
{props.children} {props.children}
</MotiScrollView> </MotiScrollView>

4
src/components/DrawerSettings/DrawerScreenSettings.tsx
View file

@ -10,14 +10,14 @@ const DrawerScreenSettings: DrawerNavigationOptions = {
fontSize: font_sizes.medium, fontSize: font_sizes.medium,
}, },
unmountOnBlur: true, unmountOnBlur: true,
headerStyle: { backgroundColor: colors.secondary_4 }, headerStyle: { backgroundColor: colors.primary_1 },
headerTintColor: colors.text_default, headerTintColor: colors.text_default,
drawerType: "slide", drawerType: "slide",
drawerLabelStyle: { drawerLabelStyle: {
color: colors.text_default, color: colors.text_default,
}, },
drawerStyle: { drawerStyle: {
backgroundColor: colors.secondary_4, backgroundColor: colors.primary_1,
width: 260, width: 260,
}, },
headerRight: () => ( headerRight: () => (

4
src/routes/Login/Login.tsx
View file

@ -101,13 +101,13 @@ export default function Login() {
} }
}); });
}} }}
color={colors.button_1} color={colors.secondary_3}
> >
<Text style={styles.text_white_small}>Login</Text> <Text style={styles.text_white_small}>Login</Text>
</Button> </Button>
<Button <Button
onPress={() => navigation.navigate("Register")} onPress={() => navigation.navigate("Register")}
color={colors.button_2} color={colors.secondary_3}
> >
<Text style={styles.text_white_small}>Register</Text> <Text style={styles.text_white_small}>Register</Text>
</Button> </Button>

2
src/routes/Register/Register.tsx
View file

@ -158,7 +158,7 @@ export default function Register() {
{ {
} }
}} }}
color={colors.button_2} color={colors.secondary_3}
> >
<Text style={styles.text_white_small}>Register</Text> <Text style={styles.text_white_small}>Register</Text>
</Button> </Button>

4
src/routes/UserInfo/UserInfo.tsx
View file

@ -171,13 +171,13 @@ export default function UserInfo() {
color: "white", color: "white",
}} }}
dropdownStyle={{ dropdownStyle={{
backgroundColor: colors.primary_4, backgroundColor: colors.primary_2,
}} }}
data={subjectOptions} data={subjectOptions}
buttonStyle={{ buttonStyle={{
width: "90%", width: "90%",
marginLeft: 10, marginLeft: 10,
backgroundColor: colors.primary_4, backgroundColor: colors.primary_2,
borderRadius: 8, borderRadius: 8,
}} }}
/> />

28
src/styles.tsx
View file

@ -7,20 +7,19 @@ const containerWidth = width - width * 0.08;
const containerHeight = height - height * 0.01; const containerHeight = height - height * 0.01;
export const colors = { export const colors = {
primary_1: "#FFDEAD", primary_1: "#1C2C3F",
primary_2: "#FFE2C1", primary_2: "#445467",
primary_3: "#fdac1d", primary_3: "#606F81",
primary_4: "#e3973f", primary_4: "#b4d0f3",
secondary_1: "#4C87A1", secondary_1: "#1E1F3D",
secondary_2: "#77ACC3", secondary_2: "#626297",
secondary_3: "#1B5D79", secondary_3: "#7a7abd",
secondary_4: "#0047AB", secondary_4: "#FFE9CE",
secondary_5: "#FFF5E9",
text_default: "#FFFF", text_default: "#FFFF",
text_error: "#e32d1e", text_error: "#e32d1e",
text_success: "#2ecc71", text_success: "#2ecc71",
icon_color: "#FFFF", icon_color: "#FFFF",
button_1: "#0047AB",
button_2: "#0096FF",
head: "#FFFF", head: "#FFFF",
}; };
@ -35,7 +34,7 @@ export const font_sizes = {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
backgroundColor: colors.primary_1, backgroundColor: colors.secondary_1,
height: "100%", height: "100%",
width: "100%", width: "100%",
}, },
@ -110,8 +109,9 @@ const styles = StyleSheet.create({
}, },
text_input: { text_input: {
color: colors.text_default, color: colors.text_default,
backgroundColor: colors.primary_4, backgroundColor: colors.primary_2,
borderColor: colors.primary_3, borderColor: colors.primary_4,
borderWidth: 1,
padding: 10, padding: 10,
borderRadius: 8, borderRadius: 8,
width: width * 0.5, width: width * 0.5,
@ -140,7 +140,7 @@ const styles = StyleSheet.create({
marginRight: 30, marginRight: 30,
borderWidth: 1, borderWidth: 1,
color: colors.text_default, color: colors.text_default,
backgroundColor: colors.primary_4, backgroundColor: colors.primary_2,
borderRadius: 8, borderRadius: 8,
borderColor: colors.primary_3, borderColor: colors.primary_3,
padding: 8, padding: 8,