From 5df0824faf6c9bb1a46dfeb0850a4bfe54cc610c Mon Sep 17 00:00:00 2001
From: angelindepthios <angelin.depthios@ui.ac.id>
Date: Wed, 29 Sep 2021 22:15:07 +0700
Subject: [PATCH 1/6] FEAT: add plain button-component

---
 src/components/button/PlainButton.tsx | 59 +++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/components/button/PlainButton.tsx

diff --git a/src/components/button/PlainButton.tsx b/src/components/button/PlainButton.tsx
new file mode 100644
index 0000000..24079bb
--- /dev/null
+++ b/src/components/button/PlainButton.tsx
@@ -0,0 +1,59 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import React from "react";
+import { Text, StyleSheet, TouchableOpacity, View } from "react-native";
+import Colors from "../../constants/Colors";
+type props = {
+  text: string;
+  onPress: () => void;
+};
+const PlainButton = ({ text, onPress }: props) => {
+  return (
+    <View>
+      <TouchableOpacity style={styles.button} onPress={() => onPress()}>
+        <View style={styles.textContainter}>
+          <Text style={styles.text}>{text}</Text>
+        </View>
+        <View style={styles.iconContainer}>
+          <MaterialIcons
+            style={{
+              justifyContent: "center",
+            }}
+            name="keyboard-arrow-right"
+            size={24}
+            color="black"
+          />
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+export default PlainButton;
+
+const styles = StyleSheet.create({
+  button: {
+    width: 363,
+    borderRadius: 8,
+    elevation: 4,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: Colors.background,
+  },
+  textContainter: {
+    flex: 1,
+    marginRight: 25,
+    marginLeft: 8,
+    marginVertical: 8,
+  },
+  iconContainer: {
+    marginRight: 16,
+    marginVertical: 23,
+  },
+  text: {
+    fontWeight: "300",
+    width: 307,
+    fontSize: 16,
+    textAlign: "left",
+    textAlignVertical: "center",
+  },
+});
-- 
GitLab


From 0f339686fbc64f26cab04dc578790e9616e643f0 Mon Sep 17 00:00:00 2001
From: angelindepthios <angelin.depthios@ui.ac.id>
Date: Wed, 29 Sep 2021 22:57:10 +0700
Subject: [PATCH 2/6] FEAT : add plain button components

---
 src/components/button/PlainButton.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/button/PlainButton.tsx b/src/components/button/PlainButton.tsx
index 24079bb..8f1c28e 100644
--- a/src/components/button/PlainButton.tsx
+++ b/src/components/button/PlainButton.tsx
@@ -20,7 +20,7 @@ const PlainButton = ({ text, onPress }: props) => {
             }}
             name="keyboard-arrow-right"
             size={24}
-            color="black"
+            color="#666666"
           />
         </View>
       </TouchableOpacity>
@@ -55,5 +55,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     textAlign: "left",
     textAlignVertical: "center",
+    color: "#666666",
   },
 });
-- 
GitLab


From 4c7538777ecd677a6a5f91e2892d01ec50d4689a Mon Sep 17 00:00:00 2001
From: angelindepthios <angelin.depthios@ui.ac.id>
Date: Wed, 29 Sep 2021 23:07:46 +0700
Subject: [PATCH 3/6] FEAT : add plain button components

---
 src/components/button/PlainButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/button/PlainButton.tsx b/src/components/button/PlainButton.tsx
index 8f1c28e..edd5dac 100644
--- a/src/components/button/PlainButton.tsx
+++ b/src/components/button/PlainButton.tsx
@@ -11,7 +11,7 @@ const PlainButton = ({ text, onPress }: props) => {
     <View>
       <TouchableOpacity style={styles.button} onPress={() => onPress()}>
         <View style={styles.textContainter}>
-          <Text style={styles.text}>{text}</Text>
+          <Text style={styles.texts}>{text}</Text>
         </View>
         <View style={styles.iconContainer}>
           <MaterialIcons
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
     marginRight: 16,
     marginVertical: 23,
   },
