From c29c787f092f0db792aa072418e836942972d5c4 Mon Sep 17 00:00:00 2001 From: Ehsan Date: Tue, 1 Oct 2024 19:05:36 +0330 Subject: [PATCH] design dark mode turns & add-doctor & account & layout and components MUI --- app/component/ButtonDate.js | 39 ++++++++++++ app/component/DatePickerContent.js | 37 +++++++++++ app/component/PopoverDate.js | 61 +++++++++++++++++++ app/component/TimePickerField.js | 2 +- app/component/UploadFile.js | 29 +++++++++ app/globals.css | 45 ++++++++++++-- components/icons/CloseModalD.js | 1 + components/icons/Sun.js | 28 +++++++++ components/layoutPanel/header/MenuProfile.js | 4 +- components/layoutPanel/header/icons/Theme.js | 3 +- .../listMenu/generalInformation/Head.js | 22 +------ .../generalInformation/form/FieldDate.js | 54 ++++++++++++++++ .../listMenu/generalInformation/form/Form.js | 14 +---- .../addDoctor/listMenu/workingDays/List.js | 14 ++--- .../workingDays/modal/ContentModal.js | 5 +- .../listMenu/workingDays/modal/Radios.js | 14 ++++- components/panel/turns/head/Date.js | 17 +----- components/panel/turns/head/FilterDate.js | 37 +++++++++++ components/panel/userAccount/Head.js | 20 +----- 19 files changed, 361 insertions(+), 85 deletions(-) create mode 100644 app/component/ButtonDate.js create mode 100644 app/component/DatePickerContent.js create mode 100644 app/component/PopoverDate.js create mode 100644 app/component/UploadFile.js create mode 100644 components/icons/Sun.js create mode 100644 components/panel/addDoctor/listMenu/generalInformation/form/FieldDate.js create mode 100644 components/panel/turns/head/FilterDate.js diff --git a/app/component/ButtonDate.js b/app/component/ButtonDate.js new file mode 100644 index 0000000..c064146 --- /dev/null +++ b/app/component/ButtonDate.js @@ -0,0 +1,39 @@ +import { Popover } from "@mui/material"; +import DatePickerContent from "./DatePickerContent"; + +function ButtonDate({ anchorEl, setAnchorEl, open, id, updateDate, children }) { + const handleClose = () => setAnchorEl(null); + + return ( + <> + {children} + + + + + ); +} + +export default ButtonDate; diff --git a/app/component/DatePickerContent.js b/app/component/DatePickerContent.js new file mode 100644 index 0000000..8c0b0aa --- /dev/null +++ b/app/component/DatePickerContent.js @@ -0,0 +1,37 @@ +import { DatePicker } from "jalaali-react-date-picker"; + +function DatePickerContent({ type, updateDate, handleClose }) { + return ( + ( +
+
شنبه
+
+ ۱ شنبه +
+
+ ۲ شنبه +
+
+ ۳ شنبه +
+
+ ۴ شنبه +
+
+ ۵ شنبه +
+
جمعه
+
+ )} + onChange={(e) => { + if (e._d) { + updateDate && updateDate(e._d, type); + } + handleClose && handleClose(); + }} + /> + ); +} + +export default DatePickerContent; diff --git a/app/component/PopoverDate.js b/app/component/PopoverDate.js new file mode 100644 index 0000000..aca6020 --- /dev/null +++ b/app/component/PopoverDate.js @@ -0,0 +1,61 @@ +import { useState } from "react"; +import { Button, Popover } from "@mui/material"; +import DatePickerContent from "./DatePickerContent"; + +function PopoverDate({ text, updateDate, type }) { + const [anchorEl, setAnchorEl] = useState(null); + + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const open = Boolean(anchorEl); + const id = open ? "simple-popover" : undefined; + + return ( +
+ + + + +
+ ); +} + +export default PopoverDate; diff --git a/app/component/TimePickerField.js b/app/component/TimePickerField.js index 0f0e480..88b42f9 100644 --- a/app/component/TimePickerField.js +++ b/app/component/TimePickerField.js @@ -70,7 +70,7 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) { }} />

