-
-
Notifications
You must be signed in to change notification settings - Fork 58
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update formatting with eslint, fix happo bug
- Loading branch information
Showing
6 changed files
with
170 additions
and
176 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,31 @@ | ||
| const { RemoteBrowserTarget } = require('happo.io'); | ||
| const { RemoteBrowserTarget } = require('happo.io') | ||
|
|
||
| module.exports = { | ||
| apiKey: process.env.HAPPO_API_KEY, | ||
| apiSecret: process.env.HAPPO_API_SECRET, | ||
| apiKey: process.env.HAPPO_API_KEY, | ||
| apiSecret: process.env.HAPPO_API_SECRET, | ||
|
|
||
| targets: { | ||
| 'chrome-1080p': new RemoteBrowserTarget('chrome', { | ||
| viewport: '1920x1080', | ||
| }), | ||
| // all viewports https://viewportsizer.com/devices/ | ||
| // Samsung Galaxy S10+, S10 | ||
| 'chrome-galaxy-s10': new RemoteBrowserTarget('chrome', { | ||
| viewport: '360x740', | ||
| }), | ||
| // iphone viewports https://yesviz.com/iphones.php | ||
| 'safari-1080p': new RemoteBrowserTarget('safari', { | ||
| viewport: '1920x1080', | ||
| }), | ||
| // iphone 12 pro | ||
| 'safari-iphone-12-pro': new RemoteBrowserTarget('safari', { | ||
| viewport: '390x844', | ||
| }), | ||
| }, | ||
| // only works on public urls | ||
| // pages: [{ url: 'http://localhost:3000/', title: 'Home Page' }], | ||
| }; | ||
| targets: { | ||
| 'chrome-1080p': new RemoteBrowserTarget('chrome', { | ||
| viewport: '1920x1080', | ||
| freezeAnimations: 'last-frame', | ||
| }), | ||
| // all viewports https://viewportsizer.com/devices/ | ||
| // Samsung Galaxy S10+, S10 | ||
| 'chrome-galaxy-s10': new RemoteBrowserTarget('chrome', { | ||
| viewport: '360x740', | ||
| freezeAnimations: 'last-frame', | ||
| }), | ||
| // iphone viewports https://yesviz.com/iphones.php | ||
| 'safari-1080p': new RemoteBrowserTarget('safari', { | ||
| viewport: '1920x1080', | ||
| freezeAnimations: 'last-frame', | ||
| }), | ||
| // iphone 12 pro | ||
| 'safari-iphone-12-pro': new RemoteBrowserTarget('safari', { | ||
| viewport: '390x844', | ||
| freezeAnimations: 'last-frame', | ||
| }), | ||
| }, | ||
| // only works on public urls | ||
| // pages: [{ url: 'http://localhost:3000/', title: 'Home Page' }], | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,45 @@ | ||
| { | ||
| "name": "krypt", | ||
| "private": true, | ||
| "version": "0.0.0", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "vite build", | ||
| "preview": "vite preview", | ||
| "cy:visual": "npx happo-e2e -- npx cypress run", | ||
| "happo": "happo run" | ||
| }, | ||
| "dependencies": { | ||
| "@tailwindcss/forms": "^0.4.0", | ||
| "@vitejs/plugin-react": "^1.0.7", | ||
| "ethers": "^5.5.4", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "react-icons": "^4.3.1", | ||
| "vite": "^2.8.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.17.2", | ||
| "@typescript-eslint/parser": "^5.12.0", | ||
| "autoprefixer": "^10.4.2", | ||
| "babel-loader": "^8.2.3", | ||
| "cypress": "^9.4.1", | ||
| "eslint": "^8.9.0", | ||
| "eslint-config-airbnb": "^19.0.4", | ||
| "eslint-config-airbnb-base": "^15.0.0", | ||
| "eslint-config-prettier": "^8.3.0", | ||
| "eslint-plugin-import": "^2.25.4", | ||
| "eslint-plugin-jsx-a11y": "^6.5.1", | ||
| "eslint-plugin-prettier": "^4.0.0", | ||
| "eslint-plugin-react": "^7.28.0", | ||
| "eslint-plugin-react-hooks": "^4.3.0", | ||
| "happo-cypress": "^3.0.1", | ||
| "happo-e2e": "^1.0.3", | ||
| "happo.io": "^7.0.1", | ||
| "postcss": "^8.4.6", | ||
| "prettier": "^2.5.1", | ||
| "tailwindcss": "^3.0.22", | ||
| "typescript": "^4.5.5", | ||
| "webpack": "^5.68.0" | ||
| } | ||
| "name": "krypt", | ||
| "private": true, | ||
| "version": "0.0.0", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "vite build", | ||
| "preview": "vite preview", | ||
| "test:visual": "npx happo-e2e -- npx cypress run", | ||
| "happo": "happo run" | ||
| }, | ||
| "dependencies": { | ||
| "@tailwindcss/forms": "^0.4.0", | ||
| "@vitejs/plugin-react": "^1.0.7", | ||
| "ethers": "^5.5.4", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "react-icons": "^4.3.1", | ||
| "vite": "^2.8.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.17.2", | ||
| "@typescript-eslint/parser": "^5.12.0", | ||
| "autoprefixer": "^10.4.2", | ||
| "babel-loader": "^8.2.3", | ||
| "cypress": "^9.4.1", | ||
| "eslint": "^8.9.0", | ||
| "eslint-config-airbnb": "^19.0.4", | ||
| "eslint-config-airbnb-base": "^15.0.0", | ||
| "eslint-config-prettier": "^8.3.0", | ||
| "eslint-plugin-import": "^2.25.4", | ||
| "eslint-plugin-jsx-a11y": "^6.5.1", | ||
| "eslint-plugin-prettier": "^4.0.0", | ||
| "eslint-plugin-react": "^7.28.0", | ||
| "eslint-plugin-react-hooks": "^4.3.0", | ||
| "happo-cypress": "^3.0.1", | ||
| "happo-e2e": "^1.0.3", | ||
| "happo.io": "^7.0.1", | ||
| "postcss": "^8.4.6", | ||
| "prettier": "^2.5.1", | ||
| "tailwindcss": "^3.0.22", | ||
| "typescript": "^4.5.5", | ||
| "webpack": "^5.68.0" | ||
| } | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,72 +1,66 @@ | ||
| // rafce | ||
| import React from 'react'; | ||
| import { HiMenuAlt4 } from 'react-icons/hi'; | ||
| import { AiOutlineClose } from 'react-icons/ai'; | ||
| import logo from '../../images/logo.png'; | ||
| import React from 'react' | ||
| import { HiMenuAlt4 } from 'react-icons/hi' | ||
| import { AiOutlineClose } from 'react-icons/ai' | ||
| import logo from '../../images/logo.png' | ||
|
|
||
| // another component, created outside of the Navbar component | ||
| const NavBarItem = ({ title, classprops }) => ( | ||
| <li className={`mx-4 cursor-pointer ${classprops}`}>{title}</li> | ||
| ); | ||
| const NavBarItem = ({ title, classprops }) => { | ||
| return <li className={`mx-4 cursor-pointer ${classprops}`}>{title}</li> | ||
| } | ||
|
|
||
| const Navbar = () => { | ||
| // search docs to see how to use class names | ||
| // https://tailwindcss.com/docs/width#percentage-widths | ||
| const [toggleMenu, setToggleMenu] = React.useState(false); | ||
| // search docs to see how to use class names | ||
| // https://tailwindcss.com/docs/width#percentage-widths | ||
| const [toggleMenu, setToggleMenu] = React.useState(false) | ||
|
|
||
| return ( | ||
| <nav className='w-full flex md:justify-center justify-between items-center p-4'> | ||
| <div className='md:flex-[0.5] flex-initial justify-center items-center'> | ||
| <img src={logo} alt='logo' className='w-32 cursor-pointer' /> | ||
| </div> | ||
| <ul className='text-white md:flex hidden list-none flex-row justify-between items-center flex-initial'> | ||
| {/* {['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => ( | ||
| return ( | ||
| <nav className="w-full flex md:justify-center justify-between items-center p-4"> | ||
| <div className="md:flex-[0.5] flex-initial justify-center items-center"> | ||
| <img src={logo} alt="logo" className="w-32 cursor-pointer" /> | ||
| </div> | ||
| <ul className="text-white md:flex hidden list-none flex-row justify-between items-center flex-initial"> | ||
| {/* {['Market', 'Exchange', 'Tutorials', 'Wallets'].map((item, index) => ( | ||
| <NavBarItem key={item + index} title={item} /> | ||
| ))} */} | ||
| {/* Login button */} | ||
| <li className='bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]'> | ||
| Login | ||
| </li> | ||
| </ul> | ||
| {/* navigation for mobile devices */} | ||
| <div className='flex relative' data-testid='hamburger-menu'> | ||
| {!toggleMenu && ( | ||
| <HiMenuAlt4 | ||
| fontSize={28} | ||
| className='text-white md:hidden cursor-pointer' | ||
| onClick={() => setToggleMenu(true)} | ||
| /> | ||
| )} | ||
| {toggleMenu && ( | ||
| <AiOutlineClose | ||
| fontSize={28} | ||
| className='text-white md:hidden cursor-pointer' | ||
| onClick={() => setToggleMenu(false)} | ||
| /> | ||
| )} | ||
| {toggleMenu && ( | ||
| <ul | ||
| data-testid='mobile-menu-open' | ||
| className='z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none | ||
| flex flex-col justify-start items-end rounded-md blue-glassmorphism text-white animate-slide-in' | ||
| > | ||
| <li className='text-xl w-full my-2'> | ||
| <AiOutlineClose onClick={() => setToggleMenu(false)} /> | ||
| </li> | ||
| {['Market', 'Exchange', 'Tutorials', 'Wallets'].map( | ||
| (item, index) => ( | ||
| <NavBarItem | ||
| key={item + index} | ||
| title={item} | ||
| classprops='my-2 text-lg' | ||
| /> | ||
| ) | ||
| )} | ||
| </ul> | ||
| )} | ||
| </div> | ||
| </nav> | ||
| ); | ||
| }; | ||
| {/* Login button */} | ||
| <li className="bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]"> | ||
| Login | ||
| </li> | ||
| </ul> | ||
| {/* navigation for mobile devices */} | ||
| <div className="flex relative" data-testid="hamburger-menu"> | ||
| {!toggleMenu && ( | ||
| <HiMenuAlt4 | ||
| fontSize={28} | ||
| className="text-white md:hidden cursor-pointer" | ||
| onClick={() => setToggleMenu(true)} | ||
| /> | ||
| )} | ||
| {toggleMenu && ( | ||
| <AiOutlineClose | ||
| fontSize={28} | ||
| className="text-white md:hidden cursor-pointer" | ||
| onClick={() => setToggleMenu(false)} | ||
| /> | ||
| )} | ||
| {toggleMenu && ( | ||
| <ul | ||
| data-testid="mobile-menu-open" | ||
| className="z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl md:hidden list-none | ||
| flex flex-col justify-start items-end rounded-md blue-glassmorphism text-white animate-slide-in" | ||
| > | ||
| <li className="text-xl w-full my-2"> | ||
| <AiOutlineClose onClick={() => setToggleMenu(false)} /> | ||
| </li> | ||
| {['Wallets'].map((item, index) => ( | ||
| <NavBarItem key={item + index} title={item} classprops="my-2 text-lg" /> | ||
| ))} | ||
| </ul> | ||
| )} | ||
| </div> | ||
| </nav> | ||
| ) | ||
| } | ||
|
|
||
| export default Navbar; | ||
| export default Navbar |