style(client): introduce css module

Author: Mathieuka

client/src/App.css renamed to client/src/App.module.css

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
-import './App.css';
+import styles from './App.module.css';
 
 function App() {
   const [count, setCount] = useState(0);
@@ -10,22 +10,22 @@ function App() {
     <>
       <div>
         <a href='https://vite.dev' target='_blank'>
-          <img src={viteLogo} className='logo' alt='Vite logo' />
+          <img src={viteLogo} className={styles.logo} alt='Vite logo' />
         </a>
         <a href='https://react.dev' target='_blank'>
-          <img src={reactLogo} className='logo react' alt='React logo' />
+          <img src={reactLogo} className={styles.logo} alt='React logo' />
         </a>
       </div>
       <h1>Vite + React</h1>
-      <div className='card'>
+      <div className={styles.card}>
         <button onClick={() => setCount((count) => count + 1)}>
           count is {count}
         </button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
-      <p className='read-the-docs'>
+      <p className={styles.readTheDocs}>
         Click on the Vite and React logos to learn more
       </p>
     </>

client/src/App.tsx

@@ -1,3 +1,10 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;