From d562de8b399400ae9a66395774335f9817225740 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 22 Jan 2023 22:33:42 -0800
Subject: [PATCH 1/4] Add granblue ID to Job type

---
 types/Job.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/types/Job.d.ts b/types/Job.d.ts
index 7c1f5939..beb75dff 100644
--- a/types/Job.d.ts
+++ b/types/Job.d.ts
@@ -1,5 +1,6 @@
 interface Job {
   id: string
+  granblue_id: string
   row: string
   ml: boolean
   order: number

From fefcd912900b586f7d7fba54a48ed787d951d9a1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 22 Jan 2023 22:45:23 -0800
Subject: [PATCH 2/4] Display icons in dropdown and trigger

---
 components/JobDropdown/index.tsx | 11 ++++++++++-
 components/Select/index.scss     |  6 ++++++
 components/Select/index.tsx      |  3 +++
 components/SelectItem/index.scss |  7 +++++++
 components/SelectItem/index.tsx  |  3 +++
 5 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/components/JobDropdown/index.tsx b/components/JobDropdown/index.tsx
index d9c9d891..71fc6eee 100644
--- a/components/JobDropdown/index.tsx
+++ b/components/JobDropdown/index.tsx
@@ -91,7 +91,12 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
           .sort((a, b) => a.order - b.order)
           .map((item, i) => {
             return (
-              <SelectItem key={i} value={item.id}>
+              <SelectItem
+                key={i}
+                value={item.id}
+                altText={item.name[locale]}
+                iconSrc={`/images/job-icons/${item.granblue_id}.png`}
+              >
                 {item.name[locale]}
               </SelectItem>
             )
@@ -109,6 +114,10 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
     return (
       <Select
         value={currentJob ? currentJob.id : 'no-job'}
+        altText={currentJob ? currentJob.name[locale] : ''}
+        iconSrc={
+          currentJob ? `/images/job-icons/${currentJob.granblue_id}.png` : ''
+        }
         open={open}
         onClick={openJobSelect}
         onOpenChange={() => setOpen(!open)}
diff --git a/components/Select/index.scss b/components/Select/index.scss
index e93026b7..032d9ea5 100644
--- a/components/Select/index.scss
+++ b/components/Select/index.scss
@@ -4,6 +4,7 @@
   border-radius: $input-corner;
   border: none;
   display: flex;
+  gap: $unit;
   padding: $unit-2x $unit-2x;
 
   &.modal {
@@ -56,6 +57,11 @@
     min-width: $unit * 30;
   }
 
+  img {
+    width: $unit-4x;
+    height: auto;
+  }
+
   .SelectIcon {
     display: flex;
     align-items: center;
diff --git a/components/Select/index.tsx b/components/Select/index.tsx
index ca0e0cf9..484ac4ab 100644
--- a/components/Select/index.tsx
+++ b/components/Select/index.tsx
@@ -14,6 +14,8 @@ interface Props
     React.SelectHTMLAttributes<HTMLSelectElement>,
     HTMLSelectElement
   > {
+  altText?: string
+  iconSrc?: string
   open: boolean
   trigger?: React.ReactNode
   children?: React.ReactNode
@@ -79,6 +81,7 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
         placeholder={props.placeholder}
         ref={forwardedRef}
       >
+        {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
         <RadixSelect.Value placeholder={props.placeholder} />
         {!props.disabled ? (
           <RadixSelect.Icon className="SelectIcon">
diff --git a/components/SelectItem/index.scss b/components/SelectItem/index.scss
index 11cface5..a07644d3 100644
--- a/components/SelectItem/index.scss
+++ b/components/SelectItem/index.scss
@@ -2,6 +2,8 @@
   border-radius: $item-corner;
   border: 2px solid transparent;
   color: var(--text-tertiary);
+  display: flex;
+  gap: $unit;
   font-size: $font-regular;
   padding: ($unit * 1.5) $unit-2x;
 
@@ -24,4 +26,9 @@
   &:last-child {
     margin-bottom: $unit;
   }
+
+  img {
+    width: $unit-4x;
+    height: auto;
+  }
 }
diff --git a/components/SelectItem/index.tsx b/components/SelectItem/index.tsx
index 5d3eb7c7..12ee6cff 100644
--- a/components/SelectItem/index.tsx
+++ b/components/SelectItem/index.tsx
@@ -6,6 +6,8 @@ import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {
   value: string | number
+  iconSrc?: string
+  altText?: string
 }
 
 const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
@@ -19,6 +21,7 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
       ref={forwardedRef}
       value={`${props.value}`}
     >
+      {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
       <Select.ItemText>{children}</Select.ItemText>
     </Select.Item>
   )

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 3/4] 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">

From ac325db3c422de8d95dca77af85b7d893a196a21 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 22 Jan 2023 22:51:13 -0800
Subject: [PATCH 4/4] Fix alignment and padding

---
 components/Select/index.scss     | 2 +-
 components/SelectItem/index.scss | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Select/index.scss b/components/Select/index.scss
index 032d9ea5..19426a62 100644
--- a/components/Select/index.scss
+++ b/components/Select/index.scss
@@ -5,7 +5,7 @@
   border: none;
   display: flex;
   gap: $unit;
-  padding: $unit-2x $unit-2x;
+  padding: ($unit * 1.5) $unit-2x;
 
   &.modal {
     background-color: var(--select-modal-bg);
diff --git a/components/SelectItem/index.scss b/components/SelectItem/index.scss
index a07644d3..a7efa35f 100644
--- a/components/SelectItem/index.scss
+++ b/components/SelectItem/index.scss
@@ -1,4 +1,5 @@
 .SelectItem {
+  align-items: center;
   border-radius: $item-corner;
   border: 2px solid transparent;
   color: var(--text-tertiary);