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

feat: radius for inputs and buttons, shadow changes

Browse Source
This commit is contained in:
AlexSserb
2025-07-18 10:38:36 +04:00
parent 39b4d36a82
commit e033938a03
10 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/layout.tsx
View File

@ -21,7 +21,7 @@ type Props = {
export default function RootLayout({ children }: Props) { export default function RootLayout({ children }: Props) {
return ( return (
<html <html
lang="en" lang="ru"
{...mantineHtmlProps}> {...mantineHtmlProps}>
<head> <head>
<ColorSchemeScript /> <ColorSchemeScript />
@ -40,7 +40,9 @@ export default function RootLayout({ children }: Props) {
<title /> <title />
</head> </head>
<body> <body>
<MantineProvider theme={theme}> <MantineProvider
theme={theme}
defaultColorScheme={"dark"}>
<Header /> <Header />
{children} {children}
</MantineProvider> </MantineProvider>

1
components/ColorSchemeToggle/ActionToggle.module.css
View File

@ -1,5 +1,6 @@
.container { .container {
@mixin dark { @mixin dark {
background-color: var(--mantine-color-dark-7);
box-shadow: 0 2px 4px var(--mantine-color-dark-6), box-shadow: 0 2px 4px var(--mantine-color-dark-6),
0 4px 24px var(--mantine-color-dark-6); 0 4px 24px var(--mantine-color-dark-6);
} }

12
components/ColorSchemeToggle/ColorSchemeToggle.tsx
View File

@ -15,16 +15,16 @@ export function ColorSchemeToggle() {
getInitialValueInEffect: true, getInitialValueInEffect: true,
}); });
const toggleColorScheme = () => {
setColorScheme(computedColorScheme === "light" ? "dark" : "light");
};
return ( return (
<ActionIcon <ActionIcon
onClick={() => onClick={toggleColorScheme}
setColorScheme(
computedColorScheme === "light" ? "dark" : "light"
)
}
variant="default" variant="default"
size="xl" size="xl"
radius="md" radius="lg"
aria-label="Toggle color scheme" aria-label="Toggle color scheme"
className={style.container}> className={style.container}>
<IconSun <IconSun

4
components/LoginForm/LoginForm.tsx
View File

@ -21,7 +21,9 @@ const LoginForm: FC<Props> = ({ isCreatingId = false }) => {
}, },
}); });
const handleSubmit = (values: LoginForm) => {}; const handleSubmit = (values: LoginForm) => {
console.log(values);
};
const navigateToCreateId = () => redirect("/create-id"); const navigateToCreateId = () => redirect("/create-id");

13
components/Logo/Logo.tsx
View File

@ -1,4 +1,5 @@
import { Center, Divider, Image, Stack, Title } from "@mantine/core"; import { Center, Divider, Image, Stack, Title } from "@mantine/core";
import { myColor } from "@/theme";
type Props = { type Props = {
title?: string; title?: string;
@ -20,24 +21,18 @@ const Logo = ({ title }: Props) => {
mt={"md"}> mt={"md"}>
LogiDex LogiDex
</Title> </Title>
<Title
ta={"center"}
order={5}
mt={"sm"}
style={{ color: "#4AAAC7" }}>
Fulfillment & Delivery
</Title>
{title && ( {title && (
<Divider <Divider
w={"100%"} w={"100%"}
mt={"md"} my={"lg"}
/> />
)} )}
{title && ( {title && (
<Center> <Center>
<Title <Title
order={4} order={4}
my={"md"}> mb={"lg"}
style={{ color: myColor[6] }}>
{title} {title}
</Title> </Title>
</Center> </Center>

10
components/PageBlock/PageItem.module.css
View File

@ -1,16 +1,14 @@
.container { .container {
border-radius: rem(20); border-radius: rem(40);
background-color: white; background-color: white;
@mixin dark { @mixin dark {
background-color: var(--mantine-color-dark-8); background-color: var(--mantine-color-dark-8);
box-shadow: 0 8px 12px var(--mantine-color-dark-6), box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6);
0 8px 32px var(--mantine-color-dark-6);
} }
@mixin light { @mixin light {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16);
0 4px 24px rgba(0, 0, 0, 0.16);
} }
padding: rem(25); padding: rem(35);
} }
.container-full-height { .container-full-height {

11
components/PhoneInput/PhoneInput.module.css
View File

@ -7,3 +7,14 @@
color: white; color: white;
} }
} }
.country-search input {
@mixin dark {
background-color: var(--mantine-color-dark-6);
}
border-radius: 15px;
}
.country-dropdown {
border-radius: 15px;
}

3
components/PhoneInput/PhoneInput.tsx
View File

@ -69,7 +69,7 @@ const PhoneInput = ({
}, [value]); }, [value]);
const { readOnly, disabled } = props; const { readOnly, disabled } = props;
const leftSectionWidth = 100; const leftSectionWidth = 90;
return ( return (
<InputBase <InputBase
@ -95,7 +95,6 @@ const PhoneInput = ({
styles={{ styles={{
input: { input: {
fontSize: 17, fontSize: 17,
color: "primaryColor.1",
paddingLeft: `calc(${leftSectionWidth}px + var(--mantine-spacing-sm))`, paddingLeft: `calc(${leftSectionWidth}px + var(--mantine-spacing-sm))`,
}, },
section: { section: {

13
components/PhoneInput/components/CountrySelect.tsx
View File

@ -68,7 +68,7 @@ const CountrySelect = ({
</Text> </Text>
{item.code === country.code && ( {item.code === country.code && (
<Box> <Box>
<CheckIcon size={12} /> <CheckIcon size={14} />
</Box> </Box>
)} )}
</Group> </Group>
@ -86,7 +86,9 @@ const CountrySelect = ({
store={combobox} store={combobox}
width={350} width={350}
position={"bottom-start"} position={"bottom-start"}
withArrow classNames={{
dropdown: style["country-dropdown"],
}}
onOptionSubmit={val => { onOptionSubmit={val => {
setCountry(countryOptionsDataMap[val]); setCountry(countryOptionsDataMap[val]);
combobox.closeDropdown(); combobox.closeDropdown();
@ -101,8 +103,7 @@ const CountrySelect = ({
w={leftSectionWidth}> w={leftSectionWidth}>
<Flex <Flex
align={"center"} align={"center"}
px={5} ml={15}
ml={"md"}
w={"100%"} w={"100%"}
className={style["country-select"]}> className={style["country-select"]}>
<span> <span>
@ -117,10 +118,12 @@ const CountrySelect = ({
value={search} value={search}
onChange={event => setSearch(event.currentTarget.value)} onChange={event => setSearch(event.currentTarget.value)}
placeholder="Поиск..." placeholder="Поиск..."
className={style["country-search"]}
size={"md"}
/> />
<Combobox.Options> <Combobox.Options>
<ScrollArea.Autosize <ScrollArea.Autosize
mah={200} mah={250}
type="scroll"> type="scroll">
{options.length > 0 ? ( {options.length > 0 ? (
options options

19
theme.ts
View File

@ -1,6 +1,6 @@
import { createTheme, MantineColorsTuple } from "@mantine/core"; import { createTheme, MantineColorsTuple } from "@mantine/core";
const myColor: MantineColorsTuple = [ export const myColor: MantineColorsTuple = [
"#e2faff", "#e2faff",
"#d4eff8", "#d4eff8",
"#afdce9", "#afdce9",
@ -13,9 +13,26 @@ const myColor: MantineColorsTuple = [
"#00718c", "#00718c",
]; ];
const radius = "lg";
const size = "md";
export const theme = createTheme({ export const theme = createTheme({
colors: { colors: {
myColor, myColor,
}, },
primaryColor: "myColor", primaryColor: "myColor",
components: {
Button: {
defaultProps: {
radius,
size,
},
},
InputBase: {
defaultProps: {
radius,
size,
},
},
},
}); });