Chap04 -> Creating a reusable styled component with Emotion

QandA/frontend/src/Header.tsx

@@ -1,6 +1,9 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
+
 import React from 'react';
 import { UserIcon } from './Icons';
-import style from './Header.module.css';
 
 export const Header = () => {
   const handleSearchInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -8,16 +11,78 @@ export const Header = () => {
   };
 
   return (
-    <div className={style.container}>
-      <a href="./">Q & A</a>
+    <div
+      css={css`
+        position: fixed;
+        box-sizing: border-box;
+        top: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 20px;
+        background-color: #fff;
+        border-bottom: 1px solid ${gray5};
+        box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
+      `}
+    >
+      <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/HomePage.tsx

@@ -1,8 +1,12 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { PageTitle } from './PageTitle';
 import { Page } from './Page';
 import { QuestionList } from './QuestionList';
 import { getUnansweredQuestions, QuestionData } from './QuestionsData';
+import { PrimaryButton } from './Styles';
 
 export const HomePage = () => {
   const [questions, setQuestions] = React.useState<QuestionData[]>([]);
@@ -23,9 +27,17 @@ export const HomePage = () => {
 
   return (
     <Page>
-      <div>
+      <div
+        css={css`
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        `}
+      >
         <PageTitle>Unanswered Questions</PageTitle>
-        <button onClick={handleAskQuestionClick}>Ask a question</button>
+        <PrimaryButton onClick={handleAskQuestionClick}>
+          Ask a question
+        </PrimaryButton>
       </div>
       {questionsLoading ? (
         <div>Loading...</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;
+    `}
+  />
+);

QandA/frontend/src/Page.tsx

@@ -1,3 +1,6 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { PageTitle } from './PageTitle';
 
@@ -7,7 +10,13 @@ interface Props {
 }
 
 export const Page = ({ title, children }: Props) => (
-  <div>
+  <div
+    css={css`
+      margin: 50px auto 20px auto;
+      padding: 30px 20px;
+      max-width: 600px;
+    `}
+  >
     {title && <PageTitle>{title}</PageTitle>}
     {children}
     {/* Component nested within Page component will be rendere here */}

QandA/frontend/src/PageTitle.tsx

@@ -1,5 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 interface Props {
   children: React.ReactNode;
 }
-export const PageTitle = ({ children }: Props) => <h2>{children}</h2>;
+export const PageTitle = ({ children }: Props) => (
+  <h2
+    css={css`
+      font-size: 15px;
+      font-weight: bold;
+      margin: 10px 0px 5px;
+      text-align: center;
+      text-transform: uppercase;
+    `}
+  >
+    {children}
+  </h2>
+);

QandA/frontend/src/Styles.ts

@@ -1,3 +1,5 @@
+import styled from '@emotion/styled';
+
 export const gray1 = '#383737';
 export const gray2 = '#5c5a5a';
 export const gray3 = '#857c81';
@@ -10,3 +12,24 @@ export const accent1 = '#dbb365';
 export const accent2 = '#efd197';
 export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
 export const fontSize = '16px';
+export const PrimaryButton = styled.button`
+  background-color: ${primary2};
+  border-color: ${primary2};
+  border-style: solid;
+  border-radius: 5px;
+  font-family: ${fontFamily};
+  font-family: ${fontSize};
+  padding: 5px 10px;
+  color: white;
+  cursor: pointer;
+  :hover {
+    background-color: ${primary1};
+  }
+  :focus {
+    outline-color: ${primary2};
+  }
+  :disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;