Changeset 4d97b63 for jobvista-frontend/src/views/applications/Applications.css

Timestamp:

08/30/24 15:44:27 (4 weeks ago)

Author:

223021 <daniel.ilievski.2@…>

Branches:

main

Parents:

0f0add0

Message:

Implemented Google login, additional file uploads, response messages and email notifications

File:

• jobvista-frontend/src/views/applications/Applications.css (modified) (7 diffs)

jobvista-frontend/src/views/applications/Applications.css

@@ -17 +17 @@
 }
 
-/*.application-title span {*/
-/*    font-weight: bold;*/
-/*    */
-/*}*/
+.response-message {
+    background-color: floralwhite;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+
+
+
+.application-card-wrapper {
+    margin: 15px 0;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.4s ease-in-out;
+    gap: 3px;
+}
+
+.application-card.changed {
+    background-color: aliceblue;
+}
+
+.application-card-wrapper .expand-section {
+    max-height: 0;
+    opacity: 0;
+    transition: 0.5s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    margin: 0 !important;
+}
+
+.application-card-wrapper.expanded .expand-section {
+    max-height: 200px;
+    opacity: 1;
+    transform: translateY(0);
+    margin-top: 10px;
+  /*  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;*/
+}
+
+.expand-section textarea {
+    width: 100%;
+    padding: 10px;
+    border-radius: 8px;
+    border: 1px solid #ccc;
+}
+
 
 .application-card {
@@ -29 +72 @@
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    height: auto;
+    /*height: auto;*/
     padding: 20px 20px;
     display: flex;
-    /*justify-content: center;*/
-    /*gap: 20px;*/
-    margin: 15px 0;
-    /*z-index: -1000;*/
 }
 .application-card .app-job-seeker-pic {
@@ -51 +90 @@
 
 .application-card .app-info {
-    width: 65%;
+    width: 60%;
     display: inline-flex;
     flex-direction: column;
@@ -86 +125 @@
 
 .application-card .app-status {
-    width: 28%;
+    width: 38%;
     display: inline-flex;
     justify-content: end;
@@ -98 +137 @@
 }
 
-.status {
+.app-status .status {
     color: white;
     padding: 5px 10px;
@@ -105 +144 @@
     text-align: center;
 }
+
+
+
+
+
+
 
 
@@ -168 +213 @@
     transform: rotate(-10deg);
 }
+
+.application-filters {
+    gap: 15px;
+    border-radius: 8px;
+    background-color: white;
+}
+
+/* Default Span Styles */
+.application-filters span {
+    padding: 8px 12px;
+    border-radius: 5px;
+    color: rgba(1,38,90,0.9);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+}
+
+/* Icon Styles */
+.application-filters span i {
+    margin-right: 5px;
+}
+
+/* Hover Effect */
+.application-filters span:hover {
+    background-color: rgba(1,38,90,0.9);
+    color: white;
+}
+
+.application-filters span:hover i {
+    color: inherit; /* Makes the icon inherit the color from the parent span */
+}
+
+/* Selected State */
+.application-filters span.selected {
+    background-color: rgba(1,38,90,0.9);
+    color: white;
+}
+
+.application-filters span.selected i {
+    color: inherit; /* Ensures icon color matches the selected state */
+}