From fdc32b24a90d05af7f73888843a5fc4b1f86ec03 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Fri, 19 Feb 2021 14:20:45 +1000
Subject: [PATCH] tutorial: update Star Icon

---
 pkg/interface/src/views/apps/launch/app.js    |  3 ++-
 .../src/views/components/StarIcon.tsx         | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 pkg/interface/src/views/components/StarIcon.tsx

diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js
index e94f7cf5c..339500f32 100644
--- a/pkg/interface/src/views/apps/launch/app.js
+++ b/pkg/interface/src/views/apps/launch/app.js
@@ -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">
diff --git a/pkg/interface/src/views/components/StarIcon.tsx b/pkg/interface/src/views/components/StarIcon.tsx
new file mode 100644
index 000000000..6bbd07bff
--- /dev/null
+++ b/pkg/interface/src/views/components/StarIcon.tsx
@@ -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>
+  );
+}