UI ux update

frontend/package.json

@@ -1,70 +1,78 @@
 {
-  "name": "frontend",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@types/react-paginate": "^7.1.1",
-    "axios": "^0.22.0",
-    "eslint": "^7.11.0",
-    "i18next": "^21.9.0",
-    "i18next-browser-languagedetector": "^6.1.5",
-    "i18next-http-backend": "^1.4.1",
-    "install": "^0.13.0",
-    "leaflet": "^1.7.1",
-    "npm": "^8.19.2",
-    "rc-drawer": "^4.4.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-hooks-use-modal": "^2.1.0",
-    "react-i18next": "^11.18.3",
-    "react-leaflet": "^3.2.2",
-    "react-modern-drawer": "^0.1.1",
-    "react-paginate": "^8.1.3",
-    "react-router-dom": "^5.3.0",
-    "react-search-field": "^2.0.1",
-    "react-search-input": "^0.11.3",
-    "recoil": "^0.7.2",
-    "recoil-persist": "^4.2.0"
-  },
-  "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "eject": "react-scripts eject",
-    "lint": "eslint --fix --ext .js,.ts ."
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ],
-  "devDependencies": {
-    "@craco/craco": "^6.4.0",
-    "@mui/material": "^5.1.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/leaflet": "^1.7.6",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-router-dom": "^5.3.2",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
-    "@typescript-eslint/parser": "^5.8.0",
-    "autoprefixer": "^9.8.8",
-    "postcss": "^7.0.39",
-    "react-scripts": "4.0.3",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
-  }
+    "name": "frontend",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@emotion/react": "^11.10.4",
+        "@emotion/styled": "^11.10.4",
+        "@types/nprogress": "^0.2.0",
+        "@types/react-helmet": "^6.1.5",
+        "@types/react-paginate": "^7.1.1",
+        "@types/react-router-config": "^5.0.6",
+        "axios": "^0.22.0",
+        "eslint": "^7.11.0",
+        "i18next": "^21.9.0",
+        "i18next-browser-languagedetector": "^6.1.5",
+        "i18next-http-backend": "^1.4.1",
+        "install": "^0.13.0",
+        "leaflet": "^1.7.1",
+        "notistack": "^2.0.8",
+        "npm": "^8.19.2",
+        "nprogress": "^0.2.0",
+        "rc-drawer": "^4.4.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-feather": "^2.0.10",
+        "react-helmet": "^6.1.0",
+        "react-hooks-use-modal": "^2.1.0",
+        "react-i18next": "^11.18.3",
+        "react-leaflet": "^3.2.2",
+        "react-modern-drawer": "^0.1.1",
+        "react-paginate": "^8.1.3",
+        "react-router-config": "^5.1.1",
+        "react-router-dom": "^5.3.0",
+        "react-search-field": "^2.0.1",
+        "react-search-input": "^0.11.3",
+        "recoil": "^0.7.2",
+        "recoil-persist": "^4.2.0"
+    },
+    "scripts": {
+        "start": "craco start",
+        "build": "craco build",
+        "test": "craco test",
+        "eject": "react-scripts eject",
+        "lint": "eslint --fix --ext .js,.ts ."
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": [
+        ">0.2%",
+        "not dead",
+        "not op_mini all"
+    ],
+    "devDependencies": {
+        "@craco/craco": "^6.4.0",
+        "@mui/material": "^5.1.0",
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "@types/jest": "^26.0.15",
+        "@types/leaflet": "^1.7.6",
+        "@types/node": "^12.0.0",
+        "@types/react": "^17.0.0",
+        "@types/react-dom": "^17.0.0",
+        "@types/react-router-dom": "^5.3.2",
+        "@typescript-eslint/eslint-plugin": "^5.8.0",
+        "@typescript-eslint/parser": "^5.8.0",
+        "autoprefixer": "^9.8.8",
+        "postcss": "^7.0.39",
+        "react-scripts": "4.0.3",
+        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
+        "typescript": "^4.1.2",
+        "web-vitals": "^1.0.1"
+    }
 }

frontend/src/App.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Routes from "./routes";
+import {RecoilRoot} from "recoil";
+import "./index.css";
+import "translations";
+import ThemeProvider from "./theme";
+import {SnackbarProvider} from 'notistack';
+
+const App = () => {
+    return (
+        <React.Fragment>
+            <RecoilRoot>
+                <SnackbarProvider maxSnack={3} anchorOrigin={{horizontal: "right", vertical: "top"}}>
+                    <ThemeProvider>
+                        <Routes/>
+                    </ThemeProvider>
+                </SnackbarProvider>
+            </RecoilRoot>
+        </React.Fragment>
+    );
+}
+
+
+export default App;

frontend/src/assets/data/Links.data.ts

@@ -1,22 +1,20 @@
-import i18n from "../../i18n";
-
 export const LINKS = [
-  {
-    title: i18n.t("adviceTitle2"),
-    content: [
-      i18n.t("adviceContent"),
-    ]
-  },
-  {
-    title:i18n.t( "adviceTitle3"),
-    content: [
-      i18n.t("adviceContent1"),
-    ]
-  },
-  {
-    title: i18n.t("adviceTitle4"),
-    content: [
-      i18n.t("adviceContent2"),
-    ]
-  }
-]
+    {
+        title: "adviceTitle2",
+        content: [
+            "adviceContent",
+        ]
+    },
+    {
+        title: "adviceTitle3",
+        content: [
+            "adviceContent1",
+        ]
+    },
+    {
+        title: "adviceTitle4",
+        content: [
+            "adviceContent2",
+        ]
+    }
+]