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

Shuffled greyscale, fixed dark mode for select/input

Browse source
This commit is contained in:
Justin Edmund 2022-12-06 09:31:56 -08:00
parent 0660f98550
commit 3ee7c0b4b2
31 changed files with 148 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/AccountModal/index.scss
View file

@ -19,11 +19,11 @@
height: $height;
&:focus {
box-shadow: 0 0 0 2px $grey-10;
box-shadow: 0 0 0 2px $grey-15;
}
&[data-state='checked'] {
background: $grey-10;
background: $grey-15;
}
}
@ -60,7 +60,7 @@
&:not(.btn-disabled) {
background: $grey-90;
color: $grey-40;
color: $grey-50;
&:hover {
background: $grey-80;
@ -89,7 +89,7 @@
gap: calc($unit / 2);
label {
color: $grey-10;
color: $grey-15;
font-size: $font-regular;
}

2
components/Alert/index.scss
View file

@ -42,7 +42,7 @@
&:not(.btn-disabled) {
background: $grey-90;
color: $grey-40;
color: $grey-50;
&:hover {
background: $grey-80;

2
components/AxSelect/index.scss
View file

@ -34,7 +34,7 @@
background-color: $grey-90;
border-radius: 6px;
box-sizing: border-box;
color: $grey-10;
color: $grey-15;
height: $unit * 6;
display: block;
font-size: $font-regular;

16
components/Button/index.scss
View file

@ -3,7 +3,7 @@
background: transparent;
border: none;
border-radius: 6px;
color: $grey-50;
color: $grey-55;
display: inline-flex;
font-size: $font-button;
font-weight: $normal;
@ -13,15 +13,15 @@
&:hover {
background: $grey-100;
cursor: pointer;
color: $grey-10;
color: $grey-15;
.icon svg {
fill: $grey-10;
fill: $grey-15;
}
.icon.stroke svg {
fill: none;
stroke: $grey-10;
stroke: $grey-15;
}
}
@ -77,7 +77,7 @@
margin-top: 2px;
svg {
fill: $grey-50;
fill: $grey-55;
height: 12px;
width: 12px;
}
@ -90,7 +90,7 @@
&.stroke svg {
fill: none;
stroke: $grey-50;
stroke: $grey-55;
}
&.settings svg {
@ -143,11 +143,11 @@
&.null {
background: $grey-90;
color: $grey-50;
color: $grey-55;
&:hover {
background: $grey-70;
color: $grey-10;
color: $grey-15;
}
}

2
components/CharLimitedFieldset/index.scss
View file

@ -17,7 +17,7 @@
}
.Counter {
color: $grey-50;
color: $grey-55;
font-weight: $bold;
line-height: 42px;
}

4
components/CharacterConflictModal/index.scss
View file

@ -8,7 +8,7 @@
}
.arrow {
color: $grey-50;
color: $grey-55;
font-size: 4rem;
text-align: center;
}
@ -52,7 +52,7 @@
&:not(.btn-disabled) {
background: $grey-90;
color: $grey-40;
color: $grey-50;
&:hover {
background: $grey-80;

4
components/ElementToggle/index.scss
View file

@ -12,7 +12,7 @@
background: $grey-100;
border: none;
border-radius: 18px;
color: $grey-40;
color: $grey-50;
flex-grow: 1;
font-size: $font-regular;
padding: ($unit) $unit * 2;
@ -29,7 +29,7 @@
&:hover,
&[data-state='on'] {
background: $grey-80;
color: $grey-10;
color: $grey-15;
&.fire {
background: $fire-bg-20;

2
components/FilterBar/index.scss
View file

@ -31,7 +31,7 @@
// background-position-y: center;
// background-position-x: 95%;
// background-size: $unit * 1.5;
color: $grey-50;
color: $grey-55;
font-size: $font-small;
margin: 0;
max-width: 200px;

2
components/GridRep/index.scss
View file

@ -109,7 +109,7 @@
.raid,
.user,
time {
color: $grey-50;
color: $grey-55;
font-size: $font-small;
}

8
components/HeaderMenu/index.scss
View file

@ -9,16 +9,16 @@
}
.MenuItem {
color: $grey-40;
color: $grey-50;
font-weight: $normal;
&:hover:not(.disabled) {
background: $grey-95;
color: $grey-10;
color: $grey-15;
cursor: pointer;
a {
color: $grey-10;
color: $grey-15;
}
}
@ -95,7 +95,7 @@
}
a {
color: $grey-40;
color: $grey-50;
}
& > a,

3
components/JobDropdown/index.scss
View file

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

38
components/JobDropdown/index.tsx
View file

@ -2,6 +2,10 @@ import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import { useSnapshot } from 'valtio'
import Select from '~components/Select'
import SelectItem from '~components/SelectItem'
import SelectGroup from '~components/SelectGroup'
import { appState } from '~utils/appState'
import { jobGroups } from '~utils/jobGroups'
@ -26,6 +30,7 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
const { party } = useSnapshot(appState)
// Set up local states for storing jobs
const [open, setOpen] = useState(false)
const [currentJob, setCurrentJob] = useState<Job>()
const [jobs, setJobs] = useState<Job[]>()
const [sortedJobs, setSortedJobs] = useState<GroupedJob>()
@ -58,10 +63,14 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
}
}, [appState, props.currentJob])
function openJobSelect() {
setOpen(!open)
}
// Enable changing select value
function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
function handleChange(value: string) {
if (jobs) {
const job = jobs.find((job) => job.id === event.target.value)
const job = jobs.find((job) => job.id === value)
if (props.onChange) props.onChange(job)
setCurrentJob(job)
}
@ -76,36 +85,37 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
.sort((a, b) => a.order - b.order)
.map((item, i) => {
return (
<option key={i} value={item.id}>
<SelectItem key={i} value={item.id}>
{item.name[locale]}
</option>
</SelectItem>
)
})
const groupName = jobGroups.find((g) => g.slug === group)?.name[locale]
return (
<optgroup key={group} label={groupName}>
<SelectGroup key={group} label={groupName} separator={false}>
{options}
</optgroup>
</SelectGroup>
)
}
return (
<select
key={currentJob ? currentJob.id : -1}
value={currentJob ? currentJob.id : -1}
onBlur={props.onBlur}
<Select
trigger={'Select a class...'}
placeholder={'Select a class...'}
open={open}
onClick={openJobSelect}
onChange={handleChange}
ref={ref}
triggerClass="Job"
>
<option key="no-job" value={-1}>
<SelectItem key={-1} value="no-job">
No class
</option>
</SelectItem>
{sortedJobs
? Object.keys(sortedJobs).map((x) => renderJobGroup(x))
: ''}
</select>
</Select>
)
}
)

2
components/JobSection/index.scss
View file

@ -28,7 +28,7 @@
}
.JobImage {
$height: 249px;
$height: 252px;
$width: 447px;
background: url('/images/background_a.jpg');

8
components/JobSkillItem/index.scss
View file

@ -44,7 +44,11 @@
}
}
p.placeholder {
color: var(--text-secondary);
p {
color: var(--text-primary);
&.placeholder {
color: var(--text-secondary);
}
}
}

