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/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index 400e0ee7..a7b96335 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; } @@ -42,10 +42,10 @@ .CharacterImage { - aspect-ratio: 131 / 238; + aspect-ratio: 131 / 273; 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/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/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) => { @@ -59,8 +66,16 @@ const HeaderMenu = (props: Props) => { {aboutOpen ? ( ) : null} - {/*
  • props.navigate('guides') }>Guides
    • */} +
    +
  • + Teams +
    • + +
  • + Guides +
    • +
  • Log in
    • {loginOpen ? ( 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/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/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..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,11 +24,24 @@ 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 { return (
    - + void diff --git a/components/Segment/index.scss b/components/Segment/index.scss index 97508893..13de3482 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-10; } & input { - display: none; + display: none; - &:checked + label { - background: $blue; - color: white; - } + &:checked + label { + background: $grey-90; + color: $grey-00; + } } & 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 diff --git a/components/SegmentedControl/index.tsx b/components/SegmentedControl/index.tsx index 8e0ff471..13d9e023 100644 --- a/components/SegmentedControl/index.tsx +++ b/components/SegmentedControl/index.tsx @@ -2,12 +2,14 @@ import React from 'react' import './index.scss' -interface Props {} +interface Props { + elementClass?: string +} -const SegmentedControl: React.FC = ({ children }) => { +const SegmentedControl: React.FC = ({ elementClass, children }) => { return (
    -
    +
    {children}
    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/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/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index 7749be6d..d18f877d 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() @@ -66,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 @@ -94,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() 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') + } } diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index a06bc10e..4e8d01b5 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -2,6 +2,18 @@ display: flex; flex-direction: column; gap: 4px; + min-height: 139px; + + @media (max-width: $medium-screen) { + min-height: auto; + } + + &.editable .WeaponImage:hover { + border: $hover-stroke; + box-shadow: $hover-shadow; + cursor: pointer; + transform: $scale-wide; + } &.mainhand { margin-right: $unit * 3; @@ -54,34 +66,27 @@ 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); - 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; - } - - &.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; - font-weight: 500; - margin: 0; - text-align: center; + &:hover .icon svg { + fill: $grey-10; } img { @@ -92,12 +97,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/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index 6f2ef0c3..396ceeaa 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' @@ -59,7 +59,6 @@ const WeaponUnit = (props: Props) => { {weapon?.name.en} { (props.editable) ? : '' }
    -

    {weapon?.name.en}

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

    {weapon?.name.en}

    ) 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..0ad5f753 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -11,6 +11,7 @@ import type { AppProps } from 'next/app' function MyApp({ Component, pageProps }: AppProps) { const [authenticated, setAuthenticated] = useState(false) const [editable, setEditable] = useState(false) + return ( diff --git a/public/icons/Add.svg b/public/icons/Add.svg new file mode 100644 index 00000000..dad1defe --- /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..29cead04 --- /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..1ccc227c --- /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..3d64a1db --- /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..bd7f6e08 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..a75ffd0a 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 @@ - - - diff --git a/styles/variables.scss b/styles/variables.scss index 57418742..975e57fa 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -11,14 +11,47 @@ $unit: 8px; $grey-00: #444; $grey-10: #777; $grey-50: #888; +$grey-70: #C6C6C6; $grey-80: #E9E9E9; $grey-90: #F5F5F5; +$grey-100:#FAFAFA; $background-color: $grey-90; $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; @@ -33,4 +66,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 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