diff --git a/app/layout.tsx b/app/layout.tsx index 71cd35c..f89ea3d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -21,7 +21,7 @@ type Props = { export default function RootLayout({ children }: Props) { return ( @@ -40,7 +40,9 @@ export default function RootLayout({ children }: Props) { </head> <body> - <MantineProvider theme={theme}> + <MantineProvider + theme={theme} + defaultColorScheme={"dark"}> <Header /> {children} </MantineProvider> diff --git a/components/ColorSchemeToggle/ActionToggle.module.css b/components/ColorSchemeToggle/ActionToggle.module.css index a421b85..4c458e6 100644 --- a/components/ColorSchemeToggle/ActionToggle.module.css +++ b/components/ColorSchemeToggle/ActionToggle.module.css @@ -1,5 +1,6 @@ .container { @mixin dark { + background-color: var(--mantine-color-dark-7); box-shadow: 0 2px 4px var(--mantine-color-dark-6), 0 4px 24px var(--mantine-color-dark-6); } diff --git a/components/ColorSchemeToggle/ColorSchemeToggle.tsx b/components/ColorSchemeToggle/ColorSchemeToggle.tsx index 99b949e..2759331 100644 --- a/components/ColorSchemeToggle/ColorSchemeToggle.tsx +++ b/components/ColorSchemeToggle/ColorSchemeToggle.tsx @@ -15,16 +15,16 @@ export function ColorSchemeToggle() { getInitialValueInEffect: true, }); + const toggleColorScheme = () => { + setColorScheme(computedColorScheme === "light" ? "dark" : "light"); + }; + return ( <ActionIcon - onClick={() => - setColorScheme( - computedColorScheme === "light" ? "dark" : "light" - ) - } + onClick={toggleColorScheme} variant="default" size="xl" - radius="md" + radius="lg" aria-label="Toggle color scheme" className={style.container}> <IconSun diff --git a/components/LoginForm/LoginForm.tsx b/components/LoginForm/LoginForm.tsx index f4e3890..6a64ac9 100644 --- a/components/LoginForm/LoginForm.tsx +++ b/components/LoginForm/LoginForm.tsx @@ -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"); diff --git a/components/Logo/Logo.tsx b/components/Logo/Logo.tsx index 0f2f9d2..de1903f 100644 --- a/components/Logo/Logo.tsx +++ b/components/Logo/Logo.tsx @@ -1,4 +1,5 @@ import { Center, Divider, Image, Stack, Title } from "@mantine/core"; +import { myColor } from "@/theme"; type Props = { title?: string; @@ -20,24 +21,18 @@ const Logo = ({ title }: Props) => { mt={"md"}> LogiDex - - Fulfillment & Delivery - {title && ( )} {title && (
+ mb={"lg"} + style={{ color: myColor[6] }}> {title}
diff --git a/components/PageBlock/PageItem.module.css b/components/PageBlock/PageItem.module.css index c4cb7fb..2cf55ae 100644 --- a/components/PageBlock/PageItem.module.css +++ b/components/PageBlock/PageItem.module.css @@ -1,16 +1,14 @@ .container { - border-radius: rem(20); + border-radius: rem(40); background-color: white; @mixin dark { background-color: var(--mantine-color-dark-8); - box-shadow: 0 8px 12px var(--mantine-color-dark-6), - 0 8px 32px var(--mantine-color-dark-6); + box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6); } @mixin light { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), - 0 4px 24px rgba(0, 0, 0, 0.16); + box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16); } - padding: rem(25); + padding: rem(35); } .container-full-height { diff --git a/components/PhoneInput/PhoneInput.module.css b/components/PhoneInput/PhoneInput.module.css index 53a771d..a7e0bf3 100644 --- a/components/PhoneInput/PhoneInput.module.css +++ b/components/PhoneInput/PhoneInput.module.css @@ -7,3 +7,14 @@ color: white; } } + +.country-search input { + @mixin dark { + background-color: var(--mantine-color-dark-6); + } + border-radius: 15px; +} + +.country-dropdown { + border-radius: 15px; +} diff --git a/components/PhoneInput/PhoneInput.tsx b/components/PhoneInput/PhoneInput.tsx index 39e7a7f..9df8aa3 100644 --- a/components/PhoneInput/PhoneInput.tsx +++ b/components/PhoneInput/PhoneInput.tsx @@ -69,7 +69,7 @@ const PhoneInput = ({ }, [value]); const { readOnly, disabled } = props; - const leftSectionWidth = 100; + const leftSectionWidth = 90; return ( {item.code === country.code && ( - + )} @@ -86,7 +86,9 @@ const CountrySelect = ({ store={combobox} width={350} position={"bottom-start"} - withArrow + classNames={{ + dropdown: style["country-dropdown"], + }} onOptionSubmit={val => { setCountry(countryOptionsDataMap[val]); combobox.closeDropdown(); @@ -101,8 +103,7 @@ const CountrySelect = ({ w={leftSectionWidth}> @@ -117,10 +118,12 @@ const CountrySelect = ({ value={search} onChange={event => setSearch(event.currentTarget.value)} placeholder="Поиск..." + className={style["country-search"]} + size={"md"} /> {options.length > 0 ? ( options diff --git a/theme.ts b/theme.ts index c85f1e5..25e7c9d 100644 --- a/theme.ts +++ b/theme.ts @@ -1,6 +1,6 @@ import { createTheme, MantineColorsTuple } from "@mantine/core"; -const myColor: MantineColorsTuple = [ +export const myColor: MantineColorsTuple = [ "#e2faff", "#d4eff8", "#afdce9", @@ -13,9 +13,26 @@ const myColor: MantineColorsTuple = [ "#00718c", ]; +const radius = "lg"; +const size = "md"; + export const theme = createTheme({ colors: { myColor, }, primaryColor: "myColor", + components: { + Button: { + defaultProps: { + radius, + size, + }, + }, + InputBase: { + defaultProps: { + radius, + size, + }, + }, + }, });