home page

miliPaoletti · Aug 28, 2021 · ec07d76 · ec07d76
1 parent 9b36a92
commit ec07d76
Show file tree

Hide file tree

Showing 24 changed files with 693 additions and 92 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+    "editor.formatOnSave": true,
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+      },
+      "prettier.tabWidth": 4,
+      "prettier.printWidth": 160
+
+}
diff --git a/package.json b/package.json
@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^5.1.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.6.1",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.1",
+    "styled-components": "^5.3.1",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

diff --git a/public/NunitoSans-Bold.ttf b/public/NunitoSans-Bold.ttf
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,16 @@
       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`.
     -->
-    <title>React App</title>
+    <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
+    crossorigin="anonymous"
+  />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;1,200&display=swap" rel="stylesheet">
+    <title>Ethermint Faucet</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,7 @@
-import logo from './logo.svg';
-import './App.css';
+import { Main } from "./components/Main";
 
 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>
-  );
+    return <Main />;
 }
 
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/NunitoSans-Bold.ttf b/src/NunitoSans-Bold.ttf
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { NavbarBase } from "./NavbarBase";
+
+export const Header = () => {
+    return (
+        <header>
+            <NavbarBase />
+        </header>
+    );
+};
diff --git a/src/components/Home.js b/src/components/Home.js
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+import { Search } from "./generics/Inputs/Search";
+import { TitlePrimary } from "./generics/Titles/TitlePrimary";
+
+const StyledContainer = styled.div`
+     {
+        align-items: center;
+        display: flex;
+        height: 80%;
+        justify-content: center;
+        padding: 1em;
+        text-align: center;
+    }
+`;
+
+export const Home = () => {
+    return (
+        <StyledContainer>
+            <div>
+                <TitlePrimary />
+                <Search />
+            </div>
+        </StyledContainer>
+    );
+};
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -0,0 +1,56 @@
+import { Header } from "./Header";
+import { Home } from "./Home";
+import styled from "styled-components";
+
+const StyledMain = styled.div`
+     {
+        // background: rgb(232, 243, 255);
+        // background: -moz-linear-gradient(180deg, rgba(232, 243, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
+        // background: -webkit-linear-gradient(180deg, rgba(232, 243, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
+        // background: linear-gradient(180deg, rgba(232, 243, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
+        // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e8f3ff",endColorstr="#ffffff",GradientType=1);
+
+        background: rgb(204, 218, 255);
+        background: -moz-linear-gradient(
+            164deg,
+            rgba(204, 218, 255, 1) 0%,
+            rgba(143, 207, 250, 1) 14%,
+            rgba(83, 182, 233, 1) 36%,
+            rgba(22, 159, 200, 1) 64%,
+            rgba(50, 82, 147, 1) 100%
+        );
+        background: -webkit-linear-gradient(
+            164deg,
+            rgba(204, 218, 255, 1) 0%,
+            rgba(143, 207, 250, 1) 14%,
+            rgba(83, 182, 233, 1) 36%,
+            rgba(22, 159, 200, 1) 64%,
+            rgba(50, 82, 147, 1) 100%
+        );
+        background: linear-gradient(
+            164deg,
+            rgba(204, 218, 255, 1) 0%,
+            rgba(143, 207, 250, 1) 14%,
+            rgba(83, 182, 233, 1) 36%,
+            rgba(22, 159, 200, 1) 64%,
+            rgba(50, 82, 147, 1) 100%
+        );
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccdaff",endColorstr="#325293",GradientType=1);
+        height: 100vh;
+    }
+`;
+
+export const Main = () => {
+    return (
+        <StyledMain>
+            <Header />
+            <Home />
+        </StyledMain>
+    );
+};
+
+// background: rgb(96, 163, 224);
+//         background: -moz-linear-gradient(180deg, rgba(96, 163, 224, 1) 0%, rgba(163, 191, 233, 1) 48%, rgba(231, 243, 255, 1) 100%);
+//         background: -webkit-linear-gradient(180deg, rgba(96, 163, 224, 1) 0%, rgba(163, 191, 233, 1) 48%, rgba(231, 243, 255, 1) 100%);
+//         background: linear-gradient(180deg, rgba(96, 163, 224, 1) 0%, rgba(163, 191, 233, 1) 48%, rgba(231, 243, 255, 1) 100%);
+//         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#60a3e0",endColorstr="#e7f3ff",GradientType=1);
diff --git a/src/components/NavbarBase.js b/src/components/NavbarBase.js
@@ -0,0 +1,36 @@
+import Navbar from "react-bootstrap/Navbar";
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+
+import Image from "react-bootstrap/Image";
+import { ButtonPrimary } from "./generics/Buttons/ButtonPrimary";
+import { ButtonPrimaryOutline } from "./generics/Buttons/ButtonPrimaryOutline";
+import ethermint from "../img/ethermint.png";
+import styled from "styled-components";
+
+const StyledNav = styled(Nav)`
+     {
+        button {
+            margin-left: 1em;
+        }
+    }
+`;
+
+export const NavbarBase = () => {
+    return (
+        <Navbar expand="lg">
+            <Container>
+                <Navbar.Brand href="#">
+                    <Image alt="Ethermint logo" src={ethermint} width="30" height="30" /> Ethermint
+                </Navbar.Brand>
+                <Navbar.Toggle aria-controls="ethermint-nav" />
+                <Navbar.Collapse id="ethermint-nav" className="justify-content-end">
+                    <StyledNav>
+                        <ButtonPrimaryOutline text="Login" />
+                        <ButtonPrimary text="Request refunds" />
+                    </StyledNav>
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
+    );
+};
diff --git a/src/components/generics/Buttons/ButtonPrimary.js b/src/components/generics/Buttons/ButtonPrimary.js
@@ -0,0 +1,5 @@
+import { StyledButtonPrimary } from "./StyleButtonPrimary";
+
+export const ButtonPrimary = (props) => {
+    return <StyledButtonPrimary>{props.text}</StyledButtonPrimary>;
+};
diff --git a/src/components/generics/Buttons/ButtonPrimaryOutline.js b/src/components/generics/Buttons/ButtonPrimaryOutline.js
@@ -0,0 +1,5 @@
+import { StyledButtonPrimaryOutline } from "./StyleButtonPrimaryOutline";
+
+export const ButtonPrimaryOutline = (props) => {
+    return <StyledButtonPrimaryOutline>{props.text}</StyledButtonPrimaryOutline>;
+};
diff --git a/src/components/generics/Buttons/StyleButtonPrimary.js b/src/components/generics/Buttons/StyleButtonPrimary.js
@@ -0,0 +1,31 @@
+import Button from "react-bootstrap/Button";
+import styled from "styled-components";
+
+const style = `{
+    background: rgb(61,107,153);
+    background: -moz-linear-gradient(221deg, rgba(61,107,153,1) -1.08%, rgba(51,102,153,1) 95.88%);
+    background: -webkit-linear-gradient(221deg, rgba(61,107,153,1) -1.08%, rgba(51,102,153,1) 95.88%);
+    background: linear-gradient(221deg, rgba(61,107,153,1) -1.08%, rgba(51,102,153,1) 95.88%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3d6b99",endColorstr="#336699",GradientType=1);
+    border: 0;
+}`;
+
+export const StyledButtonPrimary = styled(Button)`
+     {
+        ${style};
+        box-shadow: 0 0 0 0;
+
+        &:focus,
+        .focus,
+        :not(:disabled):not(.disabled):active,
+        :not(:disabled):not(.disabled).active,
+        show > .dropdown-toggle {
+            box-shadow: 0 0 0 0;
+        }
+        &:not(:disabled):not(.disabled):active:focus,
+        :not(:disabled):not(.disabled).active:focus,
+        show > .dropdown-toggle:focus {
+            box-shadow: 0 0 0 0rem rgba(0, 0, 0, 0);
+        }
+    }
+`;
diff --git a/src/components/generics/Buttons/StyleButtonPrimaryOutline.js b/src/components/generics/Buttons/StyleButtonPrimaryOutline.js
@@ -0,0 +1,31 @@
+import Button from "react-bootstrap/Button";
+import styled from "styled-components";
+
+const style = `{
+    background: white;
+    border: 1px solid rgb(61,107,153);
+    color: rgb(61,107,153);
+}`;
+
+export const StyledButtonPrimaryOutline = styled(Button)`
+     {
+        ${style};
+        box-shadow: 0 0 0 0;
+
+        &:focus,
+        .focus,
+        :hover,
+        :not(:disabled):not(.disabled):active,
+        :not(:disabled):not(.disabled).active,
+        show > .dropdown-toggle {
+            box-shadow: 0 0 0 0;
+            ${style};
+        }
+        &:not(:disabled):not(.disabled):active:focus,
+        :not(:disabled):not(.disabled).active:focus,
+        show > .dropdown-toggle:focus {
+            box-shadow: 0 0 0 0rem rgba(0, 0, 0, 0);
+            ${style};
+        }
+    }
+`;
diff --git a/src/components/generics/Inputs/Search.js b/src/components/generics/Inputs/Search.js
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import FormControl from "react-bootstrap/FormControl";
+
+const StyledFormControl = styled(FormControl)`
+     {
+        border-radius: 2rem;
+
+        padding-left: 2rem;
+        &:focus {
+            color: unset;
+            border: 1px solid #ced4da;
+            outline: 0;
+            box-shadow: none;
+        }
+    }
+`;
+
+export const Search = () => {
+    return <StyledFormControl type="text" placeholder="Ethermint Address" aria-label="Username" aria-describedby="basic-addon1" />;
+};
diff --git a/src/components/generics/Titles/TitlePrimary.js b/src/components/generics/Titles/TitlePrimary.js
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+const StyledTitle = styled.p`
+     {
+        font-size: 3rem;
+        color: white;
+    }
+`;
+
+export const TitlePrimary = () => {
+    return <StyledTitle>Ethermint testnet faucet</StyledTitle>;
+};
diff --git a/src/img/ethermint.png b/src/img/ethermint.png
diff --git a/src/index.css b/src/index.css
@@ -1,13 +1,9 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: 'Nunito Sans', sans-serif;
 }
+@font-face {
+  font-family: 'Nunito Sans', sans-serif;
+    src: url("./NunitoSans-Bold.ttf") format("opentype");
+
+  }