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

Fix purple color for Dark Mode and ExtraWeapons

Browse source 
Also made 13th slot uneditable for now
This commit is contained in:
Justin Edmund 2022-12-05 21:45:23 -08:00
parent 0f99cd878c
commit 0ea675d18a
8 changed files with 94 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/ExtraWeapons/index.scss
View file

@ -1,5 +1,5 @@
#ExtraGrid {
background: #ecebff;
background: var(--extra-purple-bg);
border-radius: 8px;
box-sizing: border-box;
display: flex;
@ -17,7 +17,7 @@
}
& > span {
color: #4f3c79;
color: var(--extra-purple-text);
display: flex;
align-items: center;
flex-grow: 1;
@ -38,10 +38,10 @@
}
.WeaponUnit .WeaponImage {
background: #d5d3f6;
background: var(--extra-purple-card-bg);
}
.WeaponUnit .WeaponImage .icon svg {
fill: #8f8ac6;
fill: var(--extra-purple-secondary);
}
}

2
components/ExtraWeapons/index.tsx
View file

@ -28,7 +28,7 @@ const ExtraWeapons = (props: Props) => {
return (
<li key={`grid_unit_${i}`}>
<WeaponUnit
editable={props.editable}
editable={i < 2 ? props.editable : false}
position={props.offset + i}
unitType={1}
gridWeapon={props.grid[props.offset + i]}

2
components/PartyDetails/index.scss
View file

@ -2,7 +2,7 @@
display: none; // This breaks transition, find a workaround
opacity: 0;
margin: $unit-4x auto 0;
max-width: $unit * 95;
max-width: $unit * 94;
position: relative;
&.Editable {

4
components/ToggleSwitch/index.scss
View file

@ -47,11 +47,11 @@
}
&-checkbox:checked + &-label {
background: #ecebff;
background: var(--extra-purple-bg);
}
&-checkbox:checked + &-label &-switch {
background: #8c86ff;
background: var(--extra-purple-primary);
}
&-checkbox:checked + &-label {

4
components/WeaponUnit/index.scss
View file

@ -20,6 +20,10 @@
transform: $scale-wide;
}
&.empty {
min-height: auto;
}
&.mainhand {
margin-right: $unit * 3;
max-width: 200px;

1
components/WeaponUnit/index.tsx
View file

@ -39,6 +39,7 @@ const WeaponUnit = (props: Props) => {
grid: props.unitType == 1,
editable: props.editable,
filled: props.gridWeapon !== undefined,
empty: props.gridWeapon == undefined,
})
const gridWeapon = props.gridWeapon

14
styles/themes.scss
View file

@ -26,6 +26,12 @@
--switch-nub: #{$switch--nub--bg--light};
--extra-purple-bg: #{$extra--purple--bg--light};
--extra-purple-card-bg: #{$extra--purple--card--bg--light};
--extra-purple-primary: #{$extra--purple--primary--light};
--extra-purple-secondary: #{$extra--purple--secondary--light};
--extra-purple-text: #{$extra--purple--text--light};
--grid-border-color: #{$grid--border--color--light};
--wind-hover-bg: #{$wind-bg-20};
@ -42,7 +48,7 @@
--light-hover-text: #{$light-text-20};
}
[data-theme="dark"] {
[data-theme='dark'] {
--background: #{$page--bg--dark};
--page-hover: #{$page--hover--dark};
@ -70,6 +76,12 @@
--switch-nub: #{$switch--nub--bg--dark};
--extra-purple-bg: #{$extra--purple--bg--dark};
--extra-purple-card-bg: #{$extra--purple--card--bg--dark};
--extra-purple-primary: #{$extra--purple--primary--dark};
--extra-purple-secondary: #{$extra--purple--secondary--dark};
--extra-purple-text: #{$extra--purple--text--dark};
--grid-border-color: #{$grid--border--color--dark};
--wind-hover-bg: #{$wind-bg-00};

116
styles/variables.scss
View file

@ -36,59 +36,21 @@ $grey-90: #f5f5f5;
$grey-95: #fafafa;
$grey-100: white;
$page--bg--light: $grey-90;
$page--bg--dark: $grey-10;
$page--hover--light: $grey-90;
$page--hover--dark: $grey-20;
$page--element--bg--light: $grey-70;
$page--element--bg--dark: $grey-30;
$input--bg--light: $grey-100;
$input--bg--light--hover: $grey-95;
$input--bg--dark: $grey-20;
$input--bg--dark--hover: $grey-15;
$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;
$item--bg--light--hover: $grey-90;
$item--bg--dark--hover: $grey-10;
$grid--rep--hover--light: $grey-100;
$grid--rep--hover--dark: $grey-00;
$grid--border--color--light: $grey-80;
$grid--border--color--dark: $grey-30;
$switch--nub--bg--light: $grey-80;
$switch--nub--bg--dark: $grey-20;
$text--primary--color--light: $grey-30;
$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--hover--dark: $grey-70;
$icon--secondary--color--light: $grey-70;
$icon--secondary--color--dark: $grey-40;
$icon--secondary--hover--light: $grey-40;
$icon--secondary--hover--dark: $grey-70;
$text--tertiary--color--light: $grey-60;
$text--tertiary--color--dark: $grey-60;
// Purple -- Additional Weapons
$purple-00: #332f7c;
$purple-10: #4f3c79;
$purple-20: #635fb7;
$purple-30: #8c86ff;
$purple-40: #7471c7;
$purple-80: #d5d3f6;
$purple-90: #ecebff;
// Colors -- Interface
$blue: #275dc5;
$red: #ff6161;
$error: #d13a3a;
// Colors: Elements
// Colors -- Elements
$wind-text-00: #023e28;
$wind-text-10: #006a43;
$wind-text-20: #1dc688;
@ -131,6 +93,64 @@ $dark-bg-00: #d565fb55;
$dark-bg-10: #d565fb;
$dark-bg-20: #f2cdff;
$page--bg--light: $grey-90;
$page--bg--dark: $grey-10;
$page--hover--light: $grey-90;
$page--hover--dark: $grey-20;
$page--element--bg--light: $grey-70;
$page--element--bg--dark: $grey-30;
$input--bg--light: $grey-100;
$input--bg--light--hover: $grey-95;
$input--bg--dark: $grey-20;
$input--bg--dark--hover: $grey-15;
$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;
$item--bg--light--hover: $grey-90;
$item--bg--dark--hover: $grey-10;
$grid--rep--hover--light: $grey-100;
$grid--rep--hover--dark: $grey-00;
$grid--border--color--light: $grey-80;
$grid--border--color--dark: $grey-30;
$switch--nub--bg--light: $grey-80;
$switch--nub--bg--dark: $grey-20;
$extra--purple--bg--light: $purple-90;
$extra--purple--card--bg--light: $purple-80;
$extra--purple--primary--light: $purple-30;
$extra--purple--secondary--light: $purple-40;
$extra--purple--text--light: $purple-10;
$extra--purple--bg--dark: $purple-20;
$extra--purple--card--bg--dark: $purple-40;
$extra--purple--primary--dark: $purple-00;
$extra--purple--secondary--dark: $purple-10;
$extra--purple--text--dark: $purple-00;
$text--primary--color--light: $grey-30;
$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--hover--dark: $grey-70;
$icon--secondary--color--light: $grey-70;
$icon--secondary--color--dark: $grey-40;
$icon--secondary--hover--light: $grey-40;
$icon--secondary--hover--dark: $grey-70;
$text--tertiary--color--light: $grey-60;
$text--tertiary--color--dark: $grey-60;
$normal: 400;
$medium: 500;
$bold: 600;