💄 🐛 ui fixes removed bootstrap, addressed major issues

Author: shelcia

client/.eslintrc.json

@@ -1,35 +1,16 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "plugin:react/recommended",
-        "airbnb"
-    ],
-    "overrides": [
-    ],
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "quotes": [2, "double", { "avoidEscape": true }],
-        "comma-dangle": 0,
-        "react/function-component-definition": [
-            2,
-            {
-              "namedComponents": "arrow-function",
-              "unnamedComponents": "arrow-function"
-            }
-          ],
-          "react/prop-types": 0,
-          "no-underscore-dangle": 0,
-          "react/jsx-one-expression-per-line": 0,
-          "object-curly-newline": 0
-        // "prefer-function-component":0
-    }
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/prop-types": 0
+  }
 }

client/.gitignore

@@ -23,3 +23,5 @@ package-lock.json
 *.njsproj
 *.sln
 *.sw?
+
+.env

client/package.json

@@ -10,35 +10,36 @@
     "lint": "eslint . --ext .js,.jsx"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@fontsource/poppins": "^4.5.10",
-    "@mui/material": "^5.11.0",
-    "axios": "^1.1.2",
-    "html-react-parser": "^3.0.4",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/poppins": "^5.0.14",
+    "@mui/material": "^5.15.15",
+    "@tinymce/tinymce-react": "^5.0.1",
+    "axios": "^1.6.8",
+    "html-react-parser": "^3.0.16",
     "lodash.merge": "^4.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.0",
-    "react-icons": "^4.4.0",
-    "react-loader-spinner": "^5.1.5",
-    "react-redux": "^8.0.4",
-    "react-router-dom": "^6.4.2",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.12.0",
+    "react-loader-spinner": "^5.4.5",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.22.3",
     "react-web-share": "^2.0.2",
-    "redux": "^4.1.2",
-    "suneditor": "^2.44.3",
-    "suneditor-react": "^3.4.1"
+    "redux": "^4.2.1",
+    "suneditor": "^2.46.0",
+    "suneditor-react": "^3.6.1"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
-    "eslint": "^8.32.0",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "vite": "^4.0.0"
+    "vite": "^4.5.3"
   }
 }

client/src/App.jsx

@@ -3,10 +3,8 @@ import { Toaster } from "react-hot-toast";
 import { useRoutes } from "react-router-dom";
 import { StyledEngineProvider } from "@mui/material/styles";
 import { CssBaseline, ThemeProvider } from "@mui/material";
-// eslint-disable-next-line import/no-named-as-default, import/no-named-as-default-member
 import routes from "./routes";
 import { customTheme } from "./theme";
-import "./styles/bootstrap/bootstrap-utils.css";
 import "./styles/style.css";
 
 const App = () => {
@@ -22,7 +20,6 @@ const App = () => {
   const appTheme = customTheme({
     theme: "dark",
     direction: "ltr",
-    // responsiveFontSizes: settings.responsiveFontSizes
   }); // toaster options
 
   return (

client/src/common/Add.jsx

@@ -5,9 +5,7 @@ const Adds = () => {
   return (
     <React.Fragment>
       <Box
-        style={{
-          // height: "86vh",
-          overflowY: "auto",
+        sx={{
           wordWrap: "wrap",
         }}
       >
@@ -17,7 +15,7 @@ const Adds = () => {
         <img
           src="https://socialify.git.ci/shelcia/Socialgram/image?font=Rokkitt&forks=1&issues=1&language=1&owner=1&pattern=Floating%20Cogs&pulls=1&stargazers=1&theme=Dark"
           alt="Socialgram"
-          className="w-100 mb-4"
+          style={{ width: "100%", marginBottom: 2 }}
         />
         <Link
           href="https://github.com/shelcia/Socialgram"
@@ -37,7 +35,7 @@ const Adds = () => {
               href="https://github.com/shelcia/Socialgram/issues"
               target="_blank"
               rel="noopener noreferrer"
-              className="px-2"
+              sx={{ paddingX: 1 }}
             >
               Issues
             </Link>
@@ -57,7 +55,7 @@ const Adds = () => {
               href="https://github.com/shelcia/CRM/blob/master/CODE_OF_CONDUCT.md"
               target="_blank"
               rel="noopener noreferrer"
-              className="px-2"
+              sx={{ paddingX: 1 }}
             >
               Code of Conduct
             </Link>

client/src/common/Navbar.jsx

@@ -69,7 +69,9 @@ const SideNav = () => {
           </ListItemButton>
         </ListItem>
       </List>
-      <Alert severity="info">Please keep this safe and welcome!</Alert>
+      <Alert severity="info">
+        Please keep this safe and welcoming!. Content is moderated.
+      </Alert>
       <LogoutModal open={open} setOpen={setOpen} />
     </React.Fragment>
   );

client/src/common/SideNav.jsx

@@ -4,8 +4,13 @@ import { Rings } from "react-loader-spinner";
 const Loading = ({ children }) => {
   return (
     <div
-      className="w-100 h-100 d-flex"
-      style={{ alignItems: "center", justifyContent: "center" }}
+      style={{
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+      }}
     >
       <Rings type="TailSpin" color="#7F00FF" height={150} width={150} />
       {children}