From 0247afe553e2fa0e074a44e432c222db0eb009d7 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Mon, 17 Jul 2023 22:54:06 +0800
Subject: [PATCH] Fixed buttons

---
 src/components/Button/Button.tsx         | 8 ++------
 src/routes/UserInfoPage/UserInfoPage.tsx | 9 +++++----
 src/styles.tsx                           | 1 +
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 22e9596..68ae767 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -9,16 +9,12 @@ export interface props {
   disabled?: boolean;
 }
 
-export default function Button({
-  disabled = false,
-  color = "rgba(52, 52, 52, 0.8)",
-  ...props
-}: props) {
+export default function Button({ disabled = false, ...props }: props) {
   return (
     <Pressable
       disabled={disabled}
       onPress={props.onPress}
-      style={styles.button_template}
+      style={{ ...styles.button_template, ...{ backgroundColor: props.color } }}
     >
       {props.children}
     </Pressable>
diff --git a/src/routes/UserInfoPage/UserInfoPage.tsx b/src/routes/UserInfoPage/UserInfoPage.tsx
index cd12cff..767084e 100644
--- a/src/routes/UserInfoPage/UserInfoPage.tsx
+++ b/src/routes/UserInfoPage/UserInfoPage.tsx
@@ -15,7 +15,7 @@ import {
   UserInfoParams,
   Semester,
 } from "../../interfaces/Interfaces";
-import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import Button from "../../components/Button/Button";
 import { TouchableOpacity, Image } from "react-native";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -215,14 +215,15 @@ export default function UserInfoPage() {
               setOpen={(open) => setSubjectsOpen(open)}
               setValue={setSelectedSubjects}
               placeholder="Subjects"
+              placeholderStyle={styles.text_white_tiny}
               style={styles.input}
               textStyle={styles.text_white_small_bold}
               dropDownContainerStyle={{ backgroundColor: "white" }}
             />
           </View>
         </View>
-        <TouchableOpacity
-          style={styles.button_template}
+        <Button
+          color={colors.secondary_3}
           onPress={() => {
             if (isEditable) {
               mutation.mutate({
@@ -240,7 +241,7 @@ export default function UserInfoPage() {
           <Text style={styles.text_white_small}>
             {isEditable && StudentInfo.isSuccess ? "Save" : "Edit Profile"}
           </Text>
-        </TouchableOpacity>
+        </Button>
       </AnimatedContainerNoScroll>
     </View>
   );
diff --git a/src/styles.tsx b/src/styles.tsx
index 8ddcfdc..3d97764 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -148,6 +148,7 @@ const styles = StyleSheet.create({
     overflow: "hidden",
   },
   input: {
+    paddingHorizontal: 8,
     marginVertical: 12,
     borderWidth: 1,
     color: colors.text_default,