upd: redesign aplikasi

Deskripsi:
- update home, profile dll
- blm selesai

NO Issues

constants/Colors.ts

@@ -4,22 +4,34 @@ const tintColorDark = '#fff';
 export const Colors = {
   light: {
     text: '#11181C',
-    background: '#f4f9fd',
+    background: '#f7f7f7ff',
     tint: tintColorLight,
     primary: '#19345E',
-    icon: '#687076',
+    icon: '#1F3C88',
     card: '#ffffff',
     tabIconDefault: '#687076',
-    tabIconSelected: tintColorLight,
+    tabActive: '#2563EB',
+    header: '#234881',
+    homeGradient: '#346CC4',
+    dimmed: '#6B7280',
+    success: '#40C057',
+    warning: '#FBBF24',
+    error: '#F87171',
   },
   dark: {
     text: '#ECEDEE',
-    background: '#151718',
+    background: '#0F1B2D',
     tint: tintColorDark,
     primary: '#19345E',
-    icon: '#9BA1A6',
-    card: '#232526', // slightly lighter than background #151718
+    icon: '#9DB9E8',
+    card: '#16233A', // slightly lighter than background #151718
     tabIconDefault: '#9BA1A6',
-    tabIconSelected: tintColorDark,
+    tabActive: '#0166FE',
+    header: '#0E294C',
+    homeGradient: '#123A6F',
+    dimmed: '#9AAED1',
+    success: '#1F6F43',
+    warning: '#D97706',
+    error: '#DC2626',
   },
 };

constants/Headers.ts

@@ -1,4 +1,4 @@
-const bgColorDefault = '#19345E';
+const bgColorDefault = '#a5e816ff';
 
 export const Headers = {
    shadow: {

constants/Styles.ts

@@ -151,6 +151,9 @@ const Styles = StyleSheet.create({
    ml25: {
       marginLeft: 25
    },
+   p0: {
+      padding: 0
+   },
    pb05: {
       paddingBottom: 5
    },
@@ -202,9 +205,18 @@ const Styles = StyleSheet.create({
    p20: {
       padding: 20
    },
+   round05: {
+      borderRadius: 5
+   },
+   round08: {
+      borderRadius: 8
+   },
    round10: {
       borderRadius: 10
    },
+   round15: {
+      borderRadius: 15
+   },
    h100: {
       height: '100%'
    },
@@ -265,14 +277,12 @@ const Styles = StyleSheet.create({
       flexDirection: 'row'
    },
    btnIconHeader: {
-      backgroundColor: '#384288',
-      padding: 7,
-      borderRadius: 100,
+      padding: 3,
    },
    btnFiturMenu: {
-      backgroundColor: '#FCAA4B',
-      padding: 10,
-      borderRadius: 100,
+      padding: 13,
+      borderRadius: 15,
+      borderWidth: 1,
    },
    btnRound: {
       backgroundColor: '#19345E',
@@ -285,7 +295,7 @@ const Styles = StyleSheet.create({
    },
    btnTab: {
       alignItems: 'center',
-      paddingVertical: 10,
+      paddingVertical: 5,
       paddingHorizontal: 15,
       borderRadius: 20,
       flexDirection: 'row',
@@ -352,35 +362,36 @@ const Styles = StyleSheet.create({
    },
    wrapGridContent: {
       shadowColor: '#171717',
-      shadowOffset: { width: -2, height: 4 },
-      shadowOpacity: 0.2,
-      shadowRadius: 3,
-      elevation: 10,
-      borderRadius: 15,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 10,
+      elevation: 5,
+      borderRadius: 5,
       marginBottom: 15
    },
    wrapGridCaraousel: {
       width: '95%',
       height: 200,
       shadowColor: '#171717',
-      shadowOffset: { width: -2, height: 4 },
-      shadowOpacity: 0.2,
-      shadowRadius: 3,
-      elevation: 10,
-      borderRadius: 15,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 5,
+      borderRadius: 5,
+      marginLeft: 5
    },
    headerPaperGrid: {
       paddingVertical: 25,
       paddingHorizontal: 20,
       alignItems: 'center',
-      borderTopStartRadius: 15,
-      borderTopEndRadius: 15
+      borderTopStartRadius: 5,
+      borderTopEndRadius: 5
    },
    contentPaperGrid: {
       backgroundColor: 'white',
       height: 150,
-      borderBottomEndRadius: 15,
-      borderBottomStartRadius: 15,
+      borderBottomEndRadius: 5,
+      borderBottomStartRadius: 5,
       paddingHorizontal: 20,
       justifyContent: 'space-evenly'
    },
@@ -402,15 +413,20 @@ const Styles = StyleSheet.create({
    },
    contentBar: {
       height: 20,
-      backgroundColor: 'orange',
+      backgroundColor: '#3B82F6',
       borderRadius: 10,
    },
    wrapPaper: {
-      padding: 15,
+      padding: 10,
       backgroundColor: 'white',
-      borderRadius: 10,
-      borderWidth: 1,
-      borderColor: '#d6d8f6',
+      borderRadius: 5,
+      // borderWidth: 1,
+      // borderColor: '#d6d8f6',
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 5,
    },
    contentItemCenter: {
       justifyContent: 'center',
@@ -429,11 +445,10 @@ const Styles = StyleSheet.create({
       marginRight: 10
    },
    wrapItemDiscussion: {
-      padding: 10,
-      borderRadius: 10,
+      padding: 15,
+      borderRadius: 5,
       borderColor: '#d6d8f6',
-      borderWidth: 1,
-      marginBottom: 10
+      borderBottomWidth: 1,
    },
    wrapItemBorderBottom: {
       padding: 10,
@@ -543,7 +558,7 @@ const Styles = StyleSheet.create({
       marginBottom: 10,
       borderRadius: 20,
       padding: 5,
-      backgroundColor: 'white',
+      borderWidth: 1,
    },
    itemSelectModal: {
       padding: 10,
@@ -644,7 +659,7 @@ const Styles = StyleSheet.create({
    },
    headerTitle: {
       color: '#fff',
-      fontSize: 16,
+      fontSize: 18,
       fontWeight: '600',
    },
    headerSide: {
@@ -686,6 +701,13 @@ const Styles = StyleSheet.create({
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
+   },
+   wrapHomeCarousel: {
+      shadowColor: '#171717',
+      shadowOffset: { width: 0, height: 5 },
+      shadowOpacity: 0.2,
+      shadowRadius: 5,
+      elevation: 50,
    }
 })