hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode page add-doctor & user account

Browse Source
This commit is contained in:
Ehsan
2024-10-16 20:59:11 +03:30
parent b561b111ec
commit dee7f1ec27
14 changed files with 61 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/SwitchTable.js
+1 -1
View File
@@ -50,7 +50,7 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
function SwitchTable({ value }) {
return (
<FormGroup>
<FormGroup className="custom-switch">
<FormControlLabel
control={<MaterialUISwitch defaultChecked={value} sx={{ m: 1 }} />}
/>
app/globals.css
+8
View File
@@ -600,6 +600,14 @@ html {
border-radius: 20px;
}
.dark .custom-switch .MuiSwitch-track {
border: 1px solid #343645 !important;
}
.dark .custom-switch .MuiSwitch-thumb::before {
background: #d7d8ed;
}
/* End Of Dark Style */
/* Dark Date Picker */
components/icons/UserEdit.js
+3 -1
View File
@@ -14,7 +14,9 @@ function UserEdit({ active }) {
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
className={active ? "stroke-[#FAFAFA] delay-500" : ""}
className={
active ? "stroke-[#FAFAFA] delay-500" : ""
}
/>
<path
d="M32.5166 26.2334L26.6165 32.1334C26.3832 32.3668 26.1666 32.8 26.1166 33.1167L25.7999 35.3667C25.6832 36.1833 26.2499 36.75 27.0666 36.6334L29.3165 36.3167C29.6332 36.2667 30.0832 36.05 30.2999 35.8167L36.1999 29.9167C37.2165 28.9001 37.6999 27.7167 36.1999 26.2167C34.7165 24.7333 33.5333 25.2167 32.5166 26.2334Z"
components/layoutPanel/sidebar/index.js
+1 -1
View File
@@ -37,7 +37,7 @@ function Sidebar({ active, setActive, open, setOpen }) {
<Links open={open} setActive={setActive} />
</div>
<div
className={`w-full justify-center overflow-hidden transition-all duration-500 ${
className={`w-full flex justify-center overflow-hidden transition-all duration-500 ${
open ? "!max-w-full" : "!max-w-0"
}`}
>
components/panel/addDoctor/Step.js
+4 -3
View File
@@ -18,7 +18,7 @@ function Step({ value }) {
className={`flex items-center bg-[#F6F6F6] justify-center p-[18px]
w-[32px] h-[32px] sm:w-[46px] sm:h-[46px] md:w-[60px] md:h-[60px] lg:w-[75px] lg:h-[75px] rounded-full
relative overflow-hidden before:delay-500 before:transition-all before:duration-500
before:absolute before:w-full before:h-full before:bg-[#5559CE]
before:absolute before:w-full before:h-full before:bg-[#5559CE] dark:bg-[#D7D8ED]
${value >= idx ? "before:right-0" : "before:-right-full"}`}
>
<div className="z-10 delay-500">{item.icon}</div>
@@ -28,7 +28,7 @@ function Step({ value }) {
${
value >= idx
? "font-bold text-[#5559CE]"
: "font-normal text-[#616161]"
: "font-normal text-[#616161] dark:text-[#a1a1a1]"
}`}
>
{item.name}
@@ -36,7 +36,8 @@ function Step({ value }) {
</div>
{list.length > idx + 1 && (
<span
className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg:w-[100px]
className={`block rounded-[16px] transition-all duration-500 h-[2px]
bg-[#EFEFEF] dark:bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg:w-[100px]
relative overflow-hidden before:transition-all before:duration-500
before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear
components/panel/addDoctor/index.js
+1 -1
View File
@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
import Step from "./Step";
function AddDoctorPage() {
const [value, setValue] = useState(0);
const [value, setValue] = useState(2);
const [data, setData] = useState({
general: {
name: { value: "احسان احمدی", isEdit: false },
components/panel/addDoctor/listMenu/generalInformation/form/index.js
+2 -1
View File
@@ -92,7 +92,8 @@ function Form({ setValue, parent, data, setData }) {
</div>
<div className="mt-[40px] w-full flex justify-end">
<Button
className="!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
className={`!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
${!checkAllValues(data) && "opacity-60"}`}
onClick={() => setValue((prev) => prev + 1)}
disabled={!checkAllValues(data)}
variant="contained"
components/panel/addDoctor/listMenu/officeInformation/index.js
+2 -1
View File
@@ -9,7 +9,8 @@ function OfficeInformation({ setValue, parent, data, setData }) {
<Form parent={parent} setData={setData} data={data.office} />
<div className="mt-[40px] w-full flex justify-end">
<Button
className="!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
className={`!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
${!checkAllValues(data) && "opacity-60"}`}
disabled={!checkAllValues(data)}
onClick={() => setValue((prev) => prev + 1)}
variant="contained"
components/panel/addDoctor/listMenu/workingDays/modal/index.js
+10 -5
View File
@@ -3,7 +3,7 @@ import { styleDefault } from "@/mui";
import { Box, Button, Modal } from "@mui/material";
import Radios from "./Radios";
import Form from "./Form";
import { useState } from "react";
import { useEffect, useState } from "react";
function ContentModal({
open,
@@ -27,8 +27,13 @@ function ContentModal({
setValue(valueRadio);
};
const closeModal = () => {
handleClose();
setValue(0);
};
return (
<Modal open={open} onClose={handleClose}>
<Modal open={open} onClose={closeModal}>
<Box
sx={styleDefault}
className="!w-full !rounded-none md:!rounded-[8px] dark:!bg-[#222433] dark:!shadow-[0px_4px_25px_10px_#1F1D2B]
@@ -38,15 +43,15 @@ function ContentModal({
<p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اضافه کردن روز کاری
</p>
<Button variant="text" className="!p-1" onClick={handleClose}>
<Button variant="text" className="!p-1" onClick={closeModal}>
<CloseModalD />
</Button>
</div>
<div className="mx-0 md:mx-[52px]">
<Radios value={value} handleChange={handleChange} />
<Form
handleClose={handleClose}
isVacation={isVacation}
handleClose={closeModal}
isVacation={value}
dataChange={dataChange}
setData={setData}
parent={parent}
components/panel/userAccount/bank/List.js
+9 -9
View File
@@ -19,7 +19,7 @@ function List({ data, loading }) {
className="!border-0 !border-b !border-[#DBDBDB]"
>
<TableCell
className="!pr-[18px] !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !text-nowrap"
className="!pr-[18px] !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !text-nowrap"
align="center"
>
<TextLoading width={15} height={18} loading={loading}>
@@ -27,23 +27,23 @@ function List({ data, loading }) {
</TextLoading>
</TableCell>
<TableCell
className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
align="right"
>
<TextLoading width={30} height={18} loading={loading}>
<TextLoading width={50} height={18} loading={loading}>
{row.card_number}
</TextLoading>
</TableCell>
<TableCell
className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
align="right"
>
<TextLoading width={30} height={18} loading={loading}>
<TextLoading width={80} height={18} loading={loading}>
{row.shaba_number}
</TextLoading>
</TableCell>
<TableCell
className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
align="right"
>
<TextLoading width={30} height={18} loading={loading}>
@@ -51,12 +51,12 @@ function List({ data, loading }) {
</TextLoading>
</TableCell>
<TableCell
className="!text-start !bg-[#F8F8F8] !pr-[18px] !text-nowrap"
className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !pr-[18px] !text-nowrap"
align="right"
>
<TextLoading width={50} height={18} loading={loading}>
<div className="flex items-center justify-start gap-[16px]">
<p className="text-[16px] min-w-[60px] font-medium text-[#616161]">
<p className="text-[16px] min-w-[60px] dark:text-[#A1A1A1] font-medium text-[#616161]">
{row.status ? "فعال" : "غیر فعال"}
</p>
<SwitchTable value={row.status} />
@@ -64,7 +64,7 @@ function List({ data, loading }) {
</TextLoading>
</TableCell>
<TableCell
className="!text-center !bg-[#F8F8F8] !pr-[18px] !text-nowrap"
className="!text-center !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !pr-[18px] !text-nowrap"
align="right"
>
<div className="flex items-center justify-center gap-[4px]">
components/panel/userAccount/bank/head/index.js
+3 -1
View File
@@ -3,7 +3,9 @@ import ModalAddCard from "./modal";
function Head() {
return (
<div className="w-full flex items-center justify-between">
<p className="text-[#525252] text-[20px] font-bold">کارت های بانکی شما</p>
<p className="text-[#525252] dark:text-[#A1A1A1] text-[20px] font-bold">
کارت های بانکی شما
</p>
<ModalAddCard />
</div>
);
components/panel/userAccount/bank/head/modal/index.js
+4 -3
View File
@@ -33,10 +33,10 @@ function ModalAddCard() {
<Modal open={open} onClose={handleClose}>
<Box
sx={styleDefault}
className="!w-full !h-full md:!h-fit sm:!w-fit !rounded-none sm:!rounded-[8px] sm:!min-w-[524px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
className="!w-full dark:!bg-[#222433] dark:!shadow-none !h-full md:!h-fit sm:!w-fit !rounded-none sm:!rounded-[8px] sm:!min-w-[524px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
>
<div className="flex items-center justify-between w-full">
<p className="text-[#3B3B3B] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
<p className="text-[#3B3B3B] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اضافه کردن شماره کارت
</p>
<Button onClick={handleClose} className="!p-1" variant="text">
@@ -48,7 +48,8 @@ function ModalAddCard() {
<Button
variant="outlined"
onClick={handleClose}
className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !border-[#828DE0] dark:!bg-[#C7CEF4]
dark:!border-transparent dark:!text-[#5559CE] !text-[#828DE0] !text-[16px] !font-medium"
>
انصراف
</Button>
components/panel/userAccount/bank/index.js
+3 -3
View File
@@ -2,12 +2,12 @@ import Cards from "./cards";
import Head from "./head";
import List from "./List";
function Bank({ data }) {
function Bank({ data, loading }) {
return (
<div className="opacity-page">
<Head />
<List data={data} loading={false} />
<Cards data={data} loading={false} />
<List data={data} loading={loading} />
<Cards data={data} loading={loading} />
</div>
);
}
components/panel/userAccount/index.js
+10 -3
View File
@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useEffect, useState } from "react";
import Account from "./account";
import Bank from "./bank";
import Tab from "./Tab";
@@ -8,11 +8,18 @@ import Tab from "./Tab";
const listTab = ["حساب کاربری", "حساب بانکی"];
function UserAccountPage({ data }) {
const [value, setValue] = useState(1);
const [value, setValue] = useState(0);
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
const handleChange = (event, newValue) => setValue(newValue);
const components = [<Account />, <Bank data={data.bank} />];
const components = [<Account />, <Bank loading={loading} data={data.bank} />];
return (
<div