Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: fix button background color when clicked in HomeBanner and Navbar #141

Merged
merged 2 commits into from
Jul 24, 2024
Merged

style: fix button background color when clicked in HomeBanner and Navbar #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
766ad7e
change underline to bold for text in navbar once selected
gl-cardillo Jul 12, 2024
c67cb62
style: Added white background on focus for all buttons.
gl-cardillo Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/src/components/Guide/guide.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const Guide = () => {
</div>
<div className="mt-[40px] shadow-[2px_4px_35px_4px_rgba(0,0,0,0.10)] rounded-full">
<Link to="/customize">
<button className="inline-block bg-black text-white rounded-full border-2 border-black px-5 py-3 text-[25px] font-medium leading-normal transition duration-150 ease-in-out hover:bg-white hover:text-black focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 max-lg:text-[14px] hover:border-black">
<button className="inline-block bg-black text-white rounded-full border-2 border-black px-5 py-3 text-[25px] font-medium leading-normal transition duration-150 ease-in-out hover:bg-white hover:text-black focus:bg-white focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 max-lg:text-[14px] hover:border-black">
Customize Now!
</button>
</Link>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Home-banner/HomeBanner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const HomeBanner = () => {
</div>
<div>
<Link to="/categories">
<button className="inline-block bg-black rounded-full border-2 border-neutral-800 px-6 pb-[6px] pt-2 text-[16px] font-medium leading-normal text-white transition duration-150 ease-in-out hover:border-neutral-800 hover:bg-white hover:text-black focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 max-lg:text-[14px]">
<button className="inline-block bg-black rounded-full border-2 border-neutral-800 px-6 pb-[6px] pt-2 text-[16px] font-medium leading-normal text-white transition duration-150 ease-in-out hover:border-neutral-800 hover:bg-white hover:text-black focus:bg-white focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 max-lg:text-[14px]">
Explore
</button>
</Link>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Home-retailers/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Home_retailers_comp = () => {
<div className="text-[50px]">Join us today!</div>
<div className="flex gap-4">
<Link to="/retailer">
<button className="inline-block bg-black text-white rounded-full border-2 border-black px-4 pb-[6px] pt-2 text-[16px] font-medium leading-normal transition duration-150 ease-in-out hover:border-white hover:bg-white hover:text-black focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 max-lg:text-[14px]">
<button className="inline-block bg-black text-white rounded-full border-2 border-black px-4 pb-[6px] pt-2 text-[16px] font-medium leading-normal transition duration-150 ease-in-out hover:border-white hover:bg-white hover:text-black focus:bg-white focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 max-lg:text-[14px]">
Get started now
</button>
</Link>
Expand Down
10 changes: 5 additions & 5 deletions client/src/components/Navbar/navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const Navbar = () => {
to="/"
className={({ isActive }) =>
isActive
? "nav-link-active underline nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10"
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10"
}
>
Expand All @@ -151,7 +151,7 @@ const Navbar = () => {
to="categories"
className={({ isActive }) =>
isActive
? "nav-link-active underline nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
}
>
Expand All @@ -161,7 +161,7 @@ const Navbar = () => {
to="customize"
className={({ isActive }) =>
isActive
? "nav-link-active underline nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
}
>
Expand All @@ -171,7 +171,7 @@ const Navbar = () => {
to="shop"
className={({ isActive }) =>
isActive
? "nav-link-active underline nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
? "nav-link-active font-bold nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 w-10 mr-8"
: "nav-link bg-white-500 hover:bg-white-600 active:bg-white-700 focus:outline-none focus:ring-white-300 hover:font-bold w-10 mr-8"
}
>
Expand Down Expand Up @@ -203,7 +203,7 @@ const Navbar = () => {
</Link>
<Link to="signup">
{" "}
<button className="inline-block bg-black rounded-full border-2 border-neutral-800 px-6 pb-[6px] pt-2 text-[12px] font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:border-neutral-800 hover:bg-white hover:text-black focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 ">
<button className="inline-block bg-black rounded-full border-2 border-neutral-800 px-6 pb-[6px] pt-2 text-[12px] font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:border-neutral-800 hover:bg-white hover:text-black focus:bg-white focus:border-neutral-800 focus:text-neutral-800 focus:outline-none focus:ring-0 active:border-neutral-900 active:text-neutral-900 ">
SignUp
</button>{" "}
</Link>
Expand Down
Loading