From beedc2aef8be8585855c414beeb8abf477fcf5d5 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Sat, 26 Mar 2022 17:56:51 +1100
Subject: [PATCH] Chap04 -> Styling components with CSS modules

---
 QandA/frontend/src/{App.css => App.module.css}       | 0
 QandA/frontend/src/App.tsx                           | 4 ++--
 QandA/frontend/src/{Header.css => Header.module.css} | 0
 QandA/frontend/src/Header.tsx                        | 4 ++--
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename QandA/frontend/src/{App.css => App.module.css} (100%)
 rename QandA/frontend/src/{Header.css => Header.module.css} (100%)

diff --git a/QandA/frontend/src/App.css b/QandA/frontend/src/App.module.css
similarity index 100%
rename from QandA/frontend/src/App.css
rename to QandA/frontend/src/App.module.css
diff --git a/QandA/frontend/src/App.tsx b/QandA/frontend/src/App.tsx
index f601372..4b1e4ba 100644
--- a/QandA/frontend/src/App.tsx
+++ b/QandA/frontend/src/App.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Header } from './Header';
-import './App.css';
+import style from './App.module.css';
 import { HomePage } from './HomePage';
 
 function App() {
   return (
-    <div className="container">
+    <div className={style.container}>
       <Header />
       <HomePage />
     </div>
diff --git a/QandA/frontend/src/Header.css b/QandA/frontend/src/Header.module.css
similarity index 100%
rename from QandA/frontend/src/Header.css
rename to QandA/frontend/src/Header.module.css
diff --git a/QandA/frontend/src/Header.tsx b/QandA/frontend/src/Header.tsx
index 7db8761..b9a07c8 100644
--- a/QandA/frontend/src/Header.tsx
+++ b/QandA/frontend/src/Header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { UserIcon } from './Icons';
-import './Header.css';
+import style from './Header.module.css';
 
 export const Header = () => {
   const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -8,7 +8,7 @@ export const Header = () => {
   };
 
   return (
-    <div className="container">
+    <div className={style.container}>
       <a href="./">Q & A</a>
       <input
         type="text"