root-imp-tailwindColorsOptimization (#42)

https://tailwindcss.com/docs/customizing-colors#using-css-variables * rgba to hsl - Button.tsx improved * lintrc fix_1
nicitaacom · Aug 16, 2023 · 6fba9fc · 6fba9fc
1 parent 90bae5d
commit 6fba9fc
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 93 deletions.
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -10,28 +10,28 @@ function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <Navbar />
-      <div className="fixed inset-0 z-[-40] h-screen bg-img bg-cover bg-center bg-fixed"></div>
+      <div className="fixed inset-0 z-[-40] h-screen bg-img bg-cover bg-center bg-fixed" />
       <AnimatePresence>
         {router.pathname === "/"
           ? main.isOpen && <main className="font-primary text-primary text-md">{children}</main>
           : main.isOpen && (
-              <motion.main
-                className="font-primary text-primary text-md"
-                animate={{
-                  opacity: [0, 1],
-                  y: ["100%", "0%"],
-                }}
-                exit={{
-                  opacity: [1, 0],
-                  y: ["0%", "100%"],
-                }}
-                transition={{
-                  ease: "circIn",
-                  duration: 0.3,
-                }}>
-                {children}
-              </motion.main>
-            )}
+            <motion.main
+              className="font-primary text-primary text-md"
+              animate={{
+                opacity: [0, 1],
+                y: ["100%", "0%"],
+              }}
+              exit={{
+                opacity: [1, 0],
+                y: ["0%", "100%"],
+              }}
+              transition={{
+                ease: "circIn",
+                duration: 0.3,
+              }}>
+              {children}
+            </motion.main>
+          )}
       </AnimatePresence>
     </>
   )

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -29,8 +29,7 @@ export { CartItem }
 
 /* /auth/ */
 import SignInForm from "./pages/auth/SignInForm"
-import { ProviderButton } from "./pages/auth/ProviderButton"
-export { SignInForm,ProviderButton }
+export { SignInForm }
 
 /* /about */
 import {StatCircle} from "./pages/about/StatCircle"

