From 3f5f086e44fa6494c62d6737750b9ba26b914172 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Mon, 28 Mar 2022 20:37:00 +1100
Subject: [PATCH] Chap04 -> Styling pseudo-classes and nested elements with
 Emotion

---
 QandA/frontend/src/Header.tsx | 54 +++++++++++++++++++++++++++++++++--
 QandA/frontend/src/Icons.tsx  | 14 ++++++++-
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/QandA/frontend/src/Header.tsx b/QandA/frontend/src/Header.tsx
index 809917a..3fa1292 100644
--- a/QandA/frontend/src/Header.tsx
+++ b/QandA/frontend/src/Header.tsx
@@ -26,15 +26,63 @@ export const Header = () => {
         box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
       `}
     >
-      <a href="./">Q & A</a>
+      <a
+        href="./"
+        css={css`
+          font-size: 24px;
+          font-weight: bold;
+          color: ${gray1};
+          text-decoration: none;
+        `}
+      >
+        Q & A
+      </a>
       <input
         type="text"
         placeholder="Search ..."
         onChange={handleSearchInputChange}
+        css={css`
+          box-sizing: border-box;
+          font-family: ${fontFamily};
+          font-size: ${fontSize};
+          padding: 8px 10px;
+          border: 1px solid ${gray5};
+          border-radius: 3px;
+          color: ${gray2};
+          background-color: white;
+          width: 200px;
+          height: 30px;
+          :focus {
+            outline-color: ${gray5};
+          }
+        `}
       />
-      <a href="./signin">
+      <a
+        href="./signin"
+        css={css`
+          font-family: ${fontFamily};
+          font-size: ${fontSize};
+          padding: 5px 10px;
+          background-color: transparent;
+          color: ${gray2};
+          text-decoration: none;
+          cursor: pointer;
+          :focus {
+            outline-color: ${gray5};
+          }
+          span {
+            margin-left: 7px;
+          }
+        `}
+      >
         <UserIcon />
-        <span>Sign In</span>
+        <span
+          css={css`
+            margin-left: 7px;
+          `}
+        >
+          Sign In
+        </span>
       </a>
     </div>
   );
diff --git a/QandA/frontend/src/Icons.tsx b/QandA/frontend/src/Icons.tsx
index 6c3fd80..12ed565 100644
--- a/QandA/frontend/src/Icons.tsx
+++ b/QandA/frontend/src/Icons.tsx
@@ -1,3 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import user from './user.svg';
-export const UserIcon = () => <img src={user} alt="User" width="12px" />;
+export const UserIcon = () => (
+  <img
+    src={user}
+    alt="User"
+    css={css`
+      width: 12px;
+      opacity: 0.6;
+    `}
+  />
+);