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

Style social logos & UI Changes #80

Merged
merged 6 commits into from
Oct 28, 2023
Merged

Style social logos & UI Changes #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
34d6db3
Added social links
arjxn-py Oct 28, 2023
48bc612
Style social icons
arjxn-py Oct 28, 2023
87b8cf7
Fix searchbar style
arjxn-py Oct 28, 2023
3a2b187
Reset search button style
arjxn-py Oct 28, 2023
cc5cab5
Style social Icons in mobile view
arjxn-py Oct 28, 2023
bdb2f67
Style changes to hamburger menu
arjxn-py Oct 28, 2023
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
174 changes: 114 additions & 60 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,156 @@
import React, { useState } from "react";
// import { Header, Image } from 'semantic-ui-react'
import Curiologo from '../assets/images/Csmall.png'
import './header.css';
import { Link ,BrowserRouter as Router } from 'react-router-dom';
import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa';
import Curiologo from "../assets/images/Csmall.png";
import "./header.css";
import { Link, BrowserRouter as Router } from "react-router-dom";
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";

const HeaderCurio = () => {
//Used to toggle the hamburger menu
const [triggerMenu, setTriggerMenu] = useState(false);

return (
<>

<div className="curio__header">
{/* Wrapping the Link components within the Router component */}
<Router>
{/* Logo linking to the homepage */}
<Link to="/" style={{ textDecoration: "none" }}>
<div className="gradient__text">
<h1>
<img src={Curiologo} alt="Curio" className="curio__icon" />
<span>URIO</span>
</h1>
<p className="curio__tag">
<b>Your Video Translator :)</b>
</p>
</div>
</Link>
{/* Wrapping the Link components within the Router component */}
<Router>
{/* Logo linking to the homepage */}
<Link to="/" style={{ textDecoration: "none" }}>
<div className="gradient__text">
<h1>
<img src={Curiologo} alt="Curio" className="curio__icon" />
<span>URIO</span>
</h1>
<p className="curio__tag">
<b>Your Video Translator :)</b>
</p>
</div>
</Link>

<div className="curio__sign">
<div className="curio__sign">
{/* Social icons */}
<FaGithub />
<FaLinkedin />
<FaTwitter />
<a
href="https://github.com/Curio-org/Curio"
target="_blank"
rel="noopener noreferrer"
>
<div className="github_icon">
<FaGithub />
</div>
</a>
<a
href="https://www.linkedin.com/company/curio-cic"
target="_blank"
rel="noopener noreferrer"
>
<div className="linkedin_icon">
<FaLinkedin />
</div>
</a>
<a
href="https://twitter.com/_CURI0"
target="_blank"
rel="noopener noreferrer"
>
<div className="twitter_icon">
<FaTwitter />
</div>
</a>
</div>
</Router>
</div>
{/*Added a mobile version
Screen width is < 768px above is disabled and below is triggered
Added hamburger menu and generic options for the menu
*/}
{ }
{}
<div className="curio__header-m">
{/* Wrapping the Link components within the Router component */}
<Router>
{/* Wrapping the Link components within the Router component */}
<Router>
{/* Logo linking to the homepage */}
<Link to="/" style={{ textDecoration: "none" }}>
<div className=" gradient__text gradient__text-m">
<h1>
<img src={Curiologo} alt="Curio" className="curio__icon" />
<span>URIO</span>
</h1>
<p className="curio__tag">
<b>Your Video Translator :)</b>
</p>
</div>
</Link>
<div className=" gradient__text gradient__text-m">
<h1>
<img src={Curiologo} alt="Curio" className="curio__icon" />
<span>URIO</span>
</h1>
<p className="curio__tag">
<b>Your Video Translator :)</b>
</p>
</div>
</Link>

<button onClick={() => { setTriggerMenu(!triggerMenu) }} className="hamburger-m" type="button">
{/*
<button
onClick={() => {
setTriggerMenu(!triggerMenu);
}}
className="hamburger-m"
type="button"
>
{/*
This is the hamburger line icon
First one is when it's off
Second one is when it's on
*/}
<div
className={triggerMenu === false ? "hamburger-m" : "display-none"}
>
<div className="hamburger-lines-m"></div>
<div className="hamburger-lines-m"></div>
<div className="hamburger-lines-m"></div>
</div>
<div
className={triggerMenu === true ? "hamburger-m" : "display-none"}
>
<div className="lines-rotated-left-m"></div>

<div className="lines-rotated-right-m"></div>
</div>
</button>
<div
className={triggerMenu === false ? "hamburger-m" : "display-none"}
>
<div className="hamburger-lines-m"></div>
<div className="hamburger-lines-m"></div>
<div className="hamburger-lines-m"></div>
</div>
<div
className={triggerMenu === true ? "hamburger-m" : "display-none"}
>
<div className="lines-rotated-left-m"></div>

