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}
    + +
    +
    -
    • ) diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss index ce57bae8..ec7de280 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) ($unit * 3); position: sticky; top: 0; @@ -18,19 +21,14 @@ border: none; height: 42px; padding: 0; - - svg { - height: 24px; - width: 24px; - vertical-align: middle; - } } label { 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,15 +38,20 @@ } } } + + #Results { + margin: 0; + max-height: 356px; + padding: 0 ($unit * 1.5); + overflow-y: scroll; + + .WeaponResult:last-child { + margin-bottom: $unit * 1.5; + } + } } -.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 +59,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()) } +     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}
    + +
    +
    -
    • ) 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 ( diff --git a/components/WeaponResult/index.scss b/components/WeaponResult/index.scss index 9a7ff926..223b8546 100644 --- a/components/WeaponResult/index.scss +++ b/components/WeaponResult/index.scss @@ -1,48 +1,63 @@ .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; -.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: $grey-80; + 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}
    + +
    + +
    - -
    • ) 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;