From d5dda428cfc32fd89a72b1790116bbec9ab81a49 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 22 Jan 2023 22:48:50 -0800
Subject: [PATCH] Add job to read-only display

---
 components/JobSection/index.scss | 16 +++++++++++++---
 components/JobSection/index.tsx  |  8 +++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss
index dcdbed48..3cb9a6d4 100644
--- a/components/JobSection/index.scss
+++ b/components/JobSection/index.scss
@@ -28,10 +28,20 @@
     flex-direction: column;
     width: 100%;
 
-    h3 {
-      font-size: $font-medium;
-      font-weight: $medium;
+    .JobName {
+      align-items: center;
+      display: flex;
+      gap: $unit-half;
       padding: $unit 0 $unit * 2;
+
+      h3 {
+        font-size: $font-medium;
+        font-weight: $medium;
+      }
+
+      img {
+        width: $unit-4x;
+      }
     }
 
     select {
diff --git a/components/JobSection/index.tsx b/components/JobSection/index.tsx
index 5ff48ed5..8411cfbb 100644
--- a/components/JobSection/index.tsx
+++ b/components/JobSection/index.tsx
@@ -146,7 +146,13 @@ const JobSection = (props: Props) => {
             ref={selectRef}
           />
         ) : (
-          <h3>{party.job ? party.job.name[locale] : t('no_job')}</h3>
+          <div className="JobName">
+            <img
+              alt={party.job.name[locale]}
+              src={`/images/job-icons/${party.job.granblue_id}.png`}
+            />
+            <h3>{party.job ? party.job.name[locale] : t('no_job')}</h3>
+          </div>
         )}
 
         <ul className="JobSkills">