fix

deskripsi:
- perubahan pada component: ButtonCustom, TextArea, TextInput
- fix style global
- tambhan color pada palet

app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "name": "hipmi-mobile",
+    "name": "HIPMI BADUNG",
     "slug": "hipmi-mobile",
     "version": "1.0.0",
     "orientation": "portrait",

app/(application)/(user)/portofolio/[id]/create.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
   BoxButtonOnFooter,
   ButtonCenteredOnly,
@@ -18,7 +17,7 @@ import { MainColor } from "@/constants/color-palet";
 import dummyMasterBidangBisnis from "@/lib/dummy-data/master-bidang-bisnis";
 import dummyMasterSubBidangBisnis from "@/lib/dummy-data/master-sub-bidang-bisnis";
 import { Ionicons } from "@expo/vector-icons";
-import { useLocalSearchParams } from "expo-router";
+import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import PhoneInput, { ICountry } from "react-native-international-phone-number";
@@ -60,11 +59,13 @@ export default function PortofolioCreate() {
       <StackCustom>
         <InformationBox text="Lengkapi data bisnis anda." />
         <TextInputCustom
+          // disabled
           required
           label="Nama Bisnis"
           placeholder="Masukkan nama bisnis"
         />
         <SelectCustom
+          // disabled
           label="Bidang Usaha"
           required
           data={dummyMasterBidangBisnis.map((item) => ({
@@ -80,6 +81,7 @@ export default function PortofolioCreate() {
         <Grid>
           <Grid.Col span={10}>
             <SelectCustom
+              // disabled
               label="Sub Bidang Usaha"
               required
               data={dummyMasterSubBidangBisnis.map((item) => ({
@@ -145,12 +147,22 @@ export default function PortofolioCreate() {
           maxLength={100}
         />
         <Spacing />
+
+        {/* Logo */}
         <InformationBox text="Upload logo bisnis anda untuk di tampilaka pada portofolio." />
         <LandscapeFrameUploaded />
-        <ButtonCenteredOnly icon="upload" onPress={() => console.log("upload")}>
+        <ButtonCenteredOnly
+          icon="upload"
+          onPress={() => {
+            console.log("Upload logo >>", id);
+            router.navigate(`/(application)/take-picture/${id}`);
+          }}
+        >
           Upload
         </ButtonCenteredOnly>
         <Spacing height={40} />
+
+        {/* Social Media */}
         <InformationBox text="Isi hanya pada sosial media yang anda miliki." />
         <TextInputCustom
           label="Tiktok"

app/(application)/(user)/profile/[id]/create.tsx

@@ -1,5 +1,6 @@
 import {
   AvatarCustom,
+  ButtonCenteredOnly,
   ButtonCustom,
   SelectCustom,
   Spacing,
@@ -9,7 +10,6 @@ import {
 } from "@/components";
 import BoxButtonOnFooter from "@/components/Box/BoxButtonOnFooter";
 import InformationBox from "@/components/Box/InformationBox";
-import ButtonUpload from "@/components/Button/ButtonUpload";
 import LandscapeFrameUploaded from "@/components/Image/LandscapeFrameUploaded";
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
@@ -47,9 +47,12 @@ export default function CreateProfile() {
         <View style={{ alignItems: "center" }}>
           <AvatarCustom size="xl" />
           <Spacing />
-          <ButtonUpload
+          <ButtonCenteredOnly
+            icon="upload"
             onPress={() => router.navigate(`/take-picture/${id}`)}
-          />
+          >
+            Upload
+          </ButtonCenteredOnly>
         </View>
 
         <Spacing />
@@ -58,9 +61,12 @@ export default function CreateProfile() {
           <InformationBox text="Upload foto latar belakang anda." />
           <LandscapeFrameUploaded />
           <Spacing />
-          <ButtonUpload
+          <ButtonCenteredOnly
+            icon="upload"
             onPress={() => router.navigate(`/take-picture/${id}`)}
-          />
+          >
+            Upload
+          </ButtonCenteredOnly>
         </View>
 
         <Spacing />

app/(application)/(user)/profile/[id]/update-background.tsx

@@ -1,15 +1,18 @@
-import { BaseBox, ButtonCustom } from "@/components";
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import ButtonUpload from "@/components/Button/ButtonUpload";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { router, useLocalSearchParams } from "expo-router";
 import { Image } from "react-native";
 
 export default function UpdateBackgroundProfile() {
   const { id } = useLocalSearchParams();
-  return (
+  const buttonFooter = (
-    <ViewWrapper
+    <BoxButtonOnFooter>
-      bottomBarComponent={
       <ButtonCustom
         onPress={() => {
           console.log("Simpan foto background >>", id);
@@ -18,8 +21,11 @@ export default function UpdateBackgroundProfile() {
       >
         Simpan
       </ButtonCustom>
-      }
+    </BoxButtonOnFooter>
-    >
+  );
+
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -30,12 +36,12 @@ export default function UpdateBackgroundProfile() {
         />
       </BaseBox>
 
-      <ButtonUpload
+      <ButtonCenteredOnly
-        title="Update"
+        icon="upload"
-        onPress={() =>
+        onPress={() => router.navigate(`/(application)/take-picture/${id}`)}
-          router.navigate(`/(application)/take-picture/${id}`)
+      >
-        }
+        Update
-      />
+      </ButtonCenteredOnly>
     </ViewWrapper>
   );
 }

app/(application)/(user)/profile/[id]/update-photo.tsx

@@ -1,15 +1,18 @@
-import { BaseBox, ButtonCustom } from "@/components";
+import {
+  BaseBox,
+  BoxButtonOnFooter,
+  ButtonCenteredOnly,
+  ButtonCustom,
+} from "@/components";
 import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
-import ButtonUpload from "@/components/Button/ButtonUpload";
 import DUMMY_IMAGE from "@/constants/dummy-image-value";
 import { router, useLocalSearchParams } from "expo-router";
 import { Image } from "react-native";
 
 export default function UpdatePhotoProfile() {
   const { id } = useLocalSearchParams();
-  return (
+  const buttonFooter = (
-    <ViewWrapper
+    <BoxButtonOnFooter>
-      bottomBarComponent={
       <ButtonCustom
         onPress={() => {
           console.log("Simpan foto profile >>", id);
@@ -18,8 +21,10 @@ export default function UpdatePhotoProfile() {
       >
         Simpan
       </ButtonCustom>
-      }
+    </BoxButtonOnFooter>
-    >
+  );
+  return (
+    <ViewWrapper footerComponent={buttonFooter}>
       <BaseBox
         style={{ alignItems: "center", justifyContent: "center", height: 250 }}
       >
@@ -30,13 +35,18 @@ export default function UpdatePhotoProfile() {
         />
       </BaseBox>
 
-      <ButtonUpload
+      <ButtonCenteredOnly
-        title="Update"
+        icon="upload"
         onPress={() => {
           console.log("Update photo >>", id);
           router.navigate(`/(application)/take-picture/${id}`);
         }}
-      />
+      >
+        Update
+      </ButtonCenteredOnly>
+
+      {/* <Spacing />
+      <ButtonCustom>Test</ButtonCustom> */}
     </ViewWrapper>
   );
 }

components/Button/ButtonCustom.tsx

@@ -2,13 +2,12 @@
 
 import React from "react";
 import { StyleProp, Text, TouchableOpacity, ViewStyle } from "react-native";
-import buttonStyles from "./buttonCustomStyles";
 import { radiusMap } from "@/constants/radius-value";
 import { MainColor } from "@/constants/color-palet";
+import { stylesButton } from "./buttonCustomStyles";
 
 // Import radiusMap
 
-
 // Definisi type untuk radius
 type RadiusType = keyof typeof radiusMap | number;
 
@@ -30,30 +29,29 @@ const ButtonCustom: React.FC<ButtonProps> = ({
   title = "Button",
   backgroundColor = MainColor.yellow,
   textColor = MainColor.black,
-  radius = "full", // default md
+  radius = 50, // default md
   disabled = false,
   iconLeft,
   style,
 }) => {
-  const borderRadius =
-    typeof radius === "number" ? radius : radiusMap[radius ?? "md"]; // fallback ke 'md'
-
-  const styles = buttonStyles({
-    backgroundColor,
-    textColor,
-    borderRadius,
-  });
-
   return (
     <TouchableOpacity
-      style={[styles.button, disabled && styles.disabled, style]}
+      style={[
+        stylesButton.button,
+        disabled && stylesButton.disabled,
+        style,
+        { borderRadius: radius },
+        { backgroundColor },
+      ]}
       onPress={onPress}
       disabled={disabled}
       activeOpacity={0.8}
     >
       {/* Render icon jika tersedia */}
       {iconLeft && iconLeft}
-      <Text style={styles.buttonText}>{children || title}</Text>
+      <Text style={[stylesButton.buttonText, { color: textColor }]}>
+        {children || title}
+      </Text>
     </TouchableOpacity>
   );
 };

components/Button/ButtonUpload.tsx

@@ -1,21 +0,0 @@
-import { MainColor } from "@/constants/color-palet";
-import { GStyles } from "@/styles/global-styles";
-import { Feather } from "@expo/vector-icons";
-import React from "react";
-import ButtonCustom from "./ButtonCustom";
-
-interface ButtonUploadProps {
-    title?: string;
-    onPress: () => void;
-}
-export default function ButtonUpload({ onPress, title = "Upload" }: ButtonUploadProps) {
-  return (
-    <ButtonCustom
-      onPress={onPress}
-      iconLeft={<Feather name="upload" size={20} color={MainColor.black} />}
-      style={GStyles.buttonCentered50Percent}
-    >
-      {title}
-    </ButtonCustom>
-  );
-}

components/Button/buttonCustomStyles.ts

@@ -4,24 +4,18 @@ import { MainColor } from "@/constants/color-palet";
 import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
 import { StyleSheet } from "react-native";
 
-export default function buttonStyles({
+export const stylesButton = StyleSheet.create({
-  backgroundColor = "#007AFF",
-  textColor = "#FFFFFF",
-  borderRadius = 8,
-}) {
-  return StyleSheet.create({
     button: {
-      backgroundColor,
+      backgroundColor: MainColor.yellow,
       paddingVertical: 12,
       paddingHorizontal: 20,
-      borderRadius,
       flexDirection: "row", // 👈 Tambahkan baris ini
       alignItems: "center",
       justifyContent: "center",
       gap: 8,
     },
     buttonText: {
-      color: textColor,
+      color: MainColor.black,
       fontSize: TEXT_SIZE_MEDIUM,
       fontWeight: "600",
     },
@@ -29,4 +23,3 @@ export default function buttonStyles({
       backgroundColor: MainColor.disabled,
     },
   });
-}

components/Select/SelectCustom.tsx

@@ -7,7 +7,7 @@ import {
   Pressable,
   Text,
   TouchableOpacity,
-  View
+  View,
 } from "react-native";
 
 type SelectItem = {
@@ -21,6 +21,7 @@ type SelectProps = {
   data: SelectItem[];
   value?: string | number | null;
   required?: boolean; // <-- new prop
+  disabled?: boolean; // <-- tambahkan prop disabled
   onChange: (value: string | number) => void;
   borderRadius?: number;
 };
@@ -31,6 +32,7 @@ const SelectCustom: React.FC<SelectProps> = ({
   data,
   value,
   required = false, // <-- default false
+  disabled = false, // <-- default false
   onChange,
   borderRadius = 8,
 }) => {
@@ -51,13 +53,22 @@ const SelectCustom: React.FC<SelectProps> = ({
       <Pressable
         style={[
           { borderRadius },
-          GStyles.inputContainerInput,
           hasError ? GStyles.inputErrorBorder : null,
+          GStyles.inputContainerInput,
+          disabled && GStyles.disabledBox,
         ]} // <-- add error style
-        onPress={() => setModalVisible(true)}
+        onPress={() => !disabled && setModalVisible(true)}
       >
         <Text
-          style={selectedItem ? GStyles.inputText : GStyles.inputPlaceholder}
+          style={
+            selectedItem
+              ? disabled
+                ? GStyles.inputTextDisabled
+                : GStyles.inputText
+              : disabled
+              ? GStyles.inputPlaceholderDisabled
+              : GStyles.inputPlaceholder
+          }
         >
           {selectedItem?.label || placeholder}
         </Text>

components/TextArea/TextAreaCustom.tsx

@@ -87,7 +87,7 @@ const TextAreaCustom: React.FC<TextAreaCustomProps> = ({
       <View
         style={[
           GStyles.inputContainerInput,
-          disabled && GStyles.inputDisabled,
+          disabled && GStyles.disabledBox,
           hasError ? GStyles.inputErrorBorder : {},
           { borderRadius },
           style,

components/TextInput/TextInputCustom.tsx

@@ -10,7 +10,6 @@ import {
   ViewStyle,
 } from "react-native";
 
-
 type IconType = React.ReactNode | string;
 
 type Props = {
@@ -83,18 +82,27 @@ const TextInputCustom = ({
       )}
       <View
         style={[
-          GStyles.inputContainerInput,
+          style,
-          disabled && GStyles.inputDisabled,
           { borderRadius },
           externalError || internalError ? GStyles.inputErrorBorder : null,
-          style,
+          GStyles.inputContainerInput,
+          disabled && GStyles.disabledBox,
         ]}
       >
         {iconLeft && (
           <View style={GStyles.inputIcon}>{renderIcon(iconLeft)}</View>
         )}
         <RNTextInput
-          style={[GStyles.inputText, { color: fontColor }]}
+          style={[
+            GStyles.inputText,
+            { color: fontColor },
+            disabled
+              ? GStyles.inputTextDisabled // <-- custom style untuk text saat disabled
+              : GStyles.inputText,
+            disabled
+              ? GStyles.inputPlaceholderDisabled // <-- placeholder saat disabled
+              : GStyles.inputPlaceholder,
+          ]}
           editable={!disabled}
           secureTextEntry={secureTextEntry && !isPasswordVisible}
           keyboardType={keyboardType}

components/index.ts

@@ -4,7 +4,6 @@ import AlertCustom from "./Alert/AlertCustom";
 import LeftButtonCustom from "./Button/BackButton";
 import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
 import ButtonCustom from "./Button/ButtonCustom";
-import ButtonUpload from "./Button/ButtonUpload";
 // Drawer
 import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
@@ -38,12 +37,11 @@ export {
   AvatarCustom,
   LandscapeFrameUploaded,
   // Button
+  ButtonCustom,
   LeftButtonCustom as BackButton,
+  ButtonCenteredOnly,
   // Box
   BaseBox,
-  ButtonCenteredOnly,
-  ButtonCustom,
-  ButtonUpload,
   BoxButtonOnFooter,
   InformationBox,
   // Drawer

constants/color-palet.ts

@@ -3,24 +3,27 @@ export const MainColor = {
   darkblue: "#001D3D",
   soft_darkblue: "#0e3763",
   yellow: "#E1B525",
-  white_gray: "#D4D0D0",
   red: "#FF4B4C",
   orange: "#FF7043",
   green: "#4CAF4F",
+  white_gray: "#D4D0D0",
   text_input: "#EDEBEBFF",
-  placeholder: "#999",
+  placeholder: "#888",
-  disabled: "#606360",
   white: "#ffffff",
+  // disabled color
+  disabled: "#777",
 };
 
 export const AccentColor = {
-  blackgray: "#333533FF",
+  blackgray: "#aaa",
   darkblue: "#002E59",
   blue: "#00447D",
   softblue: "#007CBA",
   skyblue: "#00BFFF",
   yellow: "#F8A824",
   white: "#FEFFFE",
+  // disable color
+  disabledBorder: "#aaa",
 };
 
 export const AdminColor = {

styles/global-styles.ts

@@ -1,10 +1,15 @@
-import { TEXT_SIZE_LARGE, TEXT_SIZE_MEDIUM, TEXT_SIZE_SMALL } from "@/constants/constans-value";
+import {
+  TEXT_SIZE_LARGE,
+  TEXT_SIZE_MEDIUM,
+  TEXT_SIZE_SMALL,
+} from "@/constants/constans-value";
 import { Dimensions, StyleSheet } from "react-native";
 import { AccentColor, MainColor } from "../constants/color-palet";
 
 const { width } = Dimensions.get("window");
 
 export const GStyles = StyleSheet.create({
+  // =============== Main Styles =============== //
   container: {
     flex: 1,
     paddingInline: 20,
@@ -20,8 +25,25 @@ export const GStyles = StyleSheet.create({
     height: "100%",
     width: "100%",
   },
+  // Style saat disabled
+  disabledBox: {
+    backgroundColor: MainColor.disabled,
+    borderColor: AccentColor.disabledBorder,
+  },
 
-  // AUTHENTICATION
+  inputDisabled: {
+    backgroundColor: "#f0f0f0",
+    borderColor: "#ddd",
+  },
+  inputTextDisabled: {
+    color: "#777",
+  },
+  inputPlaceholderDisabled: {
+    color: "#444",
+  },
+  // =============== Main Styles =============== //
+
+  // =============== AUTHENTICATION =============== //
   authContainer: {
     flex: 1,
     justifyContent: "center",
@@ -40,15 +62,17 @@ export const GStyles = StyleSheet.create({
     color: MainColor.yellow,
     fontWeight: "bold",
   },
+  // =============== AUTHENTICATION =============== //
 
-  // TEXT & LABEL
+  // =============== TEXT & LABEL =============== //
   textLabel: {
     fontSize: TEXT_SIZE_MEDIUM,
     color: MainColor.white_gray,
     fontWeight: "normal",
   },
+  // =============== TEXT & LABEL =============== //
 
-  // Stack Header Style
+  // =============== STACK HEADER =============== //
   headerStyle: {
     backgroundColor: AccentColor.darkblue,
   },
@@ -56,14 +80,16 @@ export const GStyles = StyleSheet.create({
     color: MainColor.yellow,
     fontWeight: "bold",
   },
+  // =============== STACK HEADER =============== //
 
-  // HOME
+  // =============== HOME =============== //
   homeContainer: {
     flex: 1,
     paddingInline: 25,
     paddingBlock: 10,
     backgroundColor: MainColor.darkblue,
   },
+  // =============== HOME =============== //
 
   // =============== TAB =============== //
   tabBar: {
@@ -149,6 +175,7 @@ export const GStyles = StyleSheet.create({
   // =============== BOTTOM BAR =============== //
 
   // =============== BUTTON =============== //
+
   buttonCentered50Percent: {
     width: "50%",
     alignSelf: "center",
@@ -198,12 +225,6 @@ export const GStyles = StyleSheet.create({
     height: 50,
   },
 
-  // Style saat disabled
-  inputDisabled: {
-    backgroundColor: "#f9f9f9",
-    borderColor: "#e0e0e0",
-  },
-
   // Input utama (TextInput)
   inputText: {
     flex: 1,