From 0157a63201f22cc70def40a72ab5b351564ae298 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Wed, 15 Jan 2025 14:55:54 +0300
Subject: [PATCH] Feat: fixed mobile dnd and styles

---
 src/components/EditTierModal.tsx | 11 ++++++++---
 src/components/Tier.scss         |  6 ++++--
 src/components/Tier.tsx          |  2 +-
 src/components/TierModal.tsx     | 11 ++++++++++-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/EditTierModal.tsx b/src/components/EditTierModal.tsx
index 6225d24..c52ff95 100644
--- a/src/components/EditTierModal.tsx
+++ b/src/components/EditTierModal.tsx
@@ -1,14 +1,19 @@
 import { useEffect, useState } from 'react';
 import { useShallow } from 'zustand/shallow';
 import useStore from '../store';
-
 export const EditTierModal = () => {
   const [tierLevel, setTierLevel, editTierLevel] = useStore(
     useShallow(state => [state.editingTierLevel, state.setEditingTierLevel, state.editTierLevelName]),
   );
   const [newName, setNewName] = useState('');
   useEffect(() => {
-    if (tierLevel) setNewName(tierLevel.name);
+    if (tierLevel) {
+      setNewName(tierLevel.name);
+      document.body.style.overflow = 'hidden';
+    } else document.body.style.overflow = 'auto';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
   }, [tierLevel]);
   return (
     <div
@@ -20,7 +25,7 @@ export const EditTierModal = () => {
       }}
     >
       <div
-        className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex w-2/5 h-1/4 bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-row gap-4 justify-center items-center text-white border-white border-2`}
+        className={`absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] flex md:w-2/5 w-5/6 h-1/4 bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-row gap-4 justify-center items-center text-white border-white border-2`}
         onClick={e => {
           e.preventDefault();
           e.stopPropagation();
diff --git a/src/components/Tier.scss b/src/components/Tier.scss
index 47c405a..a0b7261 100644
--- a/src/components/Tier.scss
+++ b/src/components/Tier.scss
@@ -1,5 +1,7 @@
 .tier_name:hover {
-  button {
-    opacity: 1;
+  @media(min-width: 768px) {
+    button {
+      opacity: 1;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/components/Tier.tsx b/src/components/Tier.tsx
index 13be0b0..885789b 100644
--- a/src/components/Tier.tsx
+++ b/src/components/Tier.tsx
@@ -49,7 +49,7 @@ export const Tier = ({ color, name, textColor, id }: TierProps) => {
           }}
         >
           <button
-            className='absolute right-[5%] top-[5%] opacity-0 transition duration-250 ease-in-out'
+            className='absolute right-[5%] top-[5%] md:opacity-0 transition duration-250 ease-in-out'
             onClick={() => {
               setEditingTierLevel({ name, color, textColor, id });
             }}
diff --git a/src/components/TierModal.tsx b/src/components/TierModal.tsx
index 8d92b63..c953b6d 100644
--- a/src/components/TierModal.tsx
+++ b/src/components/TierModal.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useShallow } from 'zustand/shallow';
 import useStore from '../store';
 import { TierModalCategory } from './TierModalCategory';
@@ -5,11 +6,19 @@ import { TierModalCategory } from './TierModalCategory';
 export const TierModal = () => {
   const [modalOpen, tierLevels] = useStore(useShallow(state => [state.tierLevelsModalOpen, state.tierLevels]));
 
+  useEffect(() => {
+    if (modalOpen) document.body.style.overflow = 'hidden';
+    else document.body.style.overflow = 'auto';
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [modalOpen]);
+
   return (
     <div
       className={`fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] ${
         modalOpen ? 'flex' : 'hidden'
-      } min-w-[300px] md:w-[70vw] md:h-1/4 h-[90vh] bg-[#2d3436] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-col md:flex-row gap-4 justify-center items-center text-white border-white border-2`}
+      } min-w-[300px] md:w-[70vw] md:h-1/4 h-[90vh] bg-[#1e2324] ps-8 pe-8 pt-8 pb-8 z-50 rounded-3xl flex-col md:flex-row gap-4 justify-center items-center text-white border-white border-2`}
     >
       {tierLevels.map(tier_level => (
         <TierModalCategory name={tier_level.name} color={tier_level.color} textColor={tier_level.textColor} />