feat: radius for inputs and buttons, shadow changes

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