feat: radius for inputs and buttons, shadow changes

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);
   }

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

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");
 

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
             </Title>
-            <Title
-                ta={"center"}
-                order={5}
-                mt={"sm"}
-                style={{ color: "#4AAAC7" }}>
-                Fulfillment & Delivery
-            </Title>
             {title && (
                 <Divider
                     w={"100%"}
-                    mt={"md"}
+                    my={"lg"}
                 />
             )}
             {title && (
                 <Center>
                     <Title
                         order={4}
-                        my={"md"}>
+                        mb={"lg"}
+                        style={{ color: myColor[6] }}>
                         {title}
                     </Title>
                 </Center>

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 {

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;
+}

components/PhoneInput/PhoneInput.tsx

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

components/PhoneInput/components/CountrySelect.tsx

@@ -68,7 +68,7 @@ const CountrySelect = ({
                     </Text>
                     {item.code === country.code && (
                         <Box>
-                            <CheckIcon size={12} />
+                            <CheckIcon size={14} />
                         </Box>
                     )}
                 </Group>
@@ -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}>
                     <Flex
                         align={"center"}
-                        px={5}
-                        ml={"md"}
+                        ml={15}
                         w={"100%"}
                         className={style["country-select"]}>
                         <span>
@@ -117,10 +118,12 @@ const CountrySelect = ({
                     value={search}
                     onChange={event => setSearch(event.currentTarget.value)}
                     placeholder="Поиск..."
+                    className={style["country-search"]}
+                    size={"md"}
                 />
                 <Combobox.Options>
                     <ScrollArea.Autosize
-                        mah={200}
+                        mah={250}
                         type="scroll">
                         {options.length > 0 ? (
                             options