From dac1ed917d86cd1abcd306873d36b4627e56be39 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 6 Dec 2022 19:03:00 -0800
Subject: [PATCH] Hover background in search, other fixes

---
 components/AccountModal/index.scss            | 26 +---------
 components/AccountModal/index.tsx             |  5 +-
 components/Button/index.scss                  |  2 +-
 components/CharacterResult/index.scss         | 12 +++--
 components/Dialog/index.scss                  |  4 +-
 components/Input/index.scss                   |  2 +-
 components/JobSkillResult/index.scss          | 16 +++---
 components/JobSkillSearchFilterBar/index.scss |  4 +-
 components/JobSkillSearchFilterBar/index.tsx  | 52 ++++++++++---------
 components/SearchFilter/index.scss            |  3 +-
 components/SearchModal/index.scss             |  1 +
 components/SummonResult/index.scss            | 10 ++--
 components/WeaponResult/index.scss            |  4 +-
 13 files changed, 68 insertions(+), 73 deletions(-)

diff --git a/components/AccountModal/index.scss b/components/AccountModal/index.scss
index f5372ff1..4c3f258b 100644
--- a/components/AccountModal/index.scss
+++ b/components/AccountModal/index.scss
@@ -46,28 +46,6 @@
       }
     }
 
-    .Button {
-      font-size: $font-regular;
-      padding: ($unit * 1.5) ($unit * 2);
-      margin-top: $unit * 2;
-      width: 100%;
-
-      &.btn-disabled {
-        background: $grey-90;
-        color: $grey-70;
-        cursor: not-allowed;
-      }
-
-      &:not(.btn-disabled) {
-        background: $grey-90;
-        color: $grey-50;
-
-        &:hover {
-          background: $grey-80;
-        }
-      }
-    }
-
     .field {
       align-items: center;
       display: flex;
@@ -89,12 +67,12 @@
         gap: calc($unit / 2);
 
         label {
-          color: $grey-15;
+          color: var(--text-secondary);
           font-size: $font-regular;
         }
 
         p {
-          color: $grey-60;
+          color: var(--text-secondary);
           font-size: $font-small;
           line-height: 1.1;
           max-width: 300px;
diff --git a/components/AccountModal/index.tsx b/components/AccountModal/index.tsx
index 8bcfe875..13c18f17 100644
--- a/components/AccountModal/index.tsx
+++ b/components/AccountModal/index.tsx
@@ -243,7 +243,10 @@ const AccountModal = () => {
               </Switch.Root>
             </div>
 
-            <Button>{t('modals.settings.buttons.confirm')}</Button>
+            <Button
+              contained={true}
+              text={t('modals.settings.buttons.confirm')}
+            />
           </form>
         </Dialog.Content>
         <Dialog.Overlay className="Overlay" />
diff --git a/components/Button/index.scss b/components/Button/index.scss
index 0d2f83c1..ec6dbbf5 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -252,7 +252,7 @@
     }
   }
 
-  .text {
+  .Text {
     color: inherit;
     display: block;
     width: 100%;
diff --git a/components/CharacterResult/index.scss b/components/CharacterResult/index.scss
index 77a7893a..3850d5e2 100644
--- a/components/CharacterResult/index.scss
+++ b/components/CharacterResult/index.scss
@@ -5,12 +5,16 @@
   padding: $unit * 1.5;
 
   &:hover {
-    background: $grey-90;
+    background: var(--button-contained-bg);
     cursor: pointer;
+
+    .Info h5 {
+      color: var(--text-primary);
+    }
   }
 
   img {
-    background: $grey-80;
+    background: var(--card-bg);
     border-radius: 6px;
     display: inline-block;
     height: 72px;
@@ -21,10 +25,10 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    gap: calc($unit / 2);
+    gap: $unit-half;
 
     h5 {
-      color: #555;
+      color: var(--text-secondary);
       display: inline-block;
       font-size: $font-medium;
       font-weight: $medium;
diff --git a/components/Dialog/index.scss b/components/Dialog/index.scss
index 831b6391..04c6e1c2 100644
--- a/components/Dialog/index.scss
+++ b/components/Dialog/index.scss
@@ -10,7 +10,7 @@
   gap: $unit * $multiplier;
   height: auto;
   min-width: $unit * 48;
-  min-height: $unit * 12;
+  min-height: $unit-12x;
   padding: $unit * $multiplier;
   position: absolute;
   top: 50%;
@@ -56,7 +56,7 @@
   }
 
   .DialogTitle {
-    color: var(--text-secondary);
+    color: var(--text-primary);
     font-size: $font-xlarge;
     flex-grow: 1;
   }
diff --git a/components/Input/index.scss b/components/Input/index.scss
index eb73f6eb..013f4a74 100644
--- a/components/Input/index.scss
+++ b/components/Input/index.scss
@@ -5,7 +5,7 @@
   border-radius: 6px;
   box-sizing: border-box;
   display: block;
-  padding: ($unit * 1.5) $unit-2x;
+  padding: $unit-2x;
   width: 100%;
 }
 
diff --git a/components/JobSkillResult/index.scss b/components/JobSkillResult/index.scss
index 2d72fb40..a2cc2cdf 100644
--- a/components/JobSkillResult/index.scss
+++ b/components/JobSkillResult/index.scss
@@ -6,18 +6,18 @@
   align-items: center;
 
   &:hover {
-    background: $grey-90;
+    background: var(--button-contained-bg);
     cursor: pointer;
 
-    .Info .skill.pill {
-      background: $grey-80;
+    .Info h5 {
+      color: var(--text-primary);
     }
   }
 
   .Info {
     display: flex;
     flex-direction: row;
-    gap: calc($unit / 2);
+    gap: $unit-half;
     width: 100%;
 
     .skill.pill {
@@ -27,7 +27,7 @@
       display: inline;
       font-size: $font-tiny;
       font-weight: $medium;
-      padding: calc($unit / 2) $unit;
+      padding: $unit-half $unit;
 
       &.buffing {
         background-color: $light-bg-10;
@@ -56,7 +56,7 @@
     }
 
     h5 {
-      color: #555;
+      color: var(--text-secondary);
       display: inline-block;
       font-size: $font-medium;
       font-weight: $medium;
@@ -65,7 +65,7 @@
   }
 
   img {
-    width: $unit * 6;
-    height: $unit * 6;
+    width: $unit-6x;
+    height: $unit-6x;
   }
 }
diff --git a/components/JobSkillSearchFilterBar/index.scss b/components/JobSkillSearchFilterBar/index.scss
index 6ccb5e2e..32ea1453 100644
--- a/components/JobSkillSearchFilterBar/index.scss
+++ b/components/JobSkillSearchFilterBar/index.scss
@@ -1,3 +1,3 @@
-.SearchFilterBar select {
-  background-color: $grey-90;
+.SearchFilterBar .SelectTrigger {
+  width: 100%;
 }
diff --git a/components/JobSkillSearchFilterBar/index.tsx b/components/JobSkillSearchFilterBar/index.tsx
index 36f018eb..6d442024 100644
--- a/components/JobSkillSearchFilterBar/index.tsx
+++ b/components/JobSkillSearchFilterBar/index.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
 
-import { skillGroups } from '~utils/skillGroups'
+import Select from '~components/Select'
+import SelectItem from '~components/SelectItem'
 
 import './index.scss'
 
@@ -14,13 +14,16 @@ const JobSkillSearchFilterBar = (props: Props) => {
   // Set up translation
   const { t } = useTranslation('common')
 
+  const [open, setOpen] = useState(false)
   const [currentGroup, setCurrentGroup] = useState(-1)
 
-  function onChange(event: React.ChangeEvent<HTMLSelectElement>) {
-    setCurrentGroup(parseInt(event.target.value))
+  function openSelect() {
+    setOpen(!open)
   }
 
-  function onBlur(event: React.ChangeEvent<HTMLSelectElement>) {}
+  function onChange(value: string) {
+    setCurrentGroup(parseInt(value))
+  }
 
   function sendFilters() {
     const filters = {
@@ -36,34 +39,35 @@ const JobSkillSearchFilterBar = (props: Props) => {
 
   return (
     <div className="SearchFilterBar">
-      <select
-        key="job-skill-groups"
-        value={currentGroup}
-        onBlur={onBlur}
+      <Select
+        defaultValue={-1}
+        trigger={'All elements'}
+        open={open}
         onChange={onChange}
+        onClick={openSelect}
       >
-        <option key="all" value={-1}>
+        <SelectItem key="all" value={-1}>
           {t(`job_skills.all`)}
-        </option>
-        <option key="damaging" value={2}>
+        </SelectItem>
+        <SelectItem key="damaging" value={2}>
           {t(`job_skills.damaging`)}
-        </option>
-        <option key="buffing" value={0}>
+        </SelectItem>
+        <SelectItem key="buffing" value={0}>
           {t(`job_skills.buffing`)}
-        </option>
-        <option key="debuffing" value={1}>
+        </SelectItem>
+        <SelectItem key="debuffing" value={1}>
           {t(`job_skills.debuffing`)}
-        </option>
-        <option key="healing" value={3}>
+        </SelectItem>
+        <SelectItem key="healing" value={3}>
           {t(`job_skills.healing`)}
-        </option>
-        <option key="emp" value={4}>
+        </SelectItem>
+        <SelectItem key="emp" value={4}>
           {t(`job_skills.emp`)}
-        </option>
-        <option key="base" value={5}>
+        </SelectItem>
+        <SelectItem key="base" value={5}>
           {t(`job_skills.base`)}
-        </option>
-      </select>
+        </SelectItem>
+      </Select>
     </div>
   )
 }
diff --git a/components/SearchFilter/index.scss b/components/SearchFilter/index.scss
index 030c35ec..557ca3a8 100644
--- a/components/SearchFilter/index.scss
+++ b/components/SearchFilter/index.scss
@@ -1,10 +1,11 @@
-.DropdownLabel {
+button.DropdownLabel {
   align-items: center;
   background: var(--button-contained-bg);
   border: none;
   border-radius: $unit-2x;
   color: var(--text-secondary);
   display: flex;
+  font-size: $font-small;
   gap: $unit-half;
   flex-direction: row;
   padding: $unit ($unit * 1.5) $unit $unit-2x;
diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss
index 8d92df76..fa823095 100644
--- a/components/SearchModal/index.scss
+++ b/components/SearchModal/index.scss
@@ -20,6 +20,7 @@
     }
 
     #Bar {
+      align-items: center;
       border-top-left-radius: $unit;
       border-top-right-radius: $unit;
       display: flex;
diff --git a/components/SummonResult/index.scss b/components/SummonResult/index.scss
index e22316c9..11b51c2d 100644
--- a/components/SummonResult/index.scss
+++ b/components/SummonResult/index.scss
@@ -5,8 +5,12 @@
   padding: $unit * 1.5;
 
   &:hover {
-    background: $grey-90;
+    background: var(--button-contained-bg);
     cursor: pointer;
+
+    .Info h5 {
+      color: var(--text-primary);
+    }
   }
 
   img {
@@ -21,10 +25,10 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    gap: calc($unit / 2);
+    gap: $unit-half;
 
     h5 {
-      color: #555;
+      color: var(--text-secondary);
       display: inline-block;
       font-size: $font-medium;
       font-weight: $medium;
diff --git a/components/WeaponResult/index.scss b/components/WeaponResult/index.scss
index 9cfd3039..43017a54 100644
--- a/components/WeaponResult/index.scss
+++ b/components/WeaponResult/index.scss
@@ -14,7 +14,7 @@
   }
 
   img {
-    background: $grey-80;
+    background: var(--card-bg);
     border-radius: 6px;
     display: inline-block;
     height: 72px;
@@ -25,7 +25,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
-    gap: calc($unit / 2);
+    gap: $unit-half;
 
     h5 {
       color: var(--text-secondary);