Merge pull request #22 from RIT-SWEN-261-02/css

Merge css into main

1 files changed, 103 insertions, 17 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..5f2e5e1 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,110 @@
-:host {
-    list-style-type:circle;
-    border: 2px solid #000;
-    display: block;
-    width: 30%;
-    border-radius: 5px;
-    
+#header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px
 }
 
-li, div {
-    border: 2px solid #000;
+.needEntry {
+    background-color: #2e2e2e;
+    display: flex;
+    flex-direction: column;
     border-radius: 5px;
+}
+
+#needList {
+    display: flex;
+    flex-direction: column;
+    gap: 15px
+}
+
+select {
+    font-size: 14pt;
     padding: 5px;
-    margin: 5px;
+}
+
+#searchArea {
+    display: flex;
 
+    form {
+        display: flex;
+        width: 100%;
+        gap: 10px;
+    }
+
+    input[type=text] {
+        display: flex;
+        width: 100%;
+    }
 }
 
-#search-form {
-    background-color: #d9d9d9;
-    padding: 10px 20px 20px 20px;
-    border: 2px solid #000;
-    border-radius: 5px;  
-    visibility: visible;
- }
\ No newline at end of file
+#sortArea {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    align-items: center;
+}
+
+.needName {
+    font-weight: bold;
+}
+
+.needType {
+    text-transform: uppercase;
+    font-size: 10pt;
+}
+
+.split {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+
+    .left {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .right {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+}
+
+.urgent {
+    font-size: 11pt;
+    background-color: rgba(255, 165, 0, 0.27);
+    color: rgba(255, 165, 0, 1);
+    padding: 2px;
+    border-radius: 5px;
+}
+
+.prog {
+    display: flex;
+    flex-direction: column;
+}
+
+.clickable {
+    padding: 10px;
+    background-color: #3a3a3a;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.clickable:hover {
+    background-color: #444444;
+}
+
+.actionArea {
+    display: flex;
+    padding: 5px;
+    gap: 5px;
+}
+
+#page-selector {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    gap: 10px
+}