fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: css variables for colors and shadows

Browse Source
This commit is contained in:
AlexSserb
2025-08-14 18:18:24 +04:00
parent 28004dc2a0
commit 43355b6ce3
12 changed files with 79 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/deals/components/desktop/Board/Board.tsx
View File

@ -17,7 +17,7 @@ const Board: FC<Props> = ({ board }) => {
const { onUpdateBoard } = useBoardsContext();
return (
<Flex>
<Flex p={"lg"}>
<SmallPageBlock active={selectedBoard?.id === board.id}>
<Group
px={"md"}

2
src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.module.css
View File

@ -1,7 +1,7 @@
.container {
flex-wrap: nowrap;
border-bottom: solid blue 3px;
border-bottom: solid dodgerblue 3px;
margin-bottom: 3px;
cursor: pointer;

2
src/app/deals/components/shared/DealCard/DealCard.module.css
View File

@ -1,7 +1,7 @@
.container {
@mixin light {
background-color: #e0f0f4;
background-color: var(--color-light-aqua);
}
@mixin dark {
background-color: var(--mantine-color-dark-7);

2
src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css
View File

@ -9,5 +9,5 @@
}
.header {
border-bottom: solid blue 3px;
border-bottom: solid dodgerblue 3px;
}

4
src/app/deals/contexts/BoardsContext.tsx
View File

@ -46,14 +46,14 @@ const useBoardsContextState = () => {
return;
}
if (selectedBoard) {
if (!selectedBoard) return;
let newBoard = boards.find(board => board.id === selectedBoard.id);
if (!newBoard && boards.length > 0) {
newBoard = boards[0];
}
setSelectedBoard(newBoard ?? null);
}
}, [boards]);
const { onCreateBoard, onUpdateBoard, onDeleteBoard } = useBoardsOperations(

15
src/app/global.css
View File

@ -1,7 +1,20 @@
@import "tailwindcss";
:root {
/* Colors */
--color-light-gray-blue: #f4f7fd;
--color-light-aqua: #e0f0f4;
--color-light-whitesmoke: #fcfdff;
--mantine-color-dark-7-5: #212121;
/* Shadows */
--light-shadow: 2px 2px 5px darkgray;
--light-thick-shadow: 4px 4px 10px darkgray;
--dark-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6);
--dark-thick-shadow: 5px 5px 10px 1px var(--mantine-color-dark-6);
}
body {
@mixin light {
background-color: #f4f7fd;
background-color: var(--color-light-gray-blue);
}
}

4
src/components/dnd/FunnelDnd/FunnelDnd.module.css
View File

@ -5,10 +5,10 @@
@media (max-width: 48em) {
@mixin dark {
box-shadow: 2px 2px 15px 1px var(--mantine-color-dark-6);
box-shadow: var(--dark-shadow);
}
@mixin light {
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
box-shadow: var(--light-shadow);
}
}
}

15
src/components/dnd/SortableDnd/SortableDnd.tsx
View File

@ -62,10 +62,12 @@ const SortableDnd = <T extends BaseItem>({
const sensors = useDndSensors();
const onDragEndLocal = ({ active, over }: DragEndEvent) => {
if (over && active.id !== over?.id && activeItem) {
const overIndex: number = items.findIndex(
({ id }) => id === over.id
);
if (!over || active.id === over?.id || !activeItem) {
setActive(null);
return;
}
const overIndex: number = items.findIndex(({ id }) => id === over.id);
const activeIndex: number = items.findIndex(
({ id }) => id === activeItem.id
);
@ -78,9 +80,7 @@ const SortableDnd = <T extends BaseItem>({
}
const leftLexorank: LexoRank | null =
leftIndex >= 0
? LexoRank.parse(items[leftIndex].lexorank)
: null;
leftIndex >= 0 ? LexoRank.parse(items[leftIndex].lexorank) : null;
const rightLexorank: LexoRank | null =
rightIndex < items.length
? LexoRank.parse(items[rightIndex].lexorank)
@ -95,7 +95,6 @@ const SortableDnd = <T extends BaseItem>({
onDragEnd(items[activeIndex].id, newLexorank);
const sortedItems = sortByLexorank(items);
setItems([...sortedItems]);
}
setActive(null);
};

13
src/components/layout/PageBlock/PageBlock.module.css
View File

@ -7,14 +7,13 @@
}
@media (min-width: 48em) {
padding: rem(35);
border-radius: rem(20);
padding: var(--mantine-spacing-md);
@mixin dark {
box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6);
box-shadow: var(--dark-thick-shadow);
}
@mixin light {
box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16);
box-shadow: var(--light-thick-shadow);
}
}
}
@ -22,17 +21,16 @@
.mobile-padding-height {
height: 100% !important;
@media (min-width: 48em) {
padding: rem(40);
height: 89vh;
}
}
.container-full-height {
min-height: calc(100vh - (rem(20) * 2));
min-height: calc(100vh - (var(--mantine-spacing-md) * 2));
}
.container-full-height-fixed {
height: calc(100vh - (rem(20) * 2));
height: calc(100vh - (var(--mantine-spacing-md) * 2));
}
.container-no-border-radius {
@ -45,7 +43,6 @@
height: 100vh;
width: 100vw;
border-radius: 0 !important;
padding: rem(40) rem(20) rem(20);
position: fixed;
top: 0;
left: 0;

6
src/components/layout/PageBlock/PageBlock.tsx
View File

@ -1,6 +1,7 @@
import { CSSProperties, FC, ReactNode } from "react";
import classNames from "classnames";
import styles from "./PageBlock.module.css";
import { Box } from "@mantine/core";
type Props = {
children: ReactNode;
@ -24,7 +25,8 @@ const PageBlock: FC<Props> = ({
transparent = false,
}) => {
return (
<div
<Box
bdrs={"lg"}
style={style}
className={classNames(
styles.container,
@ -36,7 +38,7 @@ const PageBlock: FC<Props> = ({
styles[className]
)}>
{children}
</div>
</Box>
);
};
export default PageBlock;

19
src/components/layout/SmallPageBlock/SmallPageBlock.module.css
View File

@ -1,36 +1,33 @@
.container {
border-radius: 20px;
margin: 18px;
@mixin dark {
background-color: #212121;
box-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6);
background-color: var(--mantine-color-dark-7-5);
box-shadow: var(--dark-shadow);
}
@mixin light {
background-color: #fcfdff;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.04);
background-color: var(--color-light-whitesmoke);
box-shadow: var(--light-shadow);
}
}
.container-active {
@mixin dark {
background-color: var(--mantine-color-dark-8);
box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6);
box-shadow: var(--dark-thick-shadow);
}
@mixin light {
background-color: white;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16);
box-shadow: var(--light-thick-shadow);
}
}
.container:hover {
@mixin dark {
background-color: var(--mantine-color-dark-8);
box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6);
box-shadow: var(--dark-thick-shadow);
}
@mixin light {
background-color: white;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16);
box-shadow: var(--light-thick-shadow);
}
}

6
src/components/layout/SmallPageBlock/SmallPageBlock.tsx
View File

@ -1,6 +1,7 @@
import { CSSProperties, FC, ReactNode } from "react";
import classNames from "classnames";
import styles from "@/components/layout/SmallPageBlock/SmallPageBlock.module.css";
import { Box } from "@mantine/core";
type Props = {
children: ReactNode;
@ -10,14 +11,15 @@ type Props = {
const SmallPageBlock: FC<Props> = ({ children, style, active = false }) => {
return (
<div
<Box
bdrs={"lg"}
className={classNames(
styles.container,
active && styles["container-active"]
)}
style={style}>
{children}
</div>
</Box>
);
};
export default SmallPageBlock;