Merge branch 'list-and-cupboard-component-refactor' into need-sorting

1 files changed, 54 insertions, 8 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 bbc3f2c..2eb6a8d 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,70 @@
 :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%;
+        float: left;
+        transition: all 0.3s ease;
+        font-weight: bold;
+        display: flex;
+        border: none;
+        border-radius: 5px;
+    }
+
+    > section {
+        width: 12%;
+    }
+}
 
+section button{
+    margin: 4%;
 }
 
-#search-form {
+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;
-    padding: 10px 20px 20px 20px;
     border: 2px solid #000;
-    border-radius: 5px;  
-    visibility: visible;
+    border-radius: 5px;
  }
\ No newline at end of file