feat: enhance modal dialog

web/src/components/layout/StatusBar/StatusBar.tsx

@@ -121,12 +121,7 @@ const StatusBar: React.FC<Props> = ({ loading, running, lastError, markers }) =>
         </div>
         <div className="StatusBar__side-right">
           <StatusBarItem icon="Feedback" title="Send feedback" href={environment.urls.issue} iconOnly />
-          <StatusBarItem
-            imageSrc="/github-mark-light-32px.png"
-            title="GitHub"
-            href={environment.urls.github}
-            iconOnly
-          />
+          <StatusBarItem icon="VscGithubInverted" title="GitHub" href={environment.urls.github} iconOnly />
         </div>
       </div>
     </>

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

@@ -7,8 +7,6 @@ import {
   FontSizes,
   mergeStyleSets,
   useTheme,
-  Stack,
-  DefaultButton,
 } from '@fluentui/react'
 import { Modal } from '@fluentui/react/lib/Modal'
 import { Link } from '@fluentui/react/lib/Link'
@@ -17,6 +15,7 @@ import { ChangeLog } from './ChangeLog'
 import { getContentStyles, getIconButtonStyles } from '~/styles/modal'
 import environment from '~/environment'
 import { SponsorsBlock } from './SponsorsBlock'
+import { FooterButtons } from './FooterButtons'
 
 const TITLE_ID = 'AboutTitle'
 
