Add job to read-only display

components/JobSection/index.scss

@@ -28,10 +28,20 @@
     flex-direction: column;
     width: 100%;
 
-    h3 {
+    .JobName {
-      font-size: $font-medium;
+      align-items: center;
-      font-weight: $medium;
+      display: flex;
+      gap: $unit-half;
       padding: $unit 0 $unit * 2;
+
+      h3 {
+        font-size: $font-medium;
+        font-weight: $medium;
+      }
+
+      img {
+        width: $unit-4x;
+      }
     }
 
     select {

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">