login screen image ui bug fix + fixed footer icons

This commit is contained in:
shatfield4 2024-06-03 20:49:31 -07:00
parent 0055de86e3
commit 1fbf8e95c3
3 changed files with 36 additions and 38 deletions

View File

@ -33,12 +33,12 @@ export default function PasswordModal({ mode = "single" }) {
alt="login illustration" alt="login illustration"
/> />
</div> </div>
<div className="flex flex-col items-center justify-center h-full w-full md:w-1/2 z-50 relative"> <div className="flex flex-col items-center justify-center h-full w-full md:w-1/2 z-50 relative -mt-20">
<img <img
src={loginLogo} src={loginLogo}
alt="Logo" alt="Logo"
className={`hidden md:flex rounded-2xl w-fit m-4 z-30 ${ className={`hidden relative md:flex rounded-2xl w-fit m-4 z-30 ${
mode === "single" ? "md:top-[170px]" : "md:top-36" mode === "single" ? "md:top-2" : "md:top-12"
} absolute max-h-[65px] md:bg-login-gradient md:shadow-[0_4px_14px_rgba(0,0,0,0.25)]`} } absolute max-h-[65px] md:bg-login-gradient md:shadow-[0_4px_14px_rgba(0,0,0,0.25)]`}
style={{ objectFit: "contain" }} style={{ objectFit: "contain" }}
/> />

View File

@ -111,10 +111,12 @@ export default function SettingsSidebar() {
{/* Primary Body */} {/* Primary Body */}
<div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-scroll no-scroll"> <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-scroll no-scroll">
<div className="h-auto md:sidebar-items md:dark:sidebar-items"> <div className="h-auto md:sidebar-items md:dark:sidebar-items">
<div className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll"> <div className="flex flex-col gap-y-4 pb-[60px] overflow-y-scroll no-scroll">
<SidebarOptions user={user} /> <SidebarOptions user={user} />
</div> </div>
</div> </div>
</div>
<div className="absolute bottom-6 left-0 right-0 pt-2 bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
<Footer /> <Footer />
</div> </div>
</div> </div>
@ -139,22 +141,21 @@ export default function SettingsSidebar() {
</Link> </Link>
<div <div
ref={sidebarRef} ref={sidebarRef}
style={{ height: "calc(100% - 76px)" }} className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px] h-[calc(100%-76px)]"
className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
> >
<div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]"> <div className="w-full h-full flex flex-col overflow-x-hidden items-between min-w-[235px]">
<div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2"> <div className="text-white text-opacity-60 text-sm font-medium uppercase mt-[4px] mb-0 ml-2">
Instance Settings Instance Settings
</div> </div>
<div className="relative h-full flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll"> <div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
<div className="h-auto sidebar-items"> <div className="h-auto sidebar-items">
<div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll"> <div className="flex flex-col gap-y-2 pb-[60px] overflow-y-scroll no-scroll">
<SidebarOptions user={user} /> <SidebarOptions user={user} />
</div> </div>
</div> </div>
<div className="mb-2">
<Footer />
</div> </div>
<div className="absolute bottom-0 left-0 right-0 pt-2 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-50">
<Footer />
</div> </div>
</div> </div>
</div> </div>

View File

@ -32,18 +32,17 @@ export default function Sidebar() {
<img <img
src={logo} src={logo}
alt="Logo" alt="Logo"
className="rounded max-h-[24px]" className="rounded max-h-[24px] object-contain"
style={{ objectFit: "contain" }}
/> />
</Link> </Link>
<div <div
ref={sidebarRef} ref={sidebarRef}
style={{ height: "calc(100% - 76px)" }} className="relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px] h-[calc(100%-76px)]"
className="relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
> >
<div className="flex flex-col h-full overflow-x-hidden"> <div className="flex flex-col h-full overflow-x-hidden">
<div className="flex-grow flex flex-col min-w-[235px]"> <div className="flex-grow flex flex-col min-w-[235px]">
<div className="flex flex-col gap-y-2 pb-8 overflow-y-scroll no-scroll"> <div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
<div className="flex flex-col gap-y-2 pb-[60px] overflow-y-scroll no-scroll">
<div className="flex gap-x-2 items-center justify-between"> <div className="flex gap-x-2 items-center justify-between">
{(!user || user?.role !== "default") && ( {(!user || user?.role !== "default") && (
<button <button
@ -59,7 +58,8 @@ export default function Sidebar() {
</div> </div>
<ActiveWorkspaces /> <ActiveWorkspaces />
</div> </div>
<div className="flex flex-col flex-grow justify-end mb-2"> </div>
<div className="absolute bottom-0 left-0 right-0 pt-2 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-50">
<Footer /> <Footer />
</div> </div>
</div> </div>
@ -156,12 +156,9 @@ export function SidebarMobileHeader() {
</div> </div>
{/* Primary Body */} {/* Primary Body */}
<div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden "> <div className="h-full flex flex-col w-full justify-between pt-4 ">
<div className="h-auto md:sidebar-items"> <div className="h-auto md:sidebar-items">
<div <div className=" flex flex-col gap-y-4 overflow-y-scroll no-scroll pb-[60px]">
style={{ height: "calc(100vw - -3rem)" }}
className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll"
>
<div className="flex gap-x-2 items-center justify-between"> <div className="flex gap-x-2 items-center justify-between">
{(!user || user?.role !== "default") && ( {(!user || user?.role !== "default") && (
<button <button
@ -178,7 +175,7 @@ export function SidebarMobileHeader() {
<ActiveWorkspaces /> <ActiveWorkspaces />
</div> </div>
</div> </div>
<div> <div className="absolute bottom-0 left-0 right-0 pt-2 pb-6 rounded-br-[26px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md">
<Footer /> <Footer />
</div> </div>
</div> </div>