Cleanup lab2

lab2/src/components/App/App.css

@@ -1,31 +1,27 @@
-#root {
-    background: whitesmoke;
-}
-
 .App {
-    padding: 25px 15px 25px 15px;
-    border: 2px solid gray;
-    min-height: 250px;
+  padding: 25px 15px 25px 15px;
+  border: 2px solid gray;
+  min-height: 250px;
 }
 
 .App-header {
-    background-color: #222;
-    height: 150px;
-    padding: 20px;
-    color: white;
-    font-size: 42px;
-    text-align: center;
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+  font-size: 42px;
+  text-align: center;
 }
 
 .App-header-description {
-    font-size: 18px;
+  font-size: 18px;
 }
 
 @keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

lab2/src/components/BackgroundColorPicker/BackgroundColorPicker.js

@@ -1,40 +1,20 @@
 import React, { Component } from "react";
+import colors from "./colors";
 import "./BackgroundColorPicker.css";
 
-const BackgroundColorPicker = ({ onChange }) => {
-  const colors = [
-    {
-      hex: "lavender",
-      name: "lavender",
-    },
-    {
-      hex: "gold",
-      name: "gold",
-    },
-    {
-      hex: "#f48c42",
-      name: "🎃",
-    },
-    {
-      hex: "rebeccapurple",
-      name: "Beautiful purple",
-    },
-  ];
-
-  return (
-    <div className="BackgroundColorPicker">
-      <h5>Välj bakgrundsfärg</h5>
-      <select className="custom-select" onChange={onChange}>
-        {colors.map((color, index) => {
-          return (
-            <option key={index} value={color.hex}>
-              {color.name}
-            </option>
-          );
-        })}
-      </select>
-    </div>
-  );
-};
+const BackgroundColorPicker = ({ onChange }) => (
+  <div className="BackgroundColorPicker">
+    <h5>Välj bakgrundsfärg</h5>
+    <select className="custom-select" onChange={onChange}>
+      {colors.map((color) => {
+        return (
+          <option key={`color-${color.name}`} value={color.hex}>
+            {color.name}
+          </option>
+        );
+      })}
+    </select>
+  </div>
+);
 
 export default BackgroundColorPicker;

lab2/src/components/BackgroundColorPicker/colors.js

@@ -0,0 +1,20 @@
+const colors = [
+  {
+    hex: "lavender",
+    name: "lavender",
+  },
+  {
+    hex: "gold",
+    name: "gold",
+  },
+  {
+    hex: "#f48c42",
+    name: "🎃",
+  },
+  {
+    hex: "rebeccapurple",
+    name: "Beautiful purple",
+  },
+];
+
+export default colors;

lab2/src/components/List/List.js

@@ -24,12 +24,12 @@ const List = ({ items = [], title }) => {
       <h2 className="List-title">{title}</h2>
       <SearchBar value={searchTerm} onKeyPressed={onKeyPressed} />
       {items.length === 0 ? (
-        <div>Empty list...</div>
+        <div className="alert alert-warning">Empty list...</div>
       ) : (
         <ul className="list-group">
           {
             // TODO: Task 6. Map (see react-examples.md if stuck :D) over items and return <li>-tags.
-            // <li className="list-group-item">A list item</li>
+            // <li className="list-group-item" key={item.id}>*A list item*</li>
             console.log("ITEMS", items)
           }
         </ul>

lab2/src/index.css

@@ -1,5 +1,6 @@
 body {
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background: whitesmoke;
 }