#style:

- UI Event
- Perbaiki create button ke beberapa app
## No Issuee

src/app_modules/event/component/detail/detail_data.tsx

@@ -3,6 +3,10 @@
 import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
 import moment from "moment";
 import { MODEL_EVENT } from "../../model/interface";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_DetailData({
   data,
@@ -13,16 +17,25 @@ export default function ComponentEvent_DetailData({
   const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
 
   const jam = tgl.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
+    timeStyle: "short",
+    hourCycle: "h24",
   });
 
   return (
     <>
       {/* <pre>{JSON.stringify(jam)}</pre> */}
-      <Paper withBorder p={"md"} shadow="lg">
-        <Stack px={"sm"}>
-          <Title w={"100%"} order={4}>{data ? data?.title : null}</Title>
+      <Paper
+        p={"md"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
+        <Stack px={"sm"} spacing={"lg"}>
+          <Title lineClamp={2} align="center" w={"100%"} order={4}>
+            {data ? data?.title : null}
+          </Title>
           <Grid>
             <Grid.Col span={4}>
               <Text fw={"bold"} fz={"sm"}>
@@ -67,13 +80,7 @@ export default function ComponentEvent_DetailData({
             <Text fw={"bold"} fz={"sm"}>
               Deskripsi
             </Text>
-            <Spoiler
-              hideLabel="Lihat sedikit"
-              maxHeight={50}
-              showLabel="Lihat banyak"
-            >
-              {data ? data?.deskripsi : null}
-            </Spoiler>
+            <Text>{data ? data?.deskripsi : null}</Text>
           </Stack>
         </Stack>
       </Paper>

src/app_modules/event/component/detail/detail_main.tsx

@@ -4,6 +4,7 @@ import { Stack, Title, Grid, Text, Paper, Spoiler } from "@mantine/core";
 import moment from "moment";
 import { MODEL_EVENT } from "../../model/interface";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_DetailMainData({
   data,
@@ -13,14 +14,21 @@ export default function ComponentEvent_DetailMainData({
   const tgl = data.tanggal;
   const hari = tgl.toLocaleString("id-ID", { dateStyle: "full" });
 
-  const jam = tgl.toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
+ const jam = tgl.toLocaleTimeString([], {
+   timeStyle: "short",
+   hourCycle: "h24",
+ });
 
   return (
     <>
-      <Paper withBorder p={"md"} shadow="lg">
+      <Paper
+        p={"md"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
         <Stack>
           <ComponentGlobal_AuthorNameOnHeader
             authorName={data.Author.Profile.name}
@@ -28,7 +36,7 @@ export default function ComponentEvent_DetailMainData({
             profileId={data.Author.Profile.id}
           />
           <Stack px={"sm"}>
-            <Title order={4}>{data ? data.title : null}</Title>
+            <Title align="center" order={4}>{data ? data.title : null}</Title>
             <Grid>
               <Grid.Col span={4}>
                 <Text fw={"bold"} fz={"sm"}>
@@ -73,13 +81,7 @@ export default function ComponentEvent_DetailMainData({
               <Text fw={"bold"} fz={"sm"}>
                 Deskripsi
               </Text>
-              <Spoiler
-                hideLabel="Lihat sedikit"
-                maxHeight={50}
-                showLabel="Lihat banyak"
-              >
-                {data ? data.deskripsi : null}
-              </Spoiler>
+              <Text>{data ? data?.deskripsi : null}</Text>
             </Stack>
           </Stack>
         </Stack>

src/app_modules/event/component/detail/list_peserta.tsx

@@ -16,6 +16,7 @@ import _ from "lodash";
 import peserta from "../../main/kontribusi/peserta";
 import { MODEL_EVENT_PESERTA } from "../../model/interface";
 import { useRouter } from "next/navigation";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentEvent_ListPeserta({
   listPeserta,
@@ -24,10 +25,18 @@ export default function ComponentEvent_ListPeserta({
   listPeserta: MODEL_EVENT_PESERTA[];
   total: number;
 }) {
-  const router = useRouter()
+  const router = useRouter();
   return (
     <>
-      <Paper withBorder mt={"lg"}>
+      <Paper
+        mt={"lg"}
+        p={"md"}
+        style={{
+          border: `2px solid ${AccentColor.blue}`,
+          backgroundColor: AccentColor.darkblue,
+          color: "white",
+        }}
+      >
         <Stack spacing={"md"} p={"md"}>
           <Center>
             <Title order={5}>Daftar Peserta ({total})</Title>