Adjust input/textarea hover colour and login bg

pdelfan · Oct 31, 2024 · 561036a · 561036a
1 parent baa9cc6
commit 561036a
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git a/src/app/(auth)/login/layout.tsx b/src/app/(auth)/login/layout.tsx
@@ -13,15 +13,15 @@ export default async function InventoryLayout({
 }) {
   return (
     <>
-      <main className="relative z-10 min-h-[100svh] flex items-center justify-center animate-fade animate-delay-200 animate-duration-[600ms]">
+      <main className="relative z-10 min-h-[100svh] flex items-center justify-center animate-fade animate-delay-300 animate-duration-[600ms]">
         {children}
       </main>
       <Image
         src="/images/loginBackground.svg"
         alt="Numerous ouranos logos"
         width={1000}
         height={200}
-        className="z-0 fixed bottom-0 w-screen h-[50svh] object-cover animate-fade animate-delay-0 animate-duration-[900ms]"
+        className="z-0 fixed bottom-0 w-screen h-[50svh] object-cover animate-fade-up animate-delay-0 animate-duration-[900ms]"
       />
     </>
   );

diff --git a/src/app/dashboard/topics/[topic]/layout.tsx b/src/app/dashboard/topics/[topic]/layout.tsx
@@ -13,7 +13,7 @@ export default async function TopicsLayout({
 }) {
   return (
     <>
-      <article className="border-skin-base flex flex-col gap-2 border-x-0 border-t-0 px-3 py-2 md:border md:rounded-t-2xl">
+      <article className="border-skin-base flex flex-col gap-2 border-x-0 border-t-0 border-b px-3 py-2 md:border md:rounded-t-2xl">
         <div className="flex flex-wrap items-center gap-2 text-skin-secondary">
           <div className="bg-primary/10 p-3 rounded-full">
             <SiGooglemessages className="text-primary text-2xl" />

diff --git a/src/components/filter/search/Search.tsx b/src/components/filter/search/Search.tsx
@@ -36,7 +36,7 @@ export default function Search(props: Props) {
         Search
       </label>
       <input
-        className="border-skin-base focus:outline-skin-base focus:bg-skin-tertiary text-skin-base placeholder:text-skin-secondary bg-skin-secondary peer block w-full rounded-xl border py-2.5 pl-10 text-sm outline outline-transparent hover:bg-skin-tertiary"
+        className="border-skin-base focus:outline-skin-base focus:bg-skin-tertiary text-skin-base placeholder:text-skin-secondary bg-skin-secondary peer block w-full rounded-xl border py-2.5 pl-10 text-sm outline outline-transparent hover:bg-skin-tertiary/80"
         placeholder={placeholder}
         autoFocus={autoFocus}
         onChange={(e) => {

diff --git a/src/components/forms/loginForm/LoginForm.tsx b/src/components/forms/loginForm/LoginForm.tsx
@@ -57,7 +57,7 @@ export default function LoginForm() {
 
   if (isRedirecting) {
     return (
-      <section className="bg-skin-secondary max-w-xs rounded-2xl p-5">
+      <section className="bg-skin-base border border-skin-base shadow-2xl shadow-primary-light/30 max-w-xs rounded-2xl p-5">
         <Image
           src="/logo.svg"
           alt="Ouranos logo"
@@ -79,7 +79,7 @@ export default function LoginForm() {
   }
 
   return (
-    <section className="bg-skin-secondary max-w-xs rounded-2xl p-5">
+    <section className="bg-skin-base border border-skin-base max-w-xs rounded-2xl p-5 shadow-2xl shadow-primary-light/30">
       <Image
         src="/logo.svg"
         alt="Ouranos logo"
@@ -102,7 +102,7 @@ export default function LoginForm() {
         to log in.
       </p>
       <p className="text-skin-secondary text-sm font-medium">
-        Ouranos is in early access, some features may not work as intended.
+        Ouranos is in early access, some features may not be available yet.
       </p>
       <form
         className="mt-5 text-sm font-medium"

diff --git a/src/components/inputs/input/Input.tsx b/src/components/inputs/input/Input.tsx
@@ -9,15 +9,15 @@ export default function Input(props: Props) {
   return (
     <div className="relative">
       {icon && (
-        <div className="text-skin-icon-base absolute left-2 top-4 text-lg">
+        <div className="text-skin-icon-base absolute left-2 top-3 text-lg">
           {icon}
         </div>
       )}
       <input
         {...props}
         className={`${
           icon ? "mt-1 pl-8 pr-4" : "px-4"
-        } border-skin-base focus:outline-skin-base focus:bg-skin-tertiary text-skin-base placeholder:text-skin-secondary bg-skin-secondary peer block w-full rounded-xl border py-2.5 text-sm outline outline-transparent hover:bg-skin-tertiary`}
+        } border-skin-base focus:outline-skin-base focus:bg-skin-tertiary text-skin-base placeholder:text-skin-secondary bg-skin-secondary peer block w-full rounded-xl border py-2.5 text-sm outline outline-transparent hover:bg-skin-tertiary/80`}
       />
     </div>
   );

diff --git a/src/components/inputs/textarea/Textarea.tsx b/src/components/inputs/textarea/Textarea.tsx
@@ -7,7 +7,7 @@ export default function Textarea(props: Props) {
   return (
     <textarea
       {...props}
-      className={`border-skin-base focus:outline-skin-base focus:bg-skin-tertiary text-skin-base placeholder:text-skin-secondary bg-skin-secondary peer block w-full rounded-xl border p-2.5 text-sm outline outline-transparent hover:bg-skin-tertiary 
+      className={`border-skin-base focus:outline-skin-base focus:bg-skin-tertiary text-skin-base placeholder:text-skin-secondary bg-skin-secondary peer block w-full rounded-xl border p-2.5 text-sm outline outline-transparent hover:bg-skin-tertiary/80 
        ${className}`}
     />
   );