feat: styled create status button and header

This commit is contained in:
2025-08-13 10:51:02 +04:00
parent 838c9640a1
commit f2bba7e469
4 changed files with 15 additions and 11 deletions

View File

@ -28,7 +28,8 @@ const BoardsMobile = () => {
offsetScrollbars={"x"} offsetScrollbars={"x"}
scrollbars={"x"} scrollbars={"x"}
scrollbarSize={0} scrollbarSize={0}
w={"100vw"}> w={"100vw"}
mt={5}>
<Group <Group
wrap={"nowrap"} wrap={"nowrap"}
gap={0}> gap={0}>

View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { Box, Text } from "@mantine/core"; import { IconPlus } from "@tabler/icons-react";
import { Box } from "@mantine/core";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext"; import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput"; import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
@ -8,12 +9,9 @@ const CreateStatusButton = () => {
return ( return (
<Box <Box
ml={6}
className={"flex-nowrap border-b-3 border-blue-500 mb-3"}
style={{ style={{
borderWidth: 1,
borderStyle: "dashed",
borderColor: "gray",
width: "15vw",
minWidth: 150,
cursor: "pointer", cursor: "pointer",
}}> }}>
<InPlaceInput <InPlaceInput
@ -21,12 +19,17 @@ const CreateStatusButton = () => {
onComplete={onCreateStatus} onComplete={onCreateStatus}
getChildren={startEditing => ( getChildren={startEditing => (
<Box <Box
p={9} p={15}
onClick={() => startEditing()}> onClick={() => startEditing()}>
<Text>Создать колонку</Text> <IconPlus size={20} />
</Box> </Box>
)} )}
modalTitle={"Создание колонки"} modalTitle={"Создание колонки"}
inputStyles={{
wrapper: {
padding: 4,
},
}}
/> />
</Box> </Box>
); );

View File

@ -86,7 +86,7 @@ const Funnel: FC = () => {
<Group <Group
align={"start"} align={"start"}
wrap={"nowrap"} wrap={"nowrap"}
gap={"sm"}> gap={0}>
{renderFunnelDnd()} {renderFunnelDnd()}
</Group> </Group>
</ScrollArea> </ScrollArea>

View File

@ -36,7 +36,7 @@ const Header = () => {
const getMobileHeader = () => { const getMobileHeader = () => {
return ( return (
<Stack> <Stack gap={0}>
<Group justify={"space-between"}> <Group justify={"space-between"}>
<Box p={"md"}> <Box p={"md"}>
<IconChevronLeft /> <IconChevronLeft />