update css, mobile ui

front/.gitignore

@@ -1,2 +1,3 @@
-node_modules/*
+node_modules/
 package-lock.json
+dist/

front/src/components/AppBar/MainAppBar.tsx

@@ -46,12 +46,25 @@ const MainAppBar: FC<HeaderProps> = ({ onMobile, window }) => {
 
   const navigate = useNavigate()
 
+
+  const style_modal = {
+      position: "absolute" as "absolute",
+      top: !isSxUp ? "50%" : "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: !isSxUp ? "97%" : "auto",
+      color: "inherit",
+      bgcolor: "background.paper",
+      p: !isSxUp ? 4 : 4,
+      borderRadius: "35px",
+    }
+
   return (
     <>
       <AppBar position="sticky" elevation={trigger ? 0 : 0}>
         <Toolbar>
           <Grid container spacing={1} alignItems="center">
-          <Grid item sx={{ display: "flex", alignItems: "center", alignContent:"center"}} onClick={(e) => navigate('/Home')}>
+          <Grid item sx={{ display: "flex", alignItems: "center", alignContent:"center", cursor:"pointer"}} onClick={(e) => navigate('/Home')}>
             <Home sx={{pr: 1.5, fontSize:30}}/>
               <Typography
                 color="inherit"
@@ -182,16 +195,7 @@ const MainAppBar: FC<HeaderProps> = ({ onMobile, window }) => {
   );
 };
 
-const style_modal = {
-    position: "absolute" as "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "auto",
-    color: "inherit",
-    bgcolor: "background.paper",
-    p: 4,
-    borderRadius: "10px",
-  }
+
+
   
 export default MainAppBar;

front/src/pages/Home/Home.tsx

@@ -39,7 +39,7 @@ const Home = () => {
           }}
         >
           <Stack sx={{ height: '100%', borderRadius: '12px', gap: "30px", minWidth: "20vw", maxWidth:"300px"}}>
-          <Card variant="outlined" onClick={() => navigate("/Inference")}>
+          <Card variant="outlined" sx={{cursor:"pointer"}} onClick={() => navigate("/Inference")}>
             <Box>
               <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", userSelect: "none", gap:"30px"}}>
               <Box sx={{ display: "flex", flexDirection:"column" }}>
@@ -52,7 +52,7 @@ const Home = () => {
           </Card>
           <Box></Box>
           <Divider>Or</Divider>
-          <Card variant="outlined"  onClick={() => handleClick()}>
+          <Card variant="outlined" sx={{cursor:"pointer"}} onClick={() => handleClick()}>
             <Box sx={{ display: "inherit"}}>
               <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", gap:"30px", userSelect: "none"}}>
               <Box sx={{ display: "flex", flexDirection:"column" }}>

front/src/pages/Inference/Results/Results.tsx

@@ -9,6 +9,8 @@ import {
   LinearProgress,
   Stack,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import MainContainer from "../../../components/Container/MainContainer";
 import {
@@ -29,6 +31,9 @@ import ReactAudioPlayer from "react-audio-player";
 
 const Results = () => {
   const navigate = useNavigate();
+  const theme = useTheme();
+
+  const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));
 
   const handleRetry = () => {
     // Implement retry logic here
@@ -130,22 +135,25 @@ const Results = () => {
               Download Preset
             </Typography>
           </Fab>
-          <Divider sx={{ width: "5vw", py: 2 }}>Or</Divider>
-          <Fab
-            color="surface"
-            sx={{ mt: 5, height: "70px" }}
-            variant="extended"
-            component={Link}
-            to="/Inference"
-          >
-            <RestartAlt />
-            <Typography
-              color="inherit"
-              sx={{ mr: 1, fontSize: 16, fontWeight: 500, mt: 0.3, ml: 2 }}
+          {isSxUp ?
+          
+          <><Divider sx={{ width: "5vw", py: 2 }}>Or</Divider><Fab
+              color="surface"
+              sx={{ mt: 5, height: "70px" }}
+              variant="extended"
+              component={Link}
+              to="/Inference"
             >
-              Retry
-            </Typography>
-          </Fab>
+              <RestartAlt />
+              <Typography
+                color="inherit"
+                sx={{ mr: 1, fontSize: 16, fontWeight: 500, mt: 0.3, ml: 2 }}
+              >
+                Retry
+              </Typography>
+            </Fab></> :
+            
+              <Box></Box>}
         </Stack>
       </Box>
     </MainContainer>

front/src/requests/upload.tsx

@@ -215,8 +215,8 @@ const AudioUploader = ({ ...props }) => {
             >
               <Box sx={{ mr: "1" }}>
                 <Button
-                  variant="outlined"
-                  size="small"
+                  variant="text"
+                  sx={{fontSize:"10px", marginTop:-2, marginRight:-1.5}}
                   onClick={() => {
                     setNextCard(false);
                     setIsVisible(false);