Issue no. 44,UI is not responsive solved,Made the website responsive …

…for laptops as well as mobiles co-authored-by: Dhruv <[email protected]> co-authored-by: Tanish <[email protected]> co-authored-by: Vidhita <[email protected]>
vatsalshah041 · Dec 16, 2023 · a0cdd5c · a0cdd5c
1 parent be51230
commit a0cdd5c
Show file tree

Hide file tree

Showing 15 changed files with 222 additions and 67 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 venv_bankapp
+^
 dist
 dist-ssr
 *.local

diff --git a/scripts/setupScript.ps1 b/scripts/setupScript.ps1
@@ -0,0 +1,76 @@
+# PowerShell script equivalent to the provided Bash script
+
+# Setup
+
+Set-Location ..
+
+# Check for Dependencies
+if (-not (Get-Command "node" -ErrorAction SilentlyContinue)) {
+    Write-Host "`n Node.js is not installed. Please install Node.js and npm."
+    exit 1
+}
+
+if (-not (Get-Command "python3" -ErrorAction SilentlyContinue)) {
+    Write-Host "`n Python 3 is not installed. Please install Python 3."
+    exit 1
+}
+
+# Running JavaScript microservices
+
+function Run-Javascript-Microservice {
+    param (
+        [string]$service_name,
+        [string]$service_alias
+    )
+
+    $current_dir = Get-Location
+
+    Write-Host "Running $service_name microservice..."
+
+    Start-Process PowerShell -ArgumentList @"
+        Set-Location '$current_dir\$service_name'
+        npm install
+        npm run $service_alias
+"@
+
+    Start-Sleep -Seconds 2
+
+    Write-Host "$service_name is running...`n"
+}
+
+Run-Javascript-Microservice -service_name "ui" -service_alias "ui"
+Run-Javascript-Microservice -service_name "customer-auth" -service_alias "auth"
+Run-Javascript-Microservice -service_name "atm-locator" -service_alias "atm"
+
+# Running Python microservices
+
+function Run-Python-Microservice {
+    param (
+        [string]$service_name,
+        [string]$service_alias
+    )
+
+    $current_dir = Get-Location
+
+    Write-Host "Running $service_name microservice..."
+
+    Start-Process PowerShell -ArgumentList @"
+        Set-Location '$current_dir\$service_name'
+        Remove-Item -Recurse venv_bankapp -ErrorAction SilentlyContinue
+        python -m venv venv_bankapp
+        .\venv_bankapp\Scripts\Activate
+        pip install -r requirements.txt
+        python '$service_alias.py'
+"@
+
+    Start-Sleep -Seconds 2
+
+    Write-Host "$service_name is running...`n"
+}
+
+Run-Python-Microservice -service_name "dashboard" -service_alias "dashboard"
+Run-Python-Microservice -service_name "accounts" -service_alias "accounts"
+Run-Python-Microservice -service_name "transactions" -service_alias "transaction"
+Run-Python-Microservice -service_name "loan" -service_alias "loan"
+
+Write-Host "Setup completed successfully!"
diff --git a/scripts/testscript.sh b/scripts/testscript.sh
@@ -0,0 +1,72 @@
+#!/bin/bash
+
+#######################################################################################
+## Setup
+
+cd ..
+
+# Check for Dependencies
+if ! command -v node &>/dev/null; then
+    echo "Node.js is not installed. Please install Node.js and npm."
+    exit 1
+fi
+
+# if ! command -v python3 &>/dev/null; then
+#     echo "Python 3 is not installed. Please install Python 3."
+#     exit 1
+# fi
+
+#######################################################################################
+## Running Javascript microservices
+
+run_javascript_microservice() {
+    local service_name="$1"
+    local service_alias="$2"
+    local current_dir="$(pwd)"
+
+    echo "Running $service_name microservice..."
+
+    (
+        cd "$current_dir/$service_name" &&
+        start bash -c "npm install && npm run $service_alias" &
+    )
+    sleep 2
+
+    echo "$service_name is running ..."
+    echo
+}
+
+run_javascript_microservice "ui" "ui"
+run_javascript_microservice "customer-auth" "auth"
+run_javascript_microservice "atm-locator" "atm"
+
+#######################################################################################
+# Running Python microservices
+
+# conda config --set auto_activate_base false &>/dev/null
+# brew update &>/dev/null
+# brew upgrade python3 &>/dev/null
+
+# run_python_microservice() {
+#     local service_name="$1"
+#     local service_alias="$2"
+#     local current_dir="$(pwd)"
+
+#     echo "Running $service_name microservice ..."
+
+#     (
+#         cd "$current_dir/$service_name" &&
+#         start bash -c "rm -rf venv_bankapp && python3 -m venv venv_bankapp && source venv_bankapp/bin/activate && pip3 install -r requirements.txt && python3 $service_alias.py" &
+#     )
+#     sleep 2
+
+#     echo "$service_name is running ..."
+#     echo
+# }
+
+# run_python_microservice "dashboard" "dashboard"
+# run_python_microservice "accounts" "accounts"
+# run_python_microservice "transactions" "transaction"
+# run_python_microservice "loan" "loan"
+
+echo "Setup completed successfully!"
diff --git a/ui/src/components/FormContainer.jsx b/ui/src/components/FormContainer.jsx
@@ -47,7 +47,7 @@ const FormContainer = ({ children, position }) => {
         </>
       ) : (
         <Row className="justify-content-md-center mt-5">
-          <Col md={6} className="card p-5">
+          <Col md={6} className="card " style={{padding:window.innerWidth>=570?"40px":"15px"}}>
             {children}
           </Col>
         </Row>

diff --git a/ui/src/components/Hero.jsx b/ui/src/components/Hero.jsx
@@ -15,44 +15,43 @@ import {
 
 const Hero = () => {
   return (
-    // <div className="py-5">
-      <Container className="d-flex justify-content-center " style={{width: window.innerWidth >= 768 ?"75%":"100%"}}>
-        <Card className=" d-flex flex-column align-items-center hero-card w-100"style={{ padding: window.innerWidth >= 768 ? '3rem' : '0.5rem',}}>
+    <div className="py-5">
+      <Container className="d-flex justify-content-center">
+        <Card className=" d-flex flex-column align-items-center hero-card " style={{width:window.innerWidth>=570?"75%":"100%",padding:window.innerWidth>=570?"5%":"6%"}}>
           <h1 className="text-center mb-4">
             <span style={{ fontSize: "4vh", fontWeight: "bold" }}>
               Welcome to Martian Bank
             </span>
           </h1>
-          <p style={{ fontSize: "2vh", textAlign: window.innerWidth >= 768 ?"center":"justify",padding:window.innerWidth >= 768 ?"none":"1.5rem" }}>
+          <p style={{ fontSize: "2vh", textAlign: "center" }}>
             Secure your Martian finances with Red Planet Bank - your trusted
             financial partner on the Red Planet. Explore our innovative banking
             solutions, enjoy top-notch security measures, and fuel your Martian
             ventures with our competitive loans and investment opportunities.
           </p>
-
-            <Row>
-              <Col md={6} xs={12}>
-              <div className="d-flex mt-4 mb-4" style={{justifyContent:"center"}}>
+          <div className="d-flex flex-column flex-sm-row mt-4 mb-4">
+          <div style={{marginBottom:window.innerWidth>=570?"":"10px",marginLeft:window.innerWidth>=570?"":"14%"}}>
             <LinkContainer to="/login">
-            <Button variant="dark" className=" px-5 py-2" style={{marginBlockEnd:window.innerWidth >= 768 ?"5rem":"0rem"}}>
+
+              <Button variant="dark" className="me-5 px-5 py-2" >
                 <span style={{ fontSize: "2vh" }}>Login</span>
               </Button>
+
             </LinkContainer>
             </div>
-            </Col>
-            <Col md={6} xs={12}>
-            <div className="d-flex mt-4 mb-4" style={{justifyContent:"center"}}>
+            <div style={{marginTop:window.innerWidth>=570?"":"10px",marginLeft:window.innerWidth>=570?"":"12%"}}>
             <LinkContainer to="/register">
-              <Button variant="dark" className=" px-5 py-2" style={{marginBlockEnd:window.innerWidth >= 768 ?"5rem":"0rem"}}>
+
+              <Button variant="dark" className="me-5 px-5 py-2">
                 <span style={{ fontSize: "2vh" }}>Signup</span>
               </Button>
+
             </LinkContainer>
             </div>
-            </Col>
-            </Row>
+          </div>
+          <div className="d-flex justify-content-around mt-5">
             <Row>
-              <Col md={4} xs={12}>
-              <div className="d-flex justify-content-around mt-5">
+              <Col md={4}>
                 <Card className="text-center border-0">
                   <FontAwesomeIcon
                     icon={faMoneyBillWave}
@@ -66,10 +65,8 @@ const Hero = () => {
                     </Card.Text>
                   </Card.Body>
                 </Card>
-                </div>
               </Col>
-              <Col md={4} xs={12}>
-              <div className="d-flex justify-content-around mt-5">
+              <Col md={4}>
                 <Card className="text-center border-0">
                   <FontAwesomeIcon
                     icon={faShieldAlt}
@@ -83,10 +80,8 @@ const Hero = () => {
                     </Card.Text>
                   </Card.Body>
                 </Card>
-                </div>
               </Col>
-              <Col md={4} xs={12}>
-              <div className="d-flex justify-content-around mt-5">
+              <Col md={4}>
                 <Card className="text-center border-0">
                   <FontAwesomeIcon icon={faRocket} className="display-3 my-3" />
                   <Card.Body>
@@ -97,12 +92,12 @@ const Hero = () => {
                     </Card.Text>
                   </Card.Body>
                 </Card>
-                </div>
               </Col>
             </Row>
+          </div>
         </Card>
       </Container>
-    // </div>
+    </div>
   );
 };
 

diff --git a/ui/src/screens/AccInfoScreen.jsx b/ui/src/screens/AccInfoScreen.jsx
@@ -48,14 +48,14 @@ const AccInfoScreen = () => {
   };
 
   return (
-    <FormContainer>
+    <FormContainer style={{padding:window.innerWidth>=570?"1.5vh":"0.1vh"}}>
       <h4
         className="bg-light mx-3"
         style={{
           textAlign: "center",
-          paddingTop: "2vh",
-          paddingBottom: "2vh",
-          marginBottom: "3vh",
+          paddingTop: window.innerWidth>=570?"2vh":"0vh",
+          paddingBottom: window.innerWidth>=570?"2vh":"0.1vh",
+          marginBottom: window.innerWidth>=570?"3vh":"0.1vh",
         }}
       >
         Account Information

diff --git a/ui/src/screens/ApplyLoanScreen.jsx b/ui/src/screens/ApplyLoanScreen.jsx
@@ -169,22 +169,22 @@ const ApplyLoan = () => {
   }, []);
 
   return (
-    <FormContainer>
+    <FormContainer style={{padding:"0rem"}}>
       <h4
         className="bg-light mx-3"
         style={{
           textAlign: "center",
-          paddingTop: "2vh",
-          paddingBottom: "2vh",
+          paddingTop: window.innerWidth>=570?"2vh":"0vh",
+          paddingBottom:window.innerWidth>=570?"2vh":"0vh",
         }}
       >
         Loan Application
       </h4>
       {isLoading ? (
         <Loader />
       ) : (
-        <Form noValidate validated={validated} onSubmit={submitHandler}>
-          <Row className="mt-4">
+        <Form noValidate validated={validated} onSubmit={submitHandler} style={{padding:0}}>
+          <Row className="" style={{marginTop:window.innerWidth>=570?"4px":"0vh"}}>
             <Col md={6}>
               <Form.Group className="my-3" controlId="name">
                 <Form.Label>Name</Form.Label>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ lerna-debug.log* @@
     node_modules
     venv_bankapp
+    ^
     dist
     dist-ssr
     *.local
@@ Expand Down @@