Import company style into job viewer

src/Client/src/app/pages/main/company/company.component.css

@@ -75,7 +75,6 @@ button {
     border-radius: 5px;
     padding: 20px;
     margin: 0 100px;
-    margin-bottom: 0px;
     margin-bottom: 50px;
 }
 

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

@@ -1,11 +1,91 @@
-.job-frame {
-
+.company-details {
+    background-color: #5c3030;
 }
 
-.job-warning {
+.company-details::after {
+  content: "";
+  display: block;
+  height: 50px;
+  clear: both;
+}
 
+.content-frame {
+    background-color: #3c3c3c;
+    width: calc(100% - 40px);
+    height: calc(100vh - 400px);
+    border-radius: 20px;
+    margin: 10px;
+    overflow: scroll;
+    padding: 10px;
+    color: var(--Mistox-White);
+}
+
+.center-item {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.content-edit {
+    position: absolute;
+    right: 20px;
+}
+
+.center-item img {
+    width: 300px;
+}
+
+.content-name {
+    width: 300px;
+    text-align: center;
+    font-size: 30px;
+}
+
+.content-name h1 {
+    margin: 0;
+}
+
+.content-link {
+    display: flex;
+    width: 300px;
+    justify-content: center;
+}
+
+.content-link a {
+    text-decoration: none;
+    color: var(--Mistox-White);
+    margin-top: auto;
+}
+
+.content-desc {
+    border: solid 1px red;
+    border-radius: 5px;
+    padding: 20px;
+    margin: 0 100px;
+}
+
+.content-desc h1 {
+    margin: 0;
+    font-size: 20px;
+}
+
+.content-button {
+    display: flex;
+    justify-content: center;
+}
+
+.content-button span {
+    align-content: center;
 }
 
 .job-details {
-    
+    background-color: #3c3c3c;
+}
+
+.job-timestamp {
+    width: 100%;
+}
+
+.job-timestamp h1 {
+    margin: 0;
 }

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

@@ -1,21 +1,27 @@
 <div class="job-frame">
     <div class="company-details" *ngIf="jobsCompany != null" >
-        <h1>{{ jobsCompany.name }}</h1>
-
-        <h1>{{ jobsCompany.email }}</h1>
-        <h1>{{ jobsCompany.websiteURL }}</h1>
-
-        <h1>{{ jobsCompany.logo }}</h1>
-        <h1>{{ jobsCompany.phone }}</h1>
-        
-        <h1>{{ jobsCompany.city }}</h1>
-        <h1>{{ jobsCompany.stateOrRegion }}</h1>
-        <h1>{{ jobsCompany.country }}</h1>
-        <h1>{{ jobsCompany.postalCode }}</h1>
-
-        <h1>{{ jobsCompany.description }}</h1>
-    </div>    
+        <div class="center-item">
+            <a [href]="jobsCompany.websiteURL">
+                <img [src]="jobsCompany.logo" />
+            </a>
+        </div>
+        <div class="center-item">
+            <div class="content-link"><a [href]="'mailto:' + jobsCompany.email" >{{ jobsCompany.email }}</a></div>
+            <div class="content-name"><h1>{{ jobsCompany.name }}</h1></div>
+            <div class="content-link"><a [href]="'tel:' + jobsCompany.phone">{{ jobsCompany.phone }}</a></div>
+        </div>
+        <div class="center-item">
+            <h1>{{ jobsCompany.city }}, {{ jobsCompany.stateOrRegion }} {{ jobsCompany.postalCode }}</h1>
+        </div>
+        <div class="content-desc">
+            <h1 *ngFor="let line of jobsCompany.description.split('\n')">{{ line }}</h1>
+        </div>
+    </div>
     <div class="job-details" *ngIf="selectedJob != null" >
+        <div class="job-timestamp">
+            <h1>Opened: {{ selectedJob.createdTime }}</h1>
+            <h1>Modified: {{ selectedJob.modifiedTime }}</h1>
+        </div>
 
         <div class="job-warning" *ngIf="selectedJob.isDeleted" >
             <h2>THIS JOB POSTING IS CLOSED</h2>
@@ -35,8 +41,5 @@
         <h1>{{ selectedJob.postalCode }}</h1>
 
         <h1>{{ selectedJob.description }}</h1>
-
-        <h1>{{ selectedJob.createdTime }}</h1>
-        <h1>{{ selectedJob.modifiedTime }}</h1>
     </div>
 </div>