Update job-related components

components/job/JobDropdown/index.module.scss

@@ -1,3 +0,0 @@
-.Job.SelectTrigger {
-  margin-bottom: $unit;
-}

components/job/JobDropdown/index.tsx

@@ -10,8 +10,6 @@ import SelectGroup from '~components/common/SelectGroup'
 import { appState } from '~utils/appState'
 import { jobGroups } from '~data/jobGroups'
 
-import styles from './index.module.scss'
-
 // Props
 interface Props {
   currentJob?: string
@@ -94,8 +92,12 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
               <SelectItem
                 key={i}
                 value={item.id}
-                altText={item.name[locale]}
+                icon={{
-                iconSrc={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${item.granblue_id}.png`}
+                  alt: item.name[locale],
+                  src: [
+                    `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${item.granblue_id}.png`,
+                  ],
+                }}
               >
                 {item.name[locale]}
               </SelectItem>
@@ -114,18 +116,20 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
     return (
       <Select
         value={currentJob ? currentJob.id : 'no-job'}
-        altText={currentJob ? currentJob.name[locale] : ''}
+        icon={{
-        iconSrc={
+          alt: currentJob ? currentJob.name[locale] : '',
-          currentJob
+          src: currentJob
             ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${currentJob.granblue_id}.png`
-            : ''
+            : '',
-        }
+        }}
         open={open}
         onClick={openJobSelect}
         onOpenChange={() => setOpen(!open)}
         onValueChange={handleChange}
-        className="Job"
+        className="job"
-        triggerClass="Job"
+        trigger={{
+          className: 'job',
+        }}
         overlayVisible={false}
       >
         <SelectItem key={-1} value="no-job">

components/job/JobImage/index.module.scss

@@ -49,29 +49,6 @@
     z-index: 2;
   }
 
-  .JobAccessory.Button {
-    align-items: center;
-    border-radius: 99px;
-    justify-content: center;
-    position: relative;
-    padding: $unit * 1.5;
-    top: $unit;
-    left: $unit;
-    height: auto;
-    z-index: 10;
-
-    &:hover .Accessory svg,
-    &.Selected .Accessory svg {
-      fill: var(--button-text-hover);
-    }
-
-    .Accessory svg {
-      fill: var(--button-text);
-      width: $unit-3x;
-      height: auto;
-    }
-  }
-
   .overlay {
     backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
     background: none;

components/job/JobImage/index.tsx

@@ -54,8 +54,8 @@ const JobImage = ({
   const image = <img alt={job?.name[locale]} src={imageUrl()} />
 
   const classes = classNames({
-    JobAccessory: true,
+    jobAccessory: true,
-    Selected: open,
+    selected: open,
   })
 
   function handleAccessoryButtonClicked() {
@@ -78,6 +78,7 @@ const JobImage = ({
         leftAccessoryIcon={icon}
         className={classes}
         onClick={handleAccessoryButtonClicked}
+        size="icon"
         ref={buttonRef}
       />
     )

components/job/JobSection/index.module.scss

@@ -25,6 +25,7 @@
   .details {
     box-sizing: border-box;
     display: flex;
+    gap: $unit;
     flex-direction: column;
     width: 100%;
 

components/job/JobSection/index.tsx

@@ -136,6 +136,7 @@ const JobSection = (props: Props) => {
         skill={skills[index]}
         position={index}
         editable={canEditSkill(skills[index])}
+        small={props.editable}
         key={`skill-${index}`}
         hasJob={job != undefined && job.id != '-1'}
         removeJobSkill={props.removeSkill}

components/job/JobSkillItem/index.module.scss

@@ -17,28 +17,42 @@
   align-items: stretch;
   justify-content: space-between;
 
-  &.editable .info:hover {
+  &.editable {
-    background-color: var(--button-bg-hover);
+    &:hover {
+      cursor: pointer;
+
+      .info {
+        &:hover {
+          background-color: var(--button-bg-hover);
+        }
+
+        & > img.editable,
+        & > div.placeholder.editable {
+          border: $hover-stroke;
+          box-shadow: $hover-shadow;
+          cursor: pointer;
+          transform: $scale-tall;
+        }
+
+        & p.placeholder {
+          color: var(--text-tertiary-hover);
+        }
+
+        & svg {
+          fill: var(--icon-secondary-hover);
+        }
+      }
+    }
   }
 
-  &.editable:hover {
+  &.small {
-    cursor: pointer;
-
     .info {
-      & > img.editable,
+      padding: $unit-half * 1.5;
-      & > div.placeholder.editable {
-        border: $hover-stroke;
-        box-shadow: $hover-shadow;
-        cursor: pointer;
-        transform: $scale-tall;
-      }
 
-      & p.placeholder {
+      .placeholder.image,
-        color: var(--text-tertiary-hover);
+      img {
-      }
+        width: $unit-4x;
-
+        height: $unit-4x;
-      & svg {
-        fill: var(--icon-secondary-hover);
       }
     }
   }

components/job/JobSkillItem/index.tsx

@@ -21,16 +21,22 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
   skill?: JobSkill
   position: number
   editable: boolean
+  small?: boolean
   hasJob: boolean
   removeJobSkill: (position: number) => void
 }
 
+const defaultProps = {
+  small: false,
+}
+
 const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
   function useJobSkillItem(
     {
       skill,
       position,
       editable,
+      small,
       hasJob,
       removeJobSkill: sendJobSkillToRemove,
       ...props
@@ -53,13 +59,20 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
     const classes = classNames({
       [styles.skill]: true,
       [styles.editable]: editable,
+      [styles.small]: small,
     })
 
     const imageClasses = classNames({
       [styles.placeholder]: !skill,
+      [styles.image]: true,
       [styles.editable]: editable && hasJob,
     })
 
+    const labelClasses = classNames({
+      [styles.placeholder]: !skill,
+      [styles.text]: true,
+    })
+
     const buttonClasses = classNames({
       [styles.clicked]: contextMenuOpen,
     })
@@ -79,6 +92,7 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
       if (!open) setContextMenuOpen(false)
     }
 
+    // Methods: Rendering
     const skillImage = () => {
       let jsx: React.ReactNode
 
@@ -107,11 +121,7 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
       if (skill) {
         jsx = <p>{skill.name[locale]}</p>
       } else if (editable && hasJob) {
-        jsx = (
+        jsx = <p className={labelClasses}>{t('job_skills.state.selectable')}</p>
-          <p className={styles.placeholder}>
-            {t('job_skills.state.selectable')}
-          </p>
-        )
       } else {
         jsx = (
           <p className={styles.placeholder}>{t('job_skills.state.no_skill')}</p>
@@ -175,4 +185,6 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
   }
 )
 
+JobSkillItem.defaultProps = defaultProps
+
 export default JobSkillItem