Skip to content

Commit

Permalink
updated UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@kecav
kecav committed Dec 17, 2021
1 parent fa37553 commit dd5ae72
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 120 deletions.
25 changes: 22 additions & 3 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
:root {
--soft-light1: #585858;
Expand All @@ -21,6 +23,8 @@ body {

.main-header {
background: linear-gradient(90deg, red, blue);
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}

.web-header {
Expand Down Expand Up @@ -57,6 +61,7 @@ body {
align-items: center;
row-gap: 1rem;
font-size: 0.75rem;
width: 100%;
}

.nav-icons {
Expand All @@ -71,7 +76,8 @@ body {
pointer-events: none
}

.selection-menu {

/* .selection-menu {
display: flex;
flex-direction: row;
justify-content: space-evenly;
Expand All @@ -81,17 +87,30 @@ body {
column-gap: 0.5rem;
max-width: var(--max-width);
margin: auto;
}
} */

.nav-section {
background-color: #000;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
list-style: none;
padding: 1rem 3rem;
grid-column-gap: 0.5rem;
column-gap: 0.5rem;
/* max-width: var(--max-width); */
margin: auto;
border-bottom: 2px solid #272727;
}

.active-navigation {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 4px solid #0000ce;
/* border-bottom: 4px solid #0000ce; */
background: #222;
border-radius: 0.5rem;
}

.active-navigation * {
Expand Down
122 changes: 49 additions & 73 deletions src/components/Header/NavigationMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,81 +6,57 @@ import ReelIco from "../../Media/reel-icon.svg";
import StoryIco from "../../Media/story-icon.svg";
import IgtvIco from "../../Media/igtv-icon.svg";

const NavigationMenu = (props) => {
const NavigationMenu = () => {
return (
<>
<ul className="selection-menu">
<li>
<NavLink
to="/igdownloader/profile"
className="nav-buttons"
activeClassName="active-navigation"
>
<img
src={ProfileIco}
className="nav-icons"
alt="search profile"
/>
<p className="nav-name"> Profile </p>
</NavLink>
</li>
<li>
<NavLink
to="/igdownloader/story"
className="nav-buttons"
activeClassName="active-navigation"
>
<img
src={StoryIco}
className="nav-icons"
alt="search Story"
/>
<p className="nav-name"> Story </p>
</NavLink>
</li>
<li>
<NavLink
to="/igdownloader/reel"
className="nav-buttons"
activeClassName="active-navigation"
>
<img
src={ReelIco}
className="nav-icons"
alt="search Reel"
/>
<p className="nav-name"> Reel </p>
</NavLink>
</li>
<li>
<NavLink
to="/igdownloader/post"
className="nav-buttons"
activeClassName="active-navigation"
>
<img
src={PostIco}
className="nav-icons"
alt="search Post"
/>
<p className="nav-name"> Post </p>
</NavLink>
</li>
<li>
<NavLink
to="/igdownloader/igtv"
className="nav-buttons"
activeClassName="active-navigation"
>
<img
src={IgtvIco}
className="nav-icons"
alt="search Igtv"
/>
<p className="nav-name"> Igtv </p>
</NavLink>
</li>
</ul>
<NavLink
to="/igdownloader/profile"
className="nav-buttons"
activeClassName="active-navigation"
>
<img
src={ProfileIco}
className="nav-icons"
alt="search profile"
/>
<p className="nav-name"> Profile </p>
</NavLink>

<NavLink
to="/igdownloader/story"
className="nav-buttons"
activeClassName="active-navigation"
>
<img src={StoryIco} className="nav-icons" alt="search Story" />
<p className="nav-name"> Story </p>
</NavLink>

<NavLink
to="/igdownloader/reel"
className="nav-buttons"
activeClassName="active-navigation"
>
<img src={ReelIco} className="nav-icons" alt="search Reel" />
<p className="nav-name"> Reel </p>
</NavLink>

<NavLink
to="/igdownloader/post"
className="nav-buttons"
activeClassName="active-navigation"
>
<img src={PostIco} className="nav-icons" alt="search Post" />
<p className="nav-name"> Post </p>
</NavLink>

<NavLink
to="/igdownloader/igtv"
className="nav-buttons"
activeClassName="active-navigation"
>
<img src={IgtvIco} className="nav-icons" alt="search Igtv" />
<p className="nav-name"> Igtv </p>
</NavLink>
</>
);
};
Expand Down
87 changes: 43 additions & 44 deletions src/components/LoadedResponses/LoadedProfile.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,53 @@
const LoadedProfile = (props) => {
const responseObj = props.responseObj;
const reponseError = responseObj.error_code;
const responseError = responseObj.error_code;

if (responseError) {
return (
<div className="error-page">
<h1>No such account found !</h1>
<p>{responseObj.message}</p>
</div>
);
}

return (
<>
{reponseError && (
<div className="error-page">
<h1>No such account found !</h1>
<p>{responseObj.message}</p>
</div>
)}
{!reponseError && (
<>
<article className="profile-description">
<div className="profile-header">
<img
src={responseObj.hd_profile_pic_versions[0].url}
className="profile-picture"
alt="Profile"
/>
<section className="profile-counts">
<div className="media-count">
<h3>{responseObj.media_count}</h3>
<p>Posts</p>
</div>
<div className="follower-count">
<h3>{responseObj.follower_count}</h3>
<p>Followers</p>
</div>
<div className="following-count">
<h3>{responseObj.following_count}</h3>
<p>Followings</p>
</div>
</section>
<article className="profile-description">
<div className="profile-header">
<img
src={responseObj.hd_profile_pic_versions[0].url}
className="profile-picture"
alt="Profile"
/>
<section className="profile-counts">
<div className="media-count">
<h3>{responseObj.media_count}</h3>
<p>Posts</p>
</div>
<div className="follower-count">
<h3>{responseObj.follower_count}</h3>
<p>Followers</p>
</div>
<div className="following-count">
<h3>{responseObj.following_count}</h3>
<p>Followings</p>
</div>
</article>
<section className="user-intro">
<h3 className="username">{responseObj.username}</h3>
<p className="fullname">{responseObj.full_name}</p>
<p className="bio">{responseObj.biography}</p>
</section>
<section className="profile-picture-container">
<img
src={responseObj.hd_profile_pic_url_info.url}
className="fullsize-profile-picture"
alt="Fullsize"
/>
</section>
</>
)}
</div>
</article>
<section className="user-intro">
<h3 className="username">{responseObj.username}</h3>
<p className="fullname">{responseObj.full_name}</p>
<p className="bio">{responseObj.biography}</p>
</section>
<section className="profile-picture-container">
<img
src={responseObj.hd_profile_pic_url_info.url}
className="fullsize-profile-picture"
alt="Fullsize"
/>
</section>
</>
);
};
Expand Down

0 comments on commit dd5ae72

Please sign in to comment.