Work on style of job viewer

ToDo.yaml

@@ -51,5 +51,8 @@ Client:
         Need to impliment Add employee
         Need to impliment Remove employee
 
+    AI Resume Rating:
+        Allow companies to determine if the resume looks AI -> add rating
+
 database:
     Add Applied Jobs Table

src/Client/src/app/pages/jobs/viewer/jobviewer.component.css

@@ -58,10 +58,13 @@
 }
 
 .content-desc {
-    border: solid 1px red;
-    border-radius: 5px;
     padding: 20px;
+    border-radius: 20px;
     margin: 0 100px;
+    background-color: var(--mistox-bg-medium);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
 }
 
 .content-desc h1 {
@@ -83,9 +86,75 @@
 }
 
 .job-timestamp {
+    display: flex;
     width: 100%;
+    justify-content: end;
 }
 
-.job-timestamp h1 {
+.job-warning {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+    background-color: #f00;
+}
+
+.split {
+    column-count: 2;
+    margin: 0 100px;
+}
+
+.nobreak {
+    break-inside: avoid;
+    padding: 20px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+    background-color: var(--mistox-bg-medium);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
+}
+
+.detail-block {
+    padding: 20px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+    background-color: var(--mistox-bg-light);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
+}
+
+.detail-block h1 {
     margin: 0;
 }
+
+.detail-block h2 {
+    margin: 0;
+}
+
+.description-box {
+    padding: 20px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+    background-color: var(--mistox-bg-light);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
+}
+
+.description-box h1 {
+    margin: 0;
+    padding: 0;
+    font-size: 20px;
+}
+
+.skill-combo {
+    column-count: 2;
+}
+
+.bottom-bar {
+    display: grid;
+
+}

src/Client/src/app/pages/jobs/viewer/jobviewer.component.html

@@ -23,46 +23,72 @@
     }
     @if (selectedJob != null) {
         <div class="job-details">
-            <div class="job-timestamp">
-                <h1>Opened: {{ selectedJob.createdTime }}</h1>
-                <h1>Modified: {{ selectedJob.modifiedTime }}</h1>
-            </div>
-
             @if (selectedJob.isDeleted){
                 <div class="job-warning">
                     <h2>THIS JOB POSTING IS CLOSED</h2>
                 </div>
             }
-
+            <div class="center-item">
                 <h1>{{ selectedJob.title }}</h1>
+            </div>
+            <div class="split">
+                <div class="nobreak">
+                    <h1>Job Details:</h1>
+                    <div class="detail-block">
+                        <h1>Job Type</h1>
+                        <h2>{{ selectedJob.jobType }}</h2>
+                    </div>
                     
-            <h1>{{ selectedJob.jobType }}</h1>
-            <h1>{{ selectedJob.remote }}</h1>
+                    <div class="detail-block">
+                        <h1>In Office:</h1>
+                        @if (selectedJob.remote){
+                            <h2>Remote</h2>
+                        } @else {
+                            <h2>On-Site</h2>
+                        }
+                    </div>
 
-            <h1>{{ selectedJob.salaryMin }}</h1>
-            <h1>{{ selectedJob.salaryMax }}</h1>
+                    <div class="detail-block">
+                        <h1>Pay Range:</h1>
+                        <h2>{{ selectedJob.salaryMin }} - {{ selectedJob.salaryMax }}</h2>
+                    </div>
                     
-            <h1>{{ selectedJob.city }}</h1>
-            <h1>{{ selectedJob.stateOrRegion }}</h1>
-            <h1>{{ selectedJob.country }}</h1>
-            <h1>{{ selectedJob.postalCode }}</h1>
+                    @if (!selectedJob.remote){
+                        <div class="detail-block">
+                            <h1>Location:</h1>
+                            <h2>{{ selectedJob.city }}, {{ selectedJob.stateOrRegion }} {{ selectedJob.country }} {{ selectedJob.postalCode }}</h2>
+                        </div>
+                    }
 
-            <div>
-                <h1>Required Skills</h1>
+                    <div class="detail-block">
+                        <h1>Required Skills:</h1>
                             @for(skill of selectedJob.skills; track skill.trackUUID){
-                        <div>
+                                <div class="skill-combo">
+                                    <div class="nobreak">
                                         <h1>{{ skill.name }}</h1>
-                            <h1>{{ skill.description }}</h1>
+                                    </div>
+                                    <div class="nobreak">
+                                        <h2>{{ skill.description }}</h2>
+                                    </div>
                                 </div>
                             }
                     </div>
 
+                    <div class="job-timestamp">
+                        <span>Opened: {{ selectedJob.createdTime }} | Last Updated: {{ selectedJob.modifiedTime }}</span>
+                    </div>
+                </div>
+                <div class="nobreak">
+                    <h1>Job Description: </h1>
+                    <div class="description-box">
                         <h1>{{ selectedJob.description }}</h1>
-            <div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bottom-bar">
                 @for(resume of myResumes; track resume.trackUUID){
-                    <div>
                     <button type="button" (click)="applyWithResume(resume)">APPLY USING RESUME: {{ resume.name }}</button>
-                    </div>
                 }
             </div>
         </div>