responsive home + email domains

Author: nandcoder

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "fintrack",
+  "name": "fintracker",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -14,6 +14,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/react-router-dom": "^5.3.3",
     "bootstrap": "^5.2.3",
     "firebase": "^8.6.1",
     "framer-motion": "^4",
@@ -52,4 +53,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

package.json

@@ -14,7 +14,7 @@ import Team from "./pages/Team";
 import GroupTransaction from "./pages/Transaction/GroupTransaction";
 import UserTransaction from "./pages/Transaction/UserTransaction";
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
-import './App.css'
+import './App.css';
 
 
 function App() {
@@ -34,6 +34,7 @@ function App() {
           <Route path="/forgot-password" component={ForgotPassword} />
           <Route path="/reset-password" component={ResetPassword} />
           <Route path="/team" component={Team} />
+          <Route path="*" element={()=> "404"}/>
         </Switch>
       </div>
       <Footer />

src/App.js

@@ -6,7 +6,6 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { AuthProvider } from "./components/Authentication/AuthProvider";
-import "./index.css"
 
 ReactDOM.render(
   <React.StrictMode>

src/index.js

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useState } from "react";
-import { Container } from "react-bootstrap";
+import { Col, Container, Row } from "react-bootstrap";
 import Card from "../../components/Card";
 import AddGroup from "./Sections/AddGroup";
 import GroupCard from "./Sections/GroupCard";
@@ -73,30 +73,38 @@ const Home = () => {
     return (
         <>
             <Container id="feedback">
-                <Card
-                    className="fbcard"
-                    imgUrl={img3}
-                    head="Total Expenditure"
-                    text={`₹ ${amount.total}`}
-                    textColor={'info'}
-                    link="/transaction"
-                />
-                <Card
-                    className="fbcard"
-                    imgUrl={img2}
-                    head="I OWE PEOPLE"
-                    text={`₹ ${amount.iOwe}`}
-                    textColor={'danger'}
-                    link="/transaction"
-                />
-                <Card
-                    className="fbcard"
-                    imgUrl={img1}
-                    head="PEOPLE OWE ME"
-                    text={`₹ ${amount.peopleOwe}`}
-                    textColor={'success'}
-                    link="/user"
-                />
+                <Row>
+                    <Col>
+                        <Card
+                            className="fbcard"
+                            imgUrl={img3}
+                            head="Total Expenditure"
+                            text={`₹ ${amount.total}`}
+                            textColor={'info'}
+                            link="/transaction"
+                        />
+                    </Col>
+                    <Col>
+                        <Card
+                            className="fbcard"
+                            imgUrl={img2}
+                            head="I OWE PEOPLE"
+                            text={`₹ ${amount.iOwe}`}
+                            textColor={'danger'}
+                            link="/transaction"
+                        />
+                    </Col>
+                    <Col>
+                        <Card
+                            className="fbcard"
+                            imgUrl={img1}
+                            head="PEOPLE OWE ME"
+                            text={`₹ ${amount.peopleOwe}`}
+                            textColor={'success'}
+                            link="/user"
+                        />
+                    </Col>
+                </Row>
             </Container>
             <br />
             <Container id="content">

src/pages/Home/index.js

@@ -5,7 +5,7 @@ const loginSchema = Joi.object({
   email: Joi.string()
     .email({
       minDomainSegments: 2,
-      tlds: { allow: ["com", "net"] },
+      tlds: { allow: ["com", "net", "dev", "co", "in"] },
     })
     .message("Please enter a valid email"),
   password: Joi.string()