1 files changed, 60 insertions, 66 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 05354fc..1936b38 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,91 +1,85 @@
-:host {
-    --list-background-color: lightgray;
-    list-style-type: none;
-    border: 2px solid #000;
-    display: block;
-    border-radius: 5px;
-
+#header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-div {
-    border: 2px solid #000;
+.needEntry {
+    background-color: #3a3a3a;
+    display: flex;
+    flex-direction: column;
     border-radius: 5px;
-    padding: 5px;
-    margin: 5px;
+    padding: 10px;
+}
+
+#needList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-ul {
-    list-style-type: none;
-    padding-inline-start: 0px;
+select {
+    font-size: 14pt;
+    padding: 5px;
 }
 
-li {
-    background-color: var(--list-background-color);
+#searchArea {
     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;
-            }
-        }
+
+    form {
+        display: flex;
+        width: 100%;
+        gap: 10px;
     }
 
-    > section {
-        width: 12%;
+    input[type=text] {
+        display: flex;
+        width: 100%;
     }
 }
 
-section button{
-    margin: 4%;
+#sortArea {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
 }
 
-li > button span {
-    font-style: italic;
-    font-weight: normal;
+.needName {
+    font-weight: bold;
 }
 
-li > button:hover p {
-    text-decoration: underline;
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
 }
 
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
-.icon {
-    width: 18px;
-    margin: 3px -3px -1px -3px;
-}
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
 
-#search-container {
-    background-color: #d9d9d9;
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
 }
 
-#search-form {
-    background-color: light-dark(#d9d9d9, #1b1b1b);
-    padding: 10px 20px 20px 20px;
-    border: 2px solid #000;
-    border-radius: 5px;
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
     border-radius: 5px;
-    visibility: visible;
+}
 
-    .wide-input {
-        width: 60%;
-    }
- }
+.prog {
+    display: flex;
+    flex-direction: column;
+}