design dark mode layout panel page

This commit is contained in:
Ehsan
2024-09-27 16:07:12 +03:30
parent 3fe2b8ee85
commit af46e780b7
10 changed files with 34 additions and 16 deletions
+3 -3
View File
@@ -13,7 +13,7 @@ function Icons() {
<Button
className="
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
!w-[32px] md:!w-[36px] lg:!w-[40px]
!w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
!h-[32px] md:!h-[36px] lg:!h-[40px] md:!hidden
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
@@ -25,7 +25,7 @@ function Icons() {
<Button
className="
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
!w-[32px] md:!w-[36px] lg:!w-[40px]
!w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
!h-[32px] md:!h-[36px] lg:!h-[40px]
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
@@ -37,7 +37,7 @@ function Icons() {
<Button
className="
!w-[32px] md:!w-[36px] lg:!w-[40px]
!h-[32px] md:!h-[36px] lg:!h-[40px]
!h-[32px] md:!h-[36px] lg:!h-[40px] dark:!border-[#343645]
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
!p-[8px] !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
+4 -3
View File
@@ -7,9 +7,10 @@ function Header({ disableProfile, data, setActive }) {
return (
<div
className="
h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
"
h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
dark:bg-[#222433] dark:border-transparent
flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
"
>
<SideButton setActive={setActive} />
<Search />
+2 -2
View File
@@ -30,8 +30,8 @@ function Sidebar({ active, setActive, open, setOpen }) {
z-30 md:top-0 md:right-0 w-[85%]
${active ? " right-0" : "right-[-85%]"}
overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed
border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
transition-all duration-500
border-0 border-l border-l-[#EFEFEF] bg-[#FFF] dark:bg-[#222433]
transition-all duration-500 dark:border-transparent
${open ? "md:w-[243px]" : "md:w-[92px] hover:md:w-[243px]"}
`}
>
+2 -2
View File
@@ -6,8 +6,8 @@ function UserDetail({ data, loading }) {
return (
<div className="hidden xl:flex min-w-[332px] h-full opacity-page">
<div
className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
bg-[#FFF] py-[40px] px-[16px]"
className="min-w-[337px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
g-[#FFF] py-[40px] px-[16px] bg-[#FFF] dark:bg-[#222433] dark:border-transparent"
>
<Head data={data} loading={loading} />
<span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px]"></span>