2
components/JobSkillResult/index.scss
View file

@ -23,7 +23,7 @@
.skill.pill {
background: $grey-90;
border-radius: $unit * 2;
color: $grey-10;
color: $grey-15;
display: inline;
font-size: $font-tiny;
font-weight: $medium;

2
components/LoginModal/index.scss
View file

@ -17,7 +17,7 @@
&:not(.btn-disabled) {
background: $grey-90;
color: $grey-40;
color: $grey-50;
&:hover {
background: $grey-80;

3
components/RaidDropdown/index.tsx
View file

@ -4,7 +4,6 @@ import { useRouter } from 'next/router'
import Select from '~components/Select'
import SelectItem from '~components/SelectItem'
import SelectGroup from '~components/SelectGroup'
import { SelectSeparator } from '@radix-ui/react-select'
import api from '~utils/api'
import { appState } from '~utils/appState'
@ -131,7 +130,7 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
return (
<Select
trigger={'Select a raid...'}
placeholder={'Select a raid'}
placeholder={'Select a raid...'}
open={open}
onClick={openRaidSelect}
onChange={handleChange}

4
components/SearchFilter/index.scss
View file

@ -3,7 +3,7 @@
background: $grey-90;
border: none;
border-radius: $unit * 2;
color: $grey-40;
color: $grey-50;
display: flex;
gap: calc($unit / 2);
flex-direction: row;
@ -11,7 +11,7 @@
&:hover {
background: $grey-80;
color: $grey-10;
color: $grey-15;
cursor: pointer;
}

4
components/SearchFilterCheckboxItem/index.scss
View file

@ -1,7 +1,7 @@
.Item {
align-items: center;
border-radius: calc($unit / 2);
color: $grey-40;
color: $grey-50;
font-size: $font-regular;
line-height: 1.2;
min-width: 100px;
@ -18,7 +18,7 @@
background: $grey-90;
svg {
fill: $grey-50;
fill: $grey-55;
}
}

2
components/SearchModal/index.scss
View file

@ -62,7 +62,7 @@
h5.total {
font-size: $font-regular;
font-weight: $normal;
color: $grey-40;
color: $grey-50;
padding: calc($unit / 2) ($unit * 1.5);
}

2
components/Segment/index.scss
View file

@ -1,5 +1,5 @@
.Segment {
color: $grey-50;
color: $grey-55;
cursor: pointer;
font-size: 1.4rem;
font-weight: $normal;

15
components/Select/index.scss
View file

@ -33,20 +33,25 @@
}
.Select {
background: var(--card-bg);
background: var(--select-bg);
border-radius: $input-corner;
border: $hover-stroke;
box-shadow: $hover-shadow;
padding: 0 $unit;
// position: relative;
// max-height: 350px !important;
// top: -800px;
z-index: 99999;
z-index: 40;
.Scroll.Up,
.Scroll.Down {
padding: $unit 0;
text-align: center;
&:hover svg {
fill: var(--icon-secondary-hover);
}
svg {
fill: var(--icon-secondary);
}
}
.Scroll.Up {

4
components/Select/index.tsx
View file

@ -1,5 +1,6 @@
import React from 'react'
import * as RadixSelect from '@radix-ui/react-select'
import classNames from 'classnames'
import ArrowIcon from '~public/icons/Arrow.svg'
@ -13,6 +14,7 @@ interface Props {
children?: React.ReactNode
onClick?: () => void
onChange?: (value: string) => void
triggerClass?: string
}
const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
@ -22,7 +24,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
return (
<RadixSelect.Root onValueChange={props.onChange}>
<RadixSelect.Trigger
className="SelectTrigger"
className={classNames('SelectTrigger', props.triggerClass)}
placeholder={props.placeholder}
>
<RadixSelect.Value placeholder={props.placeholder} />

2
components/SelectGroup/index.scss
View file

@ -15,7 +15,7 @@
}
.Separator {
background: var(--item-bg-hover);
background: var(--select-separator);
border-radius: 1px;
display: block;
flex-grow: 1;

13
components/SelectItem/index.scss
View file

@ -1,11 +1,22 @@
.SelectItem {
border-radius: $item-corner;
border: 2px solid transparent;
color: var(--text-primary);
font-size: $font-regular;
padding: ($unit * 1.5) $unit-2x;
&:hover {
background-color: var(--item-bg-hover);
background-color: var(--option-bg-hover);
cursor: pointer;
outline: none;
}
&:focus {
border: 2px solid $blue;
outline: none;
}
&:last-child {
margin-bottom: $unit;
}
}

4
components/SignupModal/index.scss
View file

@ -17,7 +17,7 @@
&:not(.btn-disabled) {
background: $grey-90;
color: $grey-40;
color: $grey-50;
&:hover {
background: $grey-80;
@ -26,7 +26,7 @@
}
.terms {
color: $grey-40;
color: $grey-50;
font-size: $font-small;
line-height: 1.2;
margin-top: $unit;

2
components/SummonGrid/index.scss
View file

@ -5,7 +5,7 @@
justify-content: center;
& .Label {
color: $grey-50;
color: $grey-55;
font-size: $font-tiny;
font-weight: $medium;
margin-bottom: $unit;

4
components/WeaponModal/index.scss
View file

@ -10,7 +10,7 @@
gap: calc($unit / 2);
h3 {
color: $grey-50;
color: $grey-55;
font-size: $font-small;
margin-bottom: $unit;
}
@ -33,7 +33,7 @@
&:not(.btn-disabled) {
background: $grey-90;
color: $grey-40;
color: $grey-50;
&:hover {
background: $grey-80;

10
styles/globals.scss
View file

@ -69,7 +69,7 @@ h1,
h2,
h3,
p {
color: $grey-10;
color: $grey-15;
}
h1 {
@ -88,7 +88,7 @@ select {
background-size: $unit * 1.5;
border: none;
border-radius: 6px;
color: $grey-10;
color: $grey-15;
margin-bottom: $unit;
font-size: $font-regular;
padding: 0 ($unit * 2);
@ -156,7 +156,7 @@ select {
gap: $unit;
p {
color: $grey-40;
color: $grey-50;
font-size: $font-small;
line-height: 1.25;
}
@ -175,7 +175,7 @@ select {
}
svg {
fill: $grey-40;
fill: $grey-50;
float: right;
height: 24px;
width: 24px;
@ -194,7 +194,7 @@ select {
gap: calc($unit / 2);
.SubTitle {
color: $grey-50;
color: $grey-55;
font-size: $font-small;
font-weight: $medium;
}

10
styles/themes.scss
View file

@ -12,7 +12,9 @@
--input-bound-bg: #{$input--bound--bg--light};
--input-bound-bg-hover: #{$input--bound--bg--light--hover};
--item-bg-hover: #{$item--bg--light--hover};
--select-bg: #{$select--bg--light};
--select-separator: #{$select--separator--light};
--option-bg-hover: #{$option--bg--light--hover};
--text-primary: #{$text--primary--color--light};
@ -61,14 +63,16 @@
--grid-rep-hover: #{$grid--rep--hover--dark};
--card-bg: #{$page--element--bg--dark};
--bar-bg: #{$grey-00};
--bar-bg: #{$grey-10};
--input-bg: #{$input--bg--dark};
--input-bg-hover: #{$input--bg--dark--hover};
--input-bound-bg: #{$input--bound--bg--dark};
--input-bound-bg-hover: #{$input--bound--bg--dark--hover};
--item-bg-hover: #{$item--bg--dark--hover};
--select-bg: #{$select--bg--dark};
--select-separator: #{$select--separator--dark};
--option-bg-hover: #{$option--bg--dark--hover};
--text-primary: #{$text--primary--color--dark};

62
styles/variables.scss
View file

@ -22,13 +22,15 @@ $unit-12x: $unit * 12;
$unit-20x: $unit * 20;
// Colors
$grey-00: #111;
$grey-10: #191919;
$grey-15: #232323;
$grey-20: #2f2f2f;
$grey-30: #444;
$grey-40: #777;
$grey-50: #888;
$grey-00: #000;
$grey-05: #0a0a0a;
$grey-10: #111;
$grey-15: #191919;
$grey-25: #232323;
$grey-30: #2f2f2f;
$grey-40: #444;
$grey-50: #777;
$grey-55: #888;
$grey-60: #a9a9a9;
$grey-70: #c6c6c6;
$grey-80: #e9e9e9;
@ -103,36 +105,42 @@ $dark-bg-10: #d565fb;
$dark-bg-20: #f2cdff;
$page--bg--light: $grey-90;
$page--bg--dark: $grey-10;
$page--bg--dark: $grey-15;
$page--hover--light: $grey-90;
$page--hover--dark: $grey-20;
$page--hover--dark: $grey-30;
$page--element--bg--light: $grey-70;
$page--element--bg--dark: $grey-30;
$page--element--bg--dark: $grey-40;
// Color Definitions: Input
$input--bg--light: $grey-100;
$input--bg--light--hover: $grey-95;
$input--bg--dark: $grey-20;
$input--bg--dark--hover: $grey-15;
$input--bg--dark: $grey-40;
$input--bg--dark--hover: $grey-30;
$input--bound--bg--light: $grey-90;
$input--bound--bg--light--hover: $grey-80;
$input--bound--bg--dark: $grey-10;
$input--bound--bg--dark--hover: $grey-15;
$input--bound--bg--dark: $grey-15;
$input--bound--bg--dark--hover: $grey-25;
$item--bg--light--hover: $grey-90;
$item--bg--dark--hover: $grey-10;
$select--bg--light: $grey-100;
$select--bg--dark: $grey-10;
$select--separator--light: $grey-90;
$select--separator--dark: $grey-05;
$option--bg--light--hover: $grey-90;
$option--bg--dark--hover: $grey-00;
$grid--rep--hover--light: $grey-100;
$grid--rep--hover--dark: $grey-00;
$grid--rep--hover--dark: $grey-10;
$grid--border--color--light: $grey-80;
$grid--border--color--dark: $grey-30;
$grid--border--color--dark: $grey-40;
$switch--nub--bg--light: $grey-80;
$switch--nub--bg--dark: $grey-20;
$switch--nub--bg--dark: $grey-30;
// Color Definitions: Additional Weapons
$extra--purple--bg--light: $purple-90;
$extra--purple--card--bg--light: $purple-80;
$extra--purple--primary--light: $purple-30;
@ -144,6 +152,7 @@ $extra--purple--primary--dark: $purple-00;
$extra--purple--secondary--dark: $purple-10;
$extra--purple--text--dark: $purple-00;
// Color Definitions: Subaura
$subaura--orange--bg--light: $orange-90;
$subaura--orange--card--bg--light: $orange-80;
$subaura--orange--primary--light: $orange-30;
@ -155,22 +164,25 @@ $subaura--orange--primary--dark: $orange-00;
$subaura--orange--secondary--dark: $orange-10;
$subaura--orange--text--dark: $orange-00;
$text--primary--color--light: $grey-30;
// Color Definitions: Text
$text--primary--color--light: $grey-40;
$text--primary--color--dark: $grey-90;
$text--secondary--color--light: $grey-40;
$text--secondary--hover--light: $grey-30;
$text--secondary--color--dark: $grey-40;
$text--secondary--color--light: $grey-50;
$text--secondary--hover--light: $grey-40;
$text--secondary--color--dark: $grey-50;
$text--secondary--hover--dark: $grey-70;
// Color Definitions: Icon
$icon--secondary--color--light: $grey-70;
$icon--secondary--color--dark: $grey-40;
$icon--secondary--hover--light: $grey-40;
$icon--secondary--color--dark: $grey-50;
$icon--secondary--hover--light: $grey-50;
$icon--secondary--hover--dark: $grey-70;
$text--tertiary--color--light: $grey-60;
$text--tertiary--color--dark: $grey-60;
// Font-weight
$normal: 400;
$medium: 500;
$bold: 600;