Merged PR 6: Add icon of todo list and redesign it.

Related work items: #1, #3

1 files changed, 7 insertions, 21 deletions

diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
index 89a0f0ce..754b786e 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
@@ -5,34 +5,20 @@
 .item-box {
   display: flex;
   width: 100%;
-  padding: 5px;
   box-sizing: border-box;
 }
 
 .first-item-box {
   justify-content: space-between;
+  padding: 0 0 5px 5px;
 }
 
-.item-id {
-  display: inline-block;
-  text-align: center;
-  border-radius: 0.2rem;
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-.item-id-open {
-  background: red;
-}
-
-.item-id-closed {
-  background: green;
+.non-first-item-box {
+  padding: 5px;
 }
 
-.item-title {
-  margin-left: 5px;
-  color: black;
-  text-decoration: none;
+.space {
+  flex: 1 4 20px;
 }
 
 .sample-box {
@@ -40,12 +26,12 @@
   align-self: flex-start;
 }
 
-.sample-container {
+.sample-item {
   display: flex;
   align-items: center;
 }
 
-.item-id-sample {
+.sample-color-block {
   border-radius: 0.2em;
   width: 1em;
   height: 1em;