diff --git a/src/components/pages/about/StatCircle.tsx b/src/components/pages/about/StatCircle.tsx
@@ -15,7 +15,7 @@ export function StatCircle({ label, percent, big }: StatCircle) {
       className="w-full flex flex-col gap-2 justify-around items-center"
       initial={{ scale: 0 }}
       animate={{ scale: 1 }}>
-      <h1 className="font-primary text-medium font-bold whitespace-nowrap">{label}</h1>
+      <h1 className="text-medium font-bold whitespace-nowrap">{label}</h1>
 
       <div className={`${big ? "w-32 h-32" : "w-24 h-24"}`}>
         <ProgressProvider valueStart={0} valueEnd={percent}>

diff --git a/src/components/pages/auth/ProviderButton.tsx → src/components/pages/auth/ProviderButton.txt b/src/components/pages/auth/ProviderButton.tsx → src/components/pages/auth/ProviderButton.txt
@@ -6,6 +6,8 @@ export type Props = {
   provider: ClientSafeProvider
 }
 
+//Please use <Button variant='continue-with'/>
+
 export function ProviderButton({ provider }: Props) {
   const providerIcon =
     provider.id === "google" ? (

diff --git a/src/components/pages/cart/CartItem.tsx b/src/components/pages/cart/CartItem.tsx
@@ -20,7 +20,7 @@ const CartItem = () => {
       <td className="pt-8 font-bold text-center">- 1 +</td>
       <td className="pt-8 font-bold text-center">$399.99</td>
       <td className="pt-8 ">
-        <button className="bg-cta-danger w-10 h-10 rounded-xl flex items-center justify-center">
+        <button className="bg-danger w-10 h-10 rounded-xl flex items-center justify-center">
           <BiSolidTrashAlt className="text-white w-6 h-6" />
         </button>
       </td>

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -4,21 +4,24 @@ import { VariantProps, cva } from "class-variance-authority"
 import { twMerge } from "tailwind-merge"
 
 const buttonVariants = cva(
-  "text-primary rounded-md disabled:pointer-events-none hover:brightness-90 transition-color duration-300",
+  "text-primary-foreground rounded-md disabled:pointer-events-none hover:brightness-90 transition-color duration-300",
   {
     variants: {
       variant: {
-        cta: "font-bold bg-cta px-4 py-2",
-        "cta-danger": "font-bold bg-cta-danger px-4 py-2",
-        "cta-success": "font-bold bg-cta-success px-4 py-2",
-        neon: "font-bold bg-secondary-dark border-2 border-solid border-cta shadow-cta px-4 py-2",
+        cta: "font-bold text-secondary bg-cta px-4 py-2",
+        "danger": "font-bold bg-danger px-4 py-2",
+        "danger-outline": "font-bold bg-transparent border-[1px] broder-danger px-4 py-2",
+        "success": "font-bold text-secondary bg-success px-4 py-2",
+        "success-outline": "font-bold  bg-transparent border-[1px] border-success px-4 py-2",
+        neon: "font-bold bg-secondary-foreground border-2 border-solid border-cta shadow-cta px-4 py-2",
         "nav-link": `relative w-fit font-bold 
           before:absolute before:bottom-[-4px] before:w-full before:content-['']
            before:invisible before:opacity-0 before:translate-y-[0px]
            before:border-b-[3px] before:border-solid before:border-cta before:rounded-md before:transition-all
            before:duration-300 before:pointer-events-none`,
         link: "text-cta cursor-pointer",
-        "continue-with": "p-4 w-full font-secondary text-secondary bg-primary-dark flex justify-center items-center gap-x-4",
+        "continue-with": `p-4 w-full font-secondary bg-transparent border-[1px] flex justify-center items-center gap-x-4
+         hover:bg-secondary`,
       },
       active: {
         active: "before:visible lalala before:opacity-100 before:translate-y-[2px]",

diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
@@ -9,7 +9,7 @@ export function Checkbox({ isChecked = false, onChange, label, labelClassName =
   return (
     <div className="checkbox-container">
       <input
-        className="cursor-pointer bg-primary-dark"
+        className="cursor-pointer bg-primary-foreground"
         type="checkbox"
         id="check"
         checked={isChecked}

diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
@@ -19,7 +19,7 @@ export function Input({ type, size, placeholder, ...props }: InputProps) {
         ? (
           <div className="relative w-full">
             <input
-              className={`peer/input p-4 bg-primary-dark text-secondary z-[9] ${size === "sm" ? "w-[100px] h-[40px]" : "w-full h-[55px]"}
+              className={`peer/input p-4 bg-primary-foreground text-secondary z-[9] ${size === "sm" ? "w-[100px] h-[40px]" : "w-full h-[55px]"}
               outline-none`}
               type={showPassword ? "text" : "password"} placeholder=" "
               {...props}
@@ -44,7 +44,7 @@ export function Input({ type, size, placeholder, ...props }: InputProps) {
         ) : (
           <div className="relative w-full">
             <input
-              className={`peer/input p-4 bg-primary-dark text-secondary z-[9] ${size === "sm" ? "w-[100px] h-[40px]" : "w-full h-[55px]"}
+              className={`peer/input p-4 bg-primary-foreground text-secondary z-[9] ${size === "sm" ? "w-[100px] h-[40px]" : "w-full h-[55px]"}
               outline-none`}
               type='email' placeholder=" " required
               {...props}

diff --git a/src/components/ui/dev_readme.md b/src/components/ui/dev_readme.md
@@ -56,8 +56,8 @@ For every RadioButton - use different labels (if you delete 2 from Add product2
     <AiOutlineGoogle className='text-secondary' size={42} />
   </Button>
   <Button variant='cta'>cta</Button>
-  <Button variant='cta-danger'>cta-danger</Button>
-  <Button variant='cta-success'>cta-success</Button>
+  <Button variant='danger'>danger</Button>
+  <Button variant='success'>success</Button>
   <Button variant='link'>link</Button>
   <Button variant='nav-link' active='active'>nav-link active</Button>
   <Button variant='nav-link' active='inactive'>nav-link inactive</Button>

diff --git a/src/styles/globals.css → src/globals.css b/src/styles/globals.css → src/globals.css
@@ -4,19 +4,28 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-:root {
-  --primary: rgba(255, 255, 255, 0.9);
-  --primary-dark: rgba(255,255,255,0.4);
-  --secondary: rgba(7, 7, 10, 0.4);
-  --secondary-dark: rgba(7,7,10,1);
-  --stats-bar: rgba(79, 70, 186, 1);
-  --stats-fill: rgba(51, 23, 165, 1);
+@layer base {
+  :root {
+  --primary: 0deg 0% 90%;
+  --primary-foreground: 0deg 0% 70%;
+  --secondary: 240deg 18% 3%;
+  --secondary-foreground: 240deg 18% 3%;
+  --cta: 184deg 90% 60%;
+  --danger: 0deg 90% 50%;
+  --success: 122deg 90% 50%;
+  --stats-bar: 245deg 90% 50%;
+  --stats-fill: 252deg 90% 50%;
+
   /* 320-768px */
   --md: clamp(1rem, 1.6473rem + -3.2366vw, 0.09375rem);
+  }
+}
 
-  --cta: rgba(44, 200, 207, 1);
+* {
+  border-color: hsl(var(--primary-foreground));
 }
 
+
 svg {
   -webkit-tap-highlight-color: transparent;
 }
@@ -55,33 +64,33 @@ body,
 
 /* About page */
 .CircularProgressbar-path {
-  stroke: var(--stats-fill) !important;
+  stroke: hsl(var(--stats-fill)) !important;
 }
 
 .CircularProgressbar-trail {
-  stroke: var(--stats-bar) !important;
+  stroke: hsl(var(--stats-bar)) !important;
 }
 
 .CircularProgressbar-text {
-  fill: var(--primary) !important;
+  fill: hsl(var(--primary)) !important;
   font-size: var(--md) !important;
   animation: neonAnim 1s alternate-reverse infinite !important;
-  color: var(--primary) !important;
+  color: hsl(var(--primary)) !important;
 }
 
 @keyframes neonAnim {
   from {
-    text-shadow: 0 0 10px var(--primary), 0 0 40px var(--primary), 0 0 100px var(--primary);
+    text-shadow: 0 0 10px hsl(var(--primary)), 0 0 40px hsl(var(--primary)), 0 0 100px hsl(var(--primary));
   }
 
   to {
-    text-shadow: 0 0px 12px var(--primary), 0 0 41px var(--primary), 0 0 102px var(--primary);
+    text-shadow: 0 0px 12px hsl(var(--primary)), 0 0 41px hsl(var(--primary)), 0 0 102px hsl(var(--primary));
   }
 }
 
 /* RadioButton.tsx */
 input[type="radio"]:checked + .label {
-  border-color: var(--cta);
+  border-color: hsl(var(--cta));
 }
 
 input[type="radio"]:checked + .label:after {
@@ -91,11 +100,11 @@ input[type="radio"]:checked + .label:after {
 }
 
 .label::after {
-  background-color: var(--cta);
+  background-color: hsl(var(--cta));
 }
 
 .label {
-  border: 1px solid var(--primary-dark);
+  border: 1px solid hsl(var(--primary-foreground));
 }
 
 
@@ -116,7 +125,7 @@ input[type="radio"]:checked + .label:after {
   width: 15px;
   margin: 0px 5px 0px 3px;
   border-radius: 2px;
-  box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
+  box-shadow: 1px 1px 3px hsla(0, 0, 0, 1);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -134,7 +143,7 @@ input[type="radio"]:checked + .label:after {
   transition: all 0.4s;
   opacity: 0%;
   pointer-events: none;
-  background-color: var(--cta);
+  background-color: hsl(var(--cta));
 }
 
 .checkbox-container:hover input[type="checkbox"]:not(:checked)::before {
@@ -147,7 +156,7 @@ input[type="radio"]:checked + .label:after {
   font-family: "Font awesome 5 Free";
   font-weight: 900;
   font-size: 12px;
-  color: var(--secondary-dark);
+  color: hsl(var(--secondary-foreground));
 }
 
 .checkbox-container input[type="checkbox"]:not(:checked)::after {
@@ -159,23 +168,23 @@ input[type="radio"]:checked + .label:after {
 }
 
 .checkbox-container input[type="checkbox"]:not(:checked):hover {
-  background-color: var(--cta);
+  background-color: hsl(var(--cta));
 }
 
 .checkbox-container input[type="checkbox"]:not(:checked):active {
-  background-color: var(--cta);
+  background-color: hsl(var(--cta));
 }
 
 .checkbox-container input[type="checkbox"]:checked {
-  background-color: var(--cta);
+  background-color: hsl(var(--cta));
 }
 
 .checkbox-container input[type="checkbox"]:checked:hover {
-  background-color: var(--cta);
+  background-color: hsl(var(--cta));
 }
 
 .checkbox-container input[type="checkbox"]:checked:active {
-  background-color: var(--cta);
+  background-color: hsl(var(--cta));
 }
 
 .checkbox-container input[type="checkbox"]:checked::after {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,7 +2,7 @@ import { type Session } from "next-auth"
 import { SessionProvider } from "next-auth/react"
 import { type AppType } from "next/app"
 import { api } from "~/utils/api"
-import "~/styles/globals.css"
+import "~/globals.css"
 import { Layout } from "~/components"
 
 const MyApp: AppType<{

diff --git a/src/pages/auth/signin.tsx b/src/pages/auth/signin.tsx
@@ -1,10 +1,14 @@
+//please separate your imports - react/next - dependencies - hooks/components
 import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next"
 import { getProviders } from "next-auth/react"
 import { getServerSession } from "next-auth/next"
+import Link from "next/link"
+
+import { AiOutlineGoogle } from 'react-icons/ai'
+
 import { authOptions } from "../../server/auth"
-import { ProviderButton } from "~/components/pages/auth/ProviderButton"
 import { SignInForm } from "~/components"
-import Link from "next/link"
+import { Button } from "~/components/ui"
 
 export default function SignIn({ providers }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
@@ -14,9 +18,13 @@ export default function SignIn({ providers }: InferGetServerSidePropsType<typeof
       <h1 className="text-md font-bold text-primary">Login</h1>
       <SignInForm />
       <p className="font-bold">or</p>
-      {Object.values(providers).map(provider => (
+      <Button variant='continue-with'>
+        Continue with Google
+        <AiOutlineGoogle className="text-primary-foreground" size={42} />
+      </Button>
+      {/* {Object.values(providers).map(provider => (
         <ProviderButton provider={provider} key={provider.id} />
-      ))}
+      ))} */}
       <p>
         New to Aer?{" "}
         <span className="text-cta">

diff --git a/src/pages/auth/signup.tsx b/src/pages/auth/signup.tsx
@@ -1,8 +1,8 @@
+//please organize imports
 import type { GetServerSidePropsContext, InferGetServerSidePropsType } from "next"
 import { getProviders } from "next-auth/react"
 import { getServerSession } from "next-auth/next"
 import { authOptions } from "../../server/auth"
-import { ProviderButton } from "~/components"
 import Link from "next/link"
 import SignUpForm from "~/components/pages/auth/SignUpForm"
 
@@ -14,9 +14,9 @@ function Signup({ providers }: InferGetServerSidePropsType<typeof getServerSideP
       <h1 className="text-md font-bold text-primary">Register</h1>
       <SignUpForm />
       <p className="font-bold">or</p>
-      {Object.values(providers).map(provider => (
-        <ProviderButton provider={provider} key={provider.id} />
-      ))}
+      {/* {Object.values(providers).map(provider => (
+      <ProviderButton provider={provider} key={provider.id} />
+      {/* ))} */}
       <p>
         Already have an account?{" "}
         <span className="text-cta">

diff --git a/src/pages/cart.tsx b/src/pages/cart.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link"
 import { CartItem } from "~/components"
+import { Button } from "~/components/ui"
 const Cart = () => {
   return (
     <div className="flex h-full min-h-screen flex-col items-center">
@@ -25,17 +25,16 @@ const Cart = () => {
           </table>
         </div>
         <div className="relative w-full h-full text-xs tablet:text-sm font-bold bg-secondary rounded-b-xl">
-          <Link
-            className="bg-cta top-8  w-fit rounded-xl flex items-center justify-center absolute py-2 px-7 left-8"
-            href={`products`}>
+          <Button
+            href='/products'>
             Back to products
-          </Link>
-          <button className="bg-cta-danger  w-fit rounded-xl flex items-center justify-center absolute py-2  top-8 right-8 px-7">
+          </Button>
+          <Button variant='danger'>
             Clear Cart
-          </button>
-          <button className="bg-cta-success  w-fit rounded-xl flex items-center justify-center absolute py-2 px-7 bottom-12 right-8">
-            Clear Cart
-          </button>
+          </Button>
+          <Button variant='success-outline'>
+            Submit
+          </Button>
         </div>
       </section>
     </div>