Change job-offer cards to match design

Description

• The job offer cards on the job-offer/manage and job-offer/manage/all pages are now designed in a fashion similar to that in the wireframes

Note: The job-offer/manage/all will be changed to a list view in issue #74 (closed)

Related Issues

• Resolves #73 (closed)

Checklist

• I have added a changelog entry to reflect the significant changes I made.

src/main/resources/scss/offers.scss

@@ -84,6 +84,17 @@
     position: relative;
     text-decoration: none;
 
+    &::after {
+      background-color: var(--primary-blue);
+      bottom: 0;
+      content: '';
+      left: 0;
+      position: absolute;
+      transform-origin: left;
+      width: 2px;
+      height: 100%;
+    }
+
     &_container {
       display: grid;
       grid-gap: 2em;
@@ -94,27 +105,31 @@
       display: flex;
       flex-direction: column;
       gap: 0.5em;
-      padding: 2em 1em;
-      background-color: var(--primary-blue);
+      padding: 1em 1em;
     }
 
     &_title {
-      color: var(--primary-light);
-      font-size: var(--subtitle-size);
+      color: var(--primary-dark);
+      font-size: var(--subsubtitle-size);
     }
 
     &_subtitle {
-      color: var(--primary-light);
+      color: var(--primary-grey);
     }
 
     &_content {
-      padding-top: 1.5em;
+      padding: 0.5em 0;
+
+      &:last-child {
+        padding-bottom: 1.5em;
+      }
 
       &_header {
-        padding: 0 1em;
+        margin: 0 1em;
         display: flex;
         flex-direction: row !important;
         justify-content: space-between;
+        border-bottom: 2px solid var(--primary-grey);
       }
 
       &_text {
@@ -142,9 +157,9 @@
 }
 
 .offer {
-  padding: 0 1em;
-  margin: 1em 0;
-  width: 100%;
+  margin: 0 1em;
+  padding: 0.3em 0;
+  padding-inline: 0.5rem;
 
   &_info {
     display: flex;
@@ -152,31 +167,33 @@
     justify-content: space-between;
     gap: 0.5em;
     font-weight: lighter;
+    text-transform: capitalize;
+    border-bottom: 1px solid var(--primary-grey);
   }
 
   &_name {
     align-self: center;
+    font-size: var(--regular-size);
+    color: var(--primary-blue);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  &_name:hover {
+    filter: brightness(75%);
   }
 
   &_button {
-    padding: .5em 1em;
-    white-space: nowrap;
+    color: var(--primary-blue);
     border: none;
+    float: right;
+    background-color: transparent;
+    padding-left: 1em;
+    cursor: pointer;
     font-size: var(--regular-size);
-    transition: filter 500ms;
-
   }
 
   &_button:hover {
     filter: brightness(75%);
   }
-
-  &_applied {
-    background-color: var(--primary-blue);
-    color: var(--primary-light);
-    padding: .5em 1em;
-    white-space: nowrap;
-    border: none;
-    font-size: var(--regular-size);
-  }
 }
\ No newline at end of file