From 7572136cc8a2cbdba107d8f526a4213889e85c46 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 8 Oct 2024 08:46:35 +0200
Subject: [PATCH] feat: sign-up and sign-in pages are styled and ready to be
 merged

---
 app/(prowler)/profile/page.tsx     |  2 +-
 app/(prowler)/providers/page.tsx   |  2 +-
 auth.config.ts                     | 12 ++++-----
 components/auth/oss/auth-form.tsx  | 30 ++++++----------------
 components/filters/data-filters.ts |  5 ----
 tailwind.config.js                 | 40 ++++++++++++++----------------
 6 files changed, 35 insertions(+), 56 deletions(-)

diff --git a/app/(prowler)/profile/page.tsx b/app/(prowler)/profile/page.tsx
index 91fa4907f0..0cfb4f8ab2 100644
--- a/app/(prowler)/profile/page.tsx
+++ b/app/(prowler)/profile/page.tsx
@@ -15,7 +15,7 @@ export default async function Profile() {
   }
 
   // const user = await getUserByMe();
-  // console.log("user", user);
+
   return (
     <>
       <Header title="User Profile" icon="ci:users" />
diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index a5cb092664..b999671859 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -24,7 +24,7 @@ export default async function Providers({
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
 
       <Spacer y={4} />
-      <FilterControls search providers date customFilters={filtersProviders} />
+      <FilterControls search providers customFilters={filtersProviders} />
       <Spacer y={4} />
 
       <AddProvider />
diff --git a/auth.config.ts b/auth.config.ts
index 556c7d40c0..4639f8bf37 100644
--- a/auth.config.ts
+++ b/auth.config.ts
@@ -124,7 +124,7 @@ export const authConfig = {
           token.accessToken as string,
         ) as CustomJwtPayload;
         // eslint-disable-next-line no-console
-        console.log("decodedToken", decodedToken);
+        // console.log("decodedToken", decodedToken);
         token.accessTokenExpires = (decodedToken.exp as number) * 1000;
         token.user_id = decodedToken.user_id;
         token.tenant_id = decodedToken.tenant_id;
@@ -150,11 +150,11 @@ export const authConfig = {
       }
 
       // eslint-disable-next-line no-console
-      console.log(
-        "Access token expires",
-        token.accessTokenExpires,
-        new Date(Number(token.accessTokenExpires)),
-      );
+      // console.log(
+      //   "Access token expires",
+      //   token.accessTokenExpires,
+      //   new Date(Number(token.accessTokenExpires)),
+      // );
 
       // If the access token is not expired, return the token
       if (
diff --git a/components/auth/oss/auth-form.tsx b/components/auth/oss/auth-form.tsx
index 3b70a5a040..451e043c0b 100644
--- a/components/auth/oss/auth-form.tsx
+++ b/components/auth/oss/auth-form.tsx
@@ -112,13 +112,15 @@ export const AuthForm = ({ type }: { type: string }) => {
   return (
     <div className="relative flex h-screen w-screen">
       {/* Auth Form */}
-      <div className="relative flex w-full items-center justify-center bg-background lg:w-1/2">
-        {/* Prowler Logo */}
-        <div className="absolute top-[10%] z-10 flex h-fit w-fit flex-col items-center lg:hidden">
-          <ProwlerExtended width={300} />
-        </div>
+      <div className="relative flex w-full items-center justify-center bg-background lg:w-full">
+        {/* Background Pattern */}
+        <div className="absolute h-full w-full bg-[radial-gradient(#94a3b8_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_80%)]"></div>
 
-        <div className="flex w-full max-w-sm flex-col gap-4 rounded-large bg-content1 px-8 pb-10 pt-6 shadow-small">
+        <div className="dark:bg-prowler-black-900/90 relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-large bg-white/90 px-8 py-10 shadow-small md:max-w-md">
+          {/* Prowler Logo */}
+          <div className="absolute -top-[100px] left-1/2 z-10 flex h-fit w-fit -translate-x-1/2">
+            <ProwlerExtended width={300} />
+          </div>
           <div className="flex items-center justify-between">
             <p className="pb-2 text-xl font-medium">
               {type === "sign-in" ? "Sign In" : "Sign Up"}
@@ -287,22 +289,6 @@ export const AuthForm = ({ type }: { type: string }) => {
           )}
         </div>
       </div>
-
-      <div
-        className="relative hidden w-1/2 flex-col-reverse rounded-medium p-10 shadow-small lg:flex"
-        style={{
-          backgroundImage:
-            "url(https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/white-building.jpg)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      >
-        <div className="flex flex-col items-end gap-4">
-          <p className="w-full text-right text-2xl text-black/60">
-            <span className="font-normal">Open Cloud Security Platform </span>
-          </p>
-        </div>
-      </div>
     </div>
   );
 };
diff --git a/components/filters/data-filters.ts b/components/filters/data-filters.ts
index 9aea8e9dd3..df1e01cea0 100644
--- a/components/filters/data-filters.ts
+++ b/components/filters/data-filters.ts
@@ -1,9 +1,4 @@
 export const filtersProviders = [
-  {
-    key: "provider__in",
-    labelCheckboxGroup: "Select a Provider",
-    values: ["aws", "gcp", "azure", "kubernetes"],
-  },
   {
     key: "connected",
     labelCheckboxGroup: "Connection",
diff --git a/tailwind.config.js b/tailwind.config.js
index 608551bb96..31bdbfd39e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,36 +20,34 @@ module.exports = {
     extend: {
       colors: {
         prowler: {
-          blue: {
+          theme: {
             midnight: "#030921",
             pale: "#f3fcff",
-            smoky: "#7b8390",
-          },
-          grey: {
-            medium: "#353a4d",
-            light: "#868994",
-          },
-          green: {
-            DEFAULT: "#9FD655",
-            medium: "#09BF3D",
-          },
-          theme: {
             green: "#6af400",
             purple: "#5001d0",
             coral: "#ff5356",
             orange: "#f69000",
             yellow: "#ffdf16",
           },
-          dark: {
-            DEFAULT: "#0E1117",
-            700: "#151B23",
-            400: "#262C36",
-            title: "#E2E8F0",
-            text: "#94a3b8" /* primary default for dark mode */,
+          blue: {
+            800: "#1e293bff",
           },
-          light: {
-            title: "#1e293bff",
-            text: "#64748b" /* primary default for light mode */,
+          grey: {
+            medium: "#353a4d",
+            light: "#868994",
+            600: "#64748b",
+          },
+          green: {
+            DEFAULT: "#9FD655",
+            medium: "#09BF3D",
+          },
+          black: {
+            DEFAULT: "#000",
+            900: "#18181A",
+          },
+          white: {
+            DEFAULT: "#FFF",
+            900: "#18181A",
           },
         },
         system: {