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

Navbar Formatting #904

Merged
merged 1 commit into from
Jan 1, 2025
Merged

Navbar Formatting #904

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
59 changes: 36 additions & 23 deletions src/Components/TopContainer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,51 +14,64 @@
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
position: fixed;
top: 20px;
margin-left: 50px;
margin-left: 60px;
gap: 0.1rem;
}
/* Theme Styles */

.p-td{
.p-td {
background-color: #cf00a3; /* Background color */
color: white; /* Text color */
border: none; /* Remove default border */
border-radius: 4px; /* Rounded corners */
border-radius: 15px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
padding: 4px 16px; /* Reduce padding for a smaller button */
font-size: 14px;
padding-left: 23px; /* Reduce font size */
transition: background-color 0.3s;
margin-left: 30px;
transition: background-color 0.3s, transform 0.3s; /* Add transition for smooth scaling */
margin-left: -40px;
}

.p-td:hover {
transform: scale(1.1); /* Increase size by 10% on hover */
}
.p-tf{

.p-tf {
display: inline-block; /* Ensures that the text stays on the same line */
white-space: nowrap;
gap: 10px;
background-color: #cf00a3; /* Background color */
height: 40px; /* Increased height for better button size */
width: 200px; /* Increased width */
color: white; /* Text color */
border: none; /* Remove default border */
border-radius: 4px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
padding: 2px 18px; /* Reduce padding for a smaller button */
border-radius: 15px; /* Rounded corners */
font-size: 14px;
width: 100%;
padding-left: 10px;
transition: background-color 0.3s;
text-align: center; /* Center align text horizontally */
line-height: 40px; /* Vertically align text */
transition: background-color 0.3s, transform 0.3s; /* Add transform transition */
margin-left: 20px;
}

.p-tg{
.p-tf:hover {
transform: scale(1.1); /* Increase size by 10% on hover */
}

.p-tg {
background-color: #cf00a3; /* Background color */
color: white; /* Text color */
border: none; /* Remove default border */
border-radius: 4px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
padding: 12px 16px; /* Reduce padding for a smaller button */
padding: 12px 16px; /* Padding for button size */
font-size: 14px;
padding-left: 23px; /* Reduce font size */
transition: background-color 0.3s;
margin-left: 30px;
transition: background-color 0.3s, transform 0.3s; /* Add transform transition */
margin-left: 5px;
}

.p-tg:hover {
transform: scale(1.1); /* Increase size by 10% on hover */
}

/* Dark Theme */
.dark .navbar,
.dark .inputBox,
Expand All @@ -83,6 +96,9 @@
.searchbtn:hover {
color: #cf00a3;
}
.go-pro-btn{
margin-left: -10px;
}

/* Go Pro Button Hover */
.go-pro-btn:hover {
Expand Down Expand Up @@ -177,7 +193,7 @@

.inputBox input {
position: relative;
padding: 0.5rem 2rem;
padding: 0.5rem 5rem;
border-radius: 4px;
border: 1px solid #ccc;
}
Expand All @@ -190,8 +206,7 @@
/* Search button styles */
.searchbtn {
top: 10px;
right: 20px;
padding-left: 5px;
right: 1220px;
color: #757380;
font-size: 1.5rem;
cursor: pointer;
Expand All @@ -202,8 +217,6 @@
position: absolute;
top: 40px;
height: 200px;
background: white;
color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
z-index: 10;
Expand Down
99 changes: 49 additions & 50 deletions src/Components/TopContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,57 +219,56 @@ function TopContainer() {
</div>
</div>

<div className="inputBox o2">
<div className="input-div">
<i
style={{
cursor: isMobile ? "pointer" : "default",
}}
onClick={searchbtnclick}
className="searchbtn"
>
<BiSearchAlt />
</i>
<input
ref={searchbar}
type="text"
placeholder="Search projects, users"
onChange={(e) => setInput(e.target.value)}
/>
</div>
<div className="inputBox o2">
<div className="input-div" style={{ display: "flex", alignItems: "center", borderRadius: "5px", padding: "0px", width: "100%" }}>
<input
ref={searchbar}
type="text"
placeholder="Search projects, users"
onChange={(e) => setInput(e.target.value)}
style={{ flex: 1, border: "none", outline: "none", padding: "5px" , width: "200px"}}
/>
<i
style={{
cursor: isMobile ? "pointer" : "default",
padding: "0 10px",
display: "flex",
alignItems: "center",
}}
onClick={searchbtnclick}
className="searchbtn"
>
<BiSearchAlt />
</i>
</div>

{searchResult ? (
<div id="search_results" style={{ color: "white" }}>
{searchResult.map((item, index) => (
<Link to={`/readmore/${item.id}`} key={index}>
<div>
<img
src={item.image}
alt={item.title}
style={{
width: "200px",
height: "80px",
display: "block",
margin: "0 auto",
}}
/>
<p
id="search_result_title"
style={{ color: "white" }}
key={`title${index}`}
>
{item.title}
</p>
<span
style={{ color: "white" }}
key={`category${index}`}
>
{item.category}
</span>
</div>
</Link>
))}
{searchResult ? (
<div id="search_results" style={{ color: "white" }}>
{searchResult.map((item, index) => (
<Link to={`/readmore/${item.id}`} key={index}>
<div style={{ display: "flex", alignItems: "center", margin: "10px 0" }}>
<img
src={item.image}
alt={item.title}
style={{ width: "50px", height: "50px", borderRadius: "5px", marginRight: "10px" }}
/>
<div>
<p
id="search_result_title"
style={{ color: "cyan", margin: "0" }}
>
{item.title}
</p>
<span
style={{ color: "white", fontSize: "0.9em" }}
>
{item.category}
</span>
</div>
</div>
</Link>
))}
</div>
) : null}

<div className="p-td">
Expand All @@ -284,7 +283,7 @@ function TopContainer() {
<div className="p-tf">
<li className="nav-item">
<Link to="/login">
launch your journey
Launch your Journey
</Link>
</li>
</div>
Expand Down
Loading