Merge pull request #124 from Ansh101112/main

MADE WHOLE RESPONSIVE UI

.gitignore

@@ -0,0 +1,39 @@
+.DS_STORE
+node_modules
+scripts/flow/*/.flowconfig
+.flowconfig
+*~
+*.pyc
+.grunt
+_SpecRunner.html
+__benchmarks__
+build/
+remote-repo/
+coverage/
+.module-cache
+fixtures/dom/public/react-dom.js
+fixtures/dom/public/react.js
+test/the-files-to-test.generated.js
+*.log*
+chrome-user-data
+*.sublime-project
+*.sublime-workspace
+.idea
+*.iml
+.vscode
+*.swp
+*.swo
+
+packages/react-devtools-core/dist
+packages/react-devtools-extensions/chrome/build
+packages/react-devtools-extensions/chrome/*.crx
+packages/react-devtools-extensions/chrome/*.pem
+packages/react-devtools-extensions/firefox/build
+packages/react-devtools-extensions/firefox/*.xpi
+packages/react-devtools-extensions/firefox/*.pem
+packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/.tempUserDataDir
+packages/react-devtools-fusebox/dist
+packages/react-devtools-inline/dist
+packages/react-devtools-shell/dist
+packages/react-devtools-timeline/dist

src/App.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { Route, Routes } from "react-router-dom";
+import Home from "./pages/Home";
+import QRCodeVerification from "./pages/QR";
+import SignUp from "./pages/Signup";
+import Login from "./pages/Login";
+import NotificationSettings from "./pages/Notification";
+import CustomerVoices from "./pages/Contact";
+
+const App = () => {
+  return (
+    <>
+      <Routes>
+        <Route path="/" element={<Home></Home>}></Route>
+        <Route
+          path="/scanqr"
+          element={<QRCodeVerification></QRCodeVerification>}
+        ></Route>
+        <Route path="/user/signup" element={<SignUp></SignUp>}></Route>
+        <Route path="/user/login" element={<Login></Login>}></Route>
+        <Route
+          path="/contact"
+          element={<CustomerVoices></CustomerVoices>}
+        ></Route>
+        <Route
+          path="/user/notifications"
+          element={<NotificationSettings></NotificationSettings>}
+        ></Route>
+        <Route path="/about" element={<Home></Home>}></Route>
+      </Routes>
+    </>
+  );
+};
+
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/index.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Toggle switch styles */
+input:checked ~ .dot {
+    transform: translateX(100%);
+    background-color: #4CAF50;
+  }
+

src/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/pages/Login.js

@@ -23,7 +23,7 @@ const Login = () => {
             <div>
               <label className="block text-gray-700">Phone Number</label>
               <input
-                type="text"
+                type="number"
                 className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-green-600"
                 placeholder="Phone Number"
               />

src/pages/Signup.js

@@ -39,7 +39,7 @@ const SignUp = () => {
             <div>
               <label className="block text-gray-700">Phone Number</label>
               <input
-                type="text"
+                type="number"
                 className="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-green-600"
                 placeholder="Phone Number"
               />

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';