Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-07 11:46:09 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

tide selector text

Browse Source
This commit is contained in:
Kalle (Sendou)
2020-12-06 21:42:15 +02:00
parent 296e6734bd
commit eff62b021b
3 changed files with 97 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/common/SubText.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { Box } from "@chakra-ui/react";
import { useMyTheme } from "lib/useMyTheme";
interface Props {
children: React.ReactNode;
}
const SubText: React.FC<Props> = ({ children }) => {
const { themeColorShade } = useMyTheme();
return (
<Box
fontSize="xs"
textColor={themeColorShade}
textTransform="uppercase"
letterSpacing="wider"
lineHeight="1rem"
fontWeight="medium"
>
{children}
</Box>
);
};
export default SubText;

110
components/plans/StageSelector.tsx
View File

@@ -1,5 +1,6 @@
import {
Box,
Flex,
HStack,
Image,
Radio,
@@ -9,6 +10,7 @@ import {
import { Trans } from "@lingui/macro";
import { useLingui } from "@lingui/react";
import ModeImage from "components/common/ModeImage";
import SubText from "components/common/SubText";
// @ts-ignore
import salmonRunHighTide from "lib/assets/SalmonRunHighTide.svg";
// @ts-ignore
@@ -46,45 +48,75 @@ const StageSelector: React.FC<StageSelectorProps> = ({
{currentBackground.tide ? (
<>
<HStack my={4} display="flex" justifyContent="center">
<Image
w={8}
h={8}
src={salmonRunLowTide}
cursor="pointer"
style={{
filter:
currentBackground.tide === "low"
? undefined
: "grayscale(100%)",
}}
onClick={() => changeTide("low")}
/>
<Image
w={8}
h={8}
src={salmonRunMidTide}
cursor="pointer"
style={{
filter:
currentBackground.tide === "mid"
? undefined
: "grayscale(100%)",
}}
onClick={() => changeTide("mid")}
/>
<Image
w={8}
h={8}
src={salmonRunHighTide}
cursor="pointer"
style={{
filter:
currentBackground.tide === "high"
? undefined
: "grayscale(100%)",
}}
onClick={() => changeTide("high")}
/>
<Flex flexDir="column" alignItems="center">
<Image
w={8}
h={8}
mb={1}
src={salmonRunLowTide}
cursor="pointer"
style={{
filter:
currentBackground.tide === "low"
? undefined
: "grayscale(100%)",
}}
onClick={() => changeTide("low")}
/>
{currentBackground.tide === "low" ? (
<SubText>
<Trans>Low</Trans>
</SubText>
) : (
<Box h={4} />
)}
</Flex>
<Flex flexDir="column" alignItems="center">
<Image
w={8}
h={8}
mb={1}
src={salmonRunMidTide}
cursor="pointer"
style={{
filter:
currentBackground.tide === "mid"
? undefined
: "grayscale(100%)",
}}
onClick={() => changeTide("mid")}
/>
{currentBackground.tide === "mid" ? (
<SubText>
<Trans>Mid</Trans>
</SubText>
) : (
<Box h={4} />
)}
</Flex>
<Flex flexDir="column" alignItems="center">
<Image
w={8}
h={8}
mb={1}
src={salmonRunHighTide}
cursor="pointer"
style={{
filter:
currentBackground.tide === "high"
? undefined
: "grayscale(100%)",
}}
onClick={() => changeTide("high")}
/>
{currentBackground.tide === "high" ? (
<SubText>
<Trans>High</Trans>
</SubText>
) : (
<Box h={4} />
)}
</Flex>
</HStack>
</>
) : (

12
components/u/AvatarWithInfo.tsx
View File

@@ -10,6 +10,7 @@ import { t, Trans } from "@lingui/macro";
import { LeagueType, RankedMode } from "@prisma/client";
import ModeImage from "components/common/ModeImage";
import MyLink from "components/common/MyLink";
import SubText from "components/common/SubText";
import UserAvatar from "components/common/UserAvatar";
import WeaponImage from "components/common/WeaponImage";
import { getEmojiFlag } from "countries-list";
@@ -169,16 +170,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({
<Fragment key={type}>
<Flex align="center" justify="center" mx={2}>
<Box ml={2} color={gray}>
<Box
fontSize="xs"
textColor={themeColorShade}
textTransform="uppercase"
letterSpacing="wider"
lineHeight="1rem"
fontWeight="medium"
>
{type}
</Box>
<SubText>{type}</SubText>
{peakLeaguePowers[type]}
</Box>
</Flex>