Reorder Layout params + make Settings page the same as the otheri n t…

…erms of layout

src/App.tsx

@@ -18,7 +18,7 @@ const App: React.FC<AppProps> = ({ signOut, user }) => {
   return (
     <ThemeProvider theme={theme}>
       <Router>
-        <Layout signOut={signOut} user={user}>
+        <Layout user={user} signOut={signOut}>
           <Routes>
             {routes.map((route, index) => (
               <Route key={index} path={route.path} element={route.element} />

src/components/Layout.tsx

@@ -18,7 +18,7 @@ const environmentOptions: environmentOptionType[] = [
   { value: 'localhost', label: 'Localhost' },
 ];
 
-const Layout: React.FC<{ children: React.ReactNode, signOut: ((data?: any) => void) | undefined, user: AuthUser | undefined }> = ({ children, signOut, user }) => {
+const Layout: React.FC<{ children: React.ReactNode, user: AuthUser | undefined, signOut: ((data?: any) => void) | undefined }> = ({ children, user, signOut }) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [environment, setEnvironment] = useState(environmentOptions[0].value);
   const isMenuOpen = Boolean(anchorEl);

src/pages/Settings.tsx

@@ -11,9 +11,10 @@ const Settings: React.FC = () => {
   }, []);
 
   return (
-    <div>
-      <Typography variant="h4">Settings</Typography>
-      <Typography paragraph>This is the settings page of the admin dashboard.</Typography>
+    <>
+      <Box mt={2} mb={4}>
+        <Typography variant="h4">Settings</Typography>
+      </Box>
       <Box
         display="flex"
         flexDirection="column"
@@ -27,7 +28,7 @@ const Settings: React.FC = () => {
           </Typography>
         </Box>
       </Box>
-    </div>
+    </>
   );
 };