Skip to content

Setting the UI of Main Page #639

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

Merged
merged 2 commits into from
Jul 31, 2024
Merged

Setting the UI of Main Page #639

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
1000098
Setting the UI of Main Page
Ojas-Arora Jul 30, 2024
c1d2fe3
Merge branch 'main' into date
Ojas-Arora Jul 30, 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
10 changes: 10 additions & 0 deletions src/Components/MainRightTopCard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/* Add this to your CSS file */
.earning p {
transition: background-color 0.3s ease, color 0.3s ease;
}

.earning p:hover {
background-color: #cf00a3;
color: white;
}

1 change: 1 addition & 0 deletions src/Components/MainRightTopCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState } from "react";
import './MainRightTopCard.css'; // Ensure this is imported

function MainRightTopCard() {
const [showMore, setShowMore] = useState(false);
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ function Menu() {
background: '#19162c',
}}
>
<img src={logo} alt="Logo" className="logo" style={{ width: '90px' }} /> {/* Adjusted width */}
<img src={logo} alt="Logo" className="logo" style={{ width: '75px' }} /> {/* Adjusted width */}
</div>
<ul
className="sidebar-menu"
Expand Down
41 changes: 23 additions & 18 deletions src/Components/TopContainer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@
white-space: nowrap;
color: white;
}

.nav-item a:hover span {
color: #cf00a3; /* Pink color on hover */
}

.notification-item:hover {
background-color: #cf00a3;
color: white; /* Optional: Change text color for better contrast */
}
.navbar {
width: 1542px;
width: 1533px;
height: 60px;
background: #19162c;
display: flex;
Expand All @@ -17,14 +21,14 @@
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
position: relative;
top: 0;
gap: 0.5rem;
margin-left: 130px;
gap: 0.1rem;
margin-left: 120px;
}

.profileContainer .go-pro-btn {
padding: 20px 20px; /* Adjust padding to change the button size */
padding: 10px 20px; /* Adjust padding to change the button size */
}


.largeview {
display: flex;
list-style: none;
Expand All @@ -33,7 +37,7 @@
}

.largeview .nav-item {
margin-right: 20px;
margin-right: 10px;
}

.largeview .nav-item a {
Expand All @@ -52,6 +56,7 @@
position: relative;
margin-top: -10px;
}

@media screen and (max-width: 1500px) {
.mobview .inputBox {
margin-top: 10px; /* Add 10px space above the search box */
Expand Down Expand Up @@ -122,7 +127,7 @@

.mobview #shortview {
position: absolute;
left: 10px; /*made it so that the dropdown is towards left when screen size >524 but not enough*/
left: 10px;
top: 60px;
background: rgba(0, 0, 0, 0.8);
border-radius: 10px;
Expand Down Expand Up @@ -175,27 +180,27 @@
}
}

@media (max-width: 830px){
.navbar{
@media (max-width: 830px) {
.navbar {
width: 80vw;
}
}

@media (max-width: 650px){
.navbar{
@media (max-width: 650px) {
.navbar {
width: 80vw;
}

.profileIconlogin{
.profileIconlogin {
width: 140px !important;
font-size: 12px !important;
}

}
@media (max-width: 525px){
.navbar{

@media (max-width: 525px) {
.navbar {
flex-direction: column;
height: min-content;
gap: 30px;
gap: 20px;
}
}
}
69 changes: 32 additions & 37 deletions src/Components/TopContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import React, { useEffect, useState, useRef } from "react";
import { BiSearchAlt } from "react-icons/bi";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faBars, faHome, faInfoCircle, faWrench, faBriefcase,faStar, faUsers, faEnvelope, faQuestionCircle, faNewspaper } from '@fortawesome/fontawesome-free-solid';
import { faBars, faHome, faInfoCircle, faWrench, faBriefcase, faStar, faUsers, faEnvelope, faQuestionCircle, faNewspaper } from '@fortawesome/fontawesome-free-solid';
import { Link } from 'react-router-dom';
import { FaBell, FaChevronDown } from "react-icons/fa";
import women from "../img/women.jpg";
import search from "./searchResults";
import "./TopContainer.css";



function TopContainer() {
const [input, setInput] = useState("");
const [searchResult, setSearchResult] = useState(null);
Expand Down Expand Up @@ -89,8 +87,6 @@ function TopContainer() {
};
}, []);



const toggleMenu = () => {
setMobMenu(!mobMenu);
};
Expand Down Expand Up @@ -122,7 +118,7 @@ function TopContainer() {
<li className="nav-item"><a href="/freelancer"><FontAwesomeIcon icon={faUsers} /> Hire a Freelancer</a></li>
<li className="nav-item"><a href='/contacts'><FontAwesomeIcon icon={faEnvelope} /> Contact</a></li>
<li className="nav-item"><a href='/blogs'><FontAwesomeIcon icon={faNewspaper} /> Blogs</a></li>
<li className="nav-item"><a href='/faq'><FontAwesomeIcon icon={faQuestionCircle} /> FAQ</a></li>
<li className="nav-item" style={{ marginRight: "10px" }}><a href='/faq'><FontAwesomeIcon icon={faQuestionCircle} /> FAQ</a></li>
</ul>

<div className="mobview">
Expand All @@ -138,12 +134,11 @@ function TopContainer() {
<li><a href='/RateUs'><FontAwesomeIcon icon={faStar} /> RateUs</a></li>
<li><a href='/blogs'><FontAwesomeIcon icon={faNewspaper} /> Blogs</a></li>
<li><a href='/faq'><FontAwesomeIcon icon={faQuestionCircle} /> FAQ</a></li>

</ul>
</div>
</div>

<div className="inputBox">
<div className="inputBox" style={{ marginRight: "30px" }}>
<input
ref={searchbar}
type="text"
Expand All @@ -158,22 +153,23 @@ function TopContainer() {
{searchResult.map((item, index) => (
<Link to={`/readmore/${item.id}`} key={index}>
<div>
<p id="search_result_title" key={`title${index}`}>
{item.title}
</p>
<span key={`category${index}`}>{item.category}</span>
</div></Link>
<p id="search_result_title" key={`title${index}`}>
{item.title}
</p>
<span key={`category${index}`}>{item.category}</span>
</div>
</Link>
))}
</div>
) : null}
</div>

<div className="profileContainer" >
<a href="/pricing">
<button className="go-pro-btn">Go Pro</button>
</a>
<a href="/pricing">
<button className="go-pro-btn" style={{ marginRight: "55px" }}>Go Pro</button>
</a>

<div className="notification-container" ref={dropdownRef}>
<div className="notification-container" style={{ gap: "10px" }} ref={dropdownRef}>
<div className="profileIcon" onClick={toggleDropdown}>
<FaBell />
</div>
Expand All @@ -196,29 +192,28 @@ function TopContainer() {
</div>
{isLoggedIn ? (
<>
<div className="profileImage">
<img src={women} alt="" />
</div>
<div className="profileImage">
<img src={women} alt="" />
</div>

<p className="profileName">{username}</p>
<a className="menuChevron" id="menuChevron" onClick={toggleDrop}>
<FaChevronDown />
</a>

<div className="menuContainer" id="menuContainer">
<ul>
<li>My Profile</li>
<li>Theme</li>
<li>Followers</li>
<li onClick={handleSignOut}>Sign Out</li>
</ul>
</div>
<p className="profileName">{username}</p>
<a className="menuChevron" id="menuChevron" onClick={toggleDrop}>
<FaChevronDown />
</a>

<div className="menuContainer" id="menuContainer">
<ul>
<li>My Profile</li>
<li>Theme</li>
<li>Followers</li>
<li onClick={handleSignOut}>Sign Out</li>
</ul>
</div>
</>
) : (

<Link to="/Login" className="profileIconlogin">
Launch Your Journey
</Link>
<Link to="/Login" className="profileIconlogin"style={{ marginRight: "20px" }}>
Launch Your Journey
</Link>
)}
</div>
</div>
Expand Down