@@ -38,7 +37,7 @@ export const AboutModal: React.FC<AboutModalProps> = (props: AboutModalProps) =>
           animationDuration: MotionDurations.duration3,
         },
         main: {
-          maxWidth: '640px',
+          maxWidth: '440px',
         },
         title: {
           fontWeight: FontWeights.semibold,
@@ -100,48 +99,7 @@ export const AboutModal: React.FC<AboutModalProps> = (props: AboutModalProps) =>
             <h3>Sponsors</h3>
             <SponsorsBlock isDark={theme.isInverted} />
           </div>
-          <Stack
-            horizontal
-            wrap
-            horizontalAlign="end"
-            tokens={{
-              childrenGap: 'm',
-            }}
-            style={{
-              marginTop: '1.5rem',
-            }}
-          >
-            <Stack.Item grow={1}>
-              <DefaultButton
-                href={environment.urls.issue}
-                target="_blank"
-                iconProps={{
-                  iconName: 'Bug',
-                }}
-              >
-                Report Bug
-              </DefaultButton>
-            </Stack.Item>
-            <DefaultButton
-              href={environment.urls.github}
-              target="_blank"
-              iconProps={{
-                iconName: 'OpenSource',
-              }}
-            >
-              Source
-            </DefaultButton>
-
-            <DefaultButton
-              href={environment.urls.donate}
-              target="_blank"
-              iconProps={{
-                iconName: 'Heart',
-              }}
-            >
-              Donate
-            </DefaultButton>
-          </Stack>
+          <FooterButtons />
         </div>
       </div>
     </Modal>

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

@@ -1,19 +1,23 @@
 import clsx from 'clsx'
 import React from 'react'
-import { Link } from '@fluentui/react/lib/Link'
+import { Link, mergeStyles } from '@fluentui/react'
 
 import changelog from '~/changelog.json'
 import environment from '~/environment'
 
 interface Props extends Pick<React.HTMLProps<HTMLDivElement>, 'className' | 'style'> {}
 
+const listStyles = mergeStyles({
+  paddingLeft: '1rem',
+})
+
 export const ChangeLog: React.FC<Props> = ({ className, ...props }) => {
   return (
     <div className={clsx('ChangeLog', className)} {...props}>
       {Object.entries(changelog).map(([section, items]) => (
         <div key={section}>
           <b>{section}</b>
-          <ul>
+          <ul className={listStyles}>
             {items.map(({ issueId, url, description }) => (
               <li key={issueId}>
                 <Link href={`${environment.urls.github}/${url}`} target="_blank">
@@ -26,8 +30,8 @@ export const ChangeLog: React.FC<Props> = ({ className, ...props }) => {
         </div>
       ))}
       <p>
-        Full release notes are available{' '}
-        <Link href={`${environment.urls.github}/releases/latest`} target="_blank">
+        <span>Full release notes are available </span>
+        <Link href={`${environment.urls.github}/releases/tag/${environment.appVersion}`} target="_blank">
           here
         </Link>
       </p>

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

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import { Stack, DefaultButton, mergeStyleSets } from '@fluentui/react'
+
+import environment from '~/environment'
+
+const styles = mergeStyleSets({
+  root: {
+    marginTop: '1.5rem',
+  },
+  inner: {
+    '@media (max-width: 480px)': {
+      flexDirection: 'column',
+    },
+  },
+  button: {
+    display: 'block',
+  },
+})
+
+export const FooterButtons: React.FC = () => (
+  <Stack
+    horizontal
+    wrap
+    grow={1}
+    styles={styles}
+    horizontalAlign="space-evenly"
+    tokens={{
+      childrenGap: 'm',
+    }}
+  >
+    <Stack.Item grow={1}>
+      <DefaultButton
+        className={styles.button}
+        href={environment.urls.issue}
+        target="_blank"
+        iconProps={{
+          iconName: 'Bug',
+        }}
+      >
+        Report Bug
+      </DefaultButton>
+    </Stack.Item>
+    <Stack.Item grow={1}>
+      <DefaultButton
+        className={styles.button}
+        href={environment.urls.github}
+        target="_blank"
+        iconProps={{
+          iconName: 'VscGithubInverted',
+        }}
+      >
+        Source
+      </DefaultButton>
+    </Stack.Item>
+
+    <Stack.Item grow={1}>
+      <DefaultButton
+        className={styles.button}
+        href={environment.urls.donate}
+        target="_blank"
+        iconProps={{
+          iconName: 'Heart',
+        }}
+      >
+        Donate
+      </DefaultButton>
+    </Stack.Item>
+  </Stack>
+)

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

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

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

@@ -1,21 +1,35 @@
 import React from 'react'
-import { mergeStyles } from '@fluentui/react'
+import { mergeStyleSets, type IStackProps, Stack } 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',
+const styles = mergeStyleSets({
+  image: {
+    width: '192px',
+    maxHeight: '32px',
+  },
+  text: {
+    fontSize: '0.75rem',
+  },
 })
 
+const tokens: IStackProps['tokens'] = {
+  childrenGap: '1rem',
+}
+
 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>
+  <Stack horizontal tokens={tokens} verticalAlign="center">
+    <Stack.Item className={styles.image}>
+      <a href="https://gno.land/?from=goplay-tools" target="_blank" rel="noreferrer">
+        <img src={isDark ? gnolandDark : gnolandLight} alt="gno.land" />
+      </a>
+    </Stack.Item>
+    <Stack.Item className={styles.text}>
+      gno.land, an open-source smart contract platform powered by Gno, a deterministic variant of Go.
+    </Stack.Item>
+  </Stack>
 )

web/src/icons.tsx

@@ -2,7 +2,15 @@ import React from 'react'
 import { initializeIcons as initFluentIcons } from '@fluentui/react/lib/Icons'
 import { registerIcons } from '@fluentui/react/lib/Styling'
 import { SiWebassembly, SiAzurefunctions } from 'react-icons/si'
-import { VscSymbolClass, VscSymbolMisc, VscBracketError, VscSymbolParameter, VscRegex, VscPulse } from 'react-icons/vsc'
+import {
+  VscSymbolClass,
+  VscSymbolMisc,
+  VscBracketError,
+  VscSymbolParameter,
+  VscRegex,
+  VscPulse,
+  VscGithubInverted,
+} from 'react-icons/vsc'
 import { BsFillDice3Fill } from 'react-icons/bs'
 
 export const initializeIcons = () => {
@@ -18,6 +26,7 @@ export const initializeIcons = () => {
       VscRegex: <VscRegex />,
       VscSymbolMisc: <VscSymbolMisc />,
       VscPulse: <VscPulse />,
+      VscGithubInverted: <VscGithubInverted />,
     },
   })
 }