From ba6d8e27f9bde6795ebcc8176ac7dd8623e42007 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Thu, 5 Sep 2024 17:39:09 +0500
Subject: [PATCH] fixes and updates

---
 src/components/Clients.tsx             | 28 +++++++++++++++-----------
 src/components/Layout/FeedbackForm.tsx |  2 --
 src/components/Layout/ModalMenu.tsx    |  3 ---
 src/components/SelectPhoneCode.tsx     | 11 +++++-----
 4 files changed, 22 insertions(+), 22 deletions(-)
 delete mode 100644 src/components/Layout/ModalMenu.tsx

diff --git a/src/components/Clients.tsx b/src/components/Clients.tsx
index bca7611..97e16ac 100644
--- a/src/components/Clients.tsx
+++ b/src/components/Clients.tsx
@@ -2,12 +2,12 @@ import { clients } from '../consts/clients';
 
 export function Clients() {
   return (
-    <div className="space-y-6 overflow-hidden mt-16">
-      <div className="flex items-center overflow-hidden w-screen min-h-[117px]">
+    <div className="space-y-8">
+      <div className="flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 mt-10 min-h-[117px]">
         <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
         <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
       </div>
-      <div className="flex items-center overflow-hidden w-screen min-h-[117px]">
+      <div className="flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 min-h-[117px]">
         <MarqueeHalf
           reversed
           items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
@@ -17,7 +17,7 @@ export function Clients() {
           items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
         />
       </div>
-      <div className="border-b border-[#3D425C] flex items-center overflow-hidden w-screen min-h-[117px] pb-16">
+      <div className="border-b border-[#3D425C] flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 min-h-[117px] pb-16">
         <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
         <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
       </div>
@@ -35,17 +35,21 @@ function MarqueeHalf({
   return (
     <div
       className={
-        'flex flex-nowrap overflow-clip items-center py-2 [flex:0_0_auto] animate-infinite-scroll ' +
-        (reversed ? '[animation-direction:reverse]' : '')
+        'flex flex-nowrap ' +
+        (reversed
+          ? '[animation:infinite-scroll_45s_linear_infinite_reverse]'
+          : 'animate-infinite-scroll')
       }
     >
       {items.map(client => (
-        <img
-          key={client.src}
-          src={client.src}
-          alt={client.src}
-          className="max-w-full h-auto !relative object-covesr mx-12"
-        />
+        <div className="border-l border-[#3D425C] w-[312px] h-[124px] flex justify-center items-center relative">
+          <img
+            key={client.src}
+            src={client.src}
+            alt={client.src}
+            className="!relative"
+          />
+        </div>
       ))}
     </div>
   );
diff --git a/src/components/Layout/FeedbackForm.tsx b/src/components/Layout/FeedbackForm.tsx
index dcef199..f51646c 100644
--- a/src/components/Layout/FeedbackForm.tsx
+++ b/src/components/Layout/FeedbackForm.tsx
@@ -210,5 +210,3 @@ export function FeedbackForm({
     </form>
   );
 }
-
-FeedbackForm.displayName = 'FeedbackForm';
diff --git a/src/components/Layout/ModalMenu.tsx b/src/components/Layout/ModalMenu.tsx
deleted file mode 100644
index eaf90a4..0000000
--- a/src/components/Layout/ModalMenu.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function ModalMenu() {
-  return <div></div>;
-}
diff --git a/src/components/SelectPhoneCode.tsx b/src/components/SelectPhoneCode.tsx
index 452fa84..4aea671 100644
--- a/src/components/SelectPhoneCode.tsx
+++ b/src/components/SelectPhoneCode.tsx
@@ -8,6 +8,7 @@ import { useRef, useState } from 'react';
 import { useOnClickOutside } from 'usehooks-ts';
 import { ChevronUpIcon } from './icons/ChevronUpIcon';
 import { ChevronDownIcon } from './icons/ChevronDownIcon';
+import { ClassNameWrapper } from '../hocs/ClassNameWrapper';
 
 export function SelectPhoneCode({
   currentPhoneCodeAndCountry: [currentPhoneCode, currentCountry],
@@ -23,10 +24,7 @@ export function SelectPhoneCode({
   useOnClickOutside(ref, () => setOpen(false));
 
   return (
-    <div
-      ref={ref}
-      className="relative flex flex-col sm:w-1/3 min-w-[max(10vw,20%)]"
-    >
+    <div ref={ref} className="relative flex flex-col sm:w-1/3 max-w-[350px]">
       <button
         className="flex gap-x-1 justify-between items-center relative"
         onClick={e => {
@@ -40,7 +38,10 @@ export function SelectPhoneCode({
           alt=""
         />
         <p className="h4">{currentPhoneCode}</p>
-        {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        <ClassNameWrapper
+          className="flex-1 max-sm:w-4 sm:max-lg:w-5"
+          element={open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+        />
       </button>
       {open && (
         <div className="space-y-1 absolute z-10 bg-[#14161F] top-[100%] -left-1 border border-t-0 rounded-b-lg border-[#3D425C] max-h-[300px] overflow-y-auto overflow-x-hidden">