frontend dev

Frontend/admin/src/components/Loader.jsx

@@ -11,8 +11,10 @@ export default function Loader({ openState, message }) {
         open={openState}
       >
         <div style={{ textAlign: "center" }}>
-          <CircularProgress color="inherit" />
-          <Typography variant="h6">{message}</Typography>
+          <CircularProgress color="inherit" sx={{ fontWeight: "bold" }} />
+          <Typography variant="h5" sx={{ fontWeight: "bold" }}>
+            {message}
+          </Typography>
         </div>
       </Backdrop>
     </div>

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

@@ -3,6 +3,7 @@
   width: 79.5%;
   margin-left: auto;
   margin-right: 0;
+  overflow: auto;
   /* background-color: yellowgreen; */
 }
 .actor-marketing-title {
@@ -14,7 +15,7 @@
 .actor-marketing-input-container {
   padding-top: 3%;
 }
-.actor-marketing-button-container{
+.actor-marketing-button-container {
   display: flex;
   justify-content: center;
 }
\ No newline at end of file

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

@@ -13,6 +13,7 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
 
 export default function ActorMarketingAnalysis() {
   const [loaderState, setLoaderState] = useState(false);
+  const [loaderMessage, setLoaderMessage] = useState(false);
   const theme = createTheme({
     palette: {
       primary: {
@@ -23,10 +24,11 @@ export default function ActorMarketingAnalysis() {
 
   const submitHandler = () => {
     setLoaderState(true);
+    setLoaderMessage("Hi");
   };
   return (
     <div className="actor-marketing-container">
-      <Loader openState={loaderState} message={""} />
+      <Loader openState={loaderState} message={loaderMessage} />
       <div className="actor-marketing-title">
         Actor & Film Marketing Analysis
       </div>
@@ -97,6 +99,9 @@ export default function ActorMarketingAnalysis() {
           </center>
         </ThemeProvider>
       </div>
+      <div>
+        <h1>sdsdasdsadasdasda</h1>
+      </div>
     </div>
   );
 }