feat: added custom tailwind variables and removed anti patterns (#337)

* added custom tailwind variables and removed anti patterns * fix(hero.tsx): removed tailwind variables and tailwind anti patterns in Hero.tsx * fix(hero.tsx): removed tailwind variables and anti patterns in Hero.tsx fix #315 * removed tailwind variables and anti patterns in Hero.tsx * changed shadow line 61 to remove tailwind anti pattern
open-sauced · Oct 4, 2022 · 549e676 · 549e676
1 parent 8338417
commit 549e676
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 31 deletions.
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -52,7 +52,7 @@ const Hero = () => {
   }, [searchTerm]);
 
   return (
-    <div className="flex flex-col py-[95px] items-center mx-[10px]">
+    <div className="flex flex-col py-24 items-center mx-2.5">
       <div>
         <h1 className="font-Lexend text-4xl md:text-5xl text-center text-lightSlate leading-tight tracking-tight">
           {`Find `}
@@ -62,12 +62,11 @@ const Hero = () => {
           </span>
 
           <br />
-
           to contribute today
         </h1>
       </div>
 
-      <div className="mt-[45px] px-[15px] gap-x-[10px] py-[10px] justify-between bg-white shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)] rounded-[16px] md:min-w-[422px] flex">
+      <div className="mt-11 px-4 gap-x-2.5 py-2.5 justify-between bg-white shadow-2xl rounded-2xl md:min-w-[26.375rem] flex">
         <img
           alt="search icon"
           src={searchNormal}
@@ -88,15 +87,15 @@ const Hero = () => {
 
         <img
           alt="command k"
-          className="pt-[7px]"
+          className="pt-1.5"
           src={cmdKIcon}
         />
       </div>
 
-      <div className="mt-[10px] flex w-full justify-center relative">
+      <div className="mt-2.5 flex w-full justify-center relative">
         {fetchedData.length > 0 && hasFocus && (
-          <div className="flex md:min-w-[400px] pb-[8px] absolute z-50 max-w-[400px] flex-col bg-white rounded-[10px] shadow-2xl">
-            <div className="bg-gray-100 py-[10px] px-[10px] md:px-[15px] border-b-gray-100 border-b-[2px] rounded-[10px] rounded-b-none w-full">
+          <div className="flex md:min-w-96 pb-2 absolute z-50 max-w-96 flex-col bg-white rounded-2.5 shadow-2xl">
+            <div className="bg-gray-100 py-2.5 px-10 md:px-3.5 border-b-gray-100 border-b-0.5 rounded-2.5 rounded-b-none w-full">
               <p className="text-gray-500 text-sm font-semibold">Repository</p>
             </div>
 
@@ -108,9 +107,9 @@ const Hero = () => {
                 target="_blank"
               >
                 <div className="flex flex-col hover:bg-gray-50 ">
-                  <div className="flex flex-col px-[10px] md:px-[15px] py-[10px]">
-                    <div className="flex items-center gap-x-[10px] mb-[5px]">
-                      <div className="w-[25px] h-[25px] overflow-hidden border-gray-400 border-[1px] bg-red-100  rounded-full">
+                  <div className="flex flex-col px-10 md:px-3.5 py-2.5">
+                    <div className="flex items-center gap-x-2.5 mb-1">
+                      <div className="w-6 h-6 overflow-hidden border-gray-400 border-px bg-red-100 rounded-full">
                         <img
                           alt={full_name}
                           className="w-full h-full"
@@ -127,21 +126,21 @@ const Hero = () => {
                       {description}
                     </p>
 
-                    <div className="flex justify-between mt-[8px]">
-                      <div className="flex gap-x-[5px]">
+                    <div className="flex justify-between mt-2">
+                      <div className="flex gap-x-1">
                         <StackedAvatar contributors={contributions} />
                       </div>
 
-                      <div className="flex gap-x-[6px]">
-                        <div className="flex items-center gap-x-[5px]">
+                      <div className="flex gap-x-1.5">
+                        <div className="flex items-center gap-x-1">
                           <FaRegDotCircle aria-hidden="true" />
 
                           <p className="text-gray-500 text-xs">
                             {humanizeNumber(issues)}
                           </p>
                         </div>
 
-                        <div className="flex items-center gap-x-[5px]">
+                        <div className="flex items-center gap-x-1">
                           <AiOutlineStar
                             aria-hidden="true"
                             className="mr-1"

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,9 +1,6 @@
 // tailwind.config.cjs
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,jsx,svelte,ts,tsx,vue}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,jsx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
       colors: {
@@ -23,22 +20,22 @@ module.exports = {
         osGrey: "#11181C",
         osOrange: "#ED5F00",
         lightOrange: "#FFCCA7",
-        lightSlate:"#11181C",
-        lightSlate11:"#687076",
-        lightSlate10:"#7E868C",
-        lightSlate06:"#DFE3E6",
-        lightSlate01:"#FBFCFD",
-        lightSlate09:"#889096",
-        lightOrange01:"#FEFCFB",
+        lightSlate: "#11181C",
+        lightSlate11: "#687076",
+        lightSlate10: "#7E868C",
+        lightSlate06: "#DFE3E6",
+        lightSlate01: "#FBFCFD",
+        lightSlate09: "#889096",
+        lightOrange01: "#FEFCFB",
         gradFirst: "#FF932F",
         gradMiddle: "#FF3C3C",
         gradLast: "#FF3C3C",
-        osBackgroundGrey: "#FBFCFD"
+        osBackgroundGrey: "#FBFCFD",
       },
       fontFamily: {
-        Inter: ['Inter', 'sans-serif'],
-        Lexend: ['Lexend', 'sans-serif'],
-        OpenSans: ['Open Sans', 'sans-serif']
+        Inter: ["Inter", "sans-serif"],
+        Lexend: ["Lexend", "sans-serif"],
+        OpenSans: ["Open Sans", "sans-serif"],
       },
       container: {
         center: true,
@@ -58,5 +55,4 @@ module.exports = {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     require("tailwindcss-radix")(),
   ],
-
 };