Chap04 -> Styling pseudo-classes and nested elements with Emotion

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>
   );

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;
+    `}
+  />
+);