Add basic styling for Board, List, Task component

src/features/Board/Board.js

@@ -11,8 +11,8 @@ export function Board() {
   const boardData = useSelector(selectBoardData);
 
   return (
-    <div>
+    <div className={styles.boardContainer}>
-      <div className={styles.boardName}>{boardData.name}</div>
+      <h1 className={styles.boardName}>{boardData.name}</h1>
       <div className={styles.listsContainer}>
         {boardData.lists.map(listData => (
           <TaskList key={listData.id} listData={listData} />

src/features/Board/Board.module.css

@@ -0,0 +1,13 @@
+.boardContainer {
+  margin: 16px;
+}
+
+.boardName {
+  text-align: center;
+  margin: 8px;
+}
+
+.listsContainer {
+  display: flex;
+  flex-direction: row;
+}

src/features/TaskCard/TaskCard.js

@@ -8,7 +8,7 @@ export function TaskCard({ cardData }) {
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.cardContainer}>
+    <div className={styles.cardContainer} tabIndex={1} contentEditable="true">
       {cardData.text}
     </div>
   );

src/features/TaskCard/TaskCard.module.css

@@ -0,0 +1,7 @@
+.cardContainer {
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
+  padding: 8px;
+  margin: 8px 0;
+}

src/features/TaskList/TaskList.js

@@ -12,8 +12,8 @@ export function TaskList({ listData }) {
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.listContainer}>
+    <div className={styles.listContainer} tabIndex={1}>
-      <div className={styles.listName}>{listData.name}</div>
+      <h3 className={styles.listName}>{listData.name}</h3>
       <div className={styles.cardsContainer}>
         {listData.cards.map(cardData => (
           <TaskCard key={cardData.id} cardData={cardData} />

src/features/TaskList/TaskList.module.css

@@ -0,0 +1,19 @@
+.listContainer {
+  flex: 0 0 250px;
+  margin: 0 8px;
+  padding: 0px 8px;
+  padding-bottom: 8px;
+  background-color: #ebecf0;
+  border-radius: 3px;
+}
+
+.listContainer:first-child {
+  margin-left: 8px;
+}
+.listContainer:last-child {
+  margin-right: 8px;
+}
+
+.listName {
+  padding-left: 4px;
+}