Merge pull request #73 from nerdvibe/feature/new-theme

Feature/new theme
nerdvibe · Feb 7, 2022 · db9397e · db9397e
2 parents d16a9fb + 4c944ae
commit db9397e
Show file tree

Hide file tree

Showing 82 changed files with 5,338 additions and 1,452 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -5,10 +5,12 @@
 @import "./styles/__loader";
 @import "./styles/__dashboard";
 @import "./styles/__table";
+@import "./styles/__homepage";
+@import "./styles/__new_design";
+@import "./styles/__accountAvatar";
+@import url("https://fonts.googleapis.com/css2?family=Mada:wght@200;300;400;500;600;700;900&display=swap");
 
 .App {
-  background: $white;
-  background-image: url("./assets/background.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
@@ -52,7 +54,11 @@
 }
 
 html {
-  background: $gradient;
+  background-color: #171717;
+  background: url('./squares-bg.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
   height: 104vh;
   overflow-y: hidden;
 }

diff --git a/src/App.tsx b/src/App.tsx
@@ -6,7 +6,6 @@ import { apolloClient } from "./graphql/api";
 import { clearSession } from "./tools";
 import { electronAlerts } from "./tools";
 import { LedgerContextProvider } from "./contexts/ledger/LedgerContext";
-import { ClorioAppBanner } from "./components/UI/ClorioAppBanner";
 
 function App() {
   clearSession();
@@ -16,7 +15,6 @@ function App() {
       <ApolloProvider client={apolloClient}>
         <LedgerContextProvider>
           <HashRouter>
-            <ClorioAppBanner />
             <Layout />
           </HashRouter>
         </LedgerContextProvider>

diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import Sidebar from "./components/UI/sidebar/Sidebar";
-import { Col, Container, Row } from "react-bootstrap";
+import { Container } from "react-bootstrap";
 import Routes from "./Routes";
 import {
   clearSession,
@@ -94,20 +94,20 @@ const Layout = () => {
     <div>
       <Container fluid>
         <TermsAndConditions />
-        <Row>
+        <div className="flex">
           {sessionData && !isEmptyObject(sessionData) && sessionData.address && (
-            <Col md={3} lg={3} xl={2} id="sidebar-wrapper">
+            <div id="sidebar-wrapper">
               <Sidebar
                 mnemonic={sessionData.mnemonic}
                 toggleLoader={toggleLoader}
                 network={networkData}
                 clearSessionData={clearSessionData}
               />
               <UserIDUpdater />
-            </Col>
+            </div>
           )}
           {}
-          <Col
+          <div
             className={
               isEmptyObject(sessionData)
                 ? "page-content-wrapper"
@@ -130,8 +130,8 @@ const Layout = () => {
                 </Spinner>
               </BalanceContextProvider>
             </Container>
-          </Col>
-        </Row>
+          </div>
+        </div>
         <Alert />
       </Container>
     </div>

diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -4,12 +4,14 @@ const SendTX = React.lazy(() => import("./pages/sendTX/SendTX"));
 const Stake = React.lazy(() => import("./pages/stake/Stake"));
 const SplashScreen = React.lazy(() => import("./pages/SplashScreen"));
 const Login = React.lazy(() => import("./pages/Login"));
-// const Register = React.lazy(() => import("./pages/registration/Registration"));
 const LedgerLogin = React.lazy(() => import("./pages/LedgerLogin"));
 const SignMessage = React.lazy(() => import("./pages/signMessage/SignMessage"));
 const NotFound = React.lazy(() => import("./pages/404"));
 const VerifyMessage = React.lazy(() => import("./pages/VerifyMessage"));
 const Mnemonic = React.lazy(() => import("./pages/mnemonic/Mnemonic"));
+const LoginSelection = React.lazy(
+  () => import("./pages/loginSelection/LoginSelection")
+);
 import { AuthenticatedRoute } from "./components/routes/AuthenticatedRoute";
 import { UnauthenticatedRoute } from "./components/routes/UnauthenticatedRoute";
 import { INetworkData } from "./types/NetworkData";
@@ -81,18 +83,18 @@ const Routes = (props: IRoutesProps) => {
           appProps={props}
           isAuthenticated={!!props.sessionData.address}
         />
+        <UnauthenticatedRoute
+          path="/login-selection"
+          Component={LoginSelection}
+          appProps={props}
+          isAuthenticated={!!props.sessionData.address}
+        />
         <UnauthenticatedRoute
           path="/"
           Component={SplashScreen}
           appProps={props}
           isAuthenticated={!!props.sessionData.address}
         />
-        {/*<Route path="/register">
-          <Entropy />
-        </Route>*/}
-        {/*<Route path="/verify">
-          <VerifyMnemonic />
-        </Route>*/}
         <Route component={NotFound} />
       </Switch>
     </Suspense>

diff --git a/src/components/UI/Animation.tsx b/src/components/UI/Animation.tsx
@@ -7,14 +7,18 @@ interface IProps {
   width?: string;
   animation: any;
   loop?: boolean;
+  maxWidth?: string;
+  timeout?: number;
 }
 
 const MissingAnimation = ({
+  maxWidth,
   text,
   secondaryText,
   width,
   animation,
   loop = true,
+  timeout,
 }: IProps) => {
   const options = {
     animationData: animation,
@@ -23,14 +27,15 @@ const MissingAnimation = ({
   } as LottieOptions;
 
   const { View, stop } = useLottie(options, {
-    width: width ? width : "100%",
+    width: width ? width : "80%",
     margin: "0 auto",
+    maxWidth: maxWidth,
   });
 
   useEffect(() => {
     setTimeout(() => {
       stop();
-    }, 6000);
+    }, timeout || 12000);
   }, []);
 
   return (

diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx
@@ -9,6 +9,8 @@ interface IProps {
   link?: string;
   loading?: boolean;
   disableAnimation?: boolean;
+  style?: "standard" | "no-style" | "primary";
+  appendIcon?: boolean;
 }
 
 const Button = ({
@@ -20,6 +22,8 @@ const Button = ({
   link,
   loading,
   disableAnimation,
+  style = "standard",
+  appendIcon = false,
 }: IProps) => {
   const clickHandler = () => {
     if (loading) {
@@ -30,11 +34,18 @@ const Button = ({
     }
   };
 
+  const styleClass =
+    style === "standard"
+      ? "button non-selectable-text"
+      : style === "primary"
+      ? `primary ${disabled ? "primary disabled" : ""}`
+      : "";
+
   const button = (
     <div
       className={`${className} ${
         disableAnimation ? "" : " button-animation "
-      }  button non-selectable-text`}
+      }  ${styleClass}`}
       onClick={clickHandler}
     >
       {loading ? (
@@ -45,15 +56,19 @@ const Button = ({
         </div>
       ) : (
         <>
-          {icon}&nbsp;{text}
+          {!appendIcon && icon}&nbsp;{text} &nbsp; {appendIcon && icon}
         </>
       )}
     </div>
   );
 
   const disabledButton = (
-    <div className={"disabledButton margin-auto"}>
-      {icon}&nbsp;{text}
+    <div
+      className={`${className} ${
+        disableAnimation ? "" : " button-animation "
+      }  ${styleClass}`}
+    >
+      {!appendIcon && icon}&nbsp;{text} &nbsp; {appendIcon && icon}
     </div>
   );
   if (disabled) {

diff --git a/src/components/UI/Footer.tsx b/src/components/UI/Footer.tsx
@@ -1,10 +1,16 @@
+import { useQuery } from "@apollo/client";
+import { GET_NETWORK } from "../../graphql/query";
+import { storeNetworkData } from "../../tools";
 import { INetworkData } from "../../types/NetworkData";
 
-interface IProps {
-  network?: INetworkData;
-}
-
-const Footer = ({ network }: IProps) => {
+const Footer = () => {
+  const { data: network } = useQuery<INetworkData>(GET_NETWORK, {
+    onCompleted: async (data) => {
+      if (data?.nodeInfo) {
+        await storeNetworkData(data?.nodeInfo);
+      }
+    },
+  });
   const renderNetwork = network?.nodeInfo
     ? `${network.nodeInfo.name} | ${network.nodeInfo.network}`
     : "Network unavailable";

diff --git a/src/components/UI/Homepage.tsx b/src/components/UI/Homepage.tsx
@@ -1,43 +1,40 @@
-import { Row, Col } from "react-bootstrap";
 import { Link } from "react-router-dom";
-import Button from "./Button";
+import Footer from "./Footer";
 import Logo from "./logo/Logo";
 
-const Homepage = () => (
-  <div className="block-container no-bg real-full-page-container center no-margin">
-    <Row>
-      <Col xs={12} className="full-width-align-center">
-        <div className="mx-auto fit-content">
-          <Logo big={true} />
+const Homepage = () => {
+  return (
+    <div className="full-screen-container-center">
+      <div className="homepage-card glass-card flex md-flex-col">
+        <div className="half-card">
+          <div className="flex flex-col">
+            <Logo big />
+            <p className="text-center mt-3">
+              Access the power of the Mina Protocol Blockchain.
+            </p>
+          </div>
         </div>
-        <div className="v-spacer" />
-        <h4 className="full-width-align-center ">
-          Access the power of the Mina Protocol Blockchain.
-        </h4>
-        <div className="v-spacer" />
-        <Link to="/login">
-          <Button
-            className="lightGreenButton__fullMono mx-auto"
-            text="Access with Passphrase or Private key"
-          />
-        </Link>
-        <div className="v-spacer" />
-        <Link to="/ledger">
-          <Button
-            className="lightGreenButton__fullMono mx-auto"
-            text="Access with Ledger"
-          />
-        </Link>
-        <div className="v-spacer" />
-        <Link to="/register">
-          <Button
-            className="lightGreenButton__fullMono mx-auto"
-            text="Create a wallet"
-          />
-        </Link>
-      </Col>
-    </Row>
-  </div>
-);
+        <div className="half-card flex flex-col">
+          <Link to={"register"}>
+            <div className="button primary">
+              <span className="button-helper"></span>
+              Create new wallet
+            </div>
+          </Link>
+          <p className="w-100 text-center mt-4 mb-4">or</p>
+          <Link to={"login-selection"}>
+            <div className="button primary">
+              <span className="button-helper"></span>
+              Log-in
+            </div>
+          </Link>
+        </div>
+        <div className="mt-4">
+          <Footer />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default Homepage;
diff --git a/src/components/UI/NewsBanner.tsx b/src/components/UI/NewsBanner.tsx
@@ -4,24 +4,10 @@ import { isEmptyObject } from "../../tools/utils";
 import Button from "./Button";
 
 const NewsBanner = (props: INewsData) => {
-  const { title, subtitle, link, cta, cta_color, visible } = props;
-  /**
-   * Returns the style based on cta_color prop
-   * @returns string Classname
-   */
-  const buttonStyle = () => {
-    switch (cta_color) {
-      case "success":
-        return "lightGreenButton__outlineMono ";
-      case "warning":
-        return "yellowButton__outlineMono ";
-      default:
-        return "lightGreenButton__outlineMono ";
-    }
-  };
+  const { title, subtitle, link, cta, visible } = props;
 
   return !isEmptyObject(props) && visible ? (
-    <div className="block-container">
+    <div className="glass-card p-4 mt-2 mb-2">
       <Row>
         <Col md={8} lg={8} xl={9}>
           <h4>{title}</h4>
@@ -32,14 +18,16 @@ const NewsBanner = (props: INewsData) => {
             {link ? (
               <a href={link} target="_blank" rel="noreferrer">
                 <Button
-                  className={`${buttonStyle()} mx-auto`}
                   text={cta || "Learn more"}
+                  style="primary"
+                  className="mx-auto text-center"
                 />
               </a>
             ) : (
               <Button
-                className={`${buttonStyle()} mx-auto`}
                 text={cta || "Learn more"}
+                style="primary"
+                className="mx-auto text-center"
               />
             )}
           </Col>

diff --git a/src/components/UI/Spinner.tsx b/src/components/UI/Spinner.tsx
@@ -2,11 +2,16 @@ interface IProps {
   show?: boolean;
   className?: string;
   children?: JSX.Element;
+  fullscreen?: boolean;
 }
 
-const Spinner = ({ show, className, children }: IProps) => {
+const Spinner = ({ show, className, children, fullscreen = true }: IProps) => {
   return show ? (
-    <div className={"spinner-container center " + className}>
+    <div
+      className={`spinner-container center ${
+        fullscreen ? "no-max-height" : ""
+      } ${className ? className : ""}`}
+    >
       <div className="show">
         <div className="lds-roller">
           <div></div>