From db41fd2f120416f67d1bb18b3a30a3894684fc41 Mon Sep 17 00:00:00 2001
From: zaid-kh <z.kh2800@gmail.com>
Date: Thu, 19 Sep 2024 10:18:25 +0300
Subject: [PATCH] feat: added welcome page

---
 src/App.jsx                       |  7 +--
 src/index.css                     | 12 +++++
 src/pages/welcome/welcomePage.jsx | 81 ++++++++++++-------------------
 3 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index d89f589..f2deae2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -28,13 +28,14 @@ function App() {
         <div id="navigator-container">
           <BrowserRouter>
             <Routes>
-              <Route path="/" element={<DashboardPage />} />
+              <Route path="/" element={<WelcomePage />} />
+              <Route path="/dashboard" element={<DashboardPage />} />
               <Route path="/main" element={<MainPage />} />
               <Route path="/fund" element={<FundPage />} />
               <Route path="/defund" element={<DefundPage />} />
               <Route path="/transfer" element={<TransferPage />} />
-              <Route path="/lock" element={<LockPage  />} />
-              <Route path="/lock-request" element={<LockRequestPage  />} />
+              <Route path="/lock" element={<LockPage />} />
+              <Route path="/lock-request" element={<LockRequestPage />} />
               <Route path="/lock/:id" element={<LockDetailsPage id />} />
               <Route path="/addressbook" element={"address book"} />
               <Route path="/wallet" element={"wallet"} />
diff --git a/src/index.css b/src/index.css
index 9a2d4da..be670d2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -84,6 +84,9 @@ flex-grow: 0;
 .gap-16 {
   gap: 16px;
 }
+.margin-bottom-24 {
+  margin-bottom: 24px;
+}
 .padding-16 {
   padding: 16px;
 }
@@ -190,6 +193,15 @@ flex-grow: 0;
   border: 1px solid var(--main-color);
 }
 
+.button[appereance=darkOutlined] {
+  background-color: transparent;
+  border: 1px solid var(--secondary-color);
+}
+
+.button[appereance=darkOutlined] .btn{
+  color: var(--secondary-color);
+}
+
 .data-panel{
   border-radius: var(--border-radius);
   display: flex;
diff --git a/src/pages/welcome/welcomePage.jsx b/src/pages/welcome/welcomePage.jsx
index 5676e9e..a8ee4e3 100644
--- a/src/pages/welcome/welcomePage.jsx
+++ b/src/pages/welcome/welcomePage.jsx
@@ -1,58 +1,41 @@
-import React, { useState } from "react";
-import ScreenTitle from "../../components/texts/screenTitle.jsx";
-import Subtitle from "../../components/texts/subtitle.jsx";
-import DynamicButton from "../../components/buttons/dynamicButton.jsx";
-import MainContainer from "../../components/containers/mainContainer.jsx";
-import DynamicInput from "../../components/inputs/dynamicInput.jsx";
+import React from "react";
+import MainBodyContainer from "../../components/containers/main-body-container.jsx";
+import { Button } from "../../components/index.js";
+import styled from "styled-components";
 
-const WelcomePage = () => {
-  const [walletId, setWalletId] = useState("");
-  const [walletIdError, setWalletIdError] = useState("");
-
-  const validateWalletId = () => {
-    const parsedWalletId = walletId.replace(/\D/g, ""); // Remove non-numeric characters
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;
 
-    if (parsedWalletId.trim() === "") {
-      setWalletIdError("Wallet ID cannot be empty");
-    } else if (parsedWalletId.length < 6 || parsedWalletId.length > 12) {
-      setWalletIdError("Wallet ID must be between 6 and 12 digits");
-    } else {
-      setWalletIdError(""); // Clear error if valid
-    }
-  };
-
-  const handleWalletIdChange = (e) => {
-    setWalletId(e.target.value);
-    setWalletIdError(""); // Clear error on change
-  };
+const CenteredContainer = styled.div`
+  margin-top: 100px;
+  max-height: 100%;
+`;
 
+const WelcomePage = () => {
   return (
     <>
-      <MainContainer>
-        <ScreenTitle text="Welcome" />
-        <Subtitle text="Digital Shekel Wallet" />
-        <DynamicInput
-          type="text"
-          placeholder="Enter your wallet ID"
-          value={walletId}
-          onChange={handleWalletIdChange}
-          onBlur={validateWalletId}
-          error={!!walletIdError}
-          errorMessage={walletIdError}
-        />
+      <CenteredContainer>
+        <MainBodyContainer>
+          <div className="padding-top-16">
+            <section className="gap-4 flex-column padding-top-16">
+              <ButtonContainer>
+                <h1 className="text-secondary">Let's Start</h1>
 
-        <DynamicButton
-          text={"Open Existing Wallet"}
-          bg={"#50924E"}
-          hoverbg={"#396d37"}
-          to={"/main"}
-        />
-        <DynamicButton
-          text={"Create New Wallet"}
-          hoverbg={"#2358DC"}
-          bg={"#4F7AE3"}
-        />
-      </MainContainer>
+                <Button text="Open existing" />
+                <Button appereance={"darkOutlined"} text="Enter wallet ID" />
+                <Button
+                  to={"/dashboard"}
+                  appereance={"darkOutlined"}
+                  text="Create new wallet"
+                />
+              </ButtonContainer>
+            </section>
+          </div>
+        </MainBodyContainer>
+      </CenteredContainer>
     </>
   );
 };