Redesign buttons (#35)

* style(): redesign "Go Back" button

* style(): use buttons instead of links
+ change go back redirections

Author: Mitix-EPI

package.json

@@ -38,7 +38,7 @@
     "material-ui-numeric-input": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.3.1",
+    "react-icons": "^4.9.0",
     "react-input-number": "^5.0.19",
     "react-numeric-input": "^2.2.3",
     "react-ranger": "^2.1.0",

src/Components/ActionsReactions/ActionsReactions.tsx

@@ -7,30 +7,17 @@ import CardContent from "@mui/material/CardContent";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import {
-  AiOutlineBug,
-  AiOutlinePlayCircle,
-  AiOutlineSound,
-  AiOutlineStop,
-  AiOutlineVideoCamera,
-} from "react-icons/ai";
-import { MdPanoramaHorizontal } from "react-icons/md";
-import {
-  IconButton,
-  InputLabel,
-  MenuItem,
-  Select,
-  SelectChangeEvent,
+  IconButton
 } from "@mui/material";
-import { BsTrash } from "react-icons/bs";
+import { BsTrash, BsArrowLeft, BsArrowRight } from "react-icons/bs";
+import { BsArrowReturnLeft } from "react-icons/bs"
 import { Link } from "react-router-dom";
 import {
   getActReactCouplesFormat,
-  actionReactionFormat,
   removeActReactAnswer,
 } from "../../Socket/interfaces";
 import {
   ActionType,
-  action_reaction,
   action_reaction_identified,
 } from "./WordDetection/WordDetection";
 import { toast } from "react-toastify";
@@ -247,13 +234,17 @@ export const ActionsReactions = () => {
 
           <div className="create_actions_button_pos">
             <Link className="m-2" to="/actions-reactions/actions">
-              Create Actions
+              <Button variant="outlined" startIcon={<BsArrowLeft />} color="warning">
+                Create Actions
+              </Button>
             </Link>
           </div>
 
           <div className="create_reactions_button_pos">
             <Link className="m-2" to="/actions-reactions/reactions">
-              Create Reactions
+              <Button variant="outlined" endIcon={<BsArrowRight />} color="warning">
+                Create Reactions
+              </Button>
             </Link>
           </div>
         </>

src/Components/ActionsReactions/AppLaunch/AppLaunch.tsx

@@ -2,8 +2,10 @@ import React, { Component, useEffect, useState } from "react";
 import { AddAppLaunch } from "../AddAppLaunch/AddAppLaunch";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
+import Button from "@mui/material/Button";
+
+import { BsArrowReturnLeft } from "react-icons/bs"
 
-import { Button } from "@mui/material";
 
 import useAxiosPrivate from "../../../hooks/useAxiosPrivate";
 
@@ -282,7 +284,11 @@ export const AppLaunch = (props: any) => {
         newEvent={newEvent}
         setnewEvent={setnewEvent}
       />
-        <Link style={{ "paddingTop": "20px" }} to="/actions-reactions/home">Go Back</Link>
+        <Link style={{ "paddingTop": "20px" }} to="/actions-reactions/actions">
+          <Button variant="outlined" startIcon={<BsArrowReturnLeft />} color="info">
+            Go Back
+          </Button>
+        </Link>
 
       </>
       )

src/Components/ActionsReactions/CreateActions/CreateActions.tsx

@@ -4,25 +4,44 @@ import {
 	Route,
 	Link
 } from "react-router-dom";
+import Button from "@mui/material/Button";
+import { BsArrowReturnLeft, BsFonts, BsKeyboard, BsRocketTakeoff } from "react-icons/bs"
 import './CreateActions.css';
 
+
 export const CreateActions = () => {
     return (
       <>
         {/* Display a heading */}
         <h1 className="m-2"> Select an action</h1>
 
         {/* Link to the "Word Detection" page */}
-        <Link className="m-6" to="/actions-reactions/word-detection">Word Detection</Link>
+        <Link className="m-6" to="/actions-reactions/word-detection">
+          <Button variant="contained" size="large" startIcon={<BsFonts />} color="warning">
+            Word Detection
+          </Button>
+        </Link>
 
         {/* Link to the "Key Pressed" page */}
-        <Link className="m-6" to="/actions-reactions/key-pressed">Key Pressed</Link>
+        <Link className="m-6" to="/actions-reactions/key-pressed">
+          <Button variant="contained" size="large" startIcon={<BsKeyboard />} color="warning">
+            Key Pressed
+          </Button>
+        </Link>
 
         {/* Link to the "App Launch" page */}
-        <Link className="m-6" to="/actions-reactions/app-launch">App Launch</Link>
+        <Link className="m-6" to="/actions-reactions/app-launch">
+          <Button variant="contained" size="large" startIcon={<BsRocketTakeoff />} color="warning">
+            App Launch
+          </Button>
+        </Link>
 
         {/* Link to go back to the home page */}
-        <Link className="go-back-link" to="/actions-reactions/home">Go Back</Link>
+        <Link className="go-back-link" to="/actions-reactions/home">
+          <Button variant="outlined" startIcon={<BsArrowReturnLeft />} color="info">
+            Go Back
+          </Button>
+        </Link>
       </>
     );
 }

src/Components/ActionsReactions/CreateReactions/CreateReactions.tsx

@@ -6,6 +6,7 @@ import CardActions from "@mui/material/CardActions";
 import CardContent from "@mui/material/CardContent";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
+import { BsArrowReturnLeft } from "react-icons/bs"
 import {
   AiFillVideoCamera,
   AiOutlineBug,
@@ -281,7 +282,9 @@ export const CreateReactions = () => {
       </div>
 
       <Link className="pt-20" to="/actions-reactions/home">
-        Go Back
+        <Button variant="outlined" startIcon={<BsArrowReturnLeft />} color="info">
+          Go Back
+        </Button>
       </Link>
 
       <Dialog open={open} onClose={handleCancel}>

src/Components/ActionsReactions/KeyPressed/KeyPressed.tsx

@@ -9,6 +9,8 @@ import {
 import { AddNewKeyPressed } from "../AddNewKeyPressed/AddNewKeyPressed";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
+import Button from "@mui/material/Button";
+import { BsArrowReturnLeft } from "react-icons/bs"
 const ipcRenderer = window.require("electron").ipcRenderer;
 
 export enum ActionType {
@@ -231,8 +233,10 @@ export const KeyPressed = (props: any) => {
             newEvent={newEvent}
             setnewEvent={setnewEvent}
           />
-          <Link style={{ paddingTop: "20px" }} to="/actions-reactions/home">
-            Go Back
+          <Link style={{ paddingTop: "20px" }} to="/actions-reactions/actions">
+            <Button variant="outlined" startIcon={<BsArrowReturnLeft />} color="info">
+              Go Back
+            </Button>
           </Link>
         </>
       )}

src/Components/ActionsReactions/WordDetection/WordDetection.tsx

@@ -1,7 +1,8 @@
 import React, { Component, useEffect, useState } from "react";
 import { AddNewWord } from "../AddNewWord/AddNewWord";
 import { Link } from "react-router-dom";
-
+import Button from "@mui/material/Button";
+import { BsArrowReturnLeft } from "react-icons/bs"
 import useAxiosPrivate from "../../../hooks/useAxiosPrivate";
 
 import BoxEvent from "../../BoxEvent/BoxEvent";
@@ -247,8 +248,10 @@ export const WordDetection = (props: any) => {
             newEvent={newEvent}
             setnewEvent={setnewEvent}
           />
-          <Link style={{ paddingTop: "20px" }} to="/actions-reactions/home">
-            Go Back
+          <Link style={{ paddingTop: "20px" }} to="/actions-reactions/actions">
+            <Button variant="outlined" startIcon={<BsArrowReturnLeft />} color="info">
+              Go Back
+            </Button>
           </Link>
         </>
       )}

src/Components/Unauthorized/Unauthorized.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import Button from "@mui/material/Button";
+import { BsArrowReturnLeft } from "react-icons/bs"
 
 const Unauthorized = () => {
   const navigate = useNavigate();
@@ -13,7 +15,9 @@ const Unauthorized = () => {
       <p>You do not have access to the requested page.</p>
       <p>Upgrade your subscription to access it.</p>
       <div className="flexGrow">
-        <button onClick={goBack}>Go Back</button>
+        <Button onClick={goBack} variant="outlined" startIcon={<BsArrowReturnLeft />} color="info">
+          Go Back
+        </Button>
       </div>
     </>
   );