</Router>
<div className="lines-rotated-right-m"></div>
</div>
</button>
</Router>
</div>
{/*
The menu of the hamburger
If trigger is true, display it, if not don't*/}
The menu of the hamburger
If trigger is true, display it, if not don't*/}
<div
className={
triggerMenu === true ? "hamburger-menu-active" : "display-none"
triggerMenu === true
? "hamburger-menu-active gradient_bg"
: "display-none"
}
>
<div className="hamburger-menu-context">
<FaGithub />
<a
href="https://github.com/Curio-org/Curio"
target="_blank"
rel="noopener noreferrer"
>
<div className="github_icon">
<FaGithub />
</div>
</a>
</div>
<div className="hamburger-menu-context">
<FaLinkedin />
<a
href="https://www.linkedin.com/company/curio-cic"
target="_blank"
rel="noopener noreferrer"
>
<div className="linkedin_icon">
<FaLinkedin />
</div>
</a>
</div>
<div className="hamburger-menu-context">
<FaTwitter />
<a
href="https://twitter.com/_CURI0"
target="_blank"
rel="noopener noreferrer"
>
<div className="twitter_icon">
<FaTwitter />
</div>
</a>
</div>
</div>
</>
Expand Down
92 changes: 75 additions & 17 deletions src/components/Header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,23 @@
gap: 1vw;
background-color: rgba(0, 0, 0, 0);
transition-duration: 0.2s;
margin-top: 5px;
}
.lines-rotated-left-m {
height: 1.2vw;
width: 8vw;
height: 1vw;
width: 6vw;
position: absolute;
transform: rotate(50deg);
background-image: linear-gradient(to right, purple, pink);
background: var(--gradient-text);
border-radius: 20%;
}
.lines-rotated-right-m {
height: 1.2vw;
width: 8vw;
height: 1vw;
width: 6vw;
position: absolute;
transform: rotate(-50deg);
background-image: linear-gradient(to right, purple, pink);
background: var(--gradient-text);
border-radius: 20%;
}
.hamburger-m:active {
opacity: 0.6;
Expand All @@ -43,10 +46,11 @@
opacity: 0.6;
}
.hamburger-lines-m {
height: 2vw;
width: 8vw;
height: 1vw;
width: 6vw;
border-radius: 20%;

background-image: linear-gradient(to right, purple, pink);
background: var(--gradient-text);
}
.curio__header-m {
font-family: Manrope;
Expand All @@ -70,22 +74,52 @@
align-items: center;
position: absolute;
z-index: 100;
background-color: #040c18;
height: 60vw;
width: 96vw;
transition-duration: 1s;
font-size: 1.1rem;
font-family: Manrope;
}
.hamburger-menu-context:active {
opacity: 0.2;
}
.hamburger-menu-context:hover {
opacity: 0.2;
}
.hamburger-menu-context svg {
margin-right: 10px;
font-size: 25px;
font-size: 30px;
color: #dfdfdf;
}
.gradient_bg {
background: -moz-radial-gradient(
circle at 50% 50%,
rgba(0, 40, 83, 1) 0%,
rgba(4, 12, 24, 1) 50%
);

/* safari 5.1+,chrome 10+ */
background: -webkit-radial-gradient(
circle at 50% 50%,
rgba(0, 40, 83, 1) 0%,
rgba(4, 12, 24, 1) 50%
);

/* opera 11.10+ */
background: -o-radial-gradient(
circle at 50% 50%,
rgba(0, 40, 83, 1) 0%,
rgba(4, 12, 24, 1) 50%
);

/* ie 10+ */
background: -ms-radial-gradient(
circle at 50% 50%,
rgba(0, 40, 83, 1) 0%,
rgba(4, 12, 24, 1) 50%
);

/* global 92%+ browsers support */
background: radial-gradient(
circle at 50% 50%,
rgba(0, 40, 83, 1) 0%,
rgba(4, 12, 24, 1) 50%
);
}
.gradient__text {
background: var(--gradient-text);
Expand Down Expand Up @@ -121,7 +155,7 @@
}

.curio__sign svg:hover {
color: #1da1f2;
color: #1da1f2;
}

.curio__sign p {
Expand Down Expand Up @@ -152,6 +186,30 @@
border-radius: 5px;
}

.github_icon svg {
transition: color 0.3s;
}

.github_icon:hover svg {
color: #696363;
}

.linkedin_icon svg {
transition: color 0.3s;
}

.linkedin_icon:hover svg {
color: #0077b5;
}

.twitter_icon svg {
transition: color 0.3s;
}

.twitter_icon:hover svg {
color: #26a7de;
}

@media only screen and (min-width: 768px) {
/* For mobile phones: */
[class="curio__header"] {
Expand Down
6 changes: 6 additions & 0 deletions src/components/UnderHeader/SearchBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,12 @@

border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

.search_button :hover {
background-color: black;
}

.curio__search__input {
Expand Down
9 changes: 1 addition & 8 deletions src/components/UnderHeader/Searchbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,9 @@ const Searchbar: React.FC<SearchbarProps> = ({ handleFormSubmit }) => {
value={term}
name="video-search"
type="text"
id="searchBar"
placeholder="Search Video..."
/>
<Button
onClick={() => handleSubmit}
type="submit"
appearance="primary"
size="sm"
id="searchButton"
>
<Button onClick={() => handleSubmit} type="submit">
<SearchIcon />
</Button>
</div>
Expand Down
Loading