feat: add sponsorship (#413)

* feat: set correct inverted state

* feat: add sponsors block to about

web/src/components/modals/AboutModal/AboutModal.tsx

@@ -16,6 +16,7 @@ import { Link } from '@fluentui/react/lib/Link'
 import { ChangeLog } from './ChangeLog'
 import { getContentStyles, getIconButtonStyles } from '~/styles/modal'
 import environment from '~/environment'
+import { SponsorsBlock } from './SponsorsBlock'
 
 const TITLE_ID = 'AboutTitle'
 
@@ -92,10 +93,13 @@ export const AboutModal: React.FC<AboutModalProps> = (props: AboutModalProps) =>
         </div>
         <div className={modalStyles.footer}>
           <div>
-            {/* eslint-disable-next-line react/no-unescaped-entities */}
-            <h3>What's New</h3>
+            <h3>What&apos;s New</h3>
             <ChangeLog />
           </div>
+          <div>
+            <h3>Sponsors</h3>
+            <SponsorsBlock isDark={theme.isInverted} />
+          </div>
           <Stack
             horizontal
             wrap

web/src/components/modals/AboutModal/SponsorsBlock/SponsorsBlock.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { mergeStyles } from '@fluentui/react'
+import gnolandLight from './img/gnoland-light.svg'
+import gnolandDark from './img/gnoland-dark.svg'
+
+interface Props {
+  isDark?: boolean
+}
+
+const imgStyles = mergeStyles({
+  maxWidth: '100%',
+  maxHeight: '32px',
+})
+
+export const SponsorsBlock: React.FC<Props> = ({ isDark }) => (
+  <div>
+    <a href="https://gno.land/?from=goplay-tools" target="_blank" rel="noreferrer">
+      <img className={imgStyles} src={isDark ? gnolandDark : gnolandLight} alt="gno.land" />
+    </a>
+  </div>
+)

web/src/components/modals/AboutModal/SponsorsBlock/index.ts

@@ -0,0 +1 @@
+export * from './SponsorsBlock'

web/src/services/colors.ts

@@ -5,6 +5,7 @@ export const LightTheme: IPartialTheme = {
 }
 
 export const DarkTheme: IPartialTheme = {
+  isInverted: true,
   palette: {
     neutralLighterAlt: '#282828',
     neutralLighter: '#313131',