header and home

miliPaoletti · Aug 28, 2021 · 58945a5 · 58945a5
1 parent ec07d76
commit 58945a5
Show file tree

Hide file tree

Showing 15 changed files with 192 additions and 120 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,4 +1,3 @@
-import styled from "styled-components";
 import { NavbarBase } from "./NavbarBase";
 
 export const Header = () => {

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -1,7 +1,9 @@
 import styled from "styled-components";
 import { Search } from "./generics/Inputs/Search";
 import { TitlePrimary } from "./generics/Titles/TitlePrimary";
-
+import Image from "react-bootstrap/Image";
+import ethermintLogo from "../img/ethermintLogo.png";
+import { ButtonPrimaryOutline } from "./generics/Buttons/ButtonPrimaryOutline";
 const StyledContainer = styled.div`
      {
         align-items: center;
@@ -17,8 +19,12 @@ export const Home = () => {
     return (
         <StyledContainer>
             <div>
+                <Image width={100} alt="ethermint logo" src={ethermintLogo} />
                 <TitlePrimary />
                 <Search />
+                <div className="mt-4">
+                    <ButtonPrimaryOutline text="REQUEST FOUNDS" />
+                </div>
             </div>
         </StyledContainer>
     );

diff --git a/src/components/Main.js b/src/components/Main.js
@@ -4,38 +4,8 @@ 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: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%);
 
-        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;
     }
 `;
@@ -48,9 +18,3 @@ export const Main = () => {
         </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
@@ -4,32 +4,51 @@ 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 ethermintLogo from "../img/ethermintLogo.png";
 import styled from "styled-components";
 
 const StyledNav = styled(Nav)`
      {
+        flex-direction: row;
         button {
             margin-left: 1em;
         }
     }
 `;
 
+const StyledCollapse = styled(Navbar.Collapse)`
+     {
+        flex-basis: auto;
+        &.collapse:not(.show) {
+            display: flex;
+        }
+    }
+`;
+
+const StyledBrandText = styled(Navbar.Brand)`
+     {
+        align-items: center;
+        display: flex;
+        span {
+            padding-left: 0.2em;
+            color: white;
+        }
+    }
+`;
+
 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">
+                <StyledBrandText href="#">
+                    <Image alt="Ethermint logo" src={ethermintLogo} width="30" height="30" />
+                    <span> Ethermint</span>
+                </StyledBrandText>
+                <StyledCollapse id="ethermint-nav" className="justify-content-end">
                     <StyledNav>
-                        <ButtonPrimaryOutline text="Login" />
-                        <ButtonPrimary text="Request refunds" />
+                        <ButtonPrimary text="Login" />
                     </StyledNav>
-                </Navbar.Collapse>
+                </StyledCollapse>
             </Container>
         </Navbar>
     );

diff --git a/src/components/generics/Buttons/ButtonPrimary.js b/src/components/generics/Buttons/ButtonPrimary.js
@@ -1,5 +1,58 @@
-import { StyledButtonPrimary } from "./StyleButtonPrimary";
+import Button from "react-bootstrap/Button";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSignInAlt } from "@fortawesome/free-solid-svg-icons";
+
+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: 1px solid rgb(61,107,153);
+    align-items: center;
+    display: flex;
+    font-weight: 600;
+    text-transform: uppercase;
+   }`;
+
+const StyledButtonPrimary = styled(Button)`
+     {
+        svg {
+            padding-left: 0.2rem;
+        }
+
+        ${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);
+        }
+
+        &:focus {
+            border: 1px solid #6fa8e2;
+            background-color: rgb(61, 107, 153);
+        }
+    }
+`;
 
 export const ButtonPrimary = (props) => {
-    return <StyledButtonPrimary>{props.text}</StyledButtonPrimary>;
+    return (
+        <div>
+            <FontAwesomeIcon icon={["fab", "apple"]} />
+            <StyledButtonPrimary>
+                {props.text}
+                <FontAwesomeIcon icon={faSignInAlt} />
+            </StyledButtonPrimary>
+        </div>
+    );
 };
diff --git a/src/components/generics/Buttons/ButtonPrimaryOutline.js b/src/components/generics/Buttons/ButtonPrimaryOutline.js
@@ -1,4 +1,45 @@
-import { StyledButtonPrimaryOutline } from "./StyleButtonPrimaryOutline";
+import Button from "react-bootstrap/Button";
+import styled from "styled-components";
+
+const style = `{
+    background: #f9f9f9;
+    
+    color: rgb(61,107,153);
+    font-weight: 600;
+    border: 1px solid rgb(61,107,153);
+    
+}`;
+
+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};
+        }
+        &:hover {
+            border: 1px solid rgb(61, 107, 153);
+            background-color: #e9e9e9;
+        }
+        &:focus {
+            border: 1px solid #fff;
+            background-color: #e9e9e9;
+        }
+    }
+`;
 
 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
diff --git a/src/components/generics/Buttons/StyleButtonPrimaryOutline.js b/src/components/generics/Buttons/StyleButtonPrimaryOutline.js
diff --git a/src/components/generics/Inputs/Search.js b/src/components/generics/Inputs/Search.js
@@ -3,8 +3,7 @@ import FormControl from "react-bootstrap/FormControl";
 
 const StyledFormControl = styled(FormControl)`
      {
-        border-radius: 2rem;
-
+        border-radius: 0.25rem;
         padding-left: 2rem;
         &:focus {
             color: unset;
@@ -16,5 +15,5 @@ const StyledFormControl = styled(FormControl)`
 `;
 
 export const Search = () => {
-    return <StyledFormControl type="text" placeholder="Ethermint Address" aria-label="Username" aria-describedby="basic-addon1" />;
+    return <StyledFormControl type="text" placeholder="Ethermint address" aria-label="ethermint" />;
 };
diff --git a/src/components/generics/Titles/TitlePrimary.js b/src/components/generics/Titles/TitlePrimary.js
@@ -8,5 +8,5 @@ const StyledTitle = styled.p`
 `;
 
 export const TitlePrimary = () => {
-    return <StyledTitle>Ethermint testnet faucet</StyledTitle>;
+    return <StyledTitle>Ethermint Testnet Faucet</StyledTitle>;
 };
diff --git a/src/img/ethermintLogo.png b/src/img/ethermintLogo.png
diff --git a/src/index.js b/src/index.js
@@ -3,11 +3,14 @@ import ReactDOM from "react-dom";
 import App from "./App";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
+import { Provider } from "react-redux";
+
+import { store } from "./redux/store";
 
 ReactDOM.render(
-    <React.StrictMode>
+    <Provider store={store}>
         <App />
-    </React.StrictMode>,
+    </Provider>,
     document.getElementById("root")
 );
 

diff --git a/src/redux/store.js b/src/redux/store.js
@@ -0,0 +1,5 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+export const store = configureStore({
+    reducer: {},
+});