Some more refined styling

components/FolderTree.js

@@ -7,7 +7,15 @@ import { useRouter } from 'next/router'
 
 export default function FolderTree(props) {
     const renderTree = (nodes) => (
-        <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
+        <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}
+                  sx={{'& .MuiTreeItem-label': {
+                          fontSize: '1rem',
+                          paddingLeft: '6px',
+                          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,',
+                          lineHeight: 2.0
+                      },
+                  }}
+        >
             {Array.isArray(nodes.children)
                 ? nodes.children.map((node) => renderTree(node))
                 : null}

styles/style.css

@@ -110,7 +110,7 @@ a:hover {
     flex-direction: column;
 }
 :root {
-    --default-font: 'Inter', sans-serif;
+    --default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
 }
 
 .theme-light {
@@ -194,6 +194,9 @@ a:hover {
 footer {
     margin-top: 2em;
     text-align: center;
+    background-color: rgb(231, 242, 250);
+    border-radius: 8px;
+    padding: 4px;
 }
 
 footer ul li{