Merge pull request #1231 from Nishitbaria/main

Dark Mode is now Applied to Newsletter Component ✨
open-xyz · Aug 4, 2023 · c725505 · c725505
2 parents f33bfe7 + 4ee8383
commit c725505
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 39 deletions.
diff --git a/app/layout.jsx b/app/layout.jsx
@@ -1,39 +1,39 @@
-"use client"
+/** @format */
+
+"use client";
 
 import "@/styles/globals.css";
 import { Inter } from "next/font/google";
 
-
-const Navbar = dynamic(() => import('@/components/Navbar/Navbar'));
-import dynamic from 'next/dynamic';
+const Navbar = dynamic(() => import("@/components/Navbar/Navbar"));
+import dynamic from "next/dynamic";
 import Footer from "@/components/Footer/Footer";
 import { ThemeProvider } from "@/components/theme/theme-provider";
 import ScrollToTopButton from "@/components/ScrollButton/ScrollButton";
-import { Suspense } from 'react';
+import { Suspense } from "react";
 import ToasterContext from "@/context/ToasterContext";
 import Provider from "@/context/AuthContext";
-// Import & exporting the metadata
 
+// Import & exporting the metadata
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={`${inter.className} dark:bg-neutral-950`}>
         <Provider>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <Suspense fallback={<div>Loading...</div>}>
-
-            <Navbar />
-          </Suspense>
-          <ToasterContext />
-          {children}
-          <Footer />
-          <ScrollToTopButton />
-        </ThemeProvider>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            <Suspense fallback={<div>Loading...</div>}>
+              <Navbar />
+            </Suspense>
+            <ToasterContext />
+            {children}
+            <Footer />
+            <ScrollToTopButton />
+          </ThemeProvider>
         </Provider>
       </body>
     </html>
-  )
+  );
 }
diff --git a/app/page.jsx b/app/page.jsx
@@ -1,22 +1,25 @@
+/** @format */
+
 "use client";
 import BkCards from "@/components/BkCards/BkCards";
 import CgCards from "@/components/Home/CgCards/CgCards";
 import TNYCards from "@/components/TNYCards/BkCards";
 import ImgSection from "@/components/Home/ImgSection/ImgSection";
 import { Books } from "@/utils/Constants";
-import axios from "axios";
-import { resolve } from "path";
-import { useEffect, useState } from "react";
+import NewsLetter from "@/components/Footer/NewsLetter/NewsLetter";
 
 export default function Home() {
   return (
-    <section className="min-h-screen items-center justify-between py-12">
-      <ImgSection txt={["Start Reading", "Be a Reader"]} />
-      <div className="sm:max-w-xl md:max-w-3xl lg:max-w-5xl mx-auto">
-        <CgCards />
-        <BkCards bkhead="Bestselling Books & Audiobooks" books={Books} />
-        <TNYCards bkhead="Current New York Times Bestsellers" />
-      </div>
-    </section>
+    <>
+      <section className="min-h-screen items-center justify-between py-12">
+        <ImgSection txt={["Start Reading", "Be a Reader"]} />
+        <div className="sm:max-w-xl md:max-w-3xl lg:max-w-5xl mx-auto">
+          <CgCards />
+          <BkCards bkhead="Bestselling Books & Audiobooks" books={Books} />
+          <TNYCards bkhead="Current New York Times Bestsellers" />
+        </div>
+        <NewsLetter />
+      </section>
+    </>
   );
 }
diff --git a/components/Footer/Footer.js b/components/Footer/Footer.js
@@ -1,6 +1,7 @@
+/** @format */
+
 "use client";
 import "./Footer.css";
-import NewsLetter from "./NewsLetter/NewsLetter";
 import { BsDiscord, BsGithub, BsTwitter } from "react-icons/bs";
 import darkLogo from "@/public/assets/logos/dark_logo.png";
 import { footerItems, columnNames } from "@/utils/Constants";
@@ -35,7 +36,6 @@ const Footer = () => {
 
   return (
     <>
-      <NewsLetter />
       <footer>
         <div className="sm:py-1 sm:px-7 mx-auto w-full max-w-screen-xl lg:py-3 lg:py-2">
           <div className="footer_body p-2">
@@ -69,13 +69,31 @@ const Footer = () => {
               . All Rights Reserved.
             </span>
             <div className="flex mt-0 space-x-6 sm:justify-center sm:mt-0 lg:mr-14 2xl:mr-0">
-              <Link href="/develop" title="Twitter(External Link)" target="_blank" aria-label="Follow us on Twitter" rel="noopener noreferror">
+              <Link
+                href="/develop"
+                title="Twitter(External Link)"
+                target="_blank"
+                aria-label="Follow us on Twitter"
+                rel="noopener noreferror"
+              >
                 <BsTwitter className="w-6 h-6 transition-all duration-200 ease-in-out transform hover:scale-110 twitter" />
               </Link>
-              <Link href="https://github.com/rohansx/informatician" title="GitHub(External Link)" target="_blank" aria-label="Follow us on GitHub" rel="noopener noreferror">
+              <Link
+                href="https://github.com/rohansx/informatician"
+                title="GitHub(External Link)"
+                target="_blank"
+                aria-label="Follow us on GitHub"
+                rel="noopener noreferror"
+              >
                 <BsGithub className="w-6 h-6 transition-all duration-200 ease-in-out transform hover:scale-110 github" />
               </Link>
-              <Link href="#" title="Discord(External Link)" target="_blank" aria-label="Follow us on Discord" rel="noopener noreferror">
+              <Link
+                href="#"
+                title="Discord(External Link)"
+                target="_blank"
+                aria-label="Follow us on Discord"
+                rel="noopener noreferror"
+              >
                 <BsDiscord className="w-6 h-6 transition-all duration-200 ease-in-out transform hover:scale-110 discord" />
               </Link>
             </div>

diff --git a/components/Footer/NewsLetter/NewsLetter.css b/components/Footer/NewsLetter/NewsLetter.css
@@ -1,3 +1,5 @@
+/** @format */
+
 img {
   max-width: 100%;
   height: auto;
@@ -26,8 +28,7 @@ p {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  font-family: 'Lato', sans-serif;
-  background-color: #ffffff;
+  font-family: "Lato", sans-serif;
 }
 .subheading {
   font-size: 18px;
@@ -119,9 +120,9 @@ p {
   right: -6px;
   width: 26px;
   height: 26px;
-  background-image: url('https://user-images.githubusercontent.com/23297041/53911760-6c581880-4068-11e9-90ab-ac45ae3b4aa8.png');
+  background-image: url("https://user-images.githubusercontent.com/23297041/53911760-6c581880-4068-11e9-90ab-ac45ae3b4aa8.png");
   background-size: cover;
-  content: '';
+  content: "";
   -webkit-animation: slideUp 0.3s ease-out;
   animation: slideUp 0.3s ease-out;
 }
@@ -185,4 +186,4 @@ p {
   .subscribe {
     min-width: 350px;
   }
-}
+}