forked from external-repos/LifeTrinket
add support links
This commit is contained in:
Viktor Rådberg
@@ -1,7 +1,7 @@
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import { Player, Rotation } from '../../Types/Player';
|
||||
import { useRef, useState } from 'react';
|
||||
import { OutlinedText } from '../Text/OutlinedText';
|
||||
import { OutlinedText } from '../Misc/OutlinedText';
|
||||
|
||||
const CommanderDamageContainer = styled.div<{
|
||||
rotation: number;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ReactNode, useRef, useState } from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
import { CounterType, Rotation } from '../../Types/Player';
|
||||
import { OutlinedText } from '../Text/OutlinedText';
|
||||
import { OutlinedText } from '../Misc/OutlinedText';
|
||||
|
||||
const ExtraCounterContainer = styled.div`
|
||||
display: flex;
|
||||
|
||||
@@ -6,7 +6,7 @@ import SettingsButton from '../Buttons/SettingsButton';
|
||||
import CommanderDamageBar from '../Counters/CommanderDamageBar';
|
||||
import ExtraCountersBar from '../Counters/ExtraCountersBar';
|
||||
import PlayerMenu from '../PlayerMenu/PlayerMenu';
|
||||
import { OutlinedText } from '../Text/OutlinedText';
|
||||
import { OutlinedText } from '../Misc/OutlinedText';
|
||||
|
||||
const LifeCounterContentWrapper = styled.div<{
|
||||
backgroundColor: string;
|
||||
|
||||
@@ -1,23 +1,65 @@
|
||||
import styled from 'styled-components';
|
||||
import { theme } from '../../Data/theme';
|
||||
import { Paragraph } from './TextComponents';
|
||||
import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
|
||||
import { theme } from '../../Data/theme';
|
||||
import { ButtonBase } from '@mui/material';
|
||||
|
||||
const Footer = styled.div`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
background-color: ${theme.palette.primary.main};
|
||||
const SupportContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 16px;
|
||||
margin: 16px 0;
|
||||
`;
|
||||
|
||||
const SupportButton = styled.button`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: ${theme.palette.primary.main};
|
||||
border-radius: 4px;
|
||||
margin: 0 1rem;
|
||||
padding: 0 1rem;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3);
|
||||
&:hover {
|
||||
background-color: ${theme.palette.primary.dark};
|
||||
}
|
||||
`;
|
||||
|
||||
export const SupportMe = () => {
|
||||
const handleOpenBuyMeCoffee = () => {
|
||||
window.open('https://www.buymeacoffee.com/vikeo');
|
||||
};
|
||||
|
||||
const handleOpenKoFi = () => {
|
||||
window.open('https://ko-fi.com/vikeo');
|
||||
};
|
||||
|
||||
return (
|
||||
<Footer>
|
||||
<Paragraph>Support me</Paragraph>
|
||||
</Footer>
|
||||
<SupportContainer>
|
||||
<SupportButton onClick={handleOpenBuyMeCoffee}>
|
||||
<BuyMeCoffee
|
||||
height={'24px'}
|
||||
width={'24px'}
|
||||
style={{ marginRight: '0.5rem' }}
|
||||
/>
|
||||
<Paragraph>Buy me a tea</Paragraph>
|
||||
</SupportButton>
|
||||
<SupportButton onClick={handleOpenKoFi}>
|
||||
<KoFi
|
||||
height={'24px'}
|
||||
width={'24px'}
|
||||
style={{ marginRight: '0.5rem' }}
|
||||
/>
|
||||
<Paragraph>Buy me a ko-fi</Paragraph>
|
||||
</SupportButton>
|
||||
</SupportContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -206,7 +206,7 @@ const Start = ({
|
||||
Start Game
|
||||
</Button>
|
||||
</FormControl>
|
||||
{/* <SupportMe /> */}
|
||||
<SupportMe />
|
||||
</MainWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@ interface SVGRProps {
|
||||
titleId?: string;
|
||||
size?: string;
|
||||
}
|
||||
const BmcLogo = ({
|
||||
const BuyMeCoffee = ({
|
||||
title,
|
||||
titleId,
|
||||
...props
|
||||
@@ -17,6 +17,7 @@ const BmcLogo = ({
|
||||
width={props.size || 16}
|
||||
height={props.size || 16}
|
||||
fill="none"
|
||||
viewBox="0 0 884 1279"
|
||||
aria-labelledby={titleId}
|
||||
{...props}
|
||||
>
|
||||
@@ -44,7 +45,7 @@ const BmcLogo = ({
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
BmcLogo.propTypes = {
|
||||
BuyMeCoffee.propTypes = {
|
||||
title: PropTypes.string,
|
||||
};
|
||||
export default BmcLogo;
|
||||
export default BuyMeCoffee;
|
||||
36
src/Icons/generated/Support/KoFi.tsx
Normal file
36
src/Icons/generated/Support/KoFi.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import * as React from 'react';
|
||||
import type { SVGProps } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
interface SVGRProps {
|
||||
title?: string;
|
||||
titleId?: string;
|
||||
size?: string;
|
||||
}
|
||||
const KoFi = ({
|
||||
title,
|
||||
titleId,
|
||||
...props
|
||||
}: SVGProps<SVGSVGElement> & SVGRProps) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={props.size || 16}
|
||||
height={props.size || 16}
|
||||
viewBox="0 0 1239 853"
|
||||
aria-labelledby={titleId}
|
||||
{...props}
|
||||
>
|
||||
{title ? <title id={titleId}>{title}</title> : null}
|
||||
<path d="M107.5 53c-25.3 5.3-45.4 25.5-52.6 52.8-2 7.5-2.1 10.6-2.6 149.2-.5 140.1.9 363.3 2.7 402 1.3 29.3 5.6 47.7 16.2 68.3 17.5 34.1 50.2 58.8 91.3 69 21.9 5.5 8.6 5.2 239.5 4.9 251.4-.4 344.2-1.3 354.1-3.6 20.2-4.7 42.5-14.1 58.8-25 38.2-25.4 63.6-70.1 70.7-124.1.9-6.6 1.7-13 2-14.1.3-2 1.2-2.2 11.6-2.8 72.5-4.4 136.5-27.3 188.8-67.6 13.5-10.4 38.9-36.3 49.4-50.2 28-37.6 45-78.9 52.3-127.3 2.7-18.2 2.5-63.7-.5-83.2-8.6-56.9-28.2-104.6-59.2-143.8-9-11.4-30.8-32.7-42.5-41.6-43.6-33.2-86.9-51.6-143.5-61.2l-12.5-2.1-410-.2c-225.5-.1-411.8.2-414 .6zM929 111.5c39.9 4.7 72.9 16.6 106 38.2 16.2 10.7 22.1 15.3 33.9 26.7 33.5 32.6 54.1 75.5 62.6 130.6 2.2 14.3 3.1 46.8 1.6 61.1-5.1 49.5-24.8 92.7-57.6 126.8-39.7 41.3-91.1 65.8-156 74.7-7 .9-23.6 1.9-40 2.3l-28 .6-5.4 3c-10.1 5.6-15.1 14.9-15.1 28 0 12.5-2 32.4-4.5 45.1-9.3 46.3-33 74.7-73.5 87.9l-8.5 2.8-62 .8c-34.1.4-159.2.9-278 1.1l-216 .3-8.8-2.3c-34.2-8.7-54.5-26.9-63.2-56.7-2.1-7.2-2.8-12.5-3.5-26-1.7-31.5-3.2-252.8-2.8-395.5.4-150.5.2-143.4 5.1-148.8l2-2.2h399.6c344.8 0 401.3.2 412.1 1.5z" />
|
||||
<path d="M855.3 184.5c-10.8 3-18 10.3-20.8 21.1-2.3 8.8-2.3 261 0 269.8 3 11.3 11.3 19.4 22.3 21.7 7 1.4 64 .7 78.1-1.1 11.3-1.4 22.7-5.2 38.6-13 44.8-21.9 70.7-55.3 81.3-105 5-22.8 5.5-59.4 1.3-79.1-5.8-26.7-15.8-46.9-33.4-67-21.5-24.6-49.7-40.4-83.2-46.5-13-2.4-76.6-3.1-84.2-.9zM925 242c26.5 3.2 48.2 16.8 62.7 39.2 9.6 14.8 13.3 29.8 13.3 53.7 0 51.6-18.4 82.3-59.5 99.2-7.8 3.2-11.1 4-20.6 4.9-6.3.5-15.6 1-20.6 1H891V241h12.8c7 0 16.6.5 21.2 1z" />
|
||||
<path
|
||||
fill="#FF504F"
|
||||
d="M561.8 245.6c-28.7 5.2-60.3 22.1-83.5 44.7l-6.2 6-9.8-9.4c-20.6-19.7-46.1-33.2-74.3-39.4-11.6-2.5-36.4-3.1-49-1.1-41.8 6.6-73 31-84.8 66.1-6 17.6-7.4 42.4-3.8 63 4.9 27.5 17.3 56.3 32.4 75.3C302 475 359.3 531.2 433 598c37.5 34 35.1 32.4 42 29.3 7.5-3.4 96.9-88.3 144.9-137.7 38.7-39.7 49.3-52.6 59-71.7 11.8-23.2 16.7-44.3 15.8-68.7-.7-22.4-6.3-40.4-17.7-57.1-16.1-23.8-44.3-41.1-75.7-46.6-10.5-1.8-29.2-1.8-39.5.1z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
KoFi.propTypes = {
|
||||
title: PropTypes.string,
|
||||
};
|
||||
export default KoFi;
|
||||
@@ -1 +1,2 @@
|
||||
export { default as BmcLogo } from './BmcLogo';
|
||||
export { default as BuyMeCoffee } from './BuyMeCoffee';
|
||||
export { default as KoFi } from './KoFi';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<svg width="884" height="1279" viewBox="0 0 884 1279" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="20" height="20" viewBox="0 0 884 1279" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M791.109 297.518L790.231 297.002L788.201 296.383C789.018 297.072 790.04 297.472 791.109 297.518V297.518Z" fill="#0D0C22"/>
|
||||
<path d="M803.896 388.891L802.916 389.166L803.896 388.891Z" fill="#0D0C22"/>
|
||||
<path d="M791.484 297.377C791.359 297.361 791.237 297.332 791.118 297.29C791.111 297.371 791.111 297.453 791.118 297.534C791.252 297.516 791.379 297.462 791.484 297.377V297.377Z" fill="#0D0C22"/>
|
||||
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
39
src/Icons/svgs/Support/KoFi.svg
Normal file
39
src/Icons/svgs/Support/KoFi.svg
Normal file
@@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="1239.000000pt" height="853.000000pt" viewBox="0 0 1239.000000 853.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,853.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none"
|
||||
>
|
||||
<path d="M1075 8000 c-253 -53 -454 -255 -526 -528 -20 -75 -21 -106 -26
|
||||
-1492 -5 -1401 9 -3633 27 -4020 13 -293 56 -477 162 -683 175 -341 502 -588
|
||||
913 -690 219 -55 86 -52 2395 -49 2514 4 3442 13 3541 36 202 47 425 141 588
|
||||
250 382 254 636 701 707 1241 9 66 17 130 20 141 3 20 12 22 116 28 725 44
|
||||
1365 273 1888 676 135 104 389 363 494 502 280 376 450 789 523 1273 27 182
|
||||
25 637 -5 832 -86 569 -282 1046 -592 1438 -90 114 -308 327 -425 416 -436
|
||||
332 -869 516 -1435 612 l-125 21 -4100 2 c-2255 1 -4118 -2 -4140 -6z m8215
|
||||
-585 c399 -47 729 -166 1060 -382 162 -107 221 -153 339 -267 335 -326 541
|
||||
-755 626 -1306 22 -143 31 -468 16 -611 -51 -495 -248 -927 -576 -1268 -397
|
||||
-413 -911 -658 -1560 -747 -70 -9 -236 -19 -400 -23 l-280 -6 -54 -30 c-101
|
||||
-56 -151 -149 -151 -280 0 -125 -20 -324 -45 -451 -93 -463 -330 -747 -735
|
||||
-879 l-85 -28 -620 -8 c-341 -4 -1592 -9 -2780 -11 l-2160 -3 -88 23 c-342 87
|
||||
-545 269 -632 567 -21 72 -28 125 -35 260 -17 315 -32 2528 -28 3955 4 1505 2
|
||||
1434 51 1488 l20 22 3996 0 c3448 0 4013 -2 4121 -15z"/>
|
||||
<path d="M8553 6685 c-108 -30 -180 -103 -208 -211 -23 -88 -23 -2610 0 -2698
|
||||
30 -113 113 -194 223 -217 70 -14 640 -7 781 11 113 14 227 52 386 130 448
|
||||
219 707 553 813 1050 50 228 55 594 13 791 -58 267 -158 469 -334 670 -215
|
||||
246 -497 404 -832 465 -130 24 -766 31 -842 9z m697 -575 c265 -32 482 -168
|
||||
627 -392 96 -148 133 -298 133 -537 0 -516 -184 -823 -595 -992 -78 -32 -111
|
||||
-40 -206 -49 -63 -5 -156 -10 -206 -10 l-93 0 0 995 0 995 128 0 c70 0 166 -5
|
||||
212 -10z" />
|
||||
<path d="M5618 6074 c-287 -52 -603 -221 -835 -447 l-62 -60 -98 94 c-206 197
|
||||
-461 332 -743 394 -116 25 -364 31 -490 11 -418 -66 -730 -310 -848 -661 -60
|
||||
-176 -74 -424 -38 -630 49 -275 173 -563 324 -753 192 -242 765 -804 1502
|
||||
-1472 375 -340 351 -324 420 -293 75 34 969 883 1449 1377 387 397 493 526
|
||||
590 717 118 232 167 443 158 687 -7 224 -63 404 -177 571 -161 238 -443 411
|
||||
-757 466 -105 18 -292 18 -395 -1z" fill="#FF504F"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -15,7 +15,8 @@ module.exports = {
|
||||
onlyMatchedOnce: false,
|
||||
},
|
||||
removeDoctype: false,
|
||||
removeViewBox: true,
|
||||
removeViewBox: false,
|
||||
mergePaths: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user