mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-14 02:20:12 +01:00
[FIX] Login screen image ui bug fix + fix footer icons when overflowing (#1602)
* login screen image ui bug fix + fixed footer icons * fix uneven top/botton padding on footer * patch Sidebar UI in mobile --------- Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield
GitHub
parent
26c220503c
commit
c139b09148
@ -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" }}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -85,7 +85,7 @@ export default function SettingsSidebar() {
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
ref={sidebarRef}
|
ref={sidebarRef}
|
||||||
className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar w-[80%] p-[18px] "
|
className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar w-[80%] p-[18px]"
|
||||||
>
|
>
|
||||||
<div className="w-full h-full flex flex-col overflow-x-hidden items-between">
|
<div className="w-full h-full flex flex-col overflow-x-hidden items-between">
|
||||||
{/* Header Information */}
|
{/* Header Information */}
|
||||||
@ -109,12 +109,14 @@ export default function SettingsSidebar() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 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-2 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">
|
</div>
|
||||||
<Footer />
|
<div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-50">
|
||||||
</div>
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -32,34 +32,34 @@ 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 gap-x-2 items-center justify-between">
|
<div className="flex flex-col gap-y-2 pb-[60px] overflow-y-scroll no-scroll">
|
||||||
{(!user || user?.role !== "default") && (
|
<div className="flex gap-x-2 items-center justify-between">
|
||||||
<button
|
{(!user || user?.role !== "default") && (
|
||||||
onClick={showNewWsModal}
|
<button
|
||||||
className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
|
onClick={showNewWsModal}
|
||||||
>
|
className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
|
||||||
<Plus size={18} weight="bold" />
|
>
|
||||||
<p className="text-sidebar text-sm font-semibold">
|
<Plus size={18} weight="bold" />
|
||||||
New Workspace
|
<p className="text-sidebar text-sm font-semibold">
|
||||||
</p>
|
New Workspace
|
||||||
</button>
|
</p>
|
||||||
)}
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<ActiveWorkspaces />
|
||||||
</div>
|
</div>
|
||||||
<ActiveWorkspaces />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col flex-grow justify-end mb-2">
|
<div className="absolute bottom-0 left-0 right-0 pt-4 pb-3 rounded-b-[16px] bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-30">
|
||||||
<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="z-99 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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user