feat: update connection pages

PoCInnovation · Mar 9, 2023 · 64fd8a3 · 64fd8a3
2 parents 3f72bec + 7ce8a62
commit 64fd8a3
Show file tree

Hide file tree

Showing 63 changed files with 377 additions and 536 deletions.
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -24,7 +24,7 @@ rules:
 
   react-hooks/exhaustive-deps: off
 
-  no-console: off
+  no-console: ["warn", { allow: ["error"] }]
 
   class-methods-use-this: off
 

diff --git a/cypress/e2e/features/files.cy.ts b/cypress/e2e/features/files.cy.ts
@@ -1,6 +1,5 @@
 describe('File tests', () => {
 	const fixtureFile = 'upload_test_file.txt';
-	const emptyFixtureFile = 'upload_empty_file.txt';
 
 	it('Signup for file tests', () => {
 		cy.signup();
@@ -13,14 +12,6 @@ describe('File tests', () => {
 		cy.get('#chakra-toast-portal').contains('File uploaded');
 	});
 
-	// Removed this test because the user could upload an empty file - Lucas
-	/*it('Good number of buttons after failed upload', () => {
-		cy.uploadFile(emptyFixtureFile, { allowEmpty: true });
-
-		cy.get('#chakra-toast-portal').contains('Invalid file');
-		cy.get('#ipc-modal-close-button').click();
-	});*/
-
 	it('Good content for downloaded file', () => {
 		cy.get('.ipc-file-popover-button').first().rightclick({ force: true });
 		cy.get('#ipc-dashboard-download-button').click({ force: true });

diff --git a/cypress/e2e/front/dashboard.cy.ts b/cypress/e2e/front/dashboard.cy.ts
@@ -3,13 +3,14 @@ let dashboardSpecMnemonic = '';
 describe('Create account for Dashboard tests', () => {
 	it('Connect', () => {
 		cy.visit('/signup');
-		cy.get('#ipc-signup-credentials-signup-button').click();
+		cy.get('#ipc-signup-create-copy-mnemonics-button').click();
+		cy.wait(1000);
 		cy.get('#ipc-signup-text-area')
 			.invoke('val')
 			.then((input) => {
 				dashboardSpecMnemonic = input as string;
 			});
-		cy.get('#ipc-modal-close-button').click();
+		cy.get('#ipc-signup-go-to-dashboard-button').click();
 	});
 });
 

diff --git a/cypress/e2e/front/login.cy.ts b/cypress/e2e/front/login.cy.ts
@@ -18,15 +18,15 @@ describe('Good front for Login', () => {
 	});
 
 	it('Good number of buttons', () => {
-		cy.get('button').should('have.length', 2);
+		cy.get('button').should('have.length', 3);
 	});
 
 	it('Good name for login with credentials button', () => {
 		cy.get('#ipc-login-credentials-button').should('contain', 'Login with credentials');
 	});
 
 	it('Good name for signup button', () => {
-		cy.get('#ipc-login-signup-button').should('contain', 'Signup');
+		cy.get('#ipc-login-signup-button').should('contain', 'Create an account');
 	});
 });
 

diff --git a/cypress/e2e/front/signup.cy.ts b/cypress/e2e/front/signup.cy.ts
@@ -12,50 +12,31 @@ describe('Good front for Signup', () => {
 	});
 
 	it('Good number of buttons', () => {
-		cy.get('button').should('have.length', 2);
+		cy.get('button').should('have.length', 3);
 	});
 
 	it('Good name for signup credentials button', () => {
-		cy.get('#ipc-signup-credentials-signup-button').should('contain', 'Signup');
+		cy.get('#ipc-signup-create-copy-mnemonics-button').should('contain', 'Create my account');
 	});
 
 	it('Good name for login button', () => {
-		cy.get('#ipc-signup-login-button').should('contain', 'Login');
+		cy.get('#ipc-signup-login-button').should('contain', 'Login with my account');
 	});
-});
 
-describe('Good Modal front for Signup', () => {
-	it('Go to signup', () => {
-		cy.visit('/signup');
-		cy.get('#ipc-signup-credentials-signup-button').click();
+	it('Good name for copy clipboard button', () => {
+		cy.get('#ipc-signup-create-copy-mnemonics-button').click().should('contain', 'Copy my mnemonics');
 	});
 
-	it('Good header', () => {
-		cy.get('header').should('contain', 'Your Mnemonics');
-	});
-
-	it('Good number of buttons', () => {
-		cy.get('button').should('have.length', 5);
-	});
-
-	it('Good number of text-area', () => {
-		cy.get('textarea').should('have.length', 1);
-	});
-
-	it('Good name for copy mnemonics button', () => {
-		cy.get('#ipc-signup-copy-mnemonics-button').should('contain', 'Copy my mnemonics');
-	});
-
-	it('Good name for close button', () => {
-		cy.get('#ipc-modal-close-button').should('have.length', 1);
-	});
+	it('Good name for go to dashboard button', () => {
+		cy.get('#ipc-signup-go-to-dashboard-button').should('contain', 'Go to my dashboard');
+	})
 });
 
 describe('Signup with credentials Button for Signup', () => {
 	it('Go to signup', () => {
 		cy.visit('/signup');
-		cy.get('#ipc-signup-credentials-signup-button').click();
-		cy.get('#ipc-signup-copy-mnemonics-button').click();
+		cy.get('#ipc-signup-create-copy-mnemonics-button').click();
+		cy.get('#ipc-signup-create-copy-mnemonics-button').click();
 	});
 
 	it('Good copied clipboard', () => {
@@ -68,7 +49,7 @@ describe('Signup with credentials Button for Signup', () => {
 	});
 
 	it('Good URL redirect for close button', () => {
-		cy.get('#ipc-modal-close-button').click().url().should('eq', `${Cypress.config().baseUrl}/drive`);
+		cy.get('#ipc-signup-go-to-dashboard-button').click().url().should('eq', `${Cypress.config().baseUrl}/drive`);
 	});
 });
 

diff --git a/cypress/fixtures/upload_empty_file.txt b/cypress/fixtures/upload_empty_file.txt
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -18,9 +18,9 @@ import 'cypress-file-upload';
 
 Cypress.Commands.add('signup', () => {
 	cy.visit('/signup');
-	cy.get('#ipc-signup-credentials-signup-button').click();
+	cy.get('#ipc-signup-create-copy-mnemonics-button').click();
 	cy.get('#ipc-signup-text-area');
-	cy.get('#ipc-modal-close-button').click();
+	cy.get('#ipc-signup-go-to-dashboard-button').click();
 });
 
 Cypress.Commands.add('uploadFile', (file, params = null) => {

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
     "next-joi": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.6.0",
+    "react-icons": "^4.8.0",
     "typescript": "^4.8.4"
   },
   "scripts": {

diff --git a/pages/connection.tsx b/pages/connection.tsx
@@ -1,26 +1,35 @@
-import { Button } from '@chakra-ui/react';
-import Link from 'next/link';
+import { Link, Stack, useBreakpointValue } from '@chakra-ui/react';
+import { BsRocketTakeoffFill } from 'react-icons/bs';
 
 import AuthPage from 'components/AuthPage';
-import OutlineButton from 'components/OutlineButton';
+import Button from 'components/Button';
 
-const Connection = (): JSX.Element => (
-	<AuthPage
-		children={
-			<>
-				<Link href="/signup">
-					<Button variant="inline" w="100%" id="ipc-home-create-account-button">
+const Connection = (): JSX.Element => {
+	const isMobile = useBreakpointValue({ base: true, md: false }) || false;
+
+	return (
+		<AuthPage>
+			<Stack direction={{ base: 'column', md: 'row' }} w="100%" spacing="32px">
+				<Link href="/signup" w="100%">
+					<Button variant="primary" size={isMobile ? 'lg' : 'xl'} w="100%" id="ipc-home-create-account-button">
 						Create an account
 					</Button>
 				</Link>
-				<Link href="/login">
-					<div style={{ width: '100%' }}>
-						<OutlineButton w="100%" id="ipc-home-login-button" text="Login" />
-					</div>
+				<Link href="/login" w="100%">
+					<Button
+						variant="secondary"
+						size={isMobile ? 'lg' : 'xl'}
+						w="100%"
+						id="ipc-home-login-button"
+						buttonType="left-icon"
+						icon={BsRocketTakeoffFill}
+					>
+						Login
+					</Button>
 				</Link>
-			</>
-		}
-	/>
-);
+			</Stack>
+		</AuthPage>
+	);
+};
 
 export default Connection;
diff --git a/pages/drive/account.tsx b/pages/drive/account.tsx
@@ -1,8 +1,8 @@
 import { VStack } from '@chakra-ui/react';
 
-import Navigation from 'components/navigation/Navigation';
-import LabelBadge from "components/LabelBadge";
 import AccountCard from 'components/account/AccountCard';
+import LabelBadge from 'components/LabelBadge';
+import Navigation from 'components/navigation/Navigation';
 
 const Account = (): JSX.Element => (
 	<Navigation>

diff --git a/pages/drive/contacts.tsx b/pages/drive/contacts.tsx
@@ -1,9 +1,9 @@
 import { HStack, VStack } from '@chakra-ui/react';
 
-import Navigation from 'components/navigation/Navigation';
 import DriveCards from 'components/cards/DriveCards';
-import LabelBadge from 'components/LabelBadge';
 import AddContact from 'components/contact/AddContact';
+import LabelBadge from 'components/LabelBadge';
+import Navigation from 'components/navigation/Navigation';
 
 import { useDriveContext } from 'contexts/drive';
 

diff --git a/pages/drive/index.tsx b/pages/drive/index.tsx
@@ -1,13 +1,13 @@
-import { useEffect } from 'react';
 import { useColorMode, useToast, VStack } from '@chakra-ui/react';
+import { useEffect } from 'react';
 
-import { useUserContext } from 'contexts/user';
 import { useConfigContext } from 'contexts/config';
 import { useDriveContext } from 'contexts/drive';
+import { useUserContext } from 'contexts/user';
 
 import DriveCards from 'components/cards/DriveCards';
-import Navigation from 'components/navigation/Navigation';
 import LabelBadge from 'components/LabelBadge';
+import Navigation from 'components/navigation/Navigation';
 
 const Dashboard = (): JSX.Element => {
 	const toast = useToast({ duration: 2000, isClosable: true });

diff --git a/pages/drive/programs.tsx b/pages/drive/programs.tsx
@@ -1,8 +1,8 @@
 import { VStack } from '@chakra-ui/react';
 
-import Navigation from 'components/navigation/Navigation';
 import DriveCards from 'components/cards/DriveCards';
 import LabelBadge from 'components/LabelBadge';
+import Navigation from 'components/navigation/Navigation';
 
 import { useDriveContext } from 'contexts/drive';
 

diff --git a/pages/drive/shared.tsx b/pages/drive/shared.tsx
@@ -1,8 +1,8 @@
 import { VStack } from '@chakra-ui/react';
 
 import DriveCards from 'components/cards/DriveCards';
-import Navigation from 'components/navigation/Navigation';
 import LabelBadge from 'components/LabelBadge';
+import Navigation from 'components/navigation/Navigation';
 
 import { useDriveContext } from 'contexts/drive';
 

diff --git a/pages/drive/trash.tsx b/pages/drive/trash.tsx
@@ -2,8 +2,8 @@ import { HStack, VStack } from '@chakra-ui/react';
 
 import DriveCards from 'components/cards/DriveCards';
 import DeleteBin from 'components/file/DeleteBin';
-import Navigation from 'components/navigation/Navigation';
 import LabelBadge from 'components/LabelBadge';
+import Navigation from 'components/navigation/Navigation';
 
 import { useDriveContext } from 'contexts/drive';
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,11 +1,11 @@
 import { VStack } from '@chakra-ui/react';
 
-import NavBar from 'components/landingPage/NavBar';
+import FeaturesSection from 'components/landingPage/FeaturesSection';
+import Footer from 'components/landingPage/Footer';
 import HeadingSection from 'components/landingPage/HeadingSection';
+import NavBar from 'components/landingPage/NavBar';
 import PartnersSection from 'components/landingPage/PartnersSection';
 import ServicesSection from 'components/landingPage/ServicesSection';
-import FeaturesSection from 'components/landingPage/FeaturesSection';
-import Footer from 'components/landingPage/Footer';
 
 const Home = (): JSX.Element => (
 	<VStack w="100%" spacing={{ base: '128px', lg: '256px' }} pt="64px" overflowY="hidden">