1 files changed, 41 insertions, 35 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 56ae6a6..b3af85f 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,9 +1,3 @@
-#header {
-    display: flex;
-    flex-direction: column;
-    gap: 10px
-}
-
 .needEntry {
     background-color: var(--tertiary-color);
     display: flex;
@@ -17,33 +11,6 @@
     gap: 15px
 }
 
-select {
-    font-size: 14pt;
-    padding: 5px;
-}
-
-#searchArea {
-    display: flex;
-
-    form {
-        display: flex;
-        width: 100%;
-        gap: 10px;
-    }
-
-    input[type=text] {
-        display: flex;
-        width: 100%;
-    }
-}
-
-#sortArea {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-}
-
 .needName {
     font-weight: bold;
 }
@@ -53,18 +20,49 @@ select {
     font-size: 10pt;
 }
 
+.need-image {
+    transition: all 0.15s ease-in-out;
+    height: 130px;
+    width: 200px;
+    margin: -10px 0 0 -10px;
+    object-fit: cover;
+    border-radius: 5px;
+    mask-image: linear-gradient(to right, rgb(255,255,255) 0, rgb(255,255,255,.1) 60%, rgb(255,255,255,0) 100%);
+}
+
+/*.clickable:hover {*/
+/*    .need-image {*/
+/*        mask-image: none;*/
+/*        width: 210px*/
+/*    }*/
+/*    .left {*/
+/*        width: 32.5%;*/
+/*    }*/
+/*    .prog {*/
+/*        width: 72.5%;*/
+/*    }*/
+/*}*/
+
 .split {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-
 
     .left {
+        width: 15%;
+        transition: all 0.2s ease-in-out;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .middle {
+        width: 42.5%;
         display: flex;
+        align-items: start;
         flex-direction: column;
     }
 
     .right {
+        width: 42.5%;
         display: flex;
         flex-direction: column;
         align-items: end;
@@ -80,8 +78,12 @@ select {
 }
 
 .prog {
+    transition: all 0.2s ease-in-out;
+    width: 85%;
     display: flex;
     flex-direction: column;
+    align-self: end;
+    margin-top: -5.25%;
 }
 
 .clickable {
@@ -105,6 +107,10 @@ select {
     gap: 5px;
 }
 
+.actionArea:empty {
+    padding: 0;
+}
+
 #page-selector {
     display: flex;
     align-items: center;