granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Hover background in search, other fixes

Browse source
This commit is contained in:
Justin Edmund 2022-12-06 19:03:00 -08:00
parent a2b30133d4
commit dac1ed917d
13 changed files with 68 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
components/AccountModal/index.scss
View file

@ -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 { .field {
align-items: center; align-items: center;
display: flex; display: flex;
@ -89,12 +67,12 @@
gap: calc($unit / 2); gap: calc($unit / 2);
label { label {
color: $grey-15; color: var(--text-secondary);
font-size: $font-regular; font-size: $font-regular;
} }
p { p {
color: $grey-60; color: var(--text-secondary);
font-size: $font-small; font-size: $font-small;
line-height: 1.1; line-height: 1.1;
max-width: 300px; max-width: 300px;

5
components/AccountModal/index.tsx
View file

@ -243,7 +243,10 @@ const AccountModal = () => {
</Switch.Root> </Switch.Root>
</div> </div>
<Button>{t('modals.settings.buttons.confirm')}</Button> <Button
contained={true}
text={t('modals.settings.buttons.confirm')}
/>
</form> </form>
</Dialog.Content> </Dialog.Content>
<Dialog.Overlay className="Overlay" /> <Dialog.Overlay className="Overlay" />

2
components/Button/index.scss
View file

@ -252,7 +252,7 @@
} }
} }
.text { .Text {
color: inherit; color: inherit;
display: block; display: block;
width: 100%; width: 100%;

12
components/CharacterResult/index.scss
View file

@ -5,12 +5,16 @@
padding: $unit * 1.5; padding: $unit * 1.5;
&:hover { &:hover {
background: $grey-90; background: var(--button-contained-bg);
cursor: pointer; cursor: pointer;
.Info h5 {
color: var(--text-primary);
}
} }
img { img {
background: $grey-80; background: var(--card-bg);
border-radius: 6px; border-radius: 6px;
display: inline-block; display: inline-block;
height: 72px; height: 72px;
@ -21,10 +25,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
gap: calc($unit / 2); gap: $unit-half;
h5 { h5 {
color: #555; color: var(--text-secondary);
display: inline-block; display: inline-block;
font-size: $font-medium; font-size: $font-medium;
font-weight: $medium; font-weight: $medium;

4
components/Dialog/index.scss
View file

@ -10,7 +10,7 @@
gap: $unit * $multiplier; gap: $unit * $multiplier;
height: auto; height: auto;
min-width: $unit * 48; min-width: $unit * 48;
min-height: $unit * 12; min-height: $unit-12x;
padding: $unit * $multiplier; padding: $unit * $multiplier;
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -56,7 +56,7 @@
} }
.DialogTitle { .DialogTitle {
color: var(--text-secondary); color: var(--text-primary);
font-size: $font-xlarge; font-size: $font-xlarge;
flex-grow: 1; flex-grow: 1;
} }

2
components/Input/index.scss
View file

@ -5,7 +5,7 @@
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
padding: ($unit * 1.5) $unit-2x; padding: $unit-2x;
width: 100%; width: 100%;
} }

16
components/JobSkillResult/index.scss
View file

@ -6,18 +6,18 @@
align-items: center; align-items: center;
&:hover { &:hover {
background: $grey-90; background: var(--button-contained-bg);
cursor: pointer; cursor: pointer;
.Info .skill.pill { .Info h5 {
background: $grey-80; color: var(--text-primary);
} }
} }
.Info { .Info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: calc($unit / 2); gap: $unit-half;
width: 100%; width: 100%;
.skill.pill { .skill.pill {
@ -27,7 +27,7 @@
display: inline; display: inline;
font-size: $font-tiny; font-size: $font-tiny;
font-weight: $medium; font-weight: $medium;
padding: calc($unit / 2) $unit; padding: $unit-half $unit;
&.buffing { &.buffing {
background-color: $light-bg-10; background-color: $light-bg-10;
@ -56,7 +56,7 @@
} }
h5 { h5 {
color: #555; color: var(--text-secondary);
display: inline-block; display: inline-block;
font-size: $font-medium; font-size: $font-medium;
font-weight: $medium; font-weight: $medium;
@ -65,7 +65,7 @@
} }
img { img {
width: $unit * 6; width: $unit-6x;
height: $unit * 6; height: $unit-6x;
} }
} }

4
components/JobSkillSearchFilterBar/index.scss
View file

@ -1,3 +1,3 @@
.SearchFilterBar select { .SearchFilterBar .SelectTrigger {
background-color: $grey-90; width: 100%;
} }

52
components/JobSkillSearchFilterBar/index.tsx
View file

@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { skillGroups } from '~utils/skillGroups' import Select from '~components/Select'
import SelectItem from '~components/SelectItem'
import './index.scss' import './index.scss'
@ -14,13 +14,16 @@ const JobSkillSearchFilterBar = (props: Props) => {
// Set up translation // Set up translation
const { t } = useTranslation('common') const { t } = useTranslation('common')
const [open, setOpen] = useState(false)
const [currentGroup, setCurrentGroup] = useState(-1) const [currentGroup, setCurrentGroup] = useState(-1)
function onChange(event: React.ChangeEvent<HTMLSelectElement>) { function openSelect() {
setCurrentGroup(parseInt(event.target.value)) setOpen(!open)
} }
function onBlur(event: React.ChangeEvent<HTMLSelectElement>) {} function onChange(value: string) {
setCurrentGroup(parseInt(value))
}
function sendFilters() { function sendFilters() {
const filters = { const filters = {
@ -36,34 +39,35 @@ const JobSkillSearchFilterBar = (props: Props) => {
return ( return (
<div className="SearchFilterBar"> <div className="SearchFilterBar">
<select <Select
key="job-skill-groups" defaultValue={-1}
value={currentGroup} trigger={'All elements'}
onBlur={onBlur} open={open}
onChange={onChange} onChange={onChange}
onClick={openSelect}
> >
<option key="all" value={-1}> <SelectItem key="all" value={-1}>
{t(`job_skills.all`)} {t(`job_skills.all`)}
</option> </SelectItem>
<option key="damaging" value={2}> <SelectItem key="damaging" value={2}>
{t(`job_skills.damaging`)} {t(`job_skills.damaging`)}
</option> </SelectItem>
<option key="buffing" value={0}> <SelectItem key="buffing" value={0}>
{t(`job_skills.buffing`)} {t(`job_skills.buffing`)}
</option> </SelectItem>
<option key="debuffing" value={1}> <SelectItem key="debuffing" value={1}>
{t(`job_skills.debuffing`)} {t(`job_skills.debuffing`)}
</option> </SelectItem>
<option key="healing" value={3}> <SelectItem key="healing" value={3}>
{t(`job_skills.healing`)} {t(`job_skills.healing`)}
</option> </SelectItem>
<option key="emp" value={4}> <SelectItem key="emp" value={4}>
{t(`job_skills.emp`)} {t(`job_skills.emp`)}
</option> </SelectItem>
<option key="base" value={5}> <SelectItem key="base" value={5}>
{t(`job_skills.base`)} {t(`job_skills.base`)}
</option> </SelectItem>
</select> </Select>
</div> </div>
) )
} }

3
components/SearchFilter/index.scss
View file

@ -1,10 +1,11 @@
.DropdownLabel { button.DropdownLabel {
align-items: center; align-items: center;
background: var(--button-contained-bg); background: var(--button-contained-bg);
border: none; border: none;
border-radius: $unit-2x; border-radius: $unit-2x;
color: var(--text-secondary); color: var(--text-secondary);
display: flex; display: flex;
font-size: $font-small;
gap: $unit-half; gap: $unit-half;
flex-direction: row; flex-direction: row;
padding: $unit ($unit * 1.5) $unit $unit-2x; padding: $unit ($unit * 1.5) $unit $unit-2x;

1
components/SearchModal/index.scss
View file

@ -20,6 +20,7 @@
} }
#Bar { #Bar {
align-items: center;
border-top-left-radius: $unit; border-top-left-radius: $unit;
border-top-right-radius: $unit; border-top-right-radius: $unit;
display: flex; display: flex;

10
components/SummonResult/index.scss
View file

@ -5,8 +5,12 @@
padding: $unit * 1.5; padding: $unit * 1.5;
&:hover { &:hover {
background: $grey-90; background: var(--button-contained-bg);
cursor: pointer; cursor: pointer;
.Info h5 {
color: var(--text-primary);
}
} }
img { img {
@ -21,10 +25,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
gap: calc($unit / 2); gap: $unit-half;
h5 { h5 {
color: #555; color: var(--text-secondary);
display: inline-block; display: inline-block;
font-size: $font-medium; font-size: $font-medium;
font-weight: $medium; font-weight: $medium;

4
components/WeaponResult/index.scss
View file

@ -14,7 +14,7 @@
} }
img { img {
background: $grey-80; background: var(--card-bg);
border-radius: 6px; border-radius: 6px;
display: inline-block; display: inline-block;
height: 72px; height: 72px;
@ -25,7 +25,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
gap: calc($unit / 2); gap: $unit-half;
h5 { h5 {
color: var(--text-secondary); color: var(--text-secondary);