From 114440f48c67b42f2beeff1db2f96d13ccfe9ec2 Mon Sep 17 00:00:00 2001
From: alij <ali.josheghani2005@gmail.com>
Date: Sun, 9 Jun 2024 22:48:22 -0700
Subject: [PATCH] feat : update btn and modal for better ui

---
 src/common/modal/index.tsx                    |  6 ++-
 src/components/button/index.tsx               |  4 +-
 src/components/progressSpace/index.tsx        | 46 +++++++++++--------
 .../profile/section/components/ConfigItem.tsx | 12 ++---
 .../section/components/ModalConfigDetails.tsx |  9 ++--
 src/types/props.d.ts                          |  2 +-
 6 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/common/modal/index.tsx b/src/common/modal/index.tsx
index 6897f01..c9beb56 100644
--- a/src/common/modal/index.tsx
+++ b/src/common/modal/index.tsx
@@ -54,9 +54,11 @@ export default function MuiModal({
           <motion.div className="w-full h-full flex flex-col justify-between text-center items-center">
             {children}
           </motion.div>
-          <motion.div className="w-full h-full flex justify-end items-center gap-2 md:gap-3 text-lg md:text-xl">
+          <motion.div className={`w-full h-full flex ${submitText ? 'justify-end' : 'justify-center' } items-center gap-2 md:gap-3 text-lg md:text-xl`}>
             <Button onClick={() => handleClose()}> بستن </Button>
-            <Button onClick={submitOnClick}> {submitText} </Button>
+            {submitText && (
+              <Button onClick={submitOnClick}> {submitText} </Button>
+            )}
           </motion.div>
         </motion.div>
       </Modal>
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index 26575f4..d9b5dc9 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -3,9 +3,9 @@ import { ButtonProps } from "../../types/props";
 function Button({ children, extra, active,...attrs }: ButtonProps) {
   return (
     <button
-      className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white ${
+      className={`px-4 py-1 md:px-5 md:py-2 rounded-md transition duration-300 ease-in-out transform bg-white text-[#333] hover:bg-gray-600 hover:text-white shadow-lg hover:!shadow-gray-600 ${
         active
-          ? "!bg-secondTheme shadow-secondTheme hover:shadow-gray-600 shadow-lg"
+          ? "!bg-secondTheme shadow-secondTheme shadow-lg hover:!shadow-gray-600"
           : ""
       } ${extra}`}
       type="button"
diff --git a/src/components/progressSpace/index.tsx b/src/components/progressSpace/index.tsx
index ba3753a..e71bb60 100644
--- a/src/components/progressSpace/index.tsx
+++ b/src/components/progressSpace/index.tsx
@@ -3,30 +3,40 @@ import { ProgressSpaceProps } from "../../types/props";
 
 const ProgressSpace = ({ startSpace, endSpace }: ProgressSpaceProps) => {
   let startSpacePercentage;
+  let remaining;
   if (typeof endSpace === "number") {
     startSpacePercentage = (startSpace / endSpace) * 100;
+    remaining = endSpace - startSpace;
   }
   return (
-    <div className="relative w-full h-full p-3 bg-gray-800 rounded-md flex gap-2 justify-center items-center">
-      <div className="flex gap-1">
-        <span>حجم </span>
-        <span>{startSpace}</span>
-        <span>GB</span>
+    <>
+      <div className="relative w-full h-full p-3 bg-gray-800 rounded-md flex gap-2 justify-center items-center">
+        <div className="flex gap-1">
+          <span>حجم </span>
+          <span>GB</span>
+          <span>{startSpace}</span>
+        </div>
+        <div className="w-full rounded-full h-2 md:h-2.5 bg-gray-700">
+          <motion.div
+            className="bg-secondTheme h-2 md:h-2.5 rounded-full"
+            animate={{ width: `${startSpacePercentage}%` }}
+            initial={{ width: 0 }}
+            transition={{ type: "tween", duration: 1 }}
+            style={{ transformOrigin: "right" }}
+          ></motion.div>
+        </div>
+        <div className="flex flex-row-reverse gap-1">
+          <span> {endSpace}</span>
+          <span>GB</span>
+        </div>
       </div>
-      <div className="w-full rounded-full h-2.5 bg-gray-700">
-        <motion.div
-          className="bg-blue-600 h-2.5 rounded-full"
-          animate={{ width: `${startSpacePercentage}%` }}
-          initial={{ width: 0 }}
-          transition={{ type: "tween", duration: 1 }}
-          style={{ transformOrigin: "right" }}
-        ></motion.div>
+      <div className="w-full h-full mt-1 p-2 text-center text-xs md:text-base">
+        <p>
+          {" "}
+          حجم باقیمانده کانفیگ شما از {endSpace} گیگ <span className="mx-1 border-b border-secondTheme">{remaining}</span>گیگ میباشد{" "}
+        </p>
       </div>
-      <div className="flex flex-row-reverse gap-1">
-        <span> {endSpace}</span>
-        <span>GB</span>
-      </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/pages/profile/section/components/ConfigItem.tsx b/src/pages/profile/section/components/ConfigItem.tsx
index 5898cd9..e0a49fb 100644
--- a/src/pages/profile/section/components/ConfigItem.tsx
+++ b/src/pages/profile/section/components/ConfigItem.tsx
@@ -25,16 +25,16 @@ const ConfigItem = ({ dateBuy, configName, isDisabled }: ConfigItemProps) => {
       <div className="relative w-full h-full rounded-md">
         {isDisabled && (
           <div className="absolute inset-0 flex items-center justify-center bg-opacity-50 rounded-md backdrop-blur-sm z-10">
-            <p className="text-white font-bold px-1 bg-red-600 text-xs md:text-base rounded-md shadow-md shadow-red-600">
+            <div className="text-white font-bold p-1 bg-red-600 text-xs md:text-base rounded-md shadow-md shadow-red-600">
               کانفیگ <span className="text-secondTheme">{configName}</span> غیر
               فعال است .{" "}
-              <span
-                className="text-secondTheme cursor-pointer"
+              <Button
+                extra="cursor-pointer !px-1 !py-0 rounded-md bg-white"
                 onClick={() => setIsOpen(true)}
               >
-                تمدید
-              </span>
-            </p>
+                برای تمدید کلیک کنید
+              </Button>
+            </div>
           </div>
         )}
         <div
diff --git a/src/pages/profile/section/components/ModalConfigDetails.tsx b/src/pages/profile/section/components/ModalConfigDetails.tsx
index 243f844..6401aec 100644
--- a/src/pages/profile/section/components/ModalConfigDetails.tsx
+++ b/src/pages/profile/section/components/ModalConfigDetails.tsx
@@ -22,7 +22,6 @@ const ModalConfigDetails = ({
     <MuiModal
       isOpenModal={isOpen}
       setIsOpenModal={setIsOpen}
-      submitText="باشه"
       nameService={nameConfig}
     >
       {isDisabled && <Alert type="warning"> {nameConfig} غیر فعال است </Alert>}
@@ -32,9 +31,11 @@ const ModalConfigDetails = ({
         </h1>
         <div className="w-full h-full flex flex-row-reverse gap-2 justify-center items-center">
           {isDisabled ? (
-            <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-secondTheme !bg-secondTheme ">
-              تمدید
-            </Button>
+            <div className="w-full h-full grid grid-cols-1 justify-center items-center">
+              <Button extra="!m-0 !px-2 !py-1 shadow-md shadow-secondTheme !bg-secondTheme font-bold hover:!bg-gray-800 hover:!shadow-gray-800 ">
+                تمدید
+              </Button>
+            </div>
           ) : (
             <>
               <Button extra="!m-0 !px-2 !py-1.5 flex flex-row-reverse justify-center items-center gap-1 shadow-md shadow-white">
diff --git a/src/types/props.d.ts b/src/types/props.d.ts
index 3257311..0ac74ef 100644
--- a/src/types/props.d.ts
+++ b/src/types/props.d.ts
@@ -107,7 +107,7 @@ export interface MuiModalProps {
   setIsOpenModal: SetStateAction;
   title?: string;
   nameService?: string;
-  submitText: string;
+  submitText?: string;
   submitOnClick?: () => void;
   children: React.ReactNode;
 }