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

Timestamp:

06/17/24 21:59:14 (2 weeks ago)

Author:

223021 <daniel.ilievski.2@…>

Branches:

main

Children:

08f82ec

Parents:

b248810

Message:

Added an edit profile page for both job seekers and recruiters, where they can upload profile pictures/company logos and edit their profile data. Added profile page specifically for recruiters. Refactored existing code.

File:

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

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

@@ -1 @@
-.applications-container {
+.custom-container {
     width: 65% !important;
     max-width: 1500px !important;
@@ -6 +6 @@
 
 .application-title {
-    font-family: Ubuntu;
-    text-transform: uppercase;
-    margin: 25px auto;
+    font-family: "Segoe UI";
+    margin-top: 40px;
+    margin-bottom: 20px;
     display: flex;
-    justify-content: center;
+    justify-content: start;
+    border-bottom: 1px solid #CFCFCF;
 }
-.application-title h1 {
-    font-weight: bold;
+.application-title h3 {
+    font-weight: 500;
 }
 
@@ -28 +29 @@
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transform: translate(0, 0);
     height: auto;
     padding: 20px 20px;
     display: flex;
     justify-content: center;
+    gap: 20px;
     margin: 15px 0;
+    /*z-index: -1000;*/
+}
+.application-card .app-job-seeker-pic {
+    border: 1px solid gray;
+    border-radius: 50%
+}
+.application-card .app-job-seeker-pic img {
+    border-radius: 50%;
 }
 
-.application-card .left-box {
-    width: 55%;
-    display: inline-block;
+.application-card .app-info {
+    width: 60%;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 10px;
 }
 
-.application-card .left-box .jobAd-title {
+.application-card .app-info .jobAd-title {
     font-weight: 600;
     /*text-transform: uppercase;*/
     font-family: 'Segoe UI', sans-serif;
-    font-size: 22px;
+    /*font-size: 22px;*/
 }
+.application-card .app-info .jobAd-title
 
-.application-card .left-box .contact-info {
+.application-card .app-info .contact-info {
     display: inline-flex;
-    gap: 10px;
+    gap: 30px;
 }
-.application-card .left-box .contact-info .contact-item {
+.application-card .app-info .contact-info .contact-item {
     display: inline-flex;
     align-items: center;
     gap: 5px;
+    margin-right: 10px
 }
 
-.application-card .right-box {
-    width: 45%;
+.application-card .app-info .contact-info .contact-item span {
+   color: darkgray;
+}
+
+.application-card .app-status {
+    width: 40%;
     display: inline-flex;
     justify-content: end;
@@ -66 +85 @@
 }
 
-.application-card .right-box .select {
-    width: 35%;
+.application-card .app-status .select {
+    width: 45%;
     display: inline-block;
 }
+
+.status {
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    width: 150px;
+    text-align: center;
+}
+
 
 .application-button {
@@ -75 +103 @@
     border-radius: 8px;
     width: auto;
-    background-color: rgba(207, 235, 255, 1);
-    color: black;
-    font-weight: bold;
-    padding: 5px 10px;
-    transition: 0.2s;
+    background-image: linear-gradient(to bottom, #dddddd, #f0f0f0);
+    background-color: #dddddd;
+    color: #333333;
+
+    font-weight: 700;
+    padding: 8px 13px;
 }
+
 .application-button:hover {
-    background-color: rgb(187, 215, 235);
+    background: linear-gradient(to bottom, #bbbbbb, #dddddd);
+    color: #333333;
 }