Remove Medium link, add Substack

src/components/appFooter/index.tsx

@@ -3,7 +3,7 @@ import { Box, Text } from "grommet"
 import { Group, Medium, Twitter } from 'grommet-icons'
 import styled, {CSSProperties} from 'styled-components';
 
-import { TelegramIcon, DiscordIcon } from 'src/components/ui/icons'
+import { TelegramIcon, DiscordIcon, SubstackIcon } from 'src/components/ui/icons'
 
 const IconAhchor = styled.a`
   opacity: 0.9;
@@ -26,8 +26,8 @@ export function AppFooter(props: { style: CSSProperties }) {
           <IconAhchor href="https://harmony.one/discord" target="_blank" rel="noreferrer">
             <DiscordIcon size="23px" color="minorText" />
           </IconAhchor>
-          <IconAhchor href="https://medium.com/harmony-one" target="_blank" rel="noreferrer">
-            <Medium size="23px" color="minorText" style={{ cursor: 'pointer'}} />
+          <IconAhchor href="https://substack.com/@harmonyone" target="_blank" rel="noreferrer">
+            <SubstackIcon size="23px" color="minorText" />
           </IconAhchor>
           <IconAhchor href="https://t.me/harmony_one" target="_blank" rel="noreferrer">
             <TelegramIcon size="22px" color="minorText" />

src/components/ui/icons.tsx

@@ -120,3 +120,21 @@ export function GearIcon(props: IIconProps) {
     </svg>
   );
 }
+
+export function SubstackIcon(props: IIconProps) {
+  const theme = React.useContext(ThemeContext);
+  const { size = "24px", color = theme.global.palette.Grey } = props;
+
+  return (
+    <svg
+      role="img"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={theme.global.colors[color] || color}
+    >
+      <title>Substack</title>
+      <path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"/>
+    </svg>
+  );
+}