From bc270e9ee8aaba9e38a81f29258610ca61644838 Mon Sep 17 00:00:00 2001
From: Clemens Solar <git@clemens.solar>
Date: Sat, 6 Jan 2024 20:47:22 +0100
Subject: [PATCH] refactor: move Home route component to components

---
 src/{routes => components}/Home.tsx | 16 ++++++++--------
 src/router.tsx                      |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)
 rename src/{routes => components}/Home.tsx (87%)

diff --git a/src/routes/Home.tsx b/src/components/Home.tsx
similarity index 87%
rename from src/routes/Home.tsx
rename to src/components/Home.tsx
index 09d0386..0cca155 100644
--- a/src/routes/Home.tsx
+++ b/src/components/Home.tsx
@@ -12,10 +12,10 @@ import Typography from '@mui/material/Typography';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import FileDrop from '../components/FileDrop';
-import PermanentDrawer from '../components/PermanentDrawer';
 import config from '../etc/config.json';
 import examples from '../etc/examples.json';
+import FileDrop from './FileDrop';
+import PermanentDrawer from './PermanentDrawer';
 
 export default function HomeRoute() {
   const title = config.title;
@@ -34,10 +34,10 @@ export default function HomeRoute() {
       <Box component="div" sx={{ p: 1, height: '100%' }}>
         <Alert severity="info" sx={{ mb: 3 }}>
           This web app helps to add/change colors of 3d models. Currently it
-          only supports 3MF files and can only change the color of whole meshes.
-          Files loaded from your computer will not be sent to any server. You
-          can either upload a file from your computer or select one of the
-          examples below.
+          only supports 3MF files and can change the color of whole meshes or
+          single faces. Files loaded from your computer will not be sent to any
+          server. You can either upload a file from your computer or select one
+          of the examples below.
         </Alert>
 
         <Stack
@@ -48,7 +48,7 @@ export default function HomeRoute() {
         >
           <FileDrop
             onDrop={(files) => handleFileChange(files[0])}
-            sx={{ mt: 2, width: '100%' }}
+            sx={{ mt: 2, width: '100%', mb: 2 }}
           >
             <Grid
               container
@@ -56,7 +56,7 @@ export default function HomeRoute() {
               direction="column"
               alignItems="center"
               justifyContent="center"
-              sx={{ minHeight: '70vh' }}
+              sx={{ minHeight: '50vh' }}
             >
               <Grid item xs={3}>
                 <Box component="div" sx={{ textAlign: 'center' }}>
diff --git a/src/router.tsx b/src/router.tsx
index f42118c..a53c38e 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { createHashRouter } from 'react-router-dom';
 
 import Editor from './components/Editor';
-import HomeRoute from './routes/Home';
+import Home from './components/Home';
 
 const router = createHashRouter([
   {
     path: '/',
-    element: <HomeRoute />,
+    element: <Home />,
   },
   {
     path: '/editor',