From 2384058674ac4881ef6764b57ac6759b09a9e833 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 00:26:51 -0800 Subject: [PATCH 01/16] Add new icons --- components/CharacterUnit/index.tsx | 2 +- components/Modal/index.tsx | 2 +- components/SearchModal/index.tsx | 2 +- components/SummonUnit/index.tsx | 2 +- components/WeaponUnit/index.tsx | 2 +- public/icons/Add.svg | 3 +++ public/icons/Arrow.svg | 3 +++ public/icons/Edit.svg | 3 +++ public/icons/Save.svg | 4 ++++ public/icons/link.svg | 6 ++++-- public/icons/menu.svg | 4 ++-- public/icons/new.svg | 3 --- public/icons/plus.svg | 3 --- public/icons/star.svg | 3 --- 14 files changed, 24 insertions(+), 18 deletions(-) create mode 100644 public/icons/Add.svg create mode 100644 public/icons/Arrow.svg create mode 100644 public/icons/Edit.svg create mode 100644 public/icons/Save.svg delete mode 100644 public/icons/new.svg delete mode 100755 public/icons/plus.svg delete mode 100644 public/icons/star.svg diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx index dc0600ae..0d07b81c 100644 --- a/components/CharacterUnit/index.tsx +++ b/components/CharacterUnit/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import classnames from 'classnames' import UncapIndicator from '~components/UncapIndicator' -import PlusIcon from '~public/icons/plus.svg' +import PlusIcon from '~public/icons/Add.svg' import './index.scss' diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx index 6922afb9..ad9bcd31 100644 --- a/components/Modal/index.tsx +++ b/components/Modal/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import classnames from 'classnames' import './index.scss' -import PlusIcon from '~public/icons/plus.svg' +import PlusIcon from '~public/icons/Add.svg' interface Props { styleName?: string diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx index 53243315..29181049 100644 --- a/components/SearchModal/index.tsx +++ b/components/SearchModal/index.tsx @@ -10,7 +10,7 @@ import WeaponResult from '~components/WeaponResult' import SummonResult from '~components/SummonResult' import './index.scss' -import PlusIcon from '~public/icons/plus.svg' +import PlusIcon from '~public/icons/Add.svg' interface Props { close: () => void diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx index b303180a..13246573 100644 --- a/components/SummonUnit/index.tsx +++ b/components/SummonUnit/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import classnames from 'classnames' import UncapIndicator from '~components/UncapIndicator' -import PlusIcon from '~public/icons/plus.svg' +import PlusIcon from '~public/icons/Add.svg' import './index.scss' diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index 6f2ef0c3..439ffbf1 100644 --- a/components/WeaponUnit/index.tsx +++ b/components/WeaponUnit/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import classnames from 'classnames' import UncapIndicator from '~components/UncapIndicator' -import PlusIcon from '~public/icons/plus.svg' +import PlusIcon from '~public/icons/Add.svg' import './index.scss' diff --git a/public/icons/Add.svg b/public/icons/Add.svg new file mode 100644 index 00000000..204f7074 --- /dev/null +++ b/public/icons/Add.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/Arrow.svg b/public/icons/Arrow.svg new file mode 100644 index 00000000..837d65f4 --- /dev/null +++ b/public/icons/Arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/Edit.svg b/public/icons/Edit.svg new file mode 100644 index 00000000..93877076 --- /dev/null +++ b/public/icons/Edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/Save.svg b/public/icons/Save.svg new file mode 100644 index 00000000..06490776 --- /dev/null +++ b/public/icons/Save.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/link.svg b/public/icons/link.svg index 1b7ee003..877b1dcd 100644 --- a/public/icons/link.svg +++ b/public/icons/link.svg @@ -1,3 +1,5 @@ - - + + + + diff --git a/public/icons/menu.svg b/public/icons/menu.svg index b79721ec..99d35bb7 100644 --- a/public/icons/menu.svg +++ b/public/icons/menu.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/icons/new.svg b/public/icons/new.svg deleted file mode 100644 index 30ced156..00000000 --- a/public/icons/new.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/icons/plus.svg b/public/icons/plus.svg deleted file mode 100755 index db65f636..00000000 --- a/public/icons/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/icons/star.svg b/public/icons/star.svg deleted file mode 100644 index 699249c5..00000000 --- a/public/icons/star.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From adf450f61275f52534df7bb7d93bca3b6a91be2e Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 00:28:33 -0800 Subject: [PATCH 02/16] Fix WeaponUnit hover bug --- components/WeaponUnit/index.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index a06bc10e..51881421 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -3,6 +3,13 @@ flex-direction: column; gap: 4px; + &.editable .WeaponImage:hover { + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; + cursor: pointer; + transform: $scale-wide; + } + &.mainhand { margin-right: $unit * 3; max-width: 200px; @@ -69,13 +76,6 @@ color: #555; } - &.editable .WeaponImage:hover { - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; - cursor: pointer; - transform: $scale-wide; - } - h3 { color: #333; font-size: $font-regular; From 97fafbd8f14552c1167c9920fcc43802e8e0353a Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 00:31:35 -0800 Subject: [PATCH 03/16] Remove hardcoded color from new icons --- public/icons/Add.svg | 2 +- public/icons/Arrow.svg | 2 +- public/icons/Edit.svg | 2 +- public/icons/Save.svg | 4 ++-- public/icons/link.svg | 6 +++--- public/icons/menu.svg | 2 +- styles/variables.scss | 1 + 7 files changed, 10 insertions(+), 9 deletions(-) diff --git a/public/icons/Add.svg b/public/icons/Add.svg index 204f7074..dad1defe 100644 --- a/public/icons/Add.svg +++ b/public/icons/Add.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/Arrow.svg b/public/icons/Arrow.svg index 837d65f4..29cead04 100644 --- a/public/icons/Arrow.svg +++ b/public/icons/Arrow.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/Edit.svg b/public/icons/Edit.svg index 93877076..1ccc227c 100644 --- a/public/icons/Edit.svg +++ b/public/icons/Edit.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/Save.svg b/public/icons/Save.svg index 06490776..3d64a1db 100644 --- a/public/icons/Save.svg +++ b/public/icons/Save.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/icons/link.svg b/public/icons/link.svg index 877b1dcd..bd7f6e08 100644 --- a/public/icons/link.svg +++ b/public/icons/link.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/public/icons/menu.svg b/public/icons/menu.svg index 99d35bb7..a75ffd0a 100644 --- a/public/icons/menu.svg +++ b/public/icons/menu.svg @@ -1,3 +1,3 @@ - + diff --git a/styles/variables.scss b/styles/variables.scss index 57418742..b31a354c 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -11,6 +11,7 @@ $unit: 8px; $grey-00: #444; $grey-10: #777; $grey-50: #888; +$grey-70: #C6C6C6; $grey-80: #E9E9E9; $grey-90: #F5F5F5; $background-color: $grey-90; From 1344b43beef6c84ca1cfb92bac4f3c3d607d7e33 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 00:42:33 -0800 Subject: [PATCH 04/16] Update size/color of plus icons in grids; replace values with vars --- components/CharacterUnit/index.scss | 18 +++++++-------- components/SummonUnit/index.scss | 36 ++++++++++++++--------------- components/WeaponUnit/index.scss | 22 +++++++++--------- styles/variables.scss | 6 ++++- 4 files changed, 43 insertions(+), 39 deletions(-) diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index 400e0ee7..a71ff388 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -1,12 +1,12 @@ .CharacterUnit { display: flex; flex-direction: column; - gap: 4px; + gap: $unit / 2; max-width: 200px; &.editable .CharacterImage:hover { - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; + border: $hover-stroke; + box-shadow: $hover-shadow; cursor: pointer; transform: $scale-tall; } @@ -45,7 +45,7 @@ aspect-ratio: 131 / 238; background: white; border: 1px solid rgba(0, 0, 0, 0); - border-radius: 8px; + border-radius: $unit; display: flex; align-items: center; justify-content: center; @@ -58,18 +58,18 @@ width: 17vw; } - &:hover .icon { - color: #555; + &:hover .icon svg { + color: $grey-10; } .icon { position: absolute; - height: 20px; - width: 20px; + height: $unit * 3; + width: $unit * 3; z-index: 1; svg { - fill: #c9c9c9; + fill: $grey-70; } } } diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss index 1570cec7..5a42c7fc 100644 --- a/components/SummonUnit/index.scss +++ b/components/SummonUnit/index.scss @@ -39,44 +39,44 @@ margin-right: 0; } + &.main.editable .SummonImage:hover, + &.friend.editable .SummonImage:hover { + transform: $scale-tall; + } + + &.editable .SummonImage:hover { + border: $hover-stroke; + box-shadow: $hover-shadow; + cursor: pointer; + transform: $scale-wide; + } + .SummonImage { background: white; border: 1px solid rgba(0, 0, 0, 0); - border-radius: 8px; + border-radius: $unit; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all 0.18s ease-in-out; - &:hover .icon { - color: #555; + &:hover .icon svg { + fill: $grey-10; } .icon { position: absolute; - height: 20px; - width: 20px; + height: $unit * 3; + width: $unit * 3; z-index: 1; svg { - fill: #c9c9c9; + fill: $grey-70; } } } - &.editable .SummonImage:hover { - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; - cursor: pointer; - transform: $scale-wide; - } - - &.main.editable .SummonImage:hover, - &.friend.editable .SummonImage:hover { - transform: $scale-tall; - } - &.filled h3 { display: block; } diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index 51881421..ea2b8c22 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -4,8 +4,8 @@ gap: 4px; &.editable .WeaponImage:hover { - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; + border: $hover-stroke; + box-shadow: $hover-shadow; cursor: pointer; transform: $scale-wide; } @@ -64,22 +64,22 @@ .WeaponImage { background: white; border: 1px solid rgba(0, 0, 0, 0); - border-radius: 8px; + border-radius: $unit; display: flex; align-items: center; justify-content: center; - margin-bottom: 2px; + margin-bottom: $unit / 4; overflow: hidden; transition: all 0.18s ease-in-out; - &:hover .icon { - color: #555; + &:hover .icon svg { + fill: $grey-10; } h3 { - color: #333; + color: $grey-00; font-size: $font-regular; - font-weight: 500; + font-weight: $medium; margin: 0; text-align: center; } @@ -92,12 +92,12 @@ .icon { position: absolute; - height: 20px; - width: 20px; + height: $unit * 3; + width: $unit * 3; z-index: 1; svg { - fill: #c9c9c9; + fill: $grey-70; } } } diff --git a/styles/variables.scss b/styles/variables.scss index b31a354c..b42d44d4 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -34,4 +34,8 @@ $font-xlarge: 24px; // Scale factors $scale-wide: scale(1.05, 1.05); -$scale-tall: scale(1.012, 1.012); \ No newline at end of file +$scale-tall: scale(1.012, 1.012); + +// Shadows +$hover-stroke: 1px solid rgba(0, 0, 0, 0.1); +$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px; \ No newline at end of file From af3698458d551364f0ccd2dacf877d6fb9efcc53 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 01:00:45 -0800 Subject: [PATCH 05/16] Add element-based color variables --- styles/variables.scss | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/styles/variables.scss b/styles/variables.scss index b42d44d4..46e46b5d 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -20,6 +20,37 @@ $blue: #61B3FF; $red: #FF6161; $error: #D13A3A; +// Colors: Elements +$wind-text-dark: #009961; +$wind-text-light: #1DC688; +$wind-bg-dark: #4CFFBF; +$wind-bg-light: #CDFFED; + +$fire-text-dark: #990000; +$fire-text-light: #EC5C5C; +$fire-bg-dark: #FF4D4D; +$fire-bg-light: #FFCDCD; + +$water-text-dark: #006199; +$water-text-light: #5CB7EC; +$water-bg-dark: #4DBFFF; +$water-bg-light: #CDEDFF; + +$earth-text-dark: #994000; +$earth-text-light: #EC985C; +$earth-bg-dark: #FF974C; +$earth-bg-light: #FFE2CD; + +$light-text-dark: #998A00; +$light-text-light: #C5B20C; +$light-bg-dark: #FFED4C; +$light-bg-light: #FFFACD; + +$dark-text-dark: #8806B7; +$dark-text-light: #C65CEC; +$dark-bg-dark: #D14CFF; +$dark-bg-light: #F2CDFF; + // Font weight $normal: 400; $medium: 500; From 4737b430a16152a618b83369fbca80202886427e Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 01:08:40 -0800 Subject: [PATCH 06/16] Add proper scoping --- components/WeaponLabelIcon/index.scss | 144 +++++++++++++------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/components/WeaponLabelIcon/index.scss b/components/WeaponLabelIcon/index.scss index 231f9b5e..e8351a73 100644 --- a/components/WeaponLabelIcon/index.scss +++ b/components/WeaponLabelIcon/index.scss @@ -3,77 +3,77 @@ background-size: 60px 25px; height: 25px; width: 60px; -} - -/* Elements */ - -.fire { - background-image: url('/labels/element/Label_Element_Fire.png') -} - -.water { - background-image: url('/labels/element/Label_Element_Water.png') -} - -.earth { - background-image: url('/labels/element/Label_Element_Earth.png') -} - -.wind { - background-image: url('/labels/element/Label_Element_Wind.png') -} - -.dark { - background-image: url('/labels/element/Label_Element_Dark.png') -} - -.light { - background-image: url('/labels/element/Label_Element_Light.png') -} - -.null { - background-image: url('/labels/element/Label_Element_Any.png') -} - -/* Proficiencies */ - -.sword { - background-image: url('/labels/proficiency/Label_Weapon_Sabre.png') -} - -.dagger { - background-image: url('/labels/proficiency/Label_Weapon_Dagger.png') -} - -.axe { - background-image: url('/labels/proficiency/Label_Weapon_Axe.png') -} - -.spear { - background-image: url('/labels/proficiency/Label_Weapon_Spear.png') -} - -.staff { - background-image: url('/labels/proficiency/Label_Weapon_Staff.png') -} - -.fist { - background-image: url('/labels/proficiency/Label_Weapon_Melee.png') -} - -.harp { - background-image: url('/labels/proficiency/Label_Weapon_Harp.png') -} - -.gun { - background-image: url('/labels/proficiency/Label_Weapon_Gun.png') -} - -.bow { - background-image: url('/labels/proficiency/Label_Weapon_Bow.png') -} - -.katana { - background-image: url('/labels/proficiency/Label_Weapon_Katana.png') + + /* Elements */ + + &.fire { + background-image: url('/labels/element/Label_Element_Fire.png') + } + + &.water { + background-image: url('/labels/element/Label_Element_Water.png') + } + + &.earth { + background-image: url('/labels/element/Label_Element_Earth.png') + } + + &.wind { + background-image: url('/labels/element/Label_Element_Wind.png') + } + + &.dark { + background-image: url('/labels/element/Label_Element_Dark.png') + } + + &.light { + background-image: url('/labels/element/Label_Element_Light.png') + } + + &.null { + background-image: url('/labels/element/Label_Element_Any.png') + } + + /* Proficiencies */ + + &.sword { + background-image: url('/labels/proficiency/Label_Weapon_Sabre.png') + } + + &.dagger { + background-image: url('/labels/proficiency/Label_Weapon_Dagger.png') + } + + &.axe { + background-image: url('/labels/proficiency/Label_Weapon_Axe.png') + } + + &.spear { + background-image: url('/labels/proficiency/Label_Weapon_Spear.png') + } + + &.staff { + background-image: url('/labels/proficiency/Label_Weapon_Staff.png') + } + + &.fist { + background-image: url('/labels/proficiency/Label_Weapon_Melee.png') + } + + &.harp { + background-image: url('/labels/proficiency/Label_Weapon_Harp.png') + } + + &.gun { + background-image: url('/labels/proficiency/Label_Weapon_Gun.png') + } + + &.bow { + background-image: url('/labels/proficiency/Label_Weapon_Bow.png') + } + + &.katana { + background-image: url('/labels/proficiency/Label_Weapon_Katana.png') + } } From 2277a1eff9bb98814e247c8d34aa8db8db10c88a Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 01:08:55 -0800 Subject: [PATCH 07/16] Redesign and add styles for element-tinted control --- components/Segment/index.scss | 20 +++---- components/SegmentedControl/index.scss | 75 +++++++++++++++++++++++++- 2 files changed, 84 insertions(+), 11 deletions(-) diff --git a/components/Segment/index.scss b/components/Segment/index.scss index 97508893..4cb924dc 100644 --- a/components/Segment/index.scss +++ b/components/Segment/index.scss @@ -1,26 +1,26 @@ .Segment { - border-radius: 4px; - color: $grey-10; + color: $grey-50; cursor: pointer; font-size: 1.4rem; - font-weight: $medium; + font-weight: $normal; min-width: 100px; &:hover label { - background: $grey-90; - color: $grey-00; + background: $grey-90; + color: $grey-00; } & input { - display: none; + display: none; - &:checked + label { - background: $blue; - color: white; - } + &:checked + label { + background: $blue; + color: white; + } } & label { + border-radius: $unit * 3; display: block; text-align: center; white-space: nowrap; diff --git a/components/SegmentedControl/index.scss b/components/SegmentedControl/index.scss index 0416e786..7051099a 100644 --- a/components/SegmentedControl/index.scss +++ b/components/SegmentedControl/index.scss @@ -6,11 +6,84 @@ .SegmentedControl { background: white; - border-radius: $unit; + border-radius: $unit * 3; display: inline-flex; + padding: 3px; position: relative; user-select: none; overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 1; + + &.fire { + .Segment input:checked + label { + background: $fire-bg-dark; + color: $fire-text-dark; + } + + .Segment:hover label { + background: $fire-bg-light; + color: $fire-text-light; + } + } + + &.water { + .Segment input:checked + label { + background: $water-bg-dark; + color: $water-text-dark; + } + + .Segment:hover label { + background: $water-bg-light; + color: $water-text-light; + } + } + + &.earth { + .Segment input:checked + label { + background: $earth-bg-dark; + color: $earth-text-dark; + } + + .Segment:hover label { + background: $earth-bg-light; + color: $earth-text-light; + } + } + + &.wind { + .Segment input:checked + label { + background: $wind-bg-dark; + color: $wind-text-dark; + } + + .Segment:hover label { + background: $wind-bg-light; + color: $wind-text-light; + } + } + + &.light { + .Segment input:checked + label { + background: $light-bg-dark; + color: $light-text-dark; + } + + .Segment:hover label { + background: $light-bg-light; + color: $light-text-light; + } + } + + &.dark { + .Segment input:checked + label { + background: $dark-bg-dark; + color: $dark-text-dark; + } + + .Segment:hover label { + background: $dark-bg-light; + color: $dark-text-light; + } + } } \ No newline at end of file From 9f6cd27bcea949fc78d0b63819adfac6e7abd0d8 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 01:18:18 -0800 Subject: [PATCH 08/16] Update default style for PartySegmentedControl --- components/Segment/index.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Segment/index.scss b/components/Segment/index.scss index 4cb924dc..13de3482 100644 --- a/components/Segment/index.scss +++ b/components/Segment/index.scss @@ -7,15 +7,15 @@ &:hover label { background: $grey-90; - color: $grey-00; + color: $grey-10; } & input { display: none; &:checked + label { - background: $blue; - color: white; + background: $grey-90; + color: $grey-00; } } From 8b1f41b0cd784f8574e6a901bcbcea0fb5540518 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 01:18:40 -0800 Subject: [PATCH 09/16] Resolve naming conflict with ToggleSwitch style --- components/PartySegmentedControl/index.scss | 4 ++-- components/PartySegmentedControl/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/PartySegmentedControl/index.scss b/components/PartySegmentedControl/index.scss index 182dee32..96b9f789 100644 --- a/components/PartySegmentedControl/index.scss +++ b/components/PartySegmentedControl/index.scss @@ -7,10 +7,10 @@ position: relative; } -.Extra { +.ExtraSwitch { color: #888; display: flex; - font-weight: 500; + font-weight: $normal; gap: 8px; line-height: 34px; height: 100%; diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx index 898685ae..3f0698b7 100644 --- a/components/PartySegmentedControl/index.tsx +++ b/components/PartySegmentedControl/index.tsx @@ -23,10 +23,10 @@ interface Props { const PartySegmentedControl = (props: Props) => { const extraToggle = -
+
Extra Date: Thu, 3 Feb 2022 01:58:36 -0800 Subject: [PATCH 10/16] Add support for tinting segmented control with party element --- components/PartySegmentedControl/index.tsx | 19 +++++++++++++++++-- components/SegmentedControl/index.tsx | 8 +++++--- components/WeaponGrid/index.tsx | 11 ++++++++++- context/PartyContext.tsx | 9 +++++++++ pages/_app.tsx | 12 +++++++++--- utils/enums.tsx | 9 +++++++++ 6 files changed, 59 insertions(+), 9 deletions(-) create mode 100644 context/PartyContext.tsx create mode 100644 utils/enums.tsx diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx index 3f0698b7..c9c006c4 100644 --- a/components/PartySegmentedControl/index.tsx +++ b/components/PartySegmentedControl/index.tsx @@ -1,6 +1,8 @@ -import React from 'react' +import React, { useContext } from 'react' import './index.scss' +import PartyContext from '~context/PartyContext' + import SegmentedControl from '~components/SegmentedControl' import Segment from '~components/Segment' import ToggleSwitch from '~components/ToggleSwitch' @@ -22,6 +24,19 @@ interface Props { } const PartySegmentedControl = (props: Props) => { + const { element } = useContext(PartyContext) + + function getElement() { + switch(element) { + case 1: return "wind"; break + case 2: return "fire"; break + case 3: return "water"; break + case 4: return "earth"; break + case 5: return "dark"; break + case 6: return "light"; break + } + } + const extraToggle =
Extra @@ -35,7 +50,7 @@ const PartySegmentedControl = (props: Props) => { return (
- + = ({ children }) => { +const SegmentedControl: React.FC = ({ elementClass, children }) => { return (
-
+
{children}
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index 7749be6d..c1e05f8f 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -1,11 +1,13 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react' import { useCookies } from 'react-cookie' import { useModal as useModal } from '~utils/useModal' import { AxiosResponse } from 'axios' import debounce from 'lodash.debounce' +import PartyContext from '~context/PartyContext' + import SearchModal from '~components/SearchModal' import WeaponUnit from '~components/WeaponUnit' import ExtraWeapons from '~components/ExtraWeapons' @@ -47,6 +49,9 @@ const WeaponGrid = (props: Props) => { // Set up state for party const [partyId, setPartyId] = useState('') + // Set up the party context + const { setElement } = useContext(PartyContext) + // Set up states for Grid data const [weapons, setWeapons] = useState>({}) const [mainWeapon, setMainWeapon] = useState() @@ -76,6 +81,10 @@ const WeaponGrid = (props: Props) => { setPreviousUncapValues(initialPreviousUncapValues) }, [props]) + useEffect(() => { + if (mainWeapon) setElement(mainWeapon.weapon.element) + }, [mainWeapon]) + // Update search grid whenever weapons or the mainhand are updated useEffect(() => { let newSearchGrid = Object.values(weapons).map((o) => o.weapon) diff --git a/context/PartyContext.tsx b/context/PartyContext.tsx new file mode 100644 index 00000000..c0bd324a --- /dev/null +++ b/context/PartyContext.tsx @@ -0,0 +1,9 @@ +import { createContext } from 'react' +import { TeamElement } from '~utils/enums' + +const PartyContext = createContext({ + element: TeamElement.Any, + setElement: (element: TeamElement) => {} +}) + +export default PartyContext \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index f01ddfaa..5bee096a 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,18 +5,24 @@ import { CookiesProvider } from 'react-cookie' import Layout from '~components/Layout' import AppContext from '~context/AppContext' +import PartyContext from '~context/PartyContext' import type { AppProps } from 'next/app' +import { TeamElement } from '~utils/enums' function MyApp({ Component, pageProps }: AppProps) { const [authenticated, setAuthenticated] = useState(false) const [editable, setEditable] = useState(false) + const [element, setElement] = useState(TeamElement.Any) + return ( - - - + + + + + ) diff --git a/utils/enums.tsx b/utils/enums.tsx new file mode 100644 index 00000000..f55ca8d8 --- /dev/null +++ b/utils/enums.tsx @@ -0,0 +1,9 @@ +export enum TeamElement { + Any, + Wind, + Fire, + Water, + Earth, + Dark, + Light +} \ No newline at end of file From 4f5a80bd6bca61d70da7a5f9ead55c905b6196eb Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 19:44:32 -0800 Subject: [PATCH 11/16] Fix proportion of CharacterUnit --- components/CharacterUnit/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index a71ff388..a7b96335 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -42,7 +42,7 @@ .CharacterImage { - aspect-ratio: 131 / 238; + aspect-ratio: 131 / 273; background: white; border: 1px solid rgba(0, 0, 0, 0); border-radius: $unit; From b6153a959c57e77026dd5093eedb40fcda8e6147 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 19:44:55 -0800 Subject: [PATCH 12/16] Change order of uncap indicators and weapon name --- components/WeaponUnit/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index 439ffbf1..396ceeaa 100644 --- a/components/WeaponUnit/index.tsx +++ b/components/WeaponUnit/index.tsx @@ -59,7 +59,6 @@ const WeaponUnit = (props: Props) => { {weapon?.name.en} { (props.editable) ? : '' }
-

{weapon?.name.en}

{ (gridWeapon) ? { special={false} /> : '' } +

{weapon?.name.en}

) From a21a66c8aee7d1e907de32fa6a978e9f08917f47 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 19:46:26 -0800 Subject: [PATCH 13/16] Move PartyContext to Party component --- components/Party/index.tsx | 11 +++++++++-- pages/_app.tsx | 11 +++-------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/components/Party/index.tsx b/components/Party/index.tsx index 99a5ab17..f8c16ecc 100644 --- a/components/Party/index.tsx +++ b/components/Party/index.tsx @@ -1,12 +1,16 @@ import React, { useEffect, useState } from 'react' import { useCookies } from 'react-cookie' +import PartyContext from '~context/PartyContext' + import PartySegmentedControl from '~components/PartySegmentedControl' import WeaponGrid from '~components/WeaponGrid' import SummonGrid from '~components/SummonGrid' import CharacterGrid from '~components/CharacterGrid' import api from '~utils/api' +import { TeamElement } from '~utils/enums' + import './index.scss' // GridType @@ -43,6 +47,7 @@ const Party = (props: Props) => { // Set up states const [extra, setExtra] = useState(false) const [currentTab, setCurrentTab] = useState(GridType.Weapon) + const [element, setElement] = useState(TeamElement.Any) // Set states from props useEffect(() => { @@ -145,8 +150,10 @@ const Party = (props: Props) => { return (
- { navigation } - { currentGrid() } + + { navigation } + { currentGrid() } +
) } diff --git a/pages/_app.tsx b/pages/_app.tsx index 5bee096a..0ad5f753 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,24 +5,19 @@ import { CookiesProvider } from 'react-cookie' import Layout from '~components/Layout' import AppContext from '~context/AppContext' -import PartyContext from '~context/PartyContext' import type { AppProps } from 'next/app' -import { TeamElement } from '~utils/enums' function MyApp({ Component, pageProps }: AppProps) { const [authenticated, setAuthenticated] = useState(false) const [editable, setEditable] = useState(false) - const [element, setElement] = useState(TeamElement.Any) return ( - - - - - + + + ) From 5d275091488b280ef276b2d9d44153b93356e402 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 19:50:06 -0800 Subject: [PATCH 14/16] Update the element when the weapon swaps This is still broken, we have to rewrite some API calls to fix it. --- components/WeaponGrid/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index c1e05f8f..d18f877d 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -71,6 +71,7 @@ const WeaponGrid = (props: Props) => { setPartyId(props.partyId || '') setWeapons(props.weapons || {}) setMainWeapon(props.mainhand) + if (props.mainhand) setElement(props.mainhand.weapon.element) }, [props]) // Initialize an array of current uncap values for each weapon @@ -81,10 +82,6 @@ const WeaponGrid = (props: Props) => { setPreviousUncapValues(initialPreviousUncapValues) }, [props]) - useEffect(() => { - if (mainWeapon) setElement(mainWeapon.weapon.element) - }, [mainWeapon]) - // Update search grid whenever weapons or the mainhand are updated useEffect(() => { let newSearchGrid = Object.values(weapons).map((o) => o.weapon) @@ -103,6 +100,7 @@ const WeaponGrid = (props: Props) => { function receiveWeaponFromSearch(object: Character | Weapon | Summon, position: number) { const weapon = object as Weapon + setElement(weapon.element) if (!partyId) { props.createParty() From 8df60c0e1d3d5f9e96f3922e9b314258ee575073 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 19:50:26 -0800 Subject: [PATCH 15/16] Fix some bugs with SCSS nesting --- components/WeaponUnit/index.scss | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index ea2b8c22..4e8d01b5 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -2,6 +2,11 @@ display: flex; flex-direction: column; gap: 4px; + min-height: 139px; + + @media (max-width: $medium-screen) { + min-height: auto; + } &.editable .WeaponImage:hover { border: $hover-stroke; @@ -61,6 +66,14 @@ display: none; } + h3 { + color: $grey-00; + font-size: $font-button; + font-weight: $normal; + margin: 0; + text-align: center; + } + .WeaponImage { background: white; border: 1px solid rgba(0, 0, 0, 0); @@ -76,14 +89,6 @@ fill: $grey-10; } - h3 { - color: $grey-00; - font-size: $font-regular; - font-weight: $medium; - margin: 0; - text-align: center; - } - img { position: relative; width: 100%; From e605e96fee91410eb32a584add99e14b1959da5d Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 19:50:48 -0800 Subject: [PATCH 16/16] Update buttons and header menu styles --- components/Button/index.scss | 44 ++++++++++++-------------------- components/Button/index.tsx | 9 ++++--- components/Header/index.scss | 8 ++---- components/HeaderMenu/index.scss | 16 ++++++------ components/HeaderMenu/index.tsx | 31 ++++++++++++++++------ styles/variables.scss | 1 + 6 files changed, 56 insertions(+), 53 deletions(-) diff --git a/components/Button/index.scss b/components/Button/index.scss index 6c22d058..818625be 100644 --- a/components/Button/index.scss +++ b/components/Button/index.scss @@ -1,35 +1,32 @@ .Button { align-items: center; + background: transparent; border: none; border-radius: 6px; + color: $grey-50; display: inline-flex; - font-size: 1.4rem; - font-weight: $medium; + font-size: $font-button; + font-weight: $normal; gap: 6px; padding: 8px 12px; &:hover { - color: $grey-00; + background: white; cursor: pointer; + color: $grey-00; - & .icon { - color: #2360C5; + .icon svg { + fill: $grey-50; } } - &.btn-grey { - background: white; - - &:hover { - background: $grey-90; - - .text { - color: $grey-00; - } - } - - .text { - color: $grey-10; + .icon { + margin-top: 2px; + + svg { + fill: $grey-50; + height: 12px; + width: 12px; } } @@ -70,17 +67,8 @@ color: #bababa; } } - - .icon { - height: 12px; - width: 12px; - - svg { - fill: #c9c9c9; - } - } .text { color: inherit; } -} \ No newline at end of file +} diff --git a/components/Button/index.tsx b/components/Button/index.tsx index 19bee2c1..b24b1550 100644 --- a/components/Button/index.tsx +++ b/components/Button/index.tsx @@ -1,6 +1,9 @@ import React from 'react' import classNames from 'classnames' +import AddIcon from '~public/icons/Add.svg' +import MenuIcon from '~public/icons/Menu.svg' + import './index.scss' interface Props { @@ -33,15 +36,15 @@ class Button extends React.Component { let icon if (this.props.type === 'new') { icon = - + } else if (this.props.type === 'menu') { icon = - + } else if (this.props.type === 'link') { icon = - + } diff --git a/components/Header/index.scss b/components/Header/index.scss index 94683bdf..5eb0d7cc 100644 --- a/components/Header/index.scss +++ b/components/Header/index.scss @@ -16,12 +16,8 @@ padding-right: 50px; padding-bottom: 16px; - .Button .icon { - color: #2360C5; - } - - .Button .text { - color: #555; + .Button { + background: white; } .Menu { diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss index 2b6a736d..d7bd21d2 100644 --- a/components/HeaderMenu/index.scss +++ b/components/HeaderMenu/index.scss @@ -2,7 +2,7 @@ background: white; border-radius: 6px; display: none; - min-width: 140px; + min-width: 220px; position: absolute; top: $unit * 5; // This shouldn't be hardcoded. How to calculate it? z-index: 1; @@ -10,21 +10,21 @@ .MenuItem { color: $grey-10; - font-weight: $medium; - padding: 10px; + font-weight: $normal; + padding: 12px; &:hover { - background: $grey-90; + background: $grey-100; color: $grey-00; cursor: pointer; + + a { + color: $grey-00; + } } a { color: $grey-10; - - &:hover { - color: $grey-00; - } } } diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx index 60db0daa..28c84dd8 100644 --- a/components/HeaderMenu/index.tsx +++ b/components/HeaderMenu/index.tsx @@ -30,7 +30,19 @@ const HeaderMenu = (props: Props) => {
  • - My Parties + {props.username} +
    • +
  • + Saved +
    • +
    +
    +
  • + Teams +
    • + +
  • + Guides
    • @@ -38,12 +50,7 @@ const HeaderMenu = (props: Props) => { {aboutOpen ? ( ) : null} - -
  • - Guides -
    • -
    -
    +
  • Settings
  • Logout
@@ -59,8 +66,16 @@ const HeaderMenu = (props: Props) => { {aboutOpen ? ( ) : null} - {/*
  • props.navigate('guides') }>Guides
    • */}
    +
    +
  • + Teams +
    • + +
  • + Guides +
    • +
  • Log in
    • {loginOpen ? ( diff --git a/styles/variables.scss b/styles/variables.scss index 46e46b5d..975e57fa 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -14,6 +14,7 @@ $grey-50: #888; $grey-70: #C6C6C6; $grey-80: #E9E9E9; $grey-90: #F5F5F5; +$grey-100:#FAFAFA; $background-color: $grey-90; $blue: #61B3FF;