feat : update btn and modal for better ui

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>
+            {submitText && (
               <Button onClick={submitOnClick}> {submitText} </Button>
+            )}
           </motion.div>
         </motion.div>
       </Modal>

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"

src/components/progressSpace/index.tsx

@@ -3,19 +3,22 @@ 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>
+          <span>{startSpace}</span>
         </div>
-      <div className="w-full rounded-full h-2.5 bg-gray-700">
+        <div className="w-full rounded-full h-2 md:h-2.5 bg-gray-700">
           <motion.div
-          className="bg-blue-600 h-2.5 rounded-full"
+            className="bg-secondTheme h-2 md:h-2.5 rounded-full"
             animate={{ width: `${startSpacePercentage}%` }}
             initial={{ width: 0 }}
             transition={{ type: "tween", duration: 1 }}
@@ -27,6 +30,13 @@ const ProgressSpace = ({ startSpace, endSpace }: ProgressSpaceProps) => {
           <span>GB</span>
         </div>
       </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>
+    </>
   );
 };
 

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

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 ">
+            <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">

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