-  text: {
+  texts: {
     fontWeight: "300",
     width: 307,
     fontSize: 16,
-- 
GitLab


From ae4c3eca0a55b17f89256df4755ce4f6caaba7c5 Mon Sep 17 00:00:00 2001
From: angelindepthios <angelin.depthios@ui.ac.id>
Date: Fri, 1 Oct 2021 22:02:17 +0700
Subject: [PATCH 4/6] Feat: add new description in plain button component

---
 src/components/button/PlainButton.tsx | 37 +++++++++++++++++++++------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/button/PlainButton.tsx b/src/components/button/PlainButton.tsx
index edd5dac..9a6a049 100644
--- a/src/components/button/PlainButton.tsx
+++ b/src/components/button/PlainButton.tsx
@@ -1,17 +1,29 @@
 import { MaterialIcons } from "@expo/vector-icons";
-import React from "react";
+import React, { useState } from "react";
 import { Text, StyleSheet, TouchableOpacity, View } from "react-native";
 import Colors from "../../constants/Colors";
 type props = {
   text: string;
   onPress: () => void;
+  desc?: boolean;
+  descText?: string;
 };
-const PlainButton = ({ text, onPress }: props) => {
+const PlainButton = ({ text, desc, onPress, descText }: props) => {
   return (
     <View>
       <TouchableOpacity style={styles.button} onPress={() => onPress()}>
         <View style={styles.textContainter}>
           <Text style={styles.texts}>{text}</Text>
+          {desc && (
+            <View style={styles.desc}>
+              <View style={{ marginRight: 3 }}>
+                <MaterialIcons name="group" size={15} color="#8C8C8C" />
+              </View>
+              <View style={{ flex: 1, paddingRight: 7 }}>
+                <Text style={styles.descText}>{descText}</Text>
+              </View>
+            </View>
+          )}
         </View>
         <View style={styles.iconContainer}>
           <MaterialIcons
@@ -31,7 +43,7 @@ export default PlainButton;
 
 const styles = StyleSheet.create({
   button: {
-    width: 363,
+    width: "100%",
     borderRadius: 8,
     elevation: 4,
     flexDirection: "row",
@@ -41,13 +53,13 @@ const styles = StyleSheet.create({
   },
   textContainter: {
     flex: 1,
-    marginRight: 25,
-    marginLeft: 8,
-    marginVertical: 8,
+    paddingRight: 25,
+    paddingLeft: 8,
+    paddingVertical: 8,
   },
   iconContainer: {
-    marginRight: 16,
-    marginVertical: 23,
+    paddingRight: 16,
+    paddingVertical: 23,
   },
   texts: {
     fontWeight: "300",
@@ -57,4 +69,13 @@ const styles = StyleSheet.create({
     textAlignVertical: "center",
     color: "#666666",
   },
+  desc: {
+    paddingTop: 5,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  descText: {
+    fontSize: 12,
+    color: "#8C8C8C",
+  },
 });
-- 
GitLab


From e5332144ae748cbf27bdaf797c4f444b5e2d8188 Mon Sep 17 00:00:00 2001
From: angelindepthios <angelin.depthios@ui.ac.id>
Date: Fri, 1 Oct 2021 22:08:13 +0700
Subject: [PATCH 5/6] fix : change the color code

---
 src/components/button/PlainButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/button/PlainButton.tsx b/src/components/button/PlainButton.tsx
index 9a6a049..44355b1 100644
--- a/src/components/button/PlainButton.tsx
+++ b/src/components/button/PlainButton.tsx
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     textAlign: "left",
     textAlignVertical: "center",
-    color: "#666666",
+    color: Colors.text.body,
   },
   desc: {
     paddingTop: 5,
@@ -76,6 +76,6 @@ const styles = StyleSheet.create({
   },
   descText: {
     fontSize: 12,
-    color: "#8C8C8C",
+    color: Colors.text.disabled,
   },
 });
-- 
GitLab


From 7fbae2f8252bd11b5e7d9667b050bba96dff929d Mon Sep 17 00:00:00 2001
From: angelindepthios <angelin.depthios@ui.ac.id>
Date: Fri, 1 Oct 2021 22:15:52 +0700
Subject: [PATCH 6/6] fix : change the color code

---
 src/components/button/PlainButton.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/button/PlainButton.tsx b/src/components/button/PlainButton.tsx
index 44355b1..c38059e 100644
--- a/src/components/button/PlainButton.tsx
+++ b/src/components/button/PlainButton.tsx
@@ -17,7 +17,11 @@ const PlainButton = ({ text, desc, onPress, descText }: props) => {
           {desc && (
             <View style={styles.desc}>
               <View style={{ marginRight: 3 }}>
-                <MaterialIcons name="group" size={15} color="#8C8C8C" />
+                <MaterialIcons
+                  name="group"
+                  size={15}
+                  color={Colors.icon.inactive}
+                />
               </View>
               <View style={{ flex: 1, paddingRight: 7 }}>
                 <Text style={styles.descText}>{descText}</Text>
-- 
GitLab