# style:

- UI Investasi
- UI Donasi
## No issue

src/app_modules/investasi/detail_prospektus/layout.tsx

@@ -1,12 +1,8 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
-import { IconArrowLeft } from "@tabler/icons-react";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { useRouter } from "next/navigation";
-import router from "next/router";
-import { title } from "process";
 import React from "react";
 
 export default function LayoutDetailProspektus({
@@ -17,11 +13,11 @@ export default function LayoutDetailProspektus({
   const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Prospektus" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Prospektus" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/detail_prospektus/view.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { Paper, Grid, Center, Text, Title } from "@mantine/core";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { Center, Group, Paper, Text, Title } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
 import Link from "next/link";
-import {
-  MODEL_Investasi,
-  Model_Prospektus_Investasi,
-} from "../model/model_investasi";
 import { useState } from "react";
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  MODEL_Investasi
+} from "../model/model_investasi";
 
 export default function DetailPropektus({
   dataInvestasi,
@@ -21,21 +21,28 @@ export default function DetailPropektus({
     <>
       {prospek.ProspektusInvestasi !== null ? (
         <Link
-          href={RouterInvestasi.api_file_prospektus + `${prospek.ProspektusInvestasi.id}`}
+          href={
+            RouterInvestasi.api_file_prospektus +
+            `${prospek.ProspektusInvestasi.id}`
+          }
           target="_blank"
           style={{ textDecorationLine: "none" }}
         >
-          <Paper w={"100%"} bg={"gray"} mb={"md"}>
-            <Grid align="center" justify="center" px={"sm"}>
-              <Grid.Col span={10}>
-                <Text>Prospektus_{prospek.title}</Text>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Center>
-                  <IconChevronRight />
-                </Center>
-              </Grid.Col>
-            </Grid>
+          <Paper
+            style={{
+              padding:"15px",
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              color: "white",
+            }}
+          >
+            <Group position="apart">
+              <Text w={"80%"} lineClamp={1}>Prospektus_{prospek.title}</Text>
+              <Center>
+                <IconChevronRight />
+              </Center>
+            </Group>
           </Paper>
         </Link>
       ) : (