tutorial: update Star Icon

This commit is contained in:
Liam Fitzgerald 2021-02-19 14:20:45 +10:00
parent ecad0d8ecd
commit fdc32b24a9
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 29 additions and 1 deletions

View File

@ -13,6 +13,7 @@ import Tile from './components/tiles/tile';
import Groups from './components/Groups';
import ModalButton from './components/ModalButton';
import { StatelessAsyncButton } from '~/views/components/StatelessAsyncButton';
import { StarIcon } from '~/views/components/StarIcon';
import { writeText } from '~/logic/lib/util';
import { useModal } from "~/logic/lib/useModal";
import { NewGroup } from "~/views/landscape/components/NewGroup";
@ -116,7 +117,7 @@ export default function LaunchApp(props) {
return (
<Col maxWidth="350px" gapY="2" p="3">
<Box position="absolute" left="-16px" top="-16px">
<Icon width="32px" height="32px" color="blue" display="block" icon="LargeBullet" />
<StarIcon width="32px" height="32px" color="blue" display="block" />
</Box>
<Text lineHeight="tall" fontWeight="medium">Welcome</Text>
<Text lineHeight="tall">

View File

@ -0,0 +1,27 @@
import React from "react";
import css, { SystemStyleObject } from "@styled-system/css";
import styled from "styled-components";
import { BaseSVG } from "@tlon/indigo-react";
import { PropFunc } from "~/types";
type StarIconProps = PropFunc<typeof BaseSVG> & SvgProps;
interface SvgProps {
color?: string;
}
const Svg = styled(BaseSVG)(({ color }: SvgProps) =>
css({
"& > *": {
fill: typeof color === "undefined" ? "inherit" : color || "black",
},
flexShrink: 0,
} as SystemStyleObject)
);
export function StarIcon(props: StarIconProps) {
return (
<Svg {...props}>
<path d="M9.72024 1.7095c.043-.97631 1.31686-1.317634 1.84226-.49363l1.595 2.50165c.3931.61651 1.2933.61651 1.6864 0l1.595-2.50164c.5254-.824012 1.7993-.482689 1.8423.49362l.1305 2.96401c.0322.73046.8118 1.18056 1.4604.84319l2.6322-1.36896c.867-.45092 1.7995.48159 1.3486 1.3486L22.484 8.12852c-.3374.64867.1127 1.42827.8431 1.46044l2.9641.13054c.9763.04299 1.3176 1.3168.4936 1.8422l-2.5017 1.5951c-.6165.3931-.6165 1.2933 0 1.6863l2.5017 1.5951c.824.5254.4827 1.7992-.4936 1.8422l-2.9641.1306c-.7304.0321-1.1805.8117-.8431 1.4604l1.3689 2.6322c.4509.867-.4816 1.7995-1.3486 1.3486l-2.6322-1.369c-.6486-.3374-1.4282.1127-1.4604.8432l-.1305 2.964c-.043.9763-1.3169 1.3176-1.8423.4936l-1.595-2.5016c-.3931-.6165-1.2933-.6165-1.6864 0l-1.595 2.5016c-.5254.824-1.79926.4827-1.84226-.4936l-.13053-2.964c-.03217-.7305-.81177-1.1806-1.46045-.8432l-2.63218 1.369c-.867.4509-1.79951-.4816-1.3486-1.3486l1.36897-2.6322c.33736-.6487-.11274-1.4283-.84319-1.4604l-2.96402-.1306c-.976304-.043-1.317628-1.3168-.49362-1.8422l2.50165-1.5951c.6165-.393.6165-1.2932 0-1.6863l-2.50165-1.5951c-.824006-.5254-.482684-1.79921.49362-1.8422l2.96402-.13054c.73045-.03217 1.18056-.81177.84319-1.46044L4.14848 5.49634c-.45091-.86701.4816-1.79952 1.3486-1.3486L8.12926 5.5167c.64868.33737 1.42828-.11273 1.46045-.84319l.13053-2.96401z" />
</Svg>
);
}