From 2b4da2397ce4e9c5582bc5c371476ef80757fe5f Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Fri, 19 Jun 2026 16:02:12 +0300
Subject: [PATCH] style: ui fix to the auth shell

---
 .../portal/src/components/auth/AuthShell.tsx  | 80 +++++++++++++------
 1 file changed, 57 insertions(+), 23 deletions(-)

diff --git a/apps/edr-freight-web/portal/src/components/auth/AuthShell.tsx b/apps/edr-freight-web/portal/src/components/auth/AuthShell.tsx
index 96d55bdd0..5a4adf587 100644
--- a/apps/edr-freight-web/portal/src/components/auth/AuthShell.tsx
+++ b/apps/edr-freight-web/portal/src/components/auth/AuthShell.tsx
@@ -11,14 +11,24 @@ export const primaryButtonClass =
   "h-11 w-full rounded-full bg-primary text-sm font-semibold text-primary-foreground shadow-[0_8px_20px_-6px_rgba(16,94,52,0.5)] transition-all duration-200 hover:bg-primary/90 hover:shadow-[0_10px_24px_-6px_rgba(16,94,52,0.55)] active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none";
 
 const LeftPanelDecor = () => (
-  <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
+  <div
+    className="pointer-events-none absolute inset-0 overflow-hidden"
+    aria-hidden
+  >
     <svg
       className="absolute -bottom-24 -left-24 h-[420px] w-[420px] text-white/[0.07]"
       viewBox="0 0 400 400"
       fill="none"
     >
       {[0, 1, 2, 3, 4, 5].map((ring) => (
-        <circle key={ring} cx="200" cy="200" r={60 + ring * 36} stroke="currentColor" strokeWidth="1" />
+        <circle
+          key={ring}
+          cx="200"
+          cy="200"
+          r={60 + ring * 36}
+          stroke="currentColor"
+          strokeWidth="1"
+        />
       ))}
     </svg>
     <div className="absolute right-0 top-0 h-40 w-40 rounded-full bg-white/[0.06] blur-2xl" />
@@ -26,12 +36,23 @@ const LeftPanelDecor = () => (
 );
 
 const RightPanelDecor = () => (
-  <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
+  <div
+    className="pointer-events-none absolute inset-0 overflow-hidden"
+    aria-hidden
+  >
     <div className="absolute -right-16 -top-20 h-56 w-56 rounded-full bg-primary/[0.06] blur-3xl" />
     <div className="absolute -bottom-12 left-1/4 h-40 w-40 rounded-full bg-primary/[0.04] blur-2xl" />
-    <svg className="absolute inset-0 h-full w-full text-gray-200/40" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className="absolute inset-0 h-full w-full text-gray-200/40"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <defs>
-        <pattern id="auth-grid" width="28" height="28" patternUnits="userSpaceOnUse">
+        <pattern
+          id="auth-grid"
+          width="28"
+          height="28"
+          patternUnits="userSpaceOnUse"
+        >
           <circle cx="1" cy="1" r="0.75" fill="currentColor" />
         </pattern>
       </defs>
@@ -47,18 +68,25 @@ export interface AuthShellProps {
   taglineBody?: string;
 }
 
-const LeftPanel = ({ tagline, taglineBody }: Pick<AuthShellProps, "tagline" | "taglineBody">) => (
-  <div className="relative hidden shrink-0 flex-col overflow-hidden rounded-2xl shadow-[0_8px_32px_rgba(15,23,42,0.1)] lg:flex lg:h-auto lg:min-h-0 lg:flex-1 lg:basis-1/2 lg:rounded-[28px]">
+const LeftPanel = ({
+  tagline,
+  taglineBody,
+}: Pick<AuthShellProps, "tagline" | "taglineBody">) => (
+  <div className="relative hidden shrink-0 flex-col overflow-hidden rounded-2xl bg-[#011F12] shadow-[0_8px_32px_rgba(15,23,42,0.1)] lg:flex lg:h-auto lg:min-h-0 lg:flex-1 lg:basis-1/2 lg:rounded-[28px]">
     <img
       src={LOGIN_IMAGE}
       alt="Ethio Djibouti Railway"
-      className="absolute inset-0 h-full w-full object-cover object-center"
+      className="absolute inset-0 h-auto w-full object-cover object-center"
     />
-    <div className="absolute inset-0 bg-gradient-to-br from-[#0a2e1a]/92 via-[#0f4a2a]/55 to-[#1a5c34]/45" />
+    <div className="absolute inset-0 bg-gradient-to-br from-[#0a2e1a]/92 via-[#0f4a2a]/15 to-[#1a5c34]/45" />
     <LeftPanelDecor />
 
     <div className="relative z-10 flex shrink-0 items-center justify-between px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
-      <img src={EDR_LOGO} alt="EDR Freight" className="h-7 w-auto brightness-0 invert sm:h-9" />
+      <img
+        src={EDR_LOGO}
+        alt="EDR Freight"
+        className="h-7 w-auto brightness-0 invert sm:h-9"
+      />
       <a
         href="#"
         className="flex items-center gap-1.5 rounded-full border border-white/70 bg-white/10 px-3 py-1.5 text-xs font-medium text-white backdrop-blur-sm transition-colors hover:bg-white/20 sm:px-4 sm:py-2 sm:text-sm"
@@ -97,29 +125,35 @@ const FormFooter = () => (
   <div className="relative z-10 flex shrink-0 flex-col items-center justify-between gap-3 border-t border-gray-100 px-4 py-4 text-xs text-gray-400 sm:flex-row sm:gap-4 sm:px-6 sm:py-4 lg:px-8 lg:pb-6">
     <span className="shrink-0">© 2026 EDR Freight</span>
     <div className="flex flex-wrap items-center justify-center gap-3 sm:justify-end sm:gap-6">
-      <a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
+      <a
+        href="#"
+        className="font-semibold text-gray-700 transition-colors hover:text-primary"
+      >
         Terms &amp; Conditions
       </a>
-      <a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
+      <a
+        href="#"
+        className="font-semibold text-gray-700 transition-colors hover:text-primary"
+      >
         Privacy Policy
       </a>
-      <a href="#" className="font-semibold text-gray-700 transition-colors hover:text-primary">
+      <a
+        href="#"
+        className="font-semibold text-gray-700 transition-colors hover:text-primary"
+      >
         Help &amp; Support
       </a>
     </div>
   </div>
 );
 
-export default function AuthShell({ children, tagline, taglineBody }: AuthShellProps) {
+export default function AuthShell({
+  children,
+  tagline,
+  taglineBody,
+}: AuthShellProps) {
   return (
     <>
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-      <link
-        href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap"
-        rel="stylesheet"
-      />
-
       <div
         className="flex h-[100dvh] overflow-hidden bg-[#e8eaef] px-4 py-3 antialiased sm:px-6 sm:py-4 md:px-[70px]"
         style={{ fontFamily: "'Outfit', var(--font-sans)" }}
@@ -127,7 +161,7 @@ export default function AuthShell({ children, tagline, taglineBody }: AuthShellP
         <div className="flex h-full min-h-0 w-full flex-col gap-3 lg:flex-row lg:gap-4">
           <LeftPanel tagline={tagline} taglineBody={taglineBody} />
 
-          <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-[#f5f7fa] shadow-[0_8px_32px_rgba(15,23,42,0.08)] lg:basis-1/2 lg:rounded-[28px]">
+          <div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-2xl bg-white  shadow-[0_8px_32px_rgba(15,23,42,0.08)] lg:basis-1/2 lg:rounded-[28px]">
             <RightPanelDecor />
 
             <div className="relative z-10 flex shrink-0 justify-end px-4 pt-4 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8">
@@ -136,7 +170,7 @@ export default function AuthShell({ children, tagline, taglineBody }: AuthShellP
 
             <div className="relative z-10 min-h-0 flex-1 overflow-y-auto overscroll-contain">
               <div className="flex min-h-full justify-center px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
-                <div className="my-auto w-full max-w-xl rounded-3xl border border-gray-100/80 bg-white px-5 py-6 shadow-[0_4px_24px_rgba(15,23,42,0.06)] sm:px-7 sm:py-8 lg:px-9 lg:py-9">
+                <div className="my-auto w-full max-w-xl rounded-3xl px-5 py-6 sm:px-7 sm:py-8 lg:px-9 lg:py-9">
                   {children}
                 </div>
               </div>