diff --git a/app/component/UploadFile.js b/app/component/UploadFile.js new file mode 100644 index 0000000..d275d2a --- /dev/null +++ b/app/component/UploadFile.js @@ -0,0 +1,29 @@ +"use client"; + +import { Button } from "@mui/material"; +import ProfileP from "@/components/icons/ProfileP"; +import ArrowLeftPU from "@/components/icons/ArrowLeftPU"; + +function UploadFile({ fileRef, openInput }) { + return ( + <> + +

+ +
+ + + ); +} + +export default UploadFile; diff --git a/app/globals.css b/app/globals.css index f80a076..5dbbc1f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -583,6 +583,24 @@ html { color: #a1a1a1 !important; } +.dark .MuiOutlinedInput-notchedOutline { + border-color: #343645 !important; +} + +.dark + .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track { + background: #1f1d2b; + height: 50px; + border-radius: 10px; +} + +.dark + .MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb { + background: #222433; + height: 50px; + border-radius: 20px; +} + /* End Of Dark Style */ /* Dark Date Picker */ @@ -642,6 +660,28 @@ html { color: #fafafa; } +.panel-jalaali { + width: 464px !important; +} + +.day-label-bar, +.panel-header-inner, +.days-body { + max-width: 100% !important; + padding: 0 !important; +} + +.years-body-rtl, +.months-body-rtl { + min-width: 100%; + grid-template-columns: repeat(3, minmax(33.33%, 100px)) !important; +} + +.days-body { + width: 100%; + grid-template-columns: repeat(7, minmax(14.28%, 38px)) !important; +} + /* End Of Dark Date Picker */ /* End Date Picker Style */ @@ -670,11 +710,6 @@ html { -webkit-text-fill-color: rgba(161, 161, 161, 0.6) !important; } -.dark .MuiPaper-root { - background: #1f1d2b !important; - box-shadow: 0px 0px 14.2px 0px rgba(74, 73, 73, 0.19) !important; -} - .dark .MuiTabs-scroller, .dark .MuiTabs-flexContainer { border-bottom-color: #343645 !important; diff --git a/components/icons/CloseModalD.js b/components/icons/CloseModalD.js index 4e60f9b..66106f7 100644 --- a/components/icons/CloseModalD.js +++ b/components/icons/CloseModalD.js @@ -9,6 +9,7 @@ function CloseModalD() { > diff --git a/components/icons/Sun.js b/components/icons/Sun.js new file mode 100644 index 0000000..aee42b0 --- /dev/null +++ b/components/icons/Sun.js @@ -0,0 +1,28 @@ +function Sun() { + return ( + + + + + ); +} + +export default Sun; diff --git a/components/layoutPanel/header/MenuProfile.js b/components/layoutPanel/header/MenuProfile.js index b09e277..1d4a5bf 100644 --- a/components/layoutPanel/header/MenuProfile.js +++ b/components/layoutPanel/header/MenuProfile.js @@ -38,8 +38,8 @@ function MenuProfile({ data }) { width={48} />
-

- {data.name} +

+ دکتر {data.name}

{data.expertise} diff --git a/components/layoutPanel/header/icons/Theme.js b/components/layoutPanel/header/icons/Theme.js index d436b09..cb24cec 100644 --- a/components/layoutPanel/header/icons/Theme.js +++ b/components/layoutPanel/header/icons/Theme.js @@ -1,4 +1,5 @@ import MoonP from "@/components/icons/MoonP"; +import Sun from "@/components/icons/Sun"; import { Button } from "@mui/material"; import { useTheme } from "next-themes"; import { useState } from "react"; @@ -22,7 +23,7 @@ function Theme() { onClick={() => setTheme(theme === "light" ? "dark" : "light")} variant="outlined" > - + {theme === "light" ? : } ); } diff --git a/components/panel/addDoctor/listMenu/generalInformation/Head.js b/components/panel/addDoctor/listMenu/generalInformation/Head.js index 9a68046..54f810a 100644 --- a/components/panel/addDoctor/listMenu/generalInformation/Head.js +++ b/components/panel/addDoctor/listMenu/generalInformation/Head.js @@ -1,9 +1,5 @@ -"use client"; - +import UploadFile from "@/app/component/UploadFile"; import { useRef } from "react"; -import { Button } from "@mui/material"; -import ProfileP from "@/components/icons/ProfileP"; -import ArrowLeftPU from "@/components/icons/ArrowLeftPU"; function Head() { const fileRef = useRef(); @@ -12,21 +8,7 @@ function Head() { return (

- -
openInput()} - > - -
- +
); } diff --git a/components/panel/addDoctor/listMenu/generalInformation/form/FieldDate.js b/components/panel/addDoctor/listMenu/generalInformation/form/FieldDate.js new file mode 100644 index 0000000..bb00ab9 --- /dev/null +++ b/components/panel/addDoctor/listMenu/generalInformation/form/FieldDate.js @@ -0,0 +1,54 @@ +import { useState } from "react"; + +import { convertToJalali } from "@/helper"; +import EditField from "@/app/component/EditField"; +import ButtonDate from "@/app/component/ButtonDate"; +import CalendarPD from "@/components/icons/CalendarPD"; +import ContentText from "@/components/panel/ContentText"; + +function FieldDate({ changeListData, data }) { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const id = open ? "simple-popover" : undefined; + + const updateDate = (newDate) => { + const jalaliDate = newDate + ? convertToJalali(newDate) + : "تاریخ مد نظر پیدا نشد..."; + changeListData(jalaliDate, "value", "time_work"); + }; + + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + + return ( + + +
+ } + isTransparent={true} + iconGray={true} + name="time_work" + /> + +
+ + + ); +} + +export default FieldDate; diff --git a/components/panel/addDoctor/listMenu/generalInformation/form/Form.js b/components/panel/addDoctor/listMenu/generalInformation/form/Form.js index 989c78d..8ff2192 100644 --- a/components/panel/addDoctor/listMenu/generalInformation/form/Form.js +++ b/components/panel/addDoctor/listMenu/generalInformation/form/Form.js @@ -3,10 +3,10 @@ import ContentText from "@/components/panel/ContentText"; import EditField from "@/app/component/EditField"; import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"; import { degree } from "./listSelector"; -import CalendarPD from "@/components/icons/CalendarPD"; import RadioGender from "./RadioGender"; import { Button } from "@mui/material"; import ArrowLeftPA from "@/components/icons/ArrowLeftPA"; +import FieldDate from "./FieldDate"; function Form() { const [data, setData] = useState({ @@ -95,17 +95,7 @@ function Form() { - - } - isTransparent={true} - placeholder="انتخاب کنید..." - iconGray={true} - changeData={changeData} - data={data?.time_work} - name="time_work" - /> - +
- - +
); } diff --git a/components/panel/turns/head/FilterDate.js b/components/panel/turns/head/FilterDate.js new file mode 100644 index 0000000..3352e79 --- /dev/null +++ b/components/panel/turns/head/FilterDate.js @@ -0,0 +1,37 @@ +import { useState } from "react"; +import { convertToJalali } from "@/helper"; +import { ButtonGroup } from "@mui/material"; +import PopoverDate from "@/app/component/PopoverDate"; + +function FilterDate() { + const [date, setDate] = useState({ + start: null, + end: null, + }); + + const updateDate = (newDate, type) => { + setDate({ + ...date, + [type]: newDate, + }); + }; + + return ( + + + + + ); +} + +export default FilterDate; diff --git a/components/panel/userAccount/Head.js b/components/panel/userAccount/Head.js index 9a68046..286a644 100644 --- a/components/panel/userAccount/Head.js +++ b/components/panel/userAccount/Head.js @@ -1,9 +1,7 @@ "use client"; +import UploadFile from "@/app/component/UploadFile"; import { useRef } from "react"; -import { Button } from "@mui/material"; -import ProfileP from "@/components/icons/ProfileP"; -import ArrowLeftPU from "@/components/icons/ArrowLeftPU"; function Head() { const fileRef = useRef(); @@ -12,21 +10,7 @@ function Head() { return (
- -
openInput()} - > - -
- +
); }