Skip to content

Commit

Permalink
Merge pull request #80 from Curio-org/develop
Browse files Browse the repository at this point in the history 
Style social logos & UI Changes
  • Loading branch information
@arjxn-py
arjxn-py authored Oct 28, 2023
2 parents cefbb47 + bdb2f67 commit ee0095c
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 85 deletions.
174 changes: 114 additions & 60 deletions src/components/Header/Header.tsx
View file
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
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
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
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

0 comments on commit ee0095c

Please sign in to comment.