Update background

NayamAmarshe · Feb 7, 2024 · 5b9d95b · 5b9d95b
1 parent e33362f
commit 5b9d95b
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 66 deletions.
diff --git a/components/Background.jsx b/components/Background.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+
+const Background = ({ ...rest }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      viewBox="0 0 800 450"
+      {...rest}
+    >
+      <defs>
+        <filter
+          id="bbblurry-filter"
+          x="-100%"
+          y="-100%"
+          width="400%"
+          height="400%"
+          filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feGaussianBlur
+            stdDeviation="130"
+            x="0%"
+            y="0%"
+            width="100%"
+            height="100%"
+            in="SourceGraphic"
+            edgeMode="none"
+            result="blur"
+          ></feGaussianBlur>
+        </filter>
+      </defs>
+      <g filter="url(#bbblurry-filter)">
+        <ellipse
+          rx="219.5"
+          ry="215"
+          cx="614.6378451260654"
+          cy="228.07355707341975"
+          fill="hsl(37, 99%, 67%)"
+        ></ellipse>
+        <ellipse
+          rx="219.5"
+          ry="215"
+          cx="183.14674932306463"
+          cy="352.1817377263849"
+          fill="hsl(316, 73%, 52%)"
+        ></ellipse>
+        <ellipse
+          rx="219.5"
+          ry="215"
+          cx="196.29381491921163"
+          cy="48.65340354225853"
+          fill="hsl(185, 100%, 57%)"
+        ></ellipse>
+      </g>
+    </svg>
+  );
+};
+
+export default Background;
diff --git a/components/Layout.jsx b/components/Layout.jsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import { navbarState } from "../atoms/navbarAtom";
 import Navbar from "./right-sidebar/Navbar";
 import { useAtom } from "jotai";
+import Background from "./Background";
 
 const Layout = ({ children }) => {
   const [navbarOpen, setNavbarOpen] = useAtom(navbarState);
@@ -20,12 +21,12 @@ const Layout = ({ children }) => {
           <GridLoader loading={loading} size={15} color={"#ff8100"} />
         </div>
       ) : (
-        <div className="animate relative overflow-hidden bg-slate-50">
+        <div className="animate relative overflow-hidden bg-slate-50 dark:bg-stone-900">
           <Navbar />
           {/* LINKS CARDS */}
           <ScrollingCards />
-
-          <main className="dom-background">{children}</main>
+          <Background className="pointer-events-none fixed z-50 h-full w-full opacity-20 mix-blend-hard-light" />
+          <main className="">{children}</main>
           <script
             defer
             data-name="BMC-Widget"

diff --git a/components/bottom-sidebar/Card.jsx b/components/bottom-sidebar/Card.jsx
@@ -16,10 +16,10 @@ const Card = ({ link, linkIndex, qrCodeIndex, setQRCodeIndex }) => {
   return (
     <div
       key={linkIndex}
-      className={`animate mx-auto my-5 flex max-w-md flex-col items-center justify-between gap-5 rounded-xl bg-opacity-40 p-5 shadow-lg hover:bg-cyan-100/40 hover:shadow-cyan-200 dark:hover:bg-stone-600 sm:flex-row ${
-        theme === "light" && colorsList[color]
+      className={`animate mx-auto my-5 flex max-w-md flex-col items-center justify-between gap-5 rounded-xl bg-opacity-40 p-5 shadow-lg hover:bg-amber-300/40 hover:shadow-amber-500/50 dark:hover:bg-stone-600 sm:flex-row ${
+        theme === "light" && "bg-slate-200/20"
       } ${theme === "dark" && "bg-stone-700/40"} ${
-        theme === "light" && shadowList[color]
+        theme === "light" && "shadow-stone-500/20"
       } ${theme === "dark" && "shadow-none"} `}
     >
       <div className="flex w-full flex-col">

diff --git a/components/home/Form.jsx b/components/home/Form.jsx
@@ -23,11 +23,11 @@ const Form = ({
       onSubmit={handleSubmit}
       className="flex h-full flex-col items-center justify-center"
     >
-      <div className="flex flex-col items-center justify-center gap-y-4">
+      <div className="flex w-full flex-col items-center justify-center gap-y-4">
         {/* LINK INPUT */}
         <input
           type="text"
-          className="text-input"
+          className="text-input max-w-80"
           value={magnetLink}
           onChange={(e) => setMagnetLink(e.target.value)}
           placeholder="Enter your link"
@@ -70,11 +70,11 @@ const Form = ({
             !locked
               ? "animate h-0 -translate-y-7 opacity-0"
               : "animate h-20 translate-y-0 opacity-100"
-          } relative flex items-center justify-center`}
+          } relative flex w-full items-center justify-center`}
         >
           <input
             type={showPassword ? "text" : "password"}
-            className="password-input"
+            className="password-input max-w-80"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             placeholder="Password"

diff --git a/components/home/LinkOptionsModal.jsx b/components/home/LinkOptionsModal.jsx
@@ -25,11 +25,11 @@ const LinkOptionsModal = ({
         animate={{ y: 0 }}
         transition={{ duration: 0.3, ease: "easeInOut" }}
         exit={{ y: -50 }}
-        className="max-w-mid relative flex flex-col items-center justify-start rounded-xl bg-slate-50 ring-8 ring-slate-200/70 dark:bg-stone-900 dark:ring-stone-700/70"
+        className="relative flex w-full max-w-96 flex-col items-center justify-start rounded-xl bg-slate-50 ring-8 ring-slate-200/70 dark:bg-stone-900 dark:ring-stone-700/70"
         onClick={(e) => e.stopPropagation()}
       >
         <button
-          className="animate close-button absolute top-2 right-2 text-2xl"
+          className="animate close-button absolute right-2 top-2 text-2xl"
           onClick={() => {
             setLinkSettingsOpen(false);
           }}
@@ -40,7 +40,7 @@ const LinkOptionsModal = ({
           Link Options
         </h4>
         <div className="mt-2 flex h-full w-full flex-col items-center justify-center space-y-5 p-5">
-          <p className="w-52 truncate text-slate-400 dark:text-stone-400">
+          <p className="w-full max-w-72 truncate text-center text-slate-400 dark:text-stone-400">
             {customSlug.length < 1 ? BASE_URL + "example" : BASE_URL}
             <span className="text-green-500">{customSlug.toLowerCase()}</span>
           </p>

diff --git a/pages/index.jsx b/pages/index.jsx
@@ -17,14 +17,15 @@ import { useAtom } from "jotai";
 import Form from "../components/home/Form";
 import { useEffect } from "react";
 import { useState } from "react";
+import Background from "../components/Background";
 
 export default function Home() {
   // !GLOBAL
   const [navbarOpen, setNavbarOpen] = useAtom(navbarState);
   const [cardsOpen, setCardsOpen] = useAtom(cardsOpenState);
   const [links, setLinks] = useAtom(linksState);
   const [linkSettingsOpen, setLinkSettingsOpen] = useAtom(
-    linkSettingsOpenState
+    linkSettingsOpenState,
   );
 
   // !LOCAL
@@ -126,7 +127,7 @@ export default function Home() {
 
     if (!linkRegex.test(magnetLink)) {
       toast.warn(
-        "Please make sure your link starts with 'http://' or 'https://' or 'magnet://'"
+        "Please make sure your link starts with 'http://' or 'https://' or 'magnet://'",
       );
       return;
     }
@@ -142,7 +143,7 @@ export default function Home() {
 
     if (!slugRegex.test(customOrDefaultSlug)) {
       toast.error(
-        "The slug should only contain lowercase alphabets, numbers and hyphen"
+        "The slug should only contain lowercase alphabets, numbers and hyphen",
       );
       return;
     }
@@ -225,7 +226,7 @@ export default function Home() {
     <div
       className={`${
         navbarOpen || cardsOpen ? "scale-90 blur-3xl" : "scale-100 blur-none"
-      } animate flex h-screen flex-col items-center justify-center gap-y-10 overflow-hidden bg-slate-50 dark:bg-stone-900`}
+      } animate relative flex h-screen flex-col items-center justify-center gap-y-10 overflow-hidden bg-slate-50 dark:bg-stone-900`}
       onWheel={handleScroll}
       {...handlers}
     >
@@ -246,7 +247,7 @@ export default function Home() {
       </AnimatePresence>
 
       {/* MAIN CONTENT */}
-      <div className="flex h-screen flex-col items-center justify-center">
+      <div className="z-10 flex h-screen flex-col items-center justify-center">
         <div className="flex w-full flex-col gap-y-10 ">
           <MainLogo />
           <Form
@@ -284,7 +285,7 @@ export default function Home() {
           navbarOpen || cardsOpen
             ? "scale-0 opacity-0"
             : "scale-100 opacity-100"
-        } animate visible absolute top-5 left-5 z-10 rounded-sm text-xl text-slate-400 hover:text-blue-500 dark:text-stone-400 sm:invisible md:text-3xl`}
+        } animate visible absolute left-5 top-5 z-10 rounded-sm text-xl text-slate-400 hover:text-blue-500 dark:text-stone-400 sm:invisible md:text-3xl`}
         onClick={() => {
           setCardsOpen(!cardsOpen);
         }}
@@ -300,7 +301,7 @@ export default function Home() {
         <img
           src="/powered-by-vercel.svg"
           alt="Powered by Vercel"
-          className="absolute right-5 bottom-5 w-52 mix-blend-exclusion"
+          className="absolute bottom-5 right-5 w-52 mix-blend-exclusion"
         />
       </a>
 

diff --git a/styles/globals.css b/styles/globals.css
@@ -9,6 +9,9 @@
   body {
     @apply h-full;
   }
+  input {
+    @apply text-center;
+  }
 }
 @layer utilities {
   .dom-background {
@@ -24,7 +27,7 @@
     @apply text-slate-400 hover:text-red-500 dark:text-stone-400 dark:hover:text-red-500;
   }
   .input-box {
-    @apply animate w-11/12 rounded-2xl p-5 outline-none hover:shadow-md focus:shadow-lg md:w-full xs:w-full;
+    @apply animate w-11/12 rounded-2xl p-5 outline-none hover:shadow-md focus:shadow-lg xs:w-full md:w-full;
   }
   .submit-button {
     @apply animate z-10 mt-5 rounded-2xl bg-slate-200 p-5 text-slate-500 hover:cursor-pointer hover:bg-cyan-200 hover:text-cyan-700 hover:shadow-lg hover:shadow-cyan-300 dark:bg-stone-700 dark:text-stone-400 dark:hover:bg-stone-600 dark:hover:text-stone-200 dark:hover:shadow-[#131110];

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,12 +5,12 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
-  safelist: [
-    {
-      pattern: /bg-|shadow-|opacity-/,
-      variants: ["hover"],
-    },
-  ],
+  // safelist: [
+  //   {
+  //     pattern: /bg-|shadow-|opacity-/,
+  //     variants: ["hover"],
+  //   },
+  // ],
   theme: {
     extend: {
       screens: {

diff --git a/utils/bgColors.js b/utils/bgColors.js
@@ -17,25 +17,6 @@ const colorsList = [
   "bg-rose-100",
 ];
 
-const darkColorsList = [
-  "bg-red-800",
-  "bg-orange-800",
-  "bg-amber-800",
-  "bg-yellow-800",
-  "bg-lime-800",
-  "bg-green-800",
-  "bg-emerald-800",
-  "bg-teal-800",
-  "bg-sky-800",
-  "bg-blue-800",
-  "bg-indigo-800",
-  "bg-violet-800",
-  "bg-purple-800",
-  "bg-fuchsia-800",
-  "bg-pink-800",
-  "bg-rose-800",
-];
-
 const shadowList = [
   "shadow-red-200",
   "shadow-orange-200",
@@ -55,23 +36,4 @@ const shadowList = [
   "shadow-rose-200",
 ];
 
-const darkShadowList = [
-  "shadow-red-700",
-  "shadow-orange-700",
-  "shadow-amber-700",
-  "shadow-yellow-700",
-  "shadow-lime-700",
-  "shadow-green-700",
-  "shadow-emerald-700",
-  "shadow-teal-700",
-  "shadow-sky-700",
-  "shadow-blue-700",
-  "shadow-indigo-700",
-  "shadow-violet-700",
-  "shadow-purple-700",
-  "shadow-fuchsia-700",
-  "shadow-pink-700",
-  "shadow-rose-700",
-];
-
-module.exports = { colorsList, shadowList, darkColorsList, darkShadowList };
+module.exports = { colorsList, shadowList };