feat: added dark mode

apps/consent/app/components/button/primary-button-component.tsx

@@ -25,8 +25,10 @@ const PrimaryButton: React.FC<PrimaryButtonProps> = ({
       disabled={loadOrDisable}
       {...buttonProps}
       className={`flex-1 ${
-        !loadOrDisable ? "bg-orange-500" : "bg-orange-600"
-      } text-white p-2 rounded-lg text-sm hover:bg-orange-600`}
+        !loadOrDisable
+          ? "bg-[var(--primaryButtonBackground)]"
+          : "bg-[var(--primaryButtonBackground)]"
+      } text-[var(--primaryButtonFont)] p-2 rounded-lg text-sm hover:bg-[var(--primaryButtonBackground)]`}
     >
       {loadOrDisable ? <Loader size="15px" /> : children}
     </button>

apps/consent/app/components/button/secondary-button-component.tsx

@@ -21,7 +21,7 @@ const SecondaryButton: React.FC<SecondaryButtonProps> = ({
     <button
       disabled={pending || disabled}
       {...buttonProps}
-      className={`flex-1 border-orange-500 bg-transparent text-gray-800 p-2 rounded-lg text-sm border-2 transition-all duration-300 ease-in-out hover:bg-orange-500 hover:text-white hover:border-transparent`}
+      className={`flex-1 border-[var(--primaryButtonBackground)] bg-transparent text-[var(--inputColor)] p-2 rounded-lg text-sm border-2 transition-all duration-300 ease-in-out hover:bg-[var(--primaryButtonBackground)] hover:text-[var(--primaryButtonFont)] hover:border-transparent`}
     >
       {children}
     </button>

apps/consent/app/components/card/card.module.css

@@ -6,11 +6,9 @@
 
 @media (min-width: 768px) {
   .card {
-    background-color: white;
+    background-color: var(--backgroundColor);
     border-radius: 0.5rem;
-    box-shadow:
-      rgba(0, 0, 0, 0.144) 0px 1px 3px 0px,
-      rgba(27, 31, 35, 0.144) 0px 0px 0px 1px;
+    box-shadow: var(--shadow);
     width: auto;
     margin: auto;
     width: 25em;

apps/consent/app/components/input-component.tsx

@@ -9,11 +9,27 @@ const InputComponent: React.FC<InputProps> = ({ label, id, ...inputProps }) => {
   return (
     <div className="mb-4">
       {label ? (
-        <label htmlFor={id} className="block mb-2 text-sm font-medium text-gray-900">
+        <label
+          htmlFor={id}
+          className="block mb-2 text-sm font-medium text-[var(--inputColor)]"
+        >
           {label}
         </label>
       ) : null}
-      <input {...inputProps} id={id} className="p-2 border rounded w-full" />
+      <input
+        {...inputProps}
+        id={id}
+        className="p-2 
+                  border-1 
+                  border-solid 
+                  border-gray-300 
+                  rounded-sm 
+                  mb- 
+                  w-full 
+                  bg-[var(--inputBackground)] 
+                  focus-within:border-blue-500 
+                  focus-within:bg-[var(--inputBackground)] "
+      />
     </div>
   )
 }

apps/consent/app/components/logo/index.tsx

@@ -1,11 +1,62 @@
 import React from "react"
-import Image from "next/image"
 
 const Logo: React.FC = () => {
   return (
-    <div className="flex justify-center mb-4">
-      <Image src="/blink_logo.svg" alt="Galoy" width={120} height={120} />
-    </div>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      id="Layer_1"
+      viewBox="0 0 769 233.4"
+      width={100}
+      height={40}
+      style={{
+        marginBottom: "1em",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        margin: "1em auto",
+      }}
+    >
+      <style>{".st1{fill:var(--inputColor)}"}</style>
+      <linearGradient
+        id="SVGID_1_"
+        x1={44.737}
+        x2={188.696}
+        y1={23.937}
+        y2={207.7}
+        gradientTransform="matrix(1 0 0 -1 0 232.54)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          offset={0}
+          style={{
+            stopColor: "#febe13",
+          }}
+        />
+        <stop
+          offset={0.5}
+          style={{
+            stopColor: "#ef8b22",
+          }}
+        />
+        <stop
+          offset={1}
+          style={{
+            stopColor: "#f15822",
+          }}
+        />
+      </linearGradient>
+      <path
+        d="M145.1 3.5c-.1 0-.2-.1-.3-.1-9.4-2.3-18.9-3.4-28.2-3.4C64.2 0 16.6 35.5 3.5 88.6-12.1 151.2 26.1 214.5 88.6 230c9.4 2.3 18.9 3.5 28.2 3.5 52.4 0 100-35.5 113.2-88.6 15.5-62.5-22.5-125.7-84.9-141.4zm75.7 139c-11.9 48-54.7 81.5-104 81.5-8.7 0-17.4-1.1-25.9-3.2-27.8-6.9-51.3-24.2-66.1-48.7S5.7 118.7 12.6 90.9C24.5 43 67.3 9.5 116.7 9.4c8.7 0 17.4 1.1 26 3.2h.2C200 27.1 235 85.3 220.8 142.5z"
+        style={{
+          fill: "url(#SVGID_1_)",
+        }}
+      />
+      <path
+        d="M141 101.1c-3.4 13.4-23.8 6.5-30.4 4.9l5.9-23.5c6.5 1.6 27.9 4.7 24.5 18.6zm-3.6 37.9c-3.6 14.6-28.2 6.7-36.2 4.7l6.5-25.9c7.9 2 33.5 6 29.7 21.2zm26.8-37.7c2.1-14.3-8.8-21.9-23.5-27l4.8-19.3-11.8-3-4.7 18.8c-3.1-.8-6.3-1.5-9.4-2.2l4.7-19-11.8-2.9-4.8 19.3-7.5-1.7-16.3-4.1-3.1 12.6s8.1 2 8.6 2.1c2.6.5 5.8 3.4 5.5 6.7l-13.2 52.9c-.7 2.3-3.1 3.5-5.4 2.8-.3-.1-8.6-2.1-8.6-2.1l-5.8 13.4 15.3 3.8 8.4 2.2-4.9 19.5 11.8 3 4.8-19.3c3.2.9 6.3 1.7 9.4 2.4l-4.8 19.4 11.8 2.9 4.9-19.5c20.1 3.8 35.2 2.3 41.5-15.9 5.1-14.6-.3-23-10.8-28.5 7.6-1.8 13.3-6.7 14.9-17.3zM337.4 81.3c7.3 0 13.6 1.3 18.9 3.9 5.3 2.6 9.7 6.1 13.2 10.5s6.1 9.6 7.8 15.5c1.7 5.9 2.5 12.3 2.5 19.2 0 10.5-1.9 20.4-5.8 29.8s-9.2 17.5-15.9 24.4-14.6 12.4-23.7 16.4c-9.1 4-19 6-29.7 6-1.4 0-3.8 0-7.2-.1-3.4-.1-7.3-.4-11.8-1s-9.1-1.5-14-2.7c-4.9-1.2-9.6-2.9-14-5l39.5-165.8 35.4-5.5-14.1 58.9c3-1.4 6.1-2.4 9.1-3.2 3-.9 6.3-1.3 9.8-1.3zm-29.6 97.6c5.3 0 10.3-1.3 15.1-3.9 4.7-2.6 8.8-6 12.2-10.4 3.4-4.3 6.1-9.2 8.1-14.7s3-11.2 3-17.1c0-7.3-1.2-13-3.6-17.1-2.4-4.1-6.9-6.2-13.5-6.2-2.1 0-4.9.4-8.3 1.1-3.4.8-6.5 2.4-9.2 4.8L296.4 178c.9.1 1.7.3 2.4.5.7.1 1.4.3 2.2.3.8.1 1.7.1 2.7.1h4.1zM434.1 206.1c-10.8 0-19.3-1.4-25.4-4.2-6.2-2.8-10.6-6.6-13.2-11.5s-4-10.5-3.9-16.8c.1-6.3 1-13 2.6-20.2l29-121.1 35.4-5.5-31.7 131.4c-.6 2.7-1 5.3-1 7.5s.3 4.3 1.3 6c.9 1.8 2.5 3.2 4.7 4.2 2.2 1.1 5.3 1.8 9.2 2l-7 28.2zM485.5 203.8h-33.8l28.5-120h34l-28.7 120zM539.3 89.3c2.6-.8 5.4-1.6 8.5-2.6 3.1-1 6.6-1.9 10.5-2.7 3.9-.8 8.2-1.5 13-2.1 4.8-.5 10.2-.8 16.3-.8 17.9 0 30.3 5.2 37 15.5 6.7 10.3 7.8 24.5 3.4 42.4l-15.5 64.8h-34l15.1-63.4c.9-3.9 1.6-7.8 2.2-11.5.5-3.7.5-7-.1-9.8-.6-2.8-2-5.1-4.2-6.8-2.2-1.8-5.6-2.6-10.2-2.6-4.4 0-8.9.5-13.5 1.4l-22.1 92.8h-34l27.6-114.6zM684.1 127.1c9.1-7.3 17.7-14.8 25.8-22.4 8.1-7.6 15-14.6 20.8-21H769c-8.5 9.4-17.4 18.7-26.6 27.7s-19.7 18.7-31.6 28.9c3.2 4 6.4 8.5 9.7 13.7 3.3 5.2 6.4 10.6 9.3 16.2 3 5.6 5.7 11.3 8.2 17.1 2.5 5.8 4.6 11.3 6.3 16.4h-37.9c-1.4-4-3.1-8.3-5.1-13s-4.3-9.4-6.8-14-5.1-9.2-7.9-13.6-5.5-8.4-8.2-11.9l-12.8 52.5h-33.8L673 32.3l35.4-5.5-24.3 100.3zM526.2 47.6c0 3.2-.6 6.1-1.8 8.8-1.2 2.7-2.8 5.1-4.9 7.2-2.1 2-4.5 3.6-7.3 4.9-2.8 1.2-5.8 1.8-8.9 1.8-3.2 0-6.1-.6-8.9-1.8-2.8-1.2-5.2-2.8-7.2-4.9-2-2-3.7-4.4-4.9-7.2-1.2-2.7-1.8-5.7-1.8-8.8 0-3.1.6-6 1.8-8.8s2.8-5.2 4.9-7.2 4.4-3.7 7.2-4.9c2.8-1.2 5.8-1.8 8.9-1.8s6.1.6 8.9 1.8 5.2 2.8 7.3 4.9c2.1 2 3.7 4.4 4.9 7.2s1.8 5.7 1.8 8.8z"
+        className="st1"
+      />
+    </svg>
   )
 }
 

apps/consent/app/components/main-container/index.tsx

@@ -6,7 +6,7 @@ interface MainContentProps {
 
 const MainContent: React.FC<MainContentProps> = ({ children }) => {
   return (
-    <main className="min-h-screen flex items-start md:items-center justify-center p-1 md:p-4">
+    <main className="min-h-screen flex items-start md:items-center justify-center p-1 md:p-4 bg-[var(--backgroundColor)]">
       {children}
     </main>
   )

apps/consent/app/components/next-themes-provider.tsx

@@ -0,0 +1,11 @@
+"use client"
+import React, { ReactNode } from "react"
+import { ThemeProvider } from "next-themes"
+
+interface Props {
+  children: ReactNode
+}
+
+export default function Theme({ children }: Props) {
+  return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>
+}

apps/consent/app/components/scope-item/scope-item.module.css

@@ -8,12 +8,14 @@
   border-radius: 0.5rem;
   margin-bottom: 0.5em;
   position: relative;
+  color: var(--inputColor);
+  background-color: var(--inputBackground);
 }
 
 .custom_label {
   position: relative;
   cursor: pointer;
-  flex-grow: 1; 
+  flex-grow: 1;
 }
 
 .text-gray-700 {

apps/consent/app/components/separator.tsx

@@ -8,13 +8,13 @@ const Separator: React.FC<SeparatorProps> = ({ children }) => {
   return (
     <div className="relative flex items-center justify-center mb-4">
       <div className="absolute inset-y-0 left-0 flex items-center justify-center w-1/2">
-        <div className="h-px bg-gray-300 w-full"></div>
+        <div className="h-px bg-[var(--inputSecondary)] w-full"></div>
       </div>
-      <span className="relative z-10 bg-white px-2 text-gray-500 text-sm ">
+      <span className="relative z-10 bg-[var(--backgroundColor)] px-2 text-[var(--inputSecondary)] text-sm ">
         {children}
       </span>
       <div className="absolute inset-y-0 right-0 flex items-center justify-center w-1/2">
-        <div className="h-px bg-gray-300 w-full"></div>
+        <div className="h-px bg-[var(--inputSecondary)] w-full"></div>
       </div>
     </div>
   )

apps/consent/app/consent/page.tsx

@@ -132,7 +132,7 @@ const Consent = async ({ searchParams }: { searchParams: ConsentProps }) => {
         <form action={submitForm} className="flex flex-col">
           <input type="hidden" name="consent_challenge" value={consent_challenge} />
 
-          <p className="mb-4 text-gray-700  text-center ">
+          <p className="mb-4 text-[var(--inputColor)]  text-center ">
             Application <strong>{client.client_name || client.client_id}</strong> wants
             access resources on your behalf and to:
           </p>
@@ -141,13 +141,10 @@ const Consent = async ({ searchParams }: { searchParams: ConsentProps }) => {
             <ScopeItem scope={scope} key={scope} />
           ))}
 
-          <p className="mb-4 text-gray-700">
+          <p className="mb-4  mt-4  text-[var(--inputColor)]">
             Do you want to be asked next time when this application wants to access your
-            data?
-          </p>
-          <p className="mb-4 text-gray-700">
-            The application will not be able to ask for more permissions without your
-            consent.
+            data? The application will not be able to ask for more permissions without
+            your consent.
           </p>
           <ul className="mb-4">
             {client.policy_uri && (
@@ -173,7 +170,7 @@ const Consent = async ({ searchParams }: { searchParams: ConsentProps }) => {
               value="1"
               className="mr-2"
             />
-            <label htmlFor="remember" className="text-gray-700">
+            <label htmlFor="remember" className="text-[var(--inputColor)]">
               Do not ask me again
             </label>
           </p>

apps/consent/app/globals.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 :root {
   --transparent: rgba(0, 0, 0, 0);
   --white: #ffffff;
@@ -31,26 +30,33 @@
   --error: #dc2626;
   --error9: #fee2e2;
   --warning: #f59e0b;
-
-  /* default */
 }
 
 [data-theme="light"] {
+  --backgroundColor: var(--white);
   --overlayBackground: rgba(255, 255, 255, 0.746);
   --backColor: var(--black);
   --primaryButtonBackground: var(--orange);
   --primaryButtonFont: var(--white);
   --inputBackground: var(--grey5);
   --inputColor: var(--black);
-  background-color: var(--white);
+  --inputSecondary: var(--grey2);
+  --shadow: 
+    rgba(0, 0, 0, 0.144) 0px 1px 3px 0px,
+    rgba(27, 31, 35, 0.144) 0px 0px 0px 1px;
 }
 
 [data-theme="dark"] {
+  --backgroundColor: var(--black);
   --overlayBackground: rgba(16, 16, 16, 0.746);
   --backColor: var(--white);
   --primaryButtonBackground: var(--primary4);
   --primaryButtonFont: var(--black);
   --inputBackground: var(--darkGrey);
   --inputColor: var(--white);
-  background-color: var(--black);
-}
+  --inputSecondary: var(--grey4);
+  --shadow: 
+    rgba(255, 255, 255, 0.144) 0px 1px 3px 0px,
+    rgba(227, 231, 235, 0.144) 0px 0px 0px 1px;
+}
+

apps/consent/app/layout.tsx

@@ -7,33 +7,33 @@ import type { Metadata } from "next"
 import { Inter_Tight } from "next/font/google"
 import { ToastContainer } from "react-toastify"
 
+import Theme from "./components/next-themes-provider"
+
 const inter = Inter_Tight({ subsets: ["latin"] })
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Blink Consent",
+  description: "OAuth2 Client For Blink.",
 }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <>
-      <html lang="en">
-        <Script src="/gt.js" />
-        <body className={inter.className}>
-          <ToastContainer
-            position="top-center"
-            autoClose={5000}
-            hideProgressBar={false}
-            newestOnTop={false}
-            closeOnClick
-            rtl={false}
-            pauseOnFocusLoss
-            draggable
-            pauseOnHover
-            theme="light"
-          />
-          {children}
-        </body>
-      </html>
-    </>
+    <html lang="en">
+      <Script src="/gt.js" />
+      <body className={inter.className}>
+        <ToastContainer
+          position="top-center"
+          autoClose={5000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable
+          pauseOnHover
+          theme="light"
+        />
+        <Theme>{children}</Theme>
+      </body>
+    </html>
   )
 }

apps/consent/app/login/page.tsx

@@ -159,7 +159,7 @@ const Login = async ({ searchParams }: { searchParams: LoginProps }) => {
             placeholder="Email Id"
           />
           <div className="flex items-center mb-4">
-            <label className="text-gray-700 text-sm flex items-center">
+            <label className="text-[var(--inputColor)] text-sm flex items-center">
               <input
                 type="checkbox"
                 id="remember"

apps/consent/app/login/phone/form.tsx

@@ -4,14 +4,14 @@ import Link from "next/link"
 
 import { toast } from "react-toastify"
 
-/* eslint @typescript-eslint/ban-ts-comment: "off" */
-// @ts-ignore-next-line error
-import { experimental_useFormState as useFormState } from "react-dom"
-
 import PhoneInput from "react-phone-number-input"
 
 import { E164Number } from "libphonenumber-js/types"
 
+/* eslint @typescript-eslint/ban-ts-comment: "off" */
+// @ts-ignore-next-line error
+import { experimental_useFormState as useFormState } from "react-dom"
+
 import { getCaptchaChallenge } from "./server-actions"
 
 import { GetCaptchaChallengeResponse } from "./phone-login.types"
@@ -80,7 +80,10 @@ const LoginForm: React.FC<LoginFormProps> = ({ login_challenge, countryCodes })
       ) : null}
       <FormComponent action={formAction}>
         <input type="hidden" name="login_challenge" value={login_challenge} />
-        <label htmlFor="phone" className="block mb-2 text-sm font-medium text-gray-900">
+        <label
+          htmlFor="phone"
+          className="block mb-2 text-sm font-medium text-[var(--inputColor)]"
+        >
           Phone
         </label>
 
@@ -97,7 +100,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ login_challenge, countryCodes })
         />
 
         <div className="flex items-center mb-4">
-          <label className="text-gray-700 text-sm flex items-center">
+          <label className="text-[var(--inputColor)] text-sm flex items-center">
             <input
               type="checkbox"
               id="remember"