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

Merge pull request #6 from jedmund/ui-update

Browse source 
UI update
This commit is contained in:
Justin Edmund 2022-02-03 19:51:50 -08:00 committed by GitHub
commit 4b14901847
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 391 additions and 218 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
components/Button/index.scss
View file

@ -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;
}
}
}

9
components/Button/index.tsx
View file

@ -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<Props, State> {
let icon
if (this.props.type === 'new') {
icon = <span className='icon'>
<img alt="" src="/icons/new.svg" />
<AddIcon />
</span>
} else if (this.props.type === 'menu') {
icon = <span className='icon'>
<img alt="" src="/icons/menu.svg" />
<MenuIcon />
</span>
} else if (this.props.type === 'link') {
icon = <span className='icon'>
<img alt="" src="/icons/link.svg" />
<img alt="" src="/icons/Link.svg" />
</span>
}

20
components/CharacterUnit/index.scss
View file

@ -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;
}
}
}

2
components/CharacterUnit/index.tsx
View file

@ -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'

8
components/Header/index.scss
View file

@ -16,12 +16,8 @@
padding-right: 50px;
padding-bottom: 16px;
.Button .icon {
color: #2360C5;
}
.Button .text {
color: #555;
.Button {
background: white;
}
.Menu {

16
components/HeaderMenu/index.scss
View file

@ -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;
}
}
}

31
components/HeaderMenu/index.tsx
View file

@ -30,7 +30,19 @@ const HeaderMenu = (props: Props) => {
<ul className="Menu auth">
<div className="MenuGroup">
<li className="MenuItem">
<Link href={`/${props.username}` || ''}>My Parties</Link>
<Link href={`/${props.username}` || ''}>{props.username}</Link>
</li>
<li className="MenuItem">
<Link href={`/${props.username}/saved` || ''}>Saved</Link>
</li>
</div>
<div className="MenuGroup">
<li className="MenuItem">
<Link href='/teans'>Teams</Link>
</li>
<li className="MenuItem">
<Link href='/guides'>Guides</Link>
</li>
</div>
<div className="MenuGroup">
@ -38,12 +50,7 @@ const HeaderMenu = (props: Props) => {
{aboutOpen ? (
<AboutModal close={closeAboutModal} />
) : null}
<li className="MenuItem">
<Link href='/guides'>Guides</Link>
</li>
</div>
<div className="MenuGroup">
<li className="MenuItem">Settings</li>
<li className="MenuItem" onClick={props.logout}>Logout</li>
</div>
</ul>
@ -59,8 +66,16 @@ const HeaderMenu = (props: Props) => {
{aboutOpen ? (
<AboutModal close={closeAboutModal} />
) : null}
{/* <li className="MenuItem" onClick={ () => props.navigate('guides') }>Guides</li> */}
</div>
<div className="MenuGroup">
<li className="MenuItem">
<Link href='/teans'>Teams</Link>
</li>
<li className="MenuItem">
<Link href='/guides'>Guides</Link>
</li>
</div>
<div className="MenuGroup">
<li className="MenuItem" onClick={openLoginModal}>Log in</li>
{loginOpen ? (

2
components/Modal/index.tsx
View file

@ -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

11
components/Party/index.tsx
View file

@ -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<boolean>(false)
const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
const [element, setElement] = useState<TeamElement>(TeamElement.Any)
// Set states from props
useEffect(() => {
@ -145,8 +150,10 @@ const Party = (props: Props) => {
return (
<div>
{ navigation }
{ currentGrid() }
<PartyContext.Provider value={{ element, setElement }}>
{ navigation }
{ currentGrid() }
</PartyContext.Provider>
</div>
)
}

4
components/PartySegmentedControl/index.scss
View file

@ -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%;

23
components/PartySegmentedControl/index.tsx
View file

@ -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 =
<div className="Extra">
<div className="ExtraSwitch">
Extra
<ToggleSwitch
name="Extra"
name="ExtraSwitch"
editable={props.editable}
checked={props.extra}
onChange={props.onCheckboxChange}
@ -35,7 +50,7 @@ const PartySegmentedControl = (props: Props) => {
return (
<div className="PartyNavigation">
<SegmentedControl>
<SegmentedControl elementClass={getElement()}>
<Segment
groupName="grid"
name="class"

2
components/SearchModal/index.tsx
View file

@ -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

20
components/Segment/index.scss
View file

@ -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;

75
components/SegmentedControl/index.scss
View file

@ -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;
}
}
}

8
components/SegmentedControl/index.tsx
View file

@ -2,12 +2,14 @@ import React from 'react'
import './index.scss'
interface Props {}
interface Props {
elementClass?: string
}
const SegmentedControl: React.FC<Props> = ({ children }) => {
const SegmentedControl: React.FC<Props> = ({ elementClass, children }) => {
return (
<div className="SegmentedControlWrapper">
<div className="SegmentedControl">
<div className={`SegmentedControl ${(elementClass) ? elementClass : ''}`}>
{children}
</div>
</div>

36
components/SummonUnit/index.scss
View file

@ -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;
}

2
components/SummonUnit/index.tsx
View file

@ -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'

9
components/WeaponGrid/index.tsx
View file

@ -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<GridArray<GridWeapon>>({})
const [mainWeapon, setMainWeapon] = useState<GridWeapon>()
@ -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()

144
components/WeaponLabelIcon/index.scss
View file

@ -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')
}
}

49
components/WeaponUnit/index.scss
View file

@ -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;
}
}
}

4
components/WeaponUnit/index.tsx
View file

@ -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) => {
<img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div>
<h3 className="WeaponName">{weapon?.name.en}</h3>
{ (gridWeapon) ?
<UncapIndicator
type="weapon"
@ -70,6 +69,7 @@ const WeaponUnit = (props: Props) => {
special={false}
/> : ''
}
<h3 className="WeaponName">{weapon?.name.en}</h3>
</div>
</div>
)

9
context/PartyContext.tsx Normal file
View file

@ -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

1
pages/_app.tsx
View file

@ -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 (
<CookiesProvider>
<AppContext.Provider value={{ authenticated, setAuthenticated, editable, setEditable }}>

3
public/icons/Add.svg Normal file
View file

@ -0,0 +1,3 @@
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 11.5C6.5 11.7761 6.72386 12 7 12C7.27614 12 7.5 11.7761 7.5 11.5V7H12C12.2761 7 12.5 6.77614 12.5 6.5C12.5 6.22386 12.2761 6 12 6H7.5V1.5C7.5 1.22386 7.27614 1 7 1C6.72386 1 6.5 1.22386 6.5 1.5V6H2C1.72386 6 1.5 6.22386 1.5 6.5C1.5 6.77614 1.72386 7 2 7H6.5V11.5Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 402 B

3
public/icons/Arrow.svg Normal file
View file

@ -0,0 +1,3 @@
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.3121 4.60937C2.09636 4.43701 1.78173 4.47219 1.60937 4.68793C1.43701 4.90368 1.47219 5.2183 1.68793 5.39066L6.68107 9.37966C6.75234 9.4366 6.8344 9.47089 6.91856 9.48351C7.05774 9.51055 7.20746 9.47854 7.32678 9.38296L12.311 5.39025C12.5265 5.21761 12.5613 4.90294 12.3886 4.68742C12.216 4.4719 11.9013 4.43714 11.6858 4.60979L7.00557 8.35897L2.3121 4.60937Z" >
</svg>
Side by side

After

Width:  |  Height:  |  Size: 494 B

3
public/icons/Edit.svg Normal file
View file

@ -0,0 +1,3 @@
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.69823 1.43907C10.2839 0.853644 11.2333 0.853644 11.819 1.43907L12.5565 2.17616C13.1426 2.762 13.1426 3.71217 12.5565 4.29802L4.29188 12.5584C4.0106 12.8395 3.62918 12.9975 3.23149 12.9975H1.5C1.22386 12.9975 1 12.7736 1 12.4975V10.7544C1 10.3564 1.15814 9.9748 1.43961 9.69347L9.69823 1.43907ZM11.1121 2.14636C10.9168 1.95121 10.6004 1.95121 10.4052 2.14636L2.14654 10.4008C2.05271 10.4945 2 10.6217 2 10.7544V11.9975H3.23149C3.36406 11.9975 3.49119 11.9448 3.58495 11.8511L11.8495 3.59073C12.0449 3.39545 12.0449 3.07873 11.8495 2.88344L11.1121 2.14636Z" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 691 B

4
public/icons/Save.svg Normal file
View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.99995 13L1.83012 8.27768C0.419589 6.86715 0.419589 4.58023 1.83012 3.1697C3.24065 1.75917 5.25 1.4375 6.97656 3.16406L7.00586 3.19336" stroke-linecap="round"/>
<path d="M7 13L12.1859 8.1122C13.5876 6.7105 13.5876 4.43788 12.1859 3.03617C10.7842 1.63447 8.56577 1.62954 7.16406 3.03125L7 3.19531" stroke-linecap="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 413 B

6
public/icons/link.svg
View file

@ -1,3 +1,5 @@
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.7507 6.26818C8.36156 6.65811 8.36156 7.26251 8.7507 7.65244C8.94526 7.84741 9.19821 7.9449 9.43169 7.9449C9.66517 7.9449 9.93757 7.84741 10.1127 7.65244L10.7937 6.97006C11.572 6.19019 12 5.17637 12 4.08455C12 2.99274 11.572 1.95942 10.7937 1.19905C9.19821 -0.399682 6.61043 -0.399682 5.01496 1.19905L4.33397 1.88143C3.94483 2.27136 3.94483 2.87576 4.33397 3.26569C4.72311 3.65563 5.32627 3.65563 5.71541 3.26569L6.39641 2.58331C7.23305 1.74495 8.59504 1.74495 9.43169 2.58331C9.84028 2.99274 10.0543 3.51915 10.0543 4.10405C10.0543 4.66945 9.84028 5.21536 9.43169 5.62479L8.7507 6.26818ZM1.20151 10.8107C1.99925 11.6101 3.04992 12 4.08114 12C5.13181 12 6.18249 11.6101 6.96077 10.8107L7.64176 10.1283C8.0309 9.73838 8.0309 9.13398 7.64176 8.74404C7.25262 8.35411 6.64946 8.35411 6.26032 8.74404L5.57933 9.42643C4.74268 10.2648 3.38069 10.2648 2.54404 9.42643C1.70739 8.58807 1.70739 7.2233 2.54404 6.38494L3.22503 5.70255C3.61417 5.31262 3.61417 4.70822 3.22503 4.31829C2.8359 3.92835 2.23273 3.92835 1.84359 4.31829L1.1626 5.00067C-0.393958 6.6189 -0.393958 9.23146 1.20151 10.8107ZM4.21739 6.4046L6.41603 4.20147C6.80517 3.83104 7.40834 3.83104 7.77802 4.20147C8.16716 4.59141 8.16716 5.19581 7.77802 5.58574L5.57938 7.78886C5.40427 7.98383 5.15133 8.08131 4.89839 8.08131C4.6649 8.08131 4.41196 7.98383 4.21739 7.78886C3.82825 7.39893 3.82825 6.79453 4.21739 6.4046Z" />
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="8.25" y1="5.61336" x2="5.95711" y2="7.90625" stroke-linecap="round"/>
<path d="M3.67157 4.67157L2.17157 6.17157C0.60947 7.73367 0.60947 10.2663 2.17157 11.8284C3.73366 13.3905 6.26632 13.3905 7.82842 11.8284L9.28155 10.3753" stroke-linecap="round"/>
<path d="M10.6569 9L12.1569 7.5C13.719 5.9379 13.719 3.40524 12.1569 1.84314C10.5948 0.281046 8.06211 0.281046 6.50001 1.84314L5.04688 3.29627" stroke-linecap="round"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 509 B

4
public/icons/menu.svg
View file

@ -1,3 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H11C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H1C0.447715 2 0 1.55228 0 1ZM0 6C0 5.44772 0.447715 5 1 5H11C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H1C0.447715 7 0 6.55228 0 6ZM1 10C0.447715 10 0 10.4477 0 11C0 11.5523 0.447715 12 1 12H11C11.5523 12 12 11.5523 12 11C12 10.4477 11.5523 10 11 10H1Z" />
<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1.5C1 1.22386 1.22386 1 1.5 1H12.5C12.7761 1 13 1.22386 13 1.5C13 1.77614 12.7761 2 12.5 2H1.5C1.22386 2 1 1.77614 1 1.5ZM1 6.5C1 6.22386 1.22386 6 1.5 6H12.5C12.7761 6 13 6.22386 13 6.5C13 6.77614 12.7761 7 12.5 7H1.5C1.22386 7 1 6.77614 1 6.5ZM1.5 11C1.22386 11 1 11.2239 1 11.5C1 11.7761 1.22386 12 1.5 12H12.5C12.7761 12 13 11.7761 13 11.5C13 11.2239 12.7761 11 12.5 11H1.5Z" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 496 B

After

Width:  |  Height:  |  Size: 515 B

3
public/icons/new.svg
View file

@ -1,3 +0,0 @@
<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 11C5 11.5523 5.44772 12 6 12C6.55228 12 7 11.5523 7 11V7.00006H11C11.5523 7.00006 12 6.55235 12 6.00006C12 5.44778 11.5523 5.00006 11 5.00006H7V1C7 0.447715 6.55228 0 6 0C5.44771 0 5 0.447715 5 1V5.00006H1C0.447715 5.00006 0 5.44778 0 6.00006C0 6.55235 0.447715 7.00006 1 7.00006H5V11Z" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 414 B

3
public/icons/plus.svg
View file

@ -1,3 +0,0 @@
<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3478 7.04348C11.1317 7.04348 10.9565 6.86829 10.9565 6.65217V1.95652C10.9565 0.875969 10.0805 0 8.99998 0C7.91942 0 7.04345 0.875969 7.04345 1.95652V6.65217C7.04345 6.86829 6.86826 7.04348 6.65214 7.04348H1.95653C0.875971 7.04348 0 7.91945 0 9C0 10.0806 0.875971 10.9565 1.95653 10.9565H6.65214C6.86826 10.9565 7.04345 11.1317 7.04345 11.3478V16.0435C7.04345 17.124 7.91942 18 8.99998 18C10.0805 18 10.9565 17.124 10.9565 16.0435V11.3478C10.9565 11.1317 11.1317 10.9565 11.3478 10.9565H16.0435C17.124 10.9565 18 10.0806 18 9C18 7.91945 17.124 7.04348 16.0435 7.04348H11.3478Z" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 700 B

3
public/icons/star.svg
View file

@ -1,3 +0,0 @@
<svg width="14" height="13" viewBox="0 0 14 13" xmlns="http://www.w3.org/2000/svg">
<path d="M6.04894 0.927052C6.3483 0.00574152 7.6517 0.00574078 7.95106 0.927051L8.79611 3.52786C8.92999 3.93989 9.31394 4.21885 9.74717 4.21885H12.4818C13.4505 4.21885 13.8533 5.45846 13.0696 6.02786L10.8572 7.63525C10.5067 7.8899 10.3601 8.34127 10.494 8.75329L11.339 11.3541C11.6384 12.2754 10.5839 13.0415 9.80017 12.4721L7.58779 10.8647C7.2373 10.6101 6.7627 10.6101 6.41221 10.8647L4.19983 12.4721C3.41612 13.0415 2.36164 12.2754 2.66099 11.3541L3.50604 8.75329C3.63992 8.34127 3.49326 7.8899 3.14277 7.63525L0.930391 6.02787C0.146678 5.45846 0.549452 4.21885 1.51818 4.21885H4.25283C4.68606 4.21885 5.07001 3.93989 5.20389 3.52786L6.04894 0.927052Z" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 754 B

39
styles/variables.scss
View file

@ -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);
$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;

9
utils/enums.tsx Normal file
View file

@ -0,0 +1,9 @@
export enum TeamElement {
Any,
Wind,
Fire,
Water,
Earth,
Dark,
Light
}