remove burger menu, improve responsive progress bar
This commit is contained in:
@@ -49,7 +49,7 @@ const ProgressBar = ({ items, currItem, setCurrItem }) => {
|
||||
const rightDisabled = currItem === items.length - 1;
|
||||
|
||||
return (
|
||||
<div className="w-full flex items-center sticky top-0 bg-gray-200 z-50 pt-3 pb-1 px-20 shadow-md">
|
||||
<div className="w-full flex items-center sticky top-0 bg-gray-200 z-50 pt-3 pb-1 px-1 md:px-20 shadow-md">
|
||||
<LeftArrowIcon
|
||||
className={classnames(
|
||||
'w-8 h-8',
|
||||
|
||||
@@ -98,60 +98,6 @@ const Header = ({ mode, stage, setStage }) => {
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
{/* Hamburger Menu */}
|
||||
<div className="md:hidden flex ml-auto items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="outline-none"
|
||||
onClick={() => setToggle(!toggle)}
|
||||
>
|
||||
<HamburgerIcon className="w-6 h-6 text-gray-700" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Hamburger Dropdown */}
|
||||
<div className={classnames('p-5 pt-0', !toggle && 'hidden')}>
|
||||
{mode === 'trends' && (
|
||||
<>
|
||||
<MobileLink to="/user" onClick={() => setToggle(false)}>
|
||||
Dashboard
|
||||
</MobileLink>
|
||||
</>
|
||||
)}
|
||||
{isAuthenticated ? (
|
||||
<>
|
||||
{mode === 'trends' && (
|
||||
<MobileLink to="/settings" onClick={() => setToggle(false)}>
|
||||
Settings
|
||||
</MobileLink>
|
||||
)}
|
||||
<MobileLink
|
||||
to="/"
|
||||
onClick={() => {
|
||||
setToggle(false);
|
||||
logout();
|
||||
}}
|
||||
>
|
||||
Sign Out
|
||||
</MobileLink>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<a
|
||||
className="block text-sm px-2 my-2 py-2 rounded-sm bg-gray-800 text-gray-700"
|
||||
href={GITHUB_PUBLIC_AUTH_URL}
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
<Link
|
||||
to="/signup"
|
||||
onClick={() => setToggle(false)}
|
||||
className="block text-sm px-2 my-2 py-2 rounded-sm bg-blue-500 text-white"
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ProgressBar
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { FaGithub as GithubIcon } from 'react-icons/fa';
|
||||
|
||||
import { Button } from '../../components';
|
||||
import {
|
||||
GITHUB_PUBLIC_AUTH_URL,
|
||||
GITHUB_PRIVATE_AUTH_URL,
|
||||
} from '../../constants';
|
||||
import { classnames } from '../../utils';
|
||||
|
||||
import mockup from '../../assets/mockup.png';
|
||||
|
||||
const SignUpScreen = () => {
|
||||
return (
|
||||
<div className="h-full flex flex-wrap">
|
||||
<div className="hidden lg:block lg:w-3/5 lg:p-8 lg:my-auto">
|
||||
<div className="w-4/5 mx-auto">
|
||||
<img src={mockup} alt="preview" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-full lg:w-2/5 flex lg:flex-col lg:p-8">
|
||||
<div
|
||||
className={classnames(
|
||||
'bg-gray-100 rounded-sm w-full h-full m-auto p-8 shadow',
|
||||
'lg:w-80 lg:h-auto',
|
||||
)}
|
||||
>
|
||||
<h3 className="text-3xl font-semibold text-gray-900 mb-12 text-center">
|
||||
Sign up for <br />
|
||||
GitHub Trends
|
||||
</h3>
|
||||
<div>
|
||||
<a href={GITHUB_PUBLIC_AUTH_URL} className="flex justify-center">
|
||||
<Button className="h-12 flex justify-center items-center text-white bg-blue-500 hover:bg-blue-600">
|
||||
<GithubIcon className="w-6 h-6" />
|
||||
<span className="ml-2 xl:text-lg">GitHub Public Access</span>
|
||||
</Button>
|
||||
</a>
|
||||
<div className="mt-4" />
|
||||
<a href={GITHUB_PRIVATE_AUTH_URL} className="flex justify-center">
|
||||
<Button className="h-12 flex justify-center items-center text-black border border-black bg-white hover:bg-gray-100">
|
||||
<GithubIcon className="w-6 h-6" />
|
||||
<span className="ml-2 xl:text-lg">GitHub Private Access</span>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUpScreen;
|
||||
@@ -1,3 +0,0 @@
|
||||
import SignUpScreen from './SignUp';
|
||||
|
||||
export { SignUpScreen };
|
||||
Reference in New Issue
Block a user