forntend dev

Frontend/admin/src/components/Loader.jsx

+import React from "react";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+
+export default function Loader({ openState, message }) {
+  return (
+    <div>
+      <Backdrop
+        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={openState}
+      >
+        <div style={{ textAlign: "center" }}>
+          <CircularProgress color="inherit" />
+          <Typography variant="h6">{message}</Typography>
+        </div>
+      </Backdrop>
+    </div>
+  );
+}

Frontend/admin/src/css/actor-marketing-analysis.css

@@ -6,11 +6,15 @@
   /* background-color: yellowgreen; */
 }
 .actor-marketing-title {
-  padding-top: 1%;
+  padding-top: 3%;
   font-size: 23px;
   font-weight: 500;
   font-family: system-ui;
 }
 .actor-marketing-input-container {
   padding-top: 3%;
+}
+.actor-marketing-button-container{
+  display: flex;
+  justify-content: center;
 }
\ No newline at end of file

Frontend/admin/src/css/movie-analysis.css

@@ -4,7 +4,6 @@
   margin-left: auto;
   margin-right: 0;
 }
-
 .movie-page-container-title {
   font-size: 23px;
   font-weight: 500;

Frontend/admin/src/css/side-navigation.css

@@ -21,32 +21,31 @@
   align-items: center;
   margin-top: 50px;
   color: white;
-  font-weight:500;
+  font-weight: 500;
   font-size: 16px;
 }
 .active .side-nav-link-wrapper {
   background-color: white;
-color: #5143B8;
-position: relative;
+  color: #5143b8;
+  position: relative;
 }
 .active .side-nav-link-wrapper:before {
-  content:'';
+  content: "";
   position: absolute;
-  top:-30px;
-  right:0;
+  top: -30px;
+  right: 0;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   box-shadow: 15px 15px 0 rgb(255, 255, 255);
 }
 .active .side-nav-link-wrapper:after {
-  content:'';
+  content: "";
   position: absolute;
-  bottom:-30px;
-  right:0;
+  bottom: -30px;
+  right: 0;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   box-shadow: 15px -15px 0 rgb(255, 255, 255);
 }
-

Frontend/admin/src/css/top-navigation.css

@@ -2,6 +2,7 @@
   width: 100%;
   height: 12vh;
   display: flex;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
 .top-nav-logo-container {
   width: 18%;
@@ -18,7 +19,7 @@
   gap: 50px;
   padding-left: 50px;
 }
- 
+
 .top-nav-link-text {
   font-size: 16px;
   font-weight: 500;
@@ -47,31 +48,30 @@
   width: 30%;
   background-color: #5143b8;
   border-bottom-left-radius: 50px;
-   display:flex;
-   align-items:center;
-   justify-content:space-evenly
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
 }
-.top-nav-search-container-wrapper{
-    width: 280px;
-    height: 40px;
-    background-color: #46399E;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content:space-evenly;
-
+.top-nav-search-container-wrapper {
+  width: 280px;
+  height: 40px;
+  background-color: #46399e;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
 }
-.top-nav-search{
-    width: 200px;
-    height:30px;
-    border: none;
-    background-color: transparent;
-    outline: none;
-    color:white;
+.top-nav-search {
+  width: 200px;
+  height: 30px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  color: white;
 }
-::placeholder{
-  color:white 
+::placeholder {
+  color: white;
 }
-.profile-picture{
+.profile-picture {
   border-radius: 50%;
-}
\ No newline at end of file
+}

Frontend/admin/src/pages/actor-marketing-analysis.jsx

-import React from "react";
+import React, { useState } from "react";
 import "../css/actor-marketing-analysis.css";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
@@ -6,63 +6,96 @@ import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
+import { Button } from "@mui/material";
+import Loader from "../components/Loader";
+import SendIcon from "@mui/icons-material/Send";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 export default function ActorMarketingAnalysis() {
+  const [loaderState, setLoaderState] = useState(false);
+  const theme = createTheme({
+    palette: {
+      primary: {
+        main: "#5143b8",
+      },
+    },
+  });
+
+  const submitHandler = () => {
+    setLoaderState(true);
+  };
   return (
     <div className="actor-marketing-container">
+      <Loader openState={loaderState} message={""} />
       <div className="actor-marketing-title">
         Actor & Film Marketing Analysis
       </div>
       <div className="actor-marketing-input-container">
-        <Box
-          component="form"
-          sx={{
-            "& .MuiTextField-root": { m: 1, width: "31%" },
-          }}
-          noValidate
-          autoComplete="off"
-        >
-          <div>
-            <TextField label="Film Trail Name" color="secondary" required />
-            <TextField label="Film Director Name" color="secondary" required />
-            <TextField label="Film Director Email" color="secondary" required />
-          </div>
-        </Box>
-        <Box
-          component="form"
-          sx={{
-            "& .MuiTextField-root": { m: 1, width: "47.2%" },
-          }}
-          noValidate
-          autoComplete="off"
-        >
-          <div>
-            <FormControl sx={{ m: 1, width: "47.2%" }}>
-              <InputLabel color="secondary">Film Analysis Type</InputLabel>
-              <Select
-                color="secondary"
-                // value={age}
-                label="Film Analysis Type"
-                // onChange={handleChange}
-                required
+        <ThemeProvider theme={theme}>
+          <Box
+            component="form"
+            sx={{
+              "& .MuiTextField-root": { m: 1, width: "31%" },
+            }}
+            noValidate
+            autoComplete="off"
+          >
+            <div>
+              <TextField label="Film Trail Name" color="primary" required />
+              <TextField label="Film Director Name" color="primary" required />
+              <TextField label="Film Director Email" color="primary" required />
+            </div>
+          </Box>
+          <Box
+            component="form"
+            sx={{
+              "& .MuiTextField-root": { m: 1, width: "47.2%" },
+            }}
+            noValidate
+            autoComplete="off"
+          >
+            <div>
+              <FormControl sx={{ m: 1, width: "47.2%" }}>
+                <InputLabel color="primary">Film Analysis Type</InputLabel>
+                <Select
+                  color="primary"
+                  // value={age}
+                  label="Film Analysis Type"
+                  // onChange={handleChange}
+                  required
+                >
+                  <MenuItem value={"AAO"}>Actor Analysis Only</MenuItem>
+                  <MenuItem value={"FMAO"}>
+                    Film Marketing Analysis Only
+                  </MenuItem>
+                  <MenuItem value={"AFMA"}>
+                    Actor & Film Marketing Analysis
+                  </MenuItem>
+                </Select>
+              </FormControl>
+              <TextField
+                label="Film Director Name"
+                color="primary"
+                type="file"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+              />
+            </div>
+          </Box>
+          <center>
+            <Box sx={{ "& > button": { m: 1, width: "50%" } }}>
+              <Button
+                onClick={submitHandler}
+                variant="contained"
+                color="primary"
+                endIcon={<SendIcon />}
               >
-                <MenuItem value={"AAO"}>Actor Analysis Only</MenuItem>
-                <MenuItem value={"FMAO"}>Film Marketing Analysis Only</MenuItem>
-                <MenuItem value={"AFMA"}>
-                  Actor & Film Marketing Analysis
-                </MenuItem>
-              </Select>
-            </FormControl>
-            <TextField
-              label="Film Director Name"
-              color="secondary"
-              type="file"
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
-          </div>
-        </Box>
+                Send
+              </Button>
+            </Box>
+          </center>
+        </ThemeProvider>
       </div>
     </div>
   );