Minor UI changes

pooranjoyb · Dec 31, 2023 · 92d9fed · 92d9fed
1 parent b0b77cc
commit 92d9fed
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 48 deletions.
diff --git a/src/Components/Features.jsx b/src/Components/Features.jsx
@@ -82,7 +82,7 @@ export default function Features() {
                   </li>
                 </ul>
               </ul>
-              <Link to={"/player"}>
+              <Link to={"/player"} className="w-[27%]">
                 <button className="rounded-full font-bold bg-slate-100 px-6 py-2 shadow-xl hover:shadow-inner transition-all ease-in duration-200 text-2xl text-[#9a3412] tracking-wide">
                   GET STARTED
                 </button>

diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
@@ -1,4 +1,5 @@
 import { FaHome } from "react-icons/fa";
+import { FaGlobe } from "react-icons/fa";
 import { BsFillPeopleFill } from "react-icons/bs";
 import { FaHashtag } from "react-icons/fa";
 import Hamburger from "/hamburger.png";
@@ -42,8 +43,8 @@ export default function Navbar() {
             </h1>
             <h1
               className={`inline border-b-4 pt-2  tracking-tight  text-2xl ${navbarColor === "black"
-                  ? "text-black border-black"
-                  : "text-white border-white"
+                ? "text-black border-black"
+                : "text-white border-white"
                 }`}
             >
               Bridge
@@ -74,8 +75,8 @@ export default function Navbar() {
       >
         <div
           className={`flex justify-end p-2 z-[60]  ${navbarColor === "black"
-              ? "text-black bg-gradient-to-r from-pink-400 to-gray-300 "
-              : "text-white bg-gradient-to-r from-pink-300 to-orange-300 "
+            ? "text-black bg-gradient-to-r from-pink-400 to-gray-300 "
+            : "text-white bg-gradient-to-r from-pink-300 to-orange-300 "
             }`}
         >
           <button
@@ -100,41 +101,52 @@ export default function Navbar() {
         </div>
 
         <ul className="p-4  text-xl mb-4">
-          <li
-            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
+          <Link to='/'>
+            <li
+              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
                 ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
                 : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-              }`}
-          >
-            <FaHome className="mr-2" />
-            <Link to='/search'>
+                }`}
+            >
+              <FaHome className="mr-2" />
+              Home
+            </li>
+          </Link>
+          <Link to='/search'>
+            <li
+              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
+                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+                }`}
+            >
+              <FaGlobe className="mr-2" />
               Discover
-            </Link>
-          </li>
-          <li
-            className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
+            </li>
+          </Link>
+          <Link to='/player'>
+            <li
+              className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
                 ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
                 : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
-              }`}
-          >
-            <IoIosPlayCircle className="mr-2" />
-            <Link to='/player'>
-            Music Player
-            </Link>
-          </li>
+                }`}
+            >
+              <IoIosPlayCircle className="mr-2" />
+              Music Player
+            </li>
+          </Link>
           <li
             className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
-                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
-                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+              ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+              : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
               }`}
           >
             <BsFillPeopleFill className="mr-2" />
             Top Artists
           </li>
           <li
             className={`py-4 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${navbarColor === "black"
-                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
-                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+              ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+              : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
               }`}
           >
             {" "}

diff --git a/src/tailwindcss/output.css b/src/tailwindcss/output.css
@@ -771,10 +771,30 @@ video {
   width: 100%;
 }
 
+.w-\[27\%\]{
+  width: 27%;
+}
+
 .w-full{
   width: 100%;
 }
 
+.w-1\/3{
+  width: 33.333333%;
+}
+
+.w-1\/5{
+  width: 20%;
+}
+
+.w-2\/5{
+  width: 40%;
+}
+
+.w-1\/4{
+  width: 25%;
+}
+
 .translate-x-0{
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -874,11 +894,6 @@ video {
   border-width: 4px;
 }
 
-.border-y-\[1px\]{
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
-
 .border-b-4{
   border-bottom-width: 4px;
 }
@@ -1096,10 +1111,6 @@ video {
   font-family: Jost, sans;
 }
 
-.font-serif{
-  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-}
-
 .text-2xl{
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1144,14 +1155,6 @@ video {
   font-weight: 700;
 }
 
-.font-normal{
-  font-weight: 400;
-}
-
-.font-extrabold{
-  font-weight: 800;
-}
-
 .tracking-tight{
   letter-spacing: -0.025em;
 }
@@ -1293,11 +1296,6 @@ body{
   background-color: rgb(244 114 182 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-white:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gradient-to-r:hover{
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }