# style:

- UI Investasi
- UI Donasi
## No issue

src/app_modules/donasi/edit/list_kabar/index.tsx

@@ -24,6 +24,7 @@ import { useRouter } from "next/navigation";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useState } from "react";
 import ComponentDonasi_ListKabar from "../../component/detail_main/list_kabar";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ListKabarDonasi({
   donasiId,
@@ -41,24 +42,20 @@ export default function ListKabarDonasi({
           leftIcon={<IconCirclePlus />}
           radius={"xl"}
           onClick={() => router.push(RouterDonasi.create_kabar + `${donasiId}`)}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Tambah Kabar
         </Button>
-        <SimpleGrid
-          cols={4}
-          spacing="lg"
-          breakpoints={[
-            { maxWidth: "62rem", cols: 3, spacing: "md" },
-            { maxWidth: "48rem", cols: 2, spacing: "sm" },
-            { maxWidth: "36rem", cols: 1, spacing: "sm" },
-          ]}
-        >
-          {kabar.map((e, i) => (
-           <Box key={i}>
-            <ComponentDonasi_ListKabar kabar={e} route={RouterDonasi.update_kabar}/>
-           </Box>
-          ))}
-        </SimpleGrid>
+        {kabar.map((e, i) => (
+          <Box key={i}>
+            <ComponentDonasi_ListKabar
+              kabar={e}
+              route={RouterDonasi.update_kabar}
+            />
+          </Box>
+        ))}
       </Stack>
     </>
   );

src/app_modules/donasi/edit/list_kabar/layout.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentDonasi_HeaderTamplate from "@/app_modules/donasi/component/header_tamplate";
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutListKabarDonasi({
@@ -12,10 +11,10 @@ export default function LayoutListKabarDonasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate 
-      header={<ComponentDonasi_HeaderTamplate title="List Kabar" />}>
+      <UIGlobal_LayoutTamplate 
+      header={<UIGlobal_LayoutHeaderTamplate title="Daftar Kabar" />}>
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/donasi/edit/update_kabar/index.tsx

@@ -15,6 +15,10 @@ import {
 import moment from "moment";
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useState } from "react";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function UpdateKabarDonasi({
   dataKabar,
@@ -24,10 +28,23 @@ export default function UpdateKabarDonasi({
   const [kabar, setKabar] = useState(dataKabar);
   return (
     <>
-      <Stack>
+      <Stack
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          padding: "20px",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
         <Stack>
-          <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
-          <Title order={5}>{kabar.title}</Title>
+          <Group position="right">
+            <Text fz={"xs"}>{moment(Date.now()).format("ll")}</Text>
+          </Group>
+          <Title align="center" order={4}>
+            {kabar.title}
+          </Title>
           {kabar.imagesId === null ? (
             ""
           ) : (

src/app_modules/donasi/edit/update_kabar/layout.tsx

@@ -18,6 +18,8 @@ import { Donasi_funDeleteKabar } from "../../fun/delete/fun_delete.kabar";
 import { NotifBerhasil } from "../../component/notifikasi/notif_berhasil";
 import { NotifGagal } from "../../component/notifikasi/notif_gagal";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutUpdateKabarDonasi({
   children,
@@ -30,28 +32,25 @@ export default function LayoutUpdateKabarDonasi({
 
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentDonasi_HeaderTamplate title="Update Kabar" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Update Kabar" />}
         footer={
-          <Footer height={70}>
-            <Group align="center" h={"100%"} position="center" spacing={"xl"}>
-              {/* <Button radius={"xl"} variant="outline" color="green">
+          <Group align="center" h={"100%"} position="center" spacing={"xl"}>
+            {/* <Button radius={"xl"} variant="outline" color="green">
                 Edit
               </Button> */}
-              <Button
-                radius={"xl"}
-                variant="outline"
-                color="red"
-                onClick={() => onDelete(router, kabarId)}
-              >
-                Hapus
-              </Button>
-            </Group>
-          </Footer>
+            <Button
+              radius={"xl"}
+              color="red"
+              onClick={() => onDelete(router, kabarId)}
+            >
+              Hapus
+            </Button>
+          </Group>
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }