From d66bdc07f66e5080f36e830fd48452785d769d0a Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 17:44:27 -0800 Subject: [PATCH 1/7] Fix SearchModal styling Brings it more in line with other modals --- components/SearchModal/index.scss | 40 +++++++++++------------- components/SearchModal/index.tsx | 52 +++++++++++++++---------------- 2 files changed, 44 insertions(+), 48 deletions(-) diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss index ce57bae8..05809b02 100644 --- a/components/SearchModal/index.scss +++ b/components/SearchModal/index.scss @@ -1,15 +1,18 @@ -.Modal.Search { +.Search.Dialog { display: flex; flex-direction: column; - min-height: 420px; - min-width: 600px; + min-height: 431px; + width: 600px; + gap: 0; padding: 0; - #ModalHeader { - background: $grey-90; - gap: $unit; + #Header { + border-top-left-radius: $unit; + border-top-right-radius: $unit; + display: flex; + gap: $unit * 2.5; margin: 0; - padding: ($unit * 3) ($unit * 3) ($unit * 1.5) ($unit * 3); + padding: ($unit * 3) ($unit * 3) ($unit * 2) ($unit * 3); position: sticky; top: 0; @@ -18,12 +21,6 @@ border: none; height: 42px; padding: 0; - - svg { - height: 24px; - width: 24px; - vertical-align: middle; - } } label { @@ -40,15 +37,16 @@ } } } + + #Results { + margin: 0; + max-height: 330px; + padding: $unit ($unit * 1.5); + overflow-y: scroll; + } } -.Search.Modal #results_container { - margin: 0; - max-height: 330px; - padding: 0 12px 12px 12px; -} - -.Search.Modal #NoResults { +.Search.Dialog #NoResults { display: flex; flex-direction: column; align-items: center; @@ -56,7 +54,7 @@ flex-grow: 1; } -.Search.Modal #NoResults h2 { +.Search.Dialog #NoResults h2 { color: #ccc; font-size: $font-large; font-weight: 500; diff --git a/components/SearchModal/index.tsx b/components/SearchModal/index.tsx index 4d470fc7..1ec39cb2 100644 --- a/components/SearchModal/index.tsx +++ b/components/SearchModal/index.tsx @@ -11,7 +11,7 @@ import WeaponResult from '~components/WeaponResult' import SummonResult from '~components/SummonResult' import './index.scss' -import PlusIcon from '~public/icons/Add.svg' +import CrossIcon from '~public/icons/Cross.svg' interface Props { send: (object: Character | Weapon | Summon, position: number) => any @@ -115,7 +115,7 @@ const SearchModal = (props: Props) => { /> }) - return () + return () } function renderSummonSearchResults(results: { [key: string]: any }) { @@ -127,7 +127,7 @@ const SearchModal = (props: Props) => { /> }) - return () + return () } function renderCharacterSearchResults(results: { [key: string]: any }) { @@ -139,7 +139,7 @@ const SearchModal = (props: Props) => { /> }) - return () + return () } function renderEmptyState() { @@ -172,29 +172,27 @@ const SearchModal = (props: Props) => { {props.children} -
- -
- - - - -
- { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) } - -
+ + + { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) } + From f16c53ed1646c764bd30dab7b4e7a4848fabc303 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 18:16:53 -0800 Subject: [PATCH 2/7] Further SearchModal styling --- components/SearchModal/index.scss | 13 +++++++++---- styles/variables.scss | 1 + 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss index 05809b02..ec7de280 100644 --- a/components/SearchModal/index.scss +++ b/components/SearchModal/index.scss @@ -12,7 +12,7 @@ display: flex; gap: $unit * 2.5; margin: 0; - padding: ($unit * 3) ($unit * 3) ($unit * 2) ($unit * 3); + padding: ($unit * 3) ($unit * 3) ($unit) ($unit * 3); position: sticky; top: 0; @@ -27,7 +27,8 @@ width: 100%; .Input { - border: 1px solid $grey-70; + background: $grey-90; + border: none; border-radius: $unit / 2; box-sizing: border-box; font-size: $font-regular; @@ -40,9 +41,13 @@ #Results { margin: 0; - max-height: 330px; - padding: $unit ($unit * 1.5); + max-height: 356px; + padding: 0 ($unit * 1.5); overflow-y: scroll; + + .WeaponResult:last-child { + margin-bottom: $unit * 1.5; + } } } diff --git a/styles/variables.scss b/styles/variables.scss index 55d0a0ff..3b8264a3 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -63,6 +63,7 @@ $font-tiny: 11px; $font-small: 13px; $font-button: 15px; $font-regular: 16px; +$font-medium: 18px; $font-large: 21px; $font-xlarge: 24px; $font-xxlarge: 28px; From 67bd3e8c73fe306e7c2e2afd67fb1449150ea990 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 18:17:04 -0800 Subject: [PATCH 3/7] Make some props optional for read-only --- components/UncapIndicator/index.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/components/UncapIndicator/index.tsx b/components/UncapIndicator/index.tsx index 5eb58724..56de4114 100644 --- a/components/UncapIndicator/index.tsx +++ b/components/UncapIndicator/index.tsx @@ -6,11 +6,11 @@ import './index.scss' interface Props { type: 'character' | 'weapon' | 'summon' rarity?: number - uncapLevel: number + uncapLevel?: number flb: boolean ulb: boolean special: boolean - updateUncap: (uncap: number) => void + updateUncap?: (uncap: number) => void } const UncapIndicator = (props: Props) => { @@ -52,25 +52,27 @@ const UncapIndicator = (props: Props) => { } function toggleStar(index: number, empty: boolean) { - if (empty) props.updateUncap(index + 1) - else props.updateUncap(index) + if (props.updateUncap) { + if (empty) props.updateUncap(index + 1) + else props.updateUncap(index) + } } const transcendence = (i: number) => { - return = props.uncapLevel} key={`star_${i}`} index={i} onClick={toggleStar} /> + return = props.uncapLevel : false } key={`star_${i}`} index={i} onClick={toggleStar} /> } const ulb = (i: number) => { - return = props.uncapLevel} key={`star_${i}`} index={i} onClick={toggleStar} /> + return = props.uncapLevel : false } key={`star_${i}`} index={i} onClick={toggleStar} /> } const flb = (i: number) => { - return = props.uncapLevel} key={`star_${i}`} index={i} onClick={toggleStar} /> + return = props.uncapLevel : false } key={`star_${i}`} index={i} onClick={toggleStar} /> } const mlb = (i: number) => { // console.log("MLB; Number of stars:", props.uncapLevel) - return = props.uncapLevel} key={`star_${i}`} index={i} onClick={toggleStar} /> + return = props.uncapLevel : false } key={`star_${i}`} index={i} onClick={toggleStar} /> } return ( From 44a92ef1aa909d278c7e114c5a5ac2e19473db3d Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 18:17:30 -0800 Subject: [PATCH 4/7] Update WeaponResult Update styling, add UncapIndicator --- components/WeaponResult/index.scss | 82 ++++++++++++++++++------------ components/WeaponResult/index.tsx | 18 ++++--- 2 files changed, 62 insertions(+), 38 deletions(-) diff --git a/components/WeaponResult/index.scss b/components/WeaponResult/index.scss index 9a7ff926..24b2e392 100644 --- a/components/WeaponResult/index.scss +++ b/components/WeaponResult/index.scss @@ -6,43 +6,61 @@ font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; gap: 8px; padding: 12px; -} -.WeaponResult img { - background: #e9e9e9; - border-radius: 6px; - display: inline-block; - height: 72px; - width: 120px; -} + &:hover { + background: $grey-90; + cursor: pointer; + } -.WeaponResult h5 { - color: #555; - display: inline-block; - font-size: $font-large; - font-weight: 500; - margin: 2px 4px 4px 0; -} + img { + background: #e9e9e9; + border-radius: 6px; + display: inline-block; + height: 72px; + width: 120px; + } -.WeaponResult .WeaponLabelIcon { - margin-right: 4px; -} + .Info { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: $unit / 2; -.WeaponResult .stars { - display: inline-block; - color: #FFA15E; - font-size: $font-xlarge; -} + h5 { + color: #555; + display: inline-block; + font-size: $font-medium; + font-weight: $medium; + } -.WeaponResult .stars > span { - color: #65DAFF; -} + .UncapIndicator { + justify-content: left; + pointer-events: none; + } -.WeaponResult:hover { - background: #e9e9e9; - cursor: pointer; -} + .stars { + display: inline-block; + color: #FFA15E; + font-size: $font-xlarge; -.WeaponResult:hover .image_placeholder { - background: #dadada; + & > span { + color: #65DAFF; + } + } + + .tags { + display: flex; + flex-direction: row; + gap: $unit / 2; + + .WeaponLabelIcon { + $aspect-ratio: calc(25 / 60); + $height: 22px; + background-size: calc($height / $aspect-ratio) $height; + background-repeat: no-repeat; + height: $height; + width: calc($height/ $aspect-ratio); + } + } + } } \ No newline at end of file diff --git a/components/WeaponResult/index.tsx b/components/WeaponResult/index.tsx index f4252292..725b924f 100644 --- a/components/WeaponResult/index.tsx +++ b/components/WeaponResult/index.tsx @@ -1,4 +1,5 @@ import React from 'react' +import UncapIndicator from '~components/UncapIndicator' import WeaponLabelIcon from '~components/WeaponLabelIcon' import './index.scss' @@ -19,13 +20,18 @@ class WeaponResult extends React.Component { return (
  • {weapon.name.en} -
    -
    -
    {weapon.name.en}
    -
    ⭑⭑⭑{(weapon.uncap.flb) ? ⭑ : ''}{(weapon.uncap.ulb) ? ⭑ : ''}
    +
    +
    {weapon.name.en}
    + +
    + +
    - -
    • ) From 57973c39ccd296fc458629a4e3a211bfa9710775 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 18:22:10 -0800 Subject: [PATCH 5/7] Fix SummonResult Fix styles and add UncapIndicator --- components/SummonResult/index.scss | 91 +++++++++++++++++------------- components/SummonResult/index.tsx | 16 ++++-- 2 files changed, 64 insertions(+), 43 deletions(-) diff --git a/components/SummonResult/index.scss b/components/SummonResult/index.scss index d92d790f..edc2dcec 100644 --- a/components/SummonResult/index.scss +++ b/components/SummonResult/index.scss @@ -1,48 +1,63 @@ .SummonResult { - -webkit-font-smoothing: antialiased; - border-radius: 6px; display: flex; - font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; - gap: 8px; - padding: 12px; -} + gap: $unit; + padding: $unit * 1.5; -.SummonResult img { - background: #e9e9e9; - border-radius: 6px; - display: inline-block; - height: auto; - width: 120px; -} + &:hover { + background: $grey-90; + cursor: pointer; + } -.SummonResult h5 { - color: #555; - display: inline-block; - font-size: $font-large; - font-weight: 500; - margin: 2px 4px 4px 0; -} + img { + background: $grey-80; + border-radius: 6px; + display: inline-block; + height: auto; + width: 120px; + } -.SummonResult .WeaponLabelIcon { - margin-right: 4px; -} + .Info { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: $unit / 2; -.SummonResult .stars { - display: inline-block; - color: #FFA15E; - font-size: $font-xlarge; -} + h5 { + color: #555; + display: inline-block; + font-size: $font-medium; + font-weight: $medium; + } -.SummonResult .stars > span { - color: #65DAFF; -} + .UncapIndicator { + justify-content: left; + pointer-events: none; + } -.SummonResult:hover { - background: #e9e9e9; - cursor: pointer; -} + .stars { + display: inline-block; + color: #FFA15E; + font-size: $font-xlarge; -.SummonResult:hover .image_placeholder { - background: #dadada; -} \ No newline at end of file + & > span { + color: #65DAFF; + } + } + + .tags { + display: flex; + flex-direction: row; + gap: $unit / 2; + + .WeaponLabelIcon { + $aspect-ratio: calc(25 / 60); + $height: 22px; + background-size: calc($height / $aspect-ratio) $height; + background-repeat: no-repeat; + height: $height; + width: calc($height/ $aspect-ratio); + } + } + } +} diff --git a/components/SummonResult/index.tsx b/components/SummonResult/index.tsx index 23575fac..2df04f44 100644 --- a/components/SummonResult/index.tsx +++ b/components/SummonResult/index.tsx @@ -1,4 +1,5 @@ import React from 'react' +import UncapIndicator from '~components/UncapIndicator' import WeaponLabelIcon from '~components/WeaponLabelIcon' import './index.scss' @@ -17,12 +18,17 @@ class SummonResult extends React.Component { return (
  • {summon.name.en} -
    -
    -
    {summon.name.en}
    -
    ⭑⭑⭑{(summon.uncap.flb) ? ⭑ : ''}{(summon.uncap.ulb) ? ⭑ : ''}
    +
    +
    {summon.name.en}
    + +
    +
    -
    • ) From 5c1d19aceb5cceaad09f5683686d18a400327fc9 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 18:22:19 -0800 Subject: [PATCH 6/7] Small variable updates --- components/WeaponResult/index.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/components/WeaponResult/index.scss b/components/WeaponResult/index.scss index 24b2e392..223b8546 100644 --- a/components/WeaponResult/index.scss +++ b/components/WeaponResult/index.scss @@ -1,11 +1,8 @@ .WeaponResult { - -webkit-font-smoothing: antialiased; - border-radius: 6px; display: flex; - font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; - gap: 8px; - padding: 12px; + gap: $unit; + padding: $unit * 1.5; &:hover { background: $grey-90; @@ -13,7 +10,7 @@ } img { - background: #e9e9e9; + background: $grey-80; border-radius: 6px; display: inline-block; height: 72px; From 29f20ec33c5afe46d7ab9145d9333d5ce997f597 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 28 Feb 2022 18:24:54 -0800 Subject: [PATCH 7/7] Update CharacterResult same shit --- components/CharacterResult/index.scss | 89 ++++++++++++++++----------- components/CharacterResult/index.tsx | 16 +++-- 2 files changed, 63 insertions(+), 42 deletions(-) diff --git a/components/CharacterResult/index.scss b/components/CharacterResult/index.scss index ba900877..e7540ad0 100644 --- a/components/CharacterResult/index.scss +++ b/components/CharacterResult/index.scss @@ -1,48 +1,63 @@ .CharacterResult { - -webkit-font-smoothing: antialiased; - border-radius: 6px; display: flex; - font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; - gap: 8px; - padding: 12px; -} + gap: $unit; + padding: $unit * 1.5; -.CharacterResult img { - background: #e9e9e9; - border-radius: 6px; - display: inline-block; - height: 72px; - width: 120px; -} + &:hover { + background: $grey-90; + cursor: pointer; + } -.CharacterResult h5 { - color: #555; - display: inline-block; - font-size: $font-large; - font-weight: 500; - margin: 2px 4px 4px 0; -} + img { + background: $grey-80; + border-radius: 6px; + display: inline-block; + height: 72px; + width: 120px; + } -.CharacterResult .WeaponLabelIcon { - margin-right: 4px; -} + .Info { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: $unit / 2; -.CharacterResult .stars { - display: inline-block; - color: #FFA15E; - font-size: $font-xlarge; -} + h5 { + color: #555; + display: inline-block; + font-size: $font-medium; + font-weight: $medium; + } -.CharacterResult .stars > span { - color: #65DAFF; -} + .UncapIndicator { + justify-content: left; + pointer-events: none; + } -.CharacterResult:hover { - background: #e9e9e9; - cursor: pointer; -} + .stars { + display: inline-block; + color: #FFA15E; + font-size: $font-xlarge; -.CharacterResult:hover .image_placeholder { - background: #dadada; + & > span { + color: #65DAFF; + } + } + + .tags { + display: flex; + flex-direction: row; + gap: $unit / 2; + + .WeaponLabelIcon { + $aspect-ratio: calc(25 / 60); + $height: 22px; + background-size: calc($height / $aspect-ratio) $height; + background-repeat: no-repeat; + height: $height; + width: calc($height/ $aspect-ratio); + } + } + } } \ No newline at end of file diff --git a/components/CharacterResult/index.tsx b/components/CharacterResult/index.tsx index df78a20e..183ebe55 100644 --- a/components/CharacterResult/index.tsx +++ b/components/CharacterResult/index.tsx @@ -1,4 +1,5 @@ import React from 'react' +import UncapIndicator from '~components/UncapIndicator' import WeaponLabelIcon from '~components/WeaponLabelIcon' import './index.scss' @@ -17,12 +18,17 @@ class CharacterResult extends React.Component { return (
  • {character.name.en} -
    -
    -
    {character.name.en}
    -
    {(character.rarity == 2) ? '⭑⭑⭑' : '⭑⭑⭑⭑'}{(character.uncap.flb) ? ⭑ : ''}
    +
    +
    {character.name.en}
    + +
    +
    -
    • )