Fix job accessory popover

This was actually easy, I guess I was just tired.

components/common/PopoverContent/index.module.scss

@@ -1,3 +1,59 @@
+.popover {
+  animation: scaleIn $duration-zoom ease-out;
+  background: var(--dialog-bg);
+  border-radius: $card-corner;
+  border: 0.5px solid rgba(0, 0, 0, 0.18);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
+  outline: none;
+  padding: $unit;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  width: var(--radix-popover-trigger-width);
+  z-index: 5;
+
+  @include breakpoint(phone) {
+    min-width: auto;
+  }
+
+  &.raid {
+    width: auto;
+  }
+
+  &.flush {
+    padding: 0;
+  }
+}
+
+.jobAccessory {
+  padding: $unit-2x;
+  min-width: 40vw;
+  max-width: 40vw;
+  max-height: 40vh;
+  overflow-y: auto;
+  overflow-x: none;
+  margin-left: $unit-2x;
+
+  h3 {
+    font-size: $font-regular;
+    font-weight: $medium;
+    margin: 0 0 $unit $unit;
+  }
+
+  &.readOnly {
+    min-width: inherit;
+    max-width: inherit;
+  }
+
+  @include breakpoint(tablet) {
+    width: initial;
+    max-width: initial;
+  }
+
+  @include breakpoint(phone) {
+    width: initial;
+    max-width: initial;
+  }
+}
+
 .arrow {
   fill: var(--dialog-bg);
   filter: drop-shadow(0px 1px 1px rgb(0 0 0 / 0.18));

components/common/PopoverContent/index.tsx

@@ -20,9 +20,13 @@ export const PopoverContent = React.forwardRef<HTMLDivElement, Props>(
     { children, ...props }: PropsWithChildren<Props>,
     forwardedRef
   ) {
-    const classes = classnames(props.className, {
+    const classes = classnames(
-      Popover: true,
+      {
-    })
+        [styles.popover]: true,
+      },
+      props.className?.split(' ').map((a) => styles[a])
+    )
+
 
     return (
       <PopoverPrimitive.Portal>

components/job/JobAccessoryItem/index.module.scss

@@ -1,4 +1,4 @@
-.JobAccessoryItem {
+.item {
   background: none;
   border-radius: $input-corner;
   border: none;

components/job/JobAccessoryItem/index.tsx

@@ -18,7 +18,7 @@ const JobAccessoryItem = ({ accessory, selected }: Props) => {
 
   return (
     <RadioGroup.Item
-      className="JobAccessoryItem"
+      className={styles.item}
       data-state={selected ? 'checked' : 'unchecked'}
       value={accessory.id}
     >

components/job/JobAccessoryPopover/index.module.scss

@@ -1,67 +1,37 @@
-.JobAccessory.Popover {
+.accessories {
-  padding: $unit-2x;
+  display: grid;
-  min-width: 40vw;
+  gap: $unit;
-  max-width: 40vw;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  max-height: 40vh;
-  overflow-y: scroll;
-  margin-left: $unit-2x;
-
-  h3 {
-    font-size: $font-regular;
-    font-weight: $medium;
-    margin: 0 0 $unit $unit;
-  }
-
-  &.ReadOnly {
-    min-width: inherit;
-    max-width: inherit;
-  }
 
   @include breakpoint(tablet) {
-    width: initial;
+    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
-    max-width: initial;
+    gap: 0;
+  }
+}
+
+.equippedAccessory {
+  display: flex;
+  flex-direction: column;
+  gap: $unit-2x;
+
+  h3 {
+    margin: 0;
   }
 
-  @include breakpoint(phone) {
+  .accessory {
-    width: initial;
-    max-width: initial;
-  }
-
-  .Accessories {
-    display: grid;
-    gap: $unit;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-
-    @include breakpoint(tablet) {
-      grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
-      gap: 0;
-    }
-  }
-
-  .EquippedAccessory {
     display: flex;
     flex-direction: column;
-    gap: $unit-2x;
+    gap: $unit;
 
-    h3 {
+    h4 {
-      margin: 0;
+      font-size: $font-small;
+      font-weight: $medium;
+      text-align: center;
     }
 
-    .Accessory {
+    img {
-      display: flex;
+      border-radius: $item-corner;
-      flex-direction: column;
+      width: 150px;
-      gap: $unit;
-
-      h4 {
-        font-size: $font-small;
-        font-weight: $medium;
-        text-align: center;
-      }
-
-      img {
-        border-radius: $item-corner;
-        width: 150px;
-      }
     }
   }
 }

components/job/JobAccessoryPopover/index.tsx

@@ -49,8 +49,8 @@ const JobAccessoryPopover = ({
   const [open, setOpen] = useState(false)
 
   const classes = classNames({
-    JobAccessory: true,
+    jobAccessory: true,
-    ReadOnly: !editable,
+    readOnly: !editable,
   })
 
   // Hooks
@@ -91,7 +91,7 @@ const JobAccessoryPopover = ({
         )}
       </h3>
       <RadioGroup.Root
-        className="Accessories"
+        className={styles.accessories}
         onValueChange={handleAccessorySelected}
       >
         {accessories.map((accessory) => (
@@ -110,14 +110,14 @@ const JobAccessoryPopover = ({
   )
 
   const readOnly = currentAccessory ? (
-    <div className="EquippedAccessory">
+    <div className={styles.equippedAccessory}>
       <h3>
         {t('equipped')}{' '}
         {job.accessory_type === 1
           ? `${t('accessories.paladin')}s`
           : t('accessories.manadiver')}
       </h3>
-      <div className="Accessory">
+      <div className={styles.accessory}>
         <img
           alt={currentAccessory.name[locale]}
           src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/accessory-grid/${currentAccessory.granblue_id}.jpg`}