style : update style

src/module/project/ui/create_users_project.tsx

@@ -1,8 +1,8 @@
 "use client"
-import { LayoutNavbarNew, SkeletonSingle, TEMA } from '@/module/_global';
+import { LayoutNavbarNew, SkeletonList, SkeletonSingle, SkeletonUser, TEMA } from '@/module/_global';
 import { useHookstate } from '@hookstate/core';
 import { ActionIcon, Avatar, Box, Button, Center, Divider, Flex, Grid, Indicator, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
@@ -24,6 +24,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
   const [openTugas, setOpenTugas] = useState(false)
   const [onClickSearch, setOnClickSearch] = useState(false)
   const tema = useHookstate(TEMA)
+  const isMobile2 = useMediaQuery("(max-width: 438px)");
 
   const handleFileClick = (index: number) => {
     if (selectedFiles.some((i: any) => i.idUser == dataMember[index].id)) {
@@ -136,7 +137,7 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
         borderBottom: `1px solid ${"#E0DFDF"}`
       }}>
         {selectedFiles.length > 0 ? (
-          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+          <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"}  withControls={false}>
             {selectedFiles.map((v: any, i: any) => {
               return (
                 <Carousel.Slide key={i}>
@@ -175,35 +176,43 @@ export default function CreateUsersProject({ grup, onClose }: { grup?: string, o
                 .fill(null)
                 .map((_, i) => (
                   <Box key={i}>
-                    <SkeletonSingle />
+                    <SkeletonList />
                   </Box>
                 ))
               :
               dataMember.map((v, index) => {
                 const isSelected = selectedFiles.some((i: any) => i.idUser == dataMember[index].id);
                 return (
-                  <Box mb={15} key={index} onClick={() => handleFileClick(index)}>
+                  <Box mb={10} key={index} onClick={() => handleFileClick(index)}>
                     <Grid align='center'>
-                      <Grid.Col span={{
-                        base: 3,
-                        xl: 2
-                      }}>
+                      <Grid.Col  span={{
+                          base: 1,
+                          xs: 1,
+                          sm: 1,
+                          md: 1,
+                          lg: 1,
+                          xl: 1,
+                        }}>
                         <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size="lg" />
                       </Grid.Col>
                       <Grid.Col span={{
-                        base: 9,
-                        xl: 10
-                      }}>
+                          base: 11,
+                          xs: 11,
+                          sm: 11,
+                          md: 11,
+                          lg: 11,
+                          xl: 11,
+                        }}>
                         <Flex justify='space-between' align={"center"}>
                           <Flex direction={'column'} align="flex-start" justify="flex-start">
-                            <Text lineClamp={1}>{v.name}</Text>
+                            <Text lineClamp={1} pl={isMobile2 ? 40 : 30}>{v.name}</Text>
                           </Flex>
                           {isSelected ? <FaCheck /> : null}
                         </Flex>
                       </Grid.Col>
                     </Grid>
                     <Box mt={10}>
-                      <Divider size={"xs"} />
+                      <Divider my={10} />
                     </Box>
                   </Box>
                 );