upd: redesign

app/(application)/announcement/[id].tsx

@@ -205,7 +205,7 @@ export default function DetailAnnouncement() {
             }
          >
             <View style={[Styles.p15, Styles.mb50]}>
-               <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
+               <View style={[Styles.wrapPaper, Styles.borderAll, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                   {
                      loading ?
                         <View>
@@ -243,7 +243,7 @@ export default function DetailAnnouncement() {
                </View>
                {
                   dataFile.length > 0 && (
-                     <View style={[Styles.wrapPaper, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+                     <View style={[Styles.wrapPaper, Styles.borderAll, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                         <View style={[Styles.mb05]}>
                            <Text style={[Styles.textDefaultSemiBold]}>File</Text>
                         </View>
@@ -268,7 +268,7 @@ export default function DetailAnnouncement() {
                      </View>
                   )
                }
-               <View style={[Styles.wrapPaper, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.background }]}>
+               <View style={[Styles.wrapPaper, Styles.borderAll, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                   {
                      loading ?
                         arrSkeleton.map((item, index) => {

app/(application)/announcement/index.tsx

@@ -112,9 +112,9 @@ export default function Announcement() {
                                  borderType="bottom"
                                  bgColor="transparent"
                                  icon={
-                                    <View style={[Styles.iconContent]}>
+                                    // <View style={[Styles.iconContent]}>
-                                       <MaterialIcons name="campaign" size={25} color={'black'} />
+                                       <MaterialIcons name="campaign" size={25} color={'white'} />
-                                    </View>
+                                    // </View>
                                  }
                                  title={item.title}
                                  desc={item.desc.replace(/<[^>]*>?/gm, '').replace(/\r?\n|\r/g, ' ')}

components/borderBottomItem.tsx

@@ -18,17 +18,14 @@ type Props = {
    rightBottomInfo?: React.ReactNode | string
    titleWeight?: 'normal' | 'bold'
    bgColor?: string
-   width?: number
    descEllipsize?: boolean
    textColor?: string,
    colorPress?: boolean
    titleShowAll?: boolean
 }
 
-export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll }: Props) {
+export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, descEllipsize, textColor, colorPress, titleShowAll }: Props) {
-   const lebarDim = Dimensions.get("window").width;
    const { colors } = useTheme();
-   const lebar = width ? lebarDim * width / 100 : 'auto';
    const textColorFix = textColor ? textColor : colors.text;
    const [isTap, setIsTap] = useState(false);
 
@@ -50,8 +47,8 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
       >
          <View style={[Styles.rowItemsCenter]}>
             {icon}
-            <View style={[Styles.rowSpaceBetween, width ? { width: lebar } : { width: '88%' }]}>
+            <View style={[Styles.rowSpaceBetween, Styles.flex1]}>
-               <View style={[Styles.ml10, rightTopInfo ? { width: '70%' } : { width: '90%' }]}>
+               <View style={[Styles.ml10, Styles.flex1, Styles.mr10]}>
                   <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
                   {
                      subtitle &&
@@ -81,7 +78,7 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
                   }
                   {
                      typeof rightBottomInfo == 'string' ?
-                        <Text style={[Styles.textInformation, {color: colors.dimmed }]}>{rightBottomInfo}</Text>
+                        <Text style={[Styles.textInformation, { color: colors.dimmed }]}>{rightBottomInfo}</Text>
                         :
                         rightBottomInfo
                   }

components/borderBottomItemVertical.tsx

@@ -1,7 +1,7 @@
 import Styles from "@/constants/Styles";
 import { useTheme } from "@/providers/ThemeProvider";
 import React, { useState } from "react";
-import { Dimensions, Pressable, View } from "react-native";
+import { Pressable, View } from "react-native";
 import Text from "./Text";
 
 type Props = {
@@ -36,9 +36,9 @@ export default function BorderBottomItemVertical({ title, icon, desc, onPress, o
       >
          <View style={Styles.rowItemsCenter}>
             {icon}
-            <View style={[Styles.ml10, { flex: 1 }]}>
+            <View style={[Styles.ml10, Styles.flex1]}>
                <View style={Styles.rowSpaceBetween}>
-                  <View style={{ flex: 1, marginRight: 10 }}>
+                  <View style={[Styles.flex1, Styles.mr10]}>
                      <Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold, { color: textColorFix }]} numberOfLines={titleShowAll ? 0 : 1} ellipsizeMode='tail'>{title}</Text>
                   </View>
                   {

components/division/FiturGridItem.tsx

@@ -0,0 +1,38 @@
+import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import React from "react";
+import { Pressable, View } from "react-native";
+import Text from "../Text";
+
+type Props = {
+   title: string;
+   subtitle: string;
+   icon: React.ReactNode;
+   onPress: () => void;
+};
+
+export default function FiturGridItem({ title, subtitle, icon, onPress }: Props) {
+   const { colors } = useTheme();
+
+   return (
+      <Pressable
+         onPress={onPress}
+         style={({ pressed }) => [
+            Styles.wrapGridItem,
+            {
+               backgroundColor: colors.card,
+               borderColor: colors.icon + '20',
+            },
+            pressed && { opacity: 0.7 }
+         ]}
+      >
+         <View style={[Styles.p05, { marginRight: 10 }]}>
+            {icon}
+         </View>
+         <View style={{ flex: 1 }}>
+            <Text style={[Styles.textDefaultSemiBold, { color: colors.text, lineHeight: 20 }]} numberOfLines={1}>{title}</Text>
+            <Text style={[Styles.textMediumNormal, { color: colors.dimmed, lineHeight: 15 }]} numberOfLines={1}>{subtitle}</Text>
+         </View>
+      </Pressable>
+   );
+}

components/division/fiturDivisionDetail.tsx

@@ -6,9 +6,9 @@ import { AntDesign, Feather, MaterialIcons, SimpleLineIcons } from "@expo/vector
 import { router, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
 import { View } from "react-native"
-import BorderBottomItem from "../borderBottomItem"
 import { useTheme } from "@/providers/ThemeProvider"
 import Text from "../Text"
+import FiturGridItem from "./FiturGridItem"
 
 type Props = {
    tugas: number
@@ -50,66 +50,34 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Fitur</Text>
-         <View>
+         <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
-            <View style={[Styles.rowSpaceBetween]}>
+            <FiturGridItem
-               <BorderBottomItem
+               title="Tugas"
-                  bgColor={colors.card}
+               subtitle={`${data.tugas} Tugas`}
-                  borderType="all"
+               icon={<AntDesign name="filetext1" size={28} color={colors.text} />}
-                  icon={
+               onPress={() => { router.push(`/division/${id}/task?status=0`) }}
-                     <View style={[Styles.p05]}>
+            />
-                        <AntDesign name="filetext1" size={28} color={colors.text} />
-                     </View>
-                  }
-                  title="Tugas"
-                  subtitle={`${data.tugas} Tugas`}
-                  width={30}
-                  onPress={() => { router.push(`/division/${id}/task?status=0`) }}
-               />
 
-               <BorderBottomItem
+            <FiturGridItem
-                  bgColor={colors.card}
+               title="Dokumen"
-                  borderType="all"
+               subtitle={`${data.dokumen} File`}
-                  icon={
+               icon={<Feather name="paperclip" size={28} color={colors.text} />}
-                     <View style={[Styles.p05]}>
+               onPress={() => { router.push(`/division/${id}/document`) }}
-                        <Feather name="paperclip" size={28} color={colors.text} />
+            />
-                     </View>
-                  }
-                  title="Dokumen"
-                  subtitle={`${data.dokumen} File`}
-                  width={30}
-                  onPress={() => { router.push(`/division/${id}/document`) }}
-               />
-            </View>
 
-            <View style={[Styles.rowSpaceBetween]}>
+            <FiturGridItem
-               <BorderBottomItem
+               title="Diskusi"
-                  bgColor={colors.card}
+               subtitle={`${data.diskusi} Diskusi`}
-                  borderType="all"
+               icon={<SimpleLineIcons name="bubbles" size={28} color={colors.text} />}
-                  icon={
+               onPress={() => { router.push(`/division/${id}/discussion?active=true`) }}
-                     <View style={[Styles.p05]}>
+            />
-                        <SimpleLineIcons name="bubbles" size={28} color={colors.text} />
-                     </View>
-                  }
-                  title="Diskusi"
-                  subtitle={`${data.diskusi} Diskusi`}
-                  width={30}
-                  onPress={() => { router.push(`/division/${id}/discussion?active=true`) }}
-               />
 
-               <BorderBottomItem
+            <FiturGridItem
-                  bgColor={colors.card}
+               title="Kalender"
-                  borderType="all"
+               subtitle={`${data.kalender} Acara`}
-                  icon={
+               icon={<AntDesign name="calendar" size={28} color={colors.text} />}
-                     <View style={[Styles.p05]}>
+               onPress={() => { router.push(`/division/${id}/calendar`) }}
-                        <AntDesign name="calendar" size={28} color={colors.text} />
+            />
-                     </View>
-                  }
-                  title="Kalender"
-                  subtitle={`${data.kalender} Acara`}
-                  width={30}
-                  onPress={() => { router.push(`/division/${id}/calendar`) }}
-               />
-            </View>
          </View>
       </View>
    )

constants/Styles.ts

@@ -780,6 +780,18 @@ const Styles = StyleSheet.create({
       width: 1,
       height: '100%',
    },
+   wrapGridItem: {
+      borderWidth: 1,
+      borderRadius: 5,
+      padding: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      width: '48.5%',
+      marginBottom: 10,
+   },
+   flex1: {
+      flex: 1
+   }
 })
 
 export default Styles;