diff --git a/frontend/package.json b/frontend/package.json
index f35f3e88..6795e4f6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,6 +4,12 @@
"private": true,
"dependencies": {
"@apollo/client": "^3.3.16",
+ "@chakra-ui/react": "^1.7.2",
+ "@chakra-ui/utils": "^1.9.1",
+ "@emotion/react": "^11",
+ "@emotion/styled": "^11",
+ "@fontsource/inter": "^4.5.1",
+ "@fontsource/raleway": "^4.5.0",
"@rjsf/bootstrap-4": "^2.5.1",
"@rjsf/core": "^2.5.1",
"@testing-library/jest-dom": "^5.11.4",
@@ -20,6 +26,7 @@
"apollo-upload-client": "^16.0.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
+ "framer-motion": "^4",
"graphql": "^15.5.0",
"humps": "^2.0.1",
"json-schema": "^0.3.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 17ae8bc2..16a663c9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,12 @@
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/700.css";
+import "@fontsource/raleway/400.css";
+import "@fontsource/raleway/600.css";
import "bootstrap/dist/css/bootstrap.min.css";
+
import React, { useState, useReducer } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { ChakraProvider } from "@chakra-ui/react";
import Login from "./components/auth/Login";
import Signup from "./components/auth/Signup";
@@ -24,6 +30,7 @@ import SampleContextDispatcherContext from "./contexts/SampleContextDispatcherCo
import EditTeamInfoPage from "./components/pages/EditTeamPage";
import HooksDemo from "./components/pages/HooksDemo";
+import customTheme from "./theme";
import { AuthenticatedUser } from "./types/AuthTypes";
const App = (): React.ReactElement => {
@@ -44,59 +51,65 @@ const App = (): React.ReactElement => {
);
return (
-
We have sent you an e-mail. Please contact us if you do not receive it within a few minutes. diff --git a/frontend/src/components/auth/Login.tsx b/frontend/src/components/auth/Login.tsx index 36f994e0..7acb154c 100644 --- a/frontend/src/components/auth/Login.tsx +++ b/frontend/src/components/auth/Login.tsx @@ -6,6 +6,7 @@ import { GoogleLoginResponseOffline, } from "react-google-login"; import { gql, useMutation } from "@apollo/client"; +import { Text } from "@chakra-ui/react"; import authAPIClient from "../../APIClients/AuthAPIClient"; import { @@ -86,7 +87,7 @@ const Login = (): React.ReactElement => { return (