Chap04 -> Completing the home page styling -> Styling the QuestionList component

QandA/frontend/src/QuestionList.tsx

@@ -1,15 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { Question } from './Question';
 import { QuestionData } from './QuestionsData';
+import { accent2, gray5 } from './Styles';
 
 interface Props {
   data: QuestionData[];
 }
 
 export const QuestionList = ({ data }: Props) => (
-  <ul>
+  <ul
+    css={css`
+      list-style: none;
+      margin: 10px 0 0 0;
+      padding: 0px 20px;
+      background-color: #fff;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border-top: 3px solid ${accent2};
+      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
+    `}
+  >
     {data.map((question) => (
-      <li key={question.questionId}>
+      <li
+        key={question.questionId}
+        css={css`
+          border-top: 1px solid ${gray5};
+          :first-of-type {
+            border-top: none;
+          }
+        `}
+      >
         <Question data={question} />
       </li>
     ))}