Skip to content

Commit

Permalink
sahar/last-fix-footer (#95)
Browse files Browse the repository at this point in the history 
* Refactor ProfilePage and ExperienceCard components

The existing styles have been rearranged to improve readability. Redundant CSS styling such as hard-coded color values have been replaced with CSS variables. The ExperienceCard.jsx and ExperienceCard.css files have also been updated to accommodate these style changes.

* Update CSS styles in Footer component

Added padding, modified .footerItems direction, introduced new responsive styling, and updated Footer.jsx structure. These changes aim to enhance the layout across different devices, improve readability, and optimize alignment.
  • Loading branch information
@Sahar-Kavousi
Sahar-Kavousi authored Apr 7, 2024
1 parent 924ff58 commit 287d8ec
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 52 deletions.
35 changes: 33 additions & 2 deletions src/components/Footer/Footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1.5rem;
}

.footer-logo-link {
Expand All @@ -34,7 +35,7 @@
.footerItems {
display: flex;
list-style: none;
flex-direction: column;
flex-direction: row;
align-content: flex-start;
justify-content: center;
align-items: flex-start;
Expand Down Expand Up @@ -62,6 +63,10 @@

}

.footerItems li button {
font: var(--body-lg);
}

.footer-section {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -98,16 +103,42 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0.7rem;
}

.footer-logo-link {
display: inline-block;
}

.footerItems {

flex-direction: row;
gap: 1.2rem;
font: var(--headline-xl);
}
}

@media (min-width: 768px) {
.main-container {
width: 90%;
}
}

@media (min-width: 1024px) {
.footer-container {
width: 90%;
}
}

@media (min-width: 1280px) {
.footer-container {
width: 85%;
margin: 0 auto;
}
}

@media (min-width: 1536px) {
.footer-container {
width: 75%;
}
}
2 changes: 1 addition & 1 deletion src/components/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function Footer() {
return (
<>
<footer className="bg-dark fix-footer">
<div className="main-container footer-container">
<div className="footer-container">
<div className="footer-logo-link">
<Link to="/">
<img
Expand Down
126 changes: 77 additions & 49 deletions src/components/ProfilePage/ProfilePageRender.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import useUser from "../../hooks/use-user.js";
import useProfile from "../../hooks/use-profile.js";
import {useParams, Link} from "react-router-dom";
import {useState, useEffect} from "react";
import {FaPlus} from "react-icons/fa6";
import { useParams, Link } from "react-router-dom";
import { useState, useEffect } from "react";
import { FaPlus } from "react-icons/fa6";
import ExperienceCard from "../ExperienceCard/ExperienceCard.jsx";
import CreateExperienceForm from "../Forms/CreateExperienceForm.jsx";
import "../ProfilePage/ProfilePage.css";
Expand Down Expand Up @@ -128,7 +128,6 @@ function ProfilePageDetails() {
<p>{profile.bio}</p>
</div>


</div>
<div className="other-info-container">
<div className="skills-section">
Expand All @@ -152,14 +151,44 @@ function ProfilePageDetails() {
</div>

</div>
<div className="profile-page-render-experiences-section">
<h3>Experiences</h3>

</div>
<div className="other-info-container">
<div className="skills-section">
<h3>Tags:</h3>
<div className="skill-tags">
<ul>
{profile.tags.map((tag, index) => (
<li key={index}>{tag}</li>
))}
</ul>
</div>
<div>
<div className="industry-tags">
<h3>Industry Tags:</h3>
<ul>
{profile.industries.map((industry, index) => (
<li key={index}>{industry}</li>
))}
</ul>
</div>
</div>
{/*<a target="_blank" href="#">*/}
{/* <MdModeEdit*/}
{/* style={{color: "#4078c0", width: "24px", height: "24px"}}*/}
{/* />*/}
{/*</a>*/}
</div>
<div className="profile-page-render-experiences-section">
<h3>Experiences</h3>

{auth.token && user.id == profile.owner ? (
<div className="experience-icons">
<a onClick={() => setExperiencePopUp(true)}>
<FaPlus size={24}
style={{color: "#4078c0", width: "24px", height: "24px"}}
style={{color: "#4078c0", width: "24px", height: "24px"}}
/>
</a>
</div>) : (
Expand Down Expand Up @@ -206,51 +235,50 @@ function ProfilePageDetails() {
<a target="_blank" href={profile.linkedin_url} className="experience-contact-info">
<BsLinkedin
style={{color: "#0077B5", width: "24px", height: "24px"}}
/>{" "}
LinkedIn
</a>
)}
{profile.instagram_url && (
<a target="_blank" href={profile.instagram_url} className="experience-contact-info">
<BsInstagram
style={{color: "#f9ce34", width: "24px", height: "24px"}}
/>{" "}
Instagram
</a>
)}
{profile.portfolio_url && (
<a target="_blank" href={profile.portfolio_url} className="experience-contact-info">
<BsGlobe2
style={{color: "#0077b5", width: "24px", height: "24px"}}
/>{" "}
Website
</a>
)}
</>
) : (
<div className="sign-up-message">
<p>
Unlock the full potential of our platform by registering today!
Once you're a member, you'll gain access to full profiles and
the ability to contact individuals. Don't miss out on valuable
connections.{" "}
</p>
<p>
<Link to="/signup">Sign Up</Link> today!
</p>
<p> Already a member? </p>
<p>
{" "}
<Link to="/login">Log in</Link> to see Contact details
</p>
</div>
)}
</div>
<div>
/>{" "}
LinkedIn
</a>
)}
{profile.instagram_url && (
<a target="_blank" href={profile.instagram_url} className="experience-contact-info">
<BsInstagram
style={{color: "#f9ce34", width: "24px", height: "24px"}}
/>{" "}
Instagram
</a>
)}
{profile.portfolio_url && (
<a target="_blank" href={profile.portfolio_url} className="experience-contact-info">
<BsGlobe2
style={{color: "#0077b5", width: "24px", height: "24px"}}
/>{" "}
Website
</a>
)}
</>
) : (
<div className="sign-up-message">
<p>
Unlock the full potential of our platform by registering today!
Once you're a member, you'll gain access to full profiles and
the ability to contact individuals. Don't miss out on valuable
connections.{" "}
</p>
<p>
<Link to="/signup">Sign Up</Link> today!
</p>
<p> Already a member? </p>
<p>
{" "}
<Link to="/login">Log in</Link> to see Contact details
</p>
</div>
)}
</div>
<div>

{experiencePopUp ?
<CreateExperienceForm id={id} trigger={experiencePopUp} setTrigger={setExperiencePopUp}/> : null}
</div>
{experiencePopUp ? <CreateExperienceForm id={id} trigger={experiencePopUp} setTrigger={setExperiencePopUp}/> : null}
</div>
</section>
);
}
Expand Down

0 comments on commit 287d8ec

Please sign in to comment.