Tweak fonts and CSS

package.json

@@ -3,13 +3,9 @@
   "version": "0.46.0",
   "description": "A simple brainstorming app built using Create React App plus a Fluid data model",
   "homepage": "https://fluidframework.com",
-  "repository": "microsoft/FluidExamples",
+  "repository": "danwahlin/LearnTogether-Brainstorm-App",
   "license": "MIT",
   "author": "Microsoft and contributors",
-  "sideEffects": false,
-  "main": "dist/index.js",
-  "module": "lib/index.js",
-  "types": "dist/index.d.ts",
   "scripts": {
     "build": "react-scripts build",
     "eject": "react-scripts eject",

src/view/App.css

@@ -71,29 +71,39 @@ header {
   margin-right: 15px;
 }
 
-.mb-5 {
-  margin-bottom: 5px;
+.ml-10 {
+  margin-left: 10px;
+}
+
+.pb-5 {
+  padding-bottom: 5px;
 }
 
 .selected-items {
+  margin: 0 auto;
+  max-width: 960px;
   background-color: #efefef;
 }
 
 .selected-items h2 {
-  height: 15px;
-  background-color: #ccc;
-  margin-bottom: 0px;
+  height: 35px;
+  background-color: #919191;
 }
 
 .selected-items h2 div {
   margin-left: 10px;
+  color: white;
+}
+
+.heading {
+  font-size: 20px;
+  margin-bottom: 2px;
 }
 
 .items-list ul {
   list-style-type: none;
   padding: 0; 
   margin: 5px 0px 0px 10px;
-  font-size: 12px;
   padding-bottom: 2px;
 }
 
@@ -101,18 +111,23 @@ header {
   margin-bottom: 5px;
 }
 
-.icon-wrapper {
-  position: relative;
-  text-align: center;
-  height: 20px;
-  margin-right: 5px;
-}
-
-.circle-icon {
+.selecteditem {
   font-size: 18px;
 }
 
+.icon-wrapper {
+  position: relative;
+  text-align: center;
+  height: 30px;
+  margin-right: 8px;
+}
+
+.circle-icon {
+  font-size: 30px;
+}
+
 .circle-icon-overlay {
+  font-size: 18px;
   position: absolute;
   top: 50%;
   left: 50%;

src/view/ItemsList.tsx

@@ -29,8 +29,8 @@ export function ItemsList(props: ItemsListProps) {
 
                 <div className="selected-items">
                     <h2 className="grid-container">
-                        <div className="left">Selected Items</div>
-                        <div className="right end mr-15">Votes</div>
+                        <div className="left heading">Selected Items</div>
+                        <div className="right end mr-15 heading">Votes</div>
                     </h2>
                     {!!notes.length &&
                     <ul>
@@ -39,7 +39,7 @@ export function ItemsList(props: ItemsListProps) {
                             return (
                                 <li key={i}>
                                     <div className="grid-container">
-                                        <div className="left">{note.text}</div>
+                                        <div className="left selecteditem">{note.text}</div>
                                         <div className="right end mr-15">
                                             <div className="icon-wrapper">
                                                 <CircleFillIcon className="circle-icon" 
@@ -53,6 +53,9 @@ export function ItemsList(props: ItemsListProps) {
                         })}
                     </ul>
                     }
+                    {notes.length == 0 &&
+                        <div className="selecteditem ml-10 pb-5">No notes selected</div>
+                    }
                 </div>
         </div>
     );

src/view/index.css

@@ -1,3 +1,7 @@
+html {
+  font-size: 16px;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",