Integrate Telcoin global styles into Vite app

telcoinwiki-react/src/App.css → telcoinwiki-react/src/App.module.css

@@ -1,4 +1,4 @@
-#root {
+:global(#root) {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
@@ -11,10 +11,16 @@
   will-change: filter;
   transition: filter 300ms;
 }
+
+.react {}
+
+.spin {}
+
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
-.logo.react:hover {
+
+.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
@@ -28,7 +34,7 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
+  .spin {
     animation: logo-spin infinite 20s linear;
   }
 }
@@ -37,6 +43,6 @@
   padding: 2em;
 }
 
-.read-the-docs {
+.readTheDocs {
   color: #888;
 }

telcoinwiki-react/src/App.tsx

@@ -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,26 @@ function App() {
     <>
       <div>
         <a href="https://vite.dev" target="_blank" rel="noreferrer">
-          <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" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+          <img
+            src={reactLogo}
+            className={`${styles.logo} ${styles.react} ${styles.spin}`}
+            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>
     </>

telcoinwiki-react/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+import './styles/global.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(