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

re-styled home page #84

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

re-styled home page #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!doctype html>
<html lang="en">
<body>
<div id="root"></div>
<div id="root" style="--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
24 changes: 14 additions & 10 deletions client/src/components/GiftSortNavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,17 @@ const GiftSortNavbar = () => {
setDropdownOpen(false);
};

const buttonStyle =
"px-4 py-2 text-black text-xs rounded-md bg-gray-100 border-gray-400";
//const buttonStyle = "px-4 py-2 text-black text-xs rounded-md bg-gray-100 border-gray-400";
const buttonStyle = "px-4 text-[#BC2C36] font-bold";
const activeButtonStyle = "bg-gray-400";

return (
<div className="bg-gray-100 p-2">
<div className="p-2">
<div className="flex" style={{ maxWidth: "1440px" }}>
<div className="flex space-x-2 " style={{ marginRight: "680px" }}>
<button
className={`${buttonStyle} ${
activeButton === "Shop" ? activeButtonStyle : ""
}`}
className={`${buttonStyle} ${activeButton === "Shop" ? activeButtonStyle : ""
}`}
onClick={() => handleButtonClick("Shop")}
>
Shop All Gifts
Expand All @@ -58,15 +57,20 @@ const GiftSortNavbar = () => {
d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
/>
</svg>
<div className="relative">

<div className="relative flex flex-row">
<button
className={`${buttonStyle} ${
activeButton === "SignUp" ? activeButtonStyle : ""
}`}
className={`${buttonStyle} ${activeButton === "SignUp" ? activeButtonStyle : ""
}`}
onClick={handleDropdownToggle}
>
Sort By: {selectedFeature}
</button>

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 8.58008L12 13.1701L16.59 8.58008L18 10.0001L12 16.0001L6 10.0001L7.41 8.58008Z" fill="#32211E" />
</svg>

{dropdownOpen && (
<div className="absolute mt-2 right-0 border border-gray-300 rounded-md bg-gray-100 text-black text-sm shadow-lg z-10">
<ul>
Expand Down
87 changes: 40 additions & 47 deletions client/src/components/NavBarUpdated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,59 +12,52 @@ const Navbar = () => {
const activeButtonStyle = "bg-gray-400";

return (
<div className="bg-gray-100 p-2">
<div className="flex" style={{ maxWidth: "1440px" }}>
<div className="flex space-x-2">
<button
className={`${buttonStyle} ${
activeButton === "Shop" ? activeButtonStyle : ""
<div className="flex p-4 w-full">
<div className="flex space-x-2">
<button
className={`${buttonStyle} ${activeButton === "Shop" ? activeButtonStyle : ""
}`}
onClick={() => handleButtonClick("Shop")}
>
Shop
</button>
<button
className={`${buttonStyle} ${
activeButton === "Request" ? activeButtonStyle : ""
onClick={() => handleButtonClick("Shop")}
>
Shop
</button>
<button
className={`${buttonStyle} ${activeButton === "Request" ? activeButtonStyle : ""
}`}
onClick={() => handleButtonClick("Request")}
>
Request
</button>
<button
className={`${buttonStyle} ${
activeButton === "More" ? activeButtonStyle : ""
onClick={() => handleButtonClick("Request")}
>
Request
</button>
<button
className={`${buttonStyle} ${activeButton === "More" ? activeButtonStyle : ""
}`}
onClick={() => handleButtonClick("More")}
>
More
</button>
</div>
<div className="ml-auto flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-4 h-4" style={{ marginRight: '10px' }}>
<path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd" />
</svg>
onClick={() => handleButtonClick("More")}
>
More
</button>
</div>
<div className="ml-auto flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-4 h-4" style={{ marginRight: '10px' }}>
<path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-4 h-4" style={{ marginRight: '10px' }}>
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
<button
className={`${buttonStyle} ${
activeButton === "LogIn" ? activeButtonStyle : ""
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-4 h-4" style={{ marginRight: '10px' }}>
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
<button
className={`${buttonStyle} ${activeButton === "LogIn" ? activeButtonStyle : ""
}`}
onClick={() => handleButtonClick("LogIn")}
>
Log In
</button>
<button
className={`${buttonStyle} ${
activeButton === "SignUp" ? activeButtonStyle : ""
onClick={() => handleButtonClick("LogIn")}
>
Log In
</button>
<button
className={`${buttonStyle} ${activeButton === "SignUp" ? activeButtonStyle : ""
}`}
onClick={() => handleButtonClick("SignUp")}
>
Sign Up
</button>
</div>
onClick={() => handleButtonClick("SignUp")}
>
Sign Up
</button>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const SearchBar = () => {
};

return (
<div className="bg-gray-100 p-4 w-full">
<div className="p-4 w-full">
<div className="flex items-center relative">
<input
type="text"
Expand Down
7 changes: 4 additions & 3 deletions client/src/components/UpdatedGiftItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ type GiftItemProps = {

function UpdatedGiftItem({ gift, isSaved, onFavoriteClick }: GiftItemProps) {
return (
<div className="relative flex flex-col bg-gray-100 flex-start">
<div className="bg-gray-200 w-40 h-40 mx-auto mb-2 relative">
<div className="relative flex flex-col flex-start mb-4">
<div className=" bg-[#F4E6DC] w-80 h-80 mx-auto mb-2 relative">
<svg
xmlns="http://www.w3.org/2000/svg"
fill={isSaved ? "red" : "none"}
Expand All @@ -26,7 +26,8 @@ function UpdatedGiftItem({ gift, isSaved, onFavoriteClick }: GiftItemProps) {
/>
</svg>
</div>
<div className="">

<div className="" style={{ marginBottom: "5px" }}>
<h2 className="text-sm text-black font-bold">{gift.Name}</h2>
<h2 className="text-xs text-black">${gift.Price}</h2>
</div>
Expand Down
24 changes: 24 additions & 0 deletions client/src/images/caitsCuratesLogo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions client/src/images/closedGift.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading