tryber · FelipeCastanheira · Feb 1, 2022 · Feb 1, 2022 · Feb 1, 2022 · Feb 1, 2022
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,7 +4,7 @@
     "es2020": true
   },
   "extends": "trybe-frontend",
-  "parser": "babel-eslint",
+  // "parser": "babel-eslint",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+      integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,281 @@
-.App {
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #489bf7;
+}
+
+.login {
+  display: flex;
+  flex-direction: column;
+  background-color: #0b0f2f;
+  border-radius: 7px;
+  color: white;
+  height: 100vh;
   text-align: center;
+  margin: auto;
+  width: 100vw;
+  align-items: center;
+  gap: 7px;
+  padding-top: 25px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.login h1 {
+  padding-bottom: 15px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+header a img {
+  width: 100%;
+}
+
+.login img {
+  padding-bottom: 25px;
+}
+
+.login label {
+  width: 90%;
+}
+
+.login input {
+  width: 100%;
+  height: 50px;
+  border-radius: 5px;
+}
+
+.general {
+  background-color: #0b0f2f;
+  border-radius: 7px;
+  color: white;
+  text-align: center;
+  height: 100vh;
+  margin: auto;
+  width: 100vw;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.perfil {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
+  text-align: start;
+  margin: 0 25px 25px;
+  padding-top: 25px;
+}
+
+header a {
+  background-color: white;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+
+  /* padding: 5px; */
+  cursor: pointer;
+  transition: 0.4s;
+}
+
+header a:hover {
+  opacity: 0.6;
+}
+
+header section {
+  background-color: #1e223f;
+  border-radius: 7px;
+  display: flex;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  margin: 0 auto 10px;
+  padding: 20px;
+  width: 90%;
+}
+
+h5 {
+  color: #7d7f90;
+  text-align: left;
+  text-transform: uppercase;
+  margin: 7px 35px;
+}
+
+.white {
+  color: white;
+}
+
+.input-container {
+  align-items: center;
+  background-color: #1e223f;
+  border-radius: 7px;
+  display: flex;
+  justify-content: stretch;
+  gap: 20px;
+  margin: 0 auto 10px;
+  padding: 15px;
+  width: 90%;
+}
+
+.input-container h4 {
+  flex: 1;
+  text-align: left;
+}
+
+[ data-testid = 'length-input' ] {
+  flex: 1;
+}
+
+button {
+  background-image: linear-gradient(to right, #6a7cde, #6f51a1);
+  border-radius: 7px;
+  color: white;
+  cursor: pointer;
+  padding: 20px;
+  margin: 15px auto 25px;
+  transition: 0.4s;
+  width: 90%;
+}
+
+button:hover {
+  opacity: 0.6;
+}
+
+button:disabled {
+  background-color: transparent;
+  border: 2px solid #6a7cde;
+  color: #6a7cde;
+  background-image: none;
+}
+
+/* https://www.w3schools.com/howto/howto_css_switch.asp */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.profile {
+  display: flex;
+  flex-direction: column;
+  background-color: #0b0f2f;
+  border-radius: 7px;
+  color: white;
+  font-size: 25px;
+  height: 100vh;
+  text-align: center;
+  margin: auto;
+  width: 100vw;
+  align-items: center;
+  gap: 7px;
+  padding-top: 25px;
+}
+
+.profile nav {
+  display: flex;
+  width: 100%;
+}
+
+.profile nav a {
   color: white;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: left;
+  width: 100%;
+  margin-left: 20px;
+  margin-bottom: 40px;
+  transition: 0.5s;
+}
+
+.profile nav a:hover {
+  opacity: 0.6;
+}
+
+.profile label {
+  display: flex;
+  flex-direction: column;
+}
+
+.profile section img {
+  margin-top: 50px;
+  max-height: 300px;
+}
+
+.profile input {
+  width: 180px;
+}
+
+.profile section {
+  margin-bottom: 30px;
 }
 
-.App-link {
-  color: #61dafb;
+.profile .senha {
+  width: 90%;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+@media screen and ( min-width : 600px ) {
+
+  .login {
+    margin: 12vh auto;
+    width: 75vw;
+  }
+
+  .general {
+    margin: 12vh auto;
+    width: 75vw;
   }
-  to {
-    transform: rotate(360deg);
+
+  .profile {
+    margin: 12vh auto;
+    width: 75vw;
   }
+
 }
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,20 @@
-import logo from './logo.svg';
 import './App.css';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import GeneratePassword from './pages/GeneratePassword';
+import Login from './pages/Login';
+import Profile from './pages/Profile';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+class App extends React.Component {
+  render() {
+    return (
+      <Switch>
+        <Route exact path="/" render={ (props) => <Login {...props} />} />
+        <Route path="/generate-password" component={ GeneratePassword } />
+        <Route path="/profile" component={ Profile } />
+      </Switch>
+    );
+  }
 }
 
 export default App;
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,7 @@
+export const WORD = 'WORD';
+export const LENGTH = 'LENGTH';
+export const LOGIN = 'LOGIN';
+
+export const wordAction = (value) => ({ type: WORD, value });
+export const lengthAction = (value) => ({ type: LENGTH, value });
+export const loginAction = (value) => ({ type: LOGIN, value });