Fix job styles

components/job/JobImage/index.module.scss

@@ -1,4 +1,4 @@
-.JobImage {
+.image {
   $height: 252px;
   $width: 447px;
 
@@ -72,9 +72,16 @@
     }
   }
 
-  .Overlay {
+  .overlay {
+    backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
     background: none;
     position: absolute;
+    isolation: isolate;
+    z-index: 9;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: 1;
   }
 }

components/job/JobImage/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useRouter } from 'next/router'
-
+import classNames from 'classnames'
 import Button from '~components/common/Button'
 import JobAccessoryPopover from '~components/job/JobAccessoryPopover'
 
@@ -8,7 +8,6 @@ import ShieldIcon from '~public/icons/Shield.svg'
 import ManaturaIcon from '~public/icons/Manatura.svg'
 
 import styles from './index.module.scss'
-import classNames from 'classnames'
 
 interface Props {
   job?: Job
@@ -103,10 +102,10 @@ const JobImage = ({
     )
   }
   return (
-    <div className="JobImage">
+    <div className={styles.image}>
       {hasAccessory ? accessoryPopover() : ''}
       {job && job.id !== '-1' ? image : ''}
-      <div className="Job Overlay" />
+      <div className={styles.overlay} />
     </div>
   )
 }

components/job/JobSection/index.module.scss

@@ -1,4 +1,4 @@
-#Job {
+.job {
   box-sizing: border-box;
   display: flex;
   margin-bottom: $unit-3x;
@@ -22,13 +22,13 @@
     width: auto;
   }
 
-  .JobDetails {
+  .details {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     width: 100%;
 
-    .JobName {
+    .name {
       align-items: center;
       display: flex;
       gap: $unit-half;
@@ -48,12 +48,12 @@
       flex-grow: 0;
     }
 
-    .JobSkills {
+    .skills {
       flex-grow: 2;
     }
   }
 
-  .JobSkills {
+  .skills {
     display: flex;
     flex-direction: column;
 

components/job/JobSection/index.tsx

@@ -52,8 +52,8 @@ const JobSection = (props: Props) => {
 
   // Classes
   const skillContainerClasses = classNames({
-    JobSkills: true,
-    editable: props.editable,
+    [styles.skills]: true,
+    [styles.editable]: props.editable,
   })
 
   useEffect(() => {
@@ -174,7 +174,7 @@ const JobSection = (props: Props) => {
   )
 
   const filledJobLabel = (
-    <div className="JobName">
+    <div className={styles.name}>
       <img
         alt={job?.name[locale]}
         src={`/images/job-icons/${job?.granblue_id}.png`}
@@ -185,7 +185,7 @@ const JobSection = (props: Props) => {
 
   // Render: JSX components
   return (
-    <section id="Job">
+    <section className={styles.job}>
       <JobImage
         job={party.job}
         currentAccessory={currentAccessory}
@@ -194,7 +194,7 @@ const JobSection = (props: Props) => {
         user={party.user}
         onAccessorySelected={handleAccessorySelected}
       />
-      <div className="JobDetails">
+      <div className={styles.details}>
         {props.editable ? (
           <JobDropdown
             currentJob={party.job?.id}
@@ -202,7 +202,7 @@ const JobSection = (props: Props) => {
             ref={selectRef}
           />
         ) : (
-          <div className="JobName">
+          <div className={styles.name}>
             {party.job ? (
               <img
                 alt={party.job.name[locale]}

components/job/JobSkillItem/index.module.scss

@@ -1,6 +1,6 @@
-.JobSkills {
-  &.editable .JobSkill {
-    .Info {
+.skills {
+  &.editable .skill {
+    .info {
       padding: $unit-half * 1.5;
 
       & > img,
@@ -12,19 +12,19 @@
   }
 }
 
-.JobSkill {
+.skill {
   display: flex;
   align-items: stretch;
   justify-content: space-between;
 
-  &.editable .Info:hover {
+  &.editable .info:hover {
     background-color: var(--button-bg-hover);
   }
 
   &.editable:hover {
     cursor: pointer;
 
-    .Info {
+    .info {
       & > img.editable,
       & > div.placeholder.editable {
         border: $hover-stroke;
@@ -43,7 +43,7 @@
     }
   }
 
-  .Info {
+  .info {
     align-items: center;
     border-radius: $input-corner;
     display: flex;

components/job/JobSkillItem/index.tsx

@@ -51,17 +51,17 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
 
     // Classes
     const classes = classNames({
-      JobSkill: true,
-      editable: editable,
+      [styles.skill]: true,
+      [styles.editable]: editable,
     })
 
     const imageClasses = classNames({
-      placeholder: !skill,
-      editable: editable && hasJob,
+      [styles.placeholder]: !skill,
+      [styles.editable]: editable && hasJob,
     })
 
     const buttonClasses = classNames({
-      Clicked: contextMenuOpen,
+      [styles.clicked]: contextMenuOpen,
     })
 
     // Methods: Data mutation
@@ -107,9 +107,15 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
       if (skill) {
         jsx = <p>{skill.name[locale]}</p>
       } else if (editable && hasJob) {
-        jsx = <p className="placeholder">{t('job_skills.state.selectable')}</p>
+        jsx = (
+          <p className={styles.placeholder}>
+            {t('job_skills.state.selectable')}
+          </p>
+        )
       } else {
-        jsx = <p className="placeholder">{t('job_skills.state.no_skill')}</p>
+        jsx = (
+          <p className={styles.placeholder}>{t('job_skills.state.no_skill')}</p>
+        )
       }
 
       return jsx
@@ -159,7 +165,7 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
 
     return (
       <div className={classes} ref={forwardedRef}>
-        <div className="Info" onClick={props.onClick} tabIndex={0}>
+        <div className={styles.info} onClick={props.onClick} tabIndex={0}>
           {skillImage()}
           {label()}
         </div>