Generic configuration on account page

Including dark theme, dependency updates and design changes
PoCInnovation · Mar 19, 2023 · 579dc3b · 579dc3b
2 parents 868a648 + 88bc20a
commit 579dc3b
Show file tree

Hide file tree

Showing 76 changed files with 2,345 additions and 1,773 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -4,6 +4,7 @@
 .gitignore
 LICENSE
 README.md
+CONTRIBUTING.md
 
 # Node
 node_modules/
@@ -21,3 +22,8 @@ build/
 # Infra
 *Dockerfile*
 *docker-compose*
+.env.example
+
+# IDEs
+.idea/
+.vscode/
diff --git a/cypress/e2e/front/landing.cy.ts b/cypress/e2e/front/landing.cy.ts
@@ -33,7 +33,8 @@ describe('Good front for Landing', () => {
 
 	it('Good number of elements', () => {
 		cy.get("button").should('have.length', 2);
-		cy.get('img').should('have.length', 13);
+		cy.get('img').should('have.length', 7);
+		cy.get('svg').should('have.length', 14);
 		cy.get('#ipc-landing-services-cloud-storage').should('have.length', 1);
 		cy.get('#ipc-landing-services-cloud-computing').should('have.length', 1);
 	})

diff --git a/cypress/e2e/front/signup.cy.ts b/cypress/e2e/front/signup.cy.ts
@@ -23,8 +23,8 @@ describe('Good front for Signup', () => {
 		cy.get('#ipc-signup-login-button').should('contain', 'Login with my account');
 	});
 
-	it('Good name for copy clipboard button', () => {
-		cy.get('#ipc-signup-create-copy-mnemonics-button').click().should('contain', 'Copy my mnemonics');
+	it('Good name for create account button', () => {
+		cy.get('#ipc-signup-create-copy-mnemonics-button').click().should('contain', 'Create my account');
 	});
 
 	it('Good name for go to dashboard button', () => {
@@ -36,6 +36,7 @@ describe('Signup with credentials Button for Signup', () => {
 	it('Go to signup', () => {
 		cy.visit('/signup');
 		cy.get('#ipc-signup-create-copy-mnemonics-button').click();
+		cy.wait(1000);
 		cy.get('#ipc-signup-create-copy-mnemonics-button').click();
 	});
 

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -4,5 +4,6 @@ services:
   ipc:
     build: .
     image: ipc
+    container_name: ipc-app
     ports:
       - 8080:8080
diff --git a/package.json b/package.json
@@ -3,31 +3,31 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.21.3",
     "@chakra-ui/icons": "^1.1.7",
     "@chakra-ui/react": "^1.8.9",
     "@chakra-ui/system": "^1.12.1",
     "@chakra-ui/theme-tools": "^1.3.6",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "aleph-sdk-ts": "^3.2.0",
-    "axios": "^0.27.2",
+    "axios": "^1.3.4",
     "boring-avatars": "^1.7.0",
     "crypto-js": "^4.1.1",
-    "eth-crypto": "^2.4.0",
+    "eth-crypto": "^2.6.0",
     "ethers": "^5.7.2",
     "framer-motion": "^4.1.17",
     "git-clone": "^0.2.0",
-    "joi": "^17.7.0",
+    "joi": "^17.8.4",
     "js-file-download": "^0.4.12",
-    "next": "^12.3.3",
-    "next-auth": "^4.10.3",
+    "next": "^12.3.4",
+    "next-auth": "4.10.3",
     "next-connect": "^1.0.0-next.3",
     "next-joi": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.8.0",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "dev": "next dev -p 8080",
@@ -51,25 +51,24 @@
     ]
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^12.3.3",
+    "@next/eslint-plugin-next": "^12.3.4",
     "@types/crypto-js": "^4.1.1",
     "@types/git-clone": "^0.2.0",
-    "@types/node": "^16.18.3",
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "cypress": "^11.0.1",
+    "@types/node": "^16.18.16",
+    "@types/react": "^17.0.53",
+    "@types/react-dom": "^17.0.19",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "cypress": "^11.2.0",
     "cypress-file-upload": "^5.0.8",
-    "eslint": "^8.27.0",
+    "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.7.1"
+    "prettier": "^2.8.4"
   }
 }
diff --git a/pages/drive/account.tsx b/pages/drive/account.tsx
@@ -1,6 +1,7 @@
 import { VStack } from '@chakra-ui/react';
 
 import AccountCard from 'components/account/AccountCard';
+import ConfigCard from 'components/account/ConfigCard';
 import LabelBadge from 'components/LabelBadge';
 import Navigation from 'components/navigation/Navigation';
 
@@ -9,6 +10,7 @@ const Account = (): JSX.Element => (
 		<VStack w="100%" spacing="48px" align="start">
 			<LabelBadge label="Account" />
 			<AccountCard />
+			<ConfigCard />
 		</VStack>
 	</Navigation>
 );

diff --git a/pages/drive/index.tsx b/pages/drive/index.tsx
@@ -46,8 +46,8 @@ const Dashboard = (): JSX.Element => {
 
 		const loadedConfig = await user.loadConfig();
 		setConfig(user.config);
-		if (user.config?.theme === 'white' && colorMode !== 'light') toggleColorMode();
-		if (user.config?.theme === 'gray.800' && colorMode !== 'dark') toggleColorMode();
+		if (user.config?.theme.value === 'white' && colorMode !== 'light') toggleColorMode();
+		if (user.config?.theme.value === 'gray.800' && colorMode !== 'dark') toggleColorMode();
 		toast({ title: loadedConfig.message, status: loadedConfig.success ? 'success' : 'error' });
 	};
 

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -1,4 +1,4 @@
-import { Text, Textarea, useToast, VStack } from '@chakra-ui/react';
+import { Text, Textarea, useColorModeValue, useToast, VStack } from '@chakra-ui/react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -12,6 +12,7 @@ import Button from 'components/Button';
 
 import { ResponseType } from 'types/types';
 
+import { textColorMode } from 'config/colorMode';
 import colors from 'theme/foundations/colors';
 
 const Login = (): JSX.Element => {
@@ -24,6 +25,7 @@ const Login = (): JSX.Element => {
 	const [isLoadingCredentials, setIsLoadingCredentials] = useState(false);
 
 	const toast = useToast({ duration: 2000, isClosable: true });
+	const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
 
 	const loginWithCredentials = async (): Promise<ResponseType> => {
 		setIsLoadingCredentials(true);
@@ -87,11 +89,15 @@ const Login = (): JSX.Element => {
 						>
 							Login with a provider
 						</Button>
-						<Text size="boldMd">Coming soon...</Text>
+						<Text size="boldMd" color={textColor}>
+							Coming soon...
+						</Text>
 					</VStack>
 				</VStack>
 				<VStack w="100%">
-					<Text size="lg">You don't have an account?</Text>
+					<Text size="lg" color={textColor}>
+						You don't have an account?
+					</Text>
 					<Link href="/signup">
 						<Button
 							variant="secondary"

diff --git a/pages/signup.tsx b/pages/signup.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
-import { Text, Textarea, useToast, VStack } from '@chakra-ui/react';
+import { Text, Textarea, useColorModeValue, useToast, VStack } from '@chakra-ui/react';
 
 import { useAuthContext } from 'contexts/auth';
 import { useConfigContext } from 'contexts/config';
@@ -12,6 +12,7 @@ import Button from 'components/Button';
 
 import { ResponseType } from 'types/types';
 
+import { textColorMode } from 'config/colorMode';
 import colors from 'theme/foundations/colors';
 
 const Signup = (): JSX.Element => {
@@ -24,6 +25,7 @@ const Signup = (): JSX.Element => {
 	const [mnemonics, setMnemonics] = useState('');
 
 	const toast = useToast({ duration: 2000, isClosable: true });
+	const textColor = useColorModeValue(textColorMode.light, textColorMode.dark);
 
 	const signupWithMnemonics = async (): Promise<ResponseType> => {
 		setIsLoadingCredentials(true);
@@ -62,7 +64,7 @@ const Signup = (): JSX.Element => {
 					<VStack w="100%" spacing="64px">
 						<VStack w="100%" spacing="32px">
 							<Button
-								variant="primary"
+								variant={mnemonics ? 'primary' : 'special'}
 								size="lg"
 								w="100%"
 								onClick={onClick}
@@ -84,7 +86,9 @@ const Signup = (): JSX.Element => {
 							</Button>
 						</VStack>
 						<VStack w="100%">
-							<Text size="lg">Already got an account?</Text>
+							<Text size="lg" color={textColor}>
+								Already got an account?
+							</Text>
 							<Button
 								variant="secondary"
 								size="lg"

diff --git a/public/assets/logos/aleph-logo.svg b/public/assets/logos/aleph-logo.svg