Merge branch 'list-and-cupboard-component-refactor' into css

# Conflicts:
#	ufund-api/data/cupboard.json
#	ufund-ui/src/app/components/cupboard/cupboard.component.css
#	ufund-ui/src/app/components/need-list/need-list.component.css
#	ufund-ui/src/app/components/need-page/need-page.component.html

1 files changed, 67 insertions, 3 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index fa3ed4f..5e07856 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,24 +1,88 @@
 :host {
-    list-style-type:circle;
+    --list-background-color: lightgray;
+    list-style-type: none;
     border: 2px solid #000;
     display: block;
-    width: 30%;
     border-radius: 5px;
 
 }
 
-li, div {
+div {
     border: 2px solid #000;
     border-radius: 5px;
     padding: 5px;
     margin: 5px;
+}
+
+ul {
+    list-style-type: none;
+    padding-inline-start: 0px;
+}
+
+li {
+    background-color: var(--list-background-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.3s ease;
+    font-weight: bold;
+    border: 2px solid #000;
+    border-radius: 5px;
+    margin: 5px;
+    > button {
+        background-color: transparent;
+        width: 88%;
+        transition: all 0.3s ease;
+        font-weight: bold;
+        border: none;
+        border-radius: 5px;
+        padding-left: 1.5%;
+        > section {
+            width: 100%;
+            flex: none;
+            display: inline-block;
+            background-color: magenta;
+            > progress {
+                width: 25%;
+                float: none;
+            }
+        }
+    }
+
+    > section {
+        width: 12%;
+    }
+}
 
+section button{
+    margin: 4%;
 }
 
+li > button span {
+    font-style: italic;
+    font-weight: normal;
+}
+
+li > button:hover p {
+    text-decoration: underline;
+}
+
+
+.icon {
+    width: 18px;
+    margin: 3px -3px -1px -3px;
+}
+
+#search-container {
+    background-color: #d9d9d9;
 #search-form {
     background-color: light-dark(#d9d9d9, #1b1b1b);
     padding: 10px 20px 20px 20px;
     border: 2px solid #000;
     border-radius: 5px;
+    .wide-input {
+        width: 60%;
+    }
+    border-radius: 5px;
     visibility: visible;
  }