fix app link in about page

src/components/Modal/contents/DownloadOurAppModal.tsx

@@ -7,37 +7,9 @@ import {
   ModalFlex
 } from './styled'
 import Image from '../../atoms/Image'
-import { getAppLinkFromUserAgent } from '../../../lib/download'
-import { openNew } from '../../../lib/utils/platform'
-import isElectron from 'is-electron'
+import AppLink from '../../atoms/AppLink'
 
 const DownloadOurAppModal = () => {
-  const runningOnElectron = isElectron()
-  const userAgent = getAppLinkFromUserAgent()
-
-  const AppLink = () => {
-    const handleClick = (event: React.MouseEvent) => {
-      event.preventDefault()
-      openNew(
-        runningOnElectron ? 'https://note.boostio.co/app' : userAgent.link
-      )
-    }
-
-    return (
-      <button
-        className='button'
-        disabled={!runningOnElectron && userAgent.link == null}
-        onClick={handleClick}
-      >
-        {runningOnElectron
-          ? 'Open in browser'
-          : `Download ${
-              userAgent.os !== '' ? `for ${userAgent.os}` : 'our app'
-            }`}
-      </button>
-    )
-  }
-
   return (
     <ModalContainer>
       <ModalHeader>Download our apps</ModalHeader>
@@ -48,7 +20,6 @@ const DownloadOurAppModal = () => {
         <ModalFlex>
           <div className='center'>
             <Image src='/app/static/Desktop.svg' />
-            <img src='/app/static/Desktop.svg' />
             <AppLink />
           </div>
           <div className='center'>

src/components/Modal/contents/styled.ts

@@ -29,14 +29,15 @@ export const ModalBody = styled.div`
     line-height: 1;
     text-transform: uppercase;
     color: rgb(255, 255, 255);
-    padding: 16px 32px;
+    padding: 16px 32px !important;
     border-width: initial;
     border-style: none;
     border-color: initial;
     border-image: initial;
     border-radius: 4px;
-    margin: auto;
+    margin: auto !important;
     margin-bottom: 10px;
+    height: auto !important;
 
     &:not(:disabled):hover {
       cursor: pointer;

src/components/PreferencesModal/AboutTab.tsx

@@ -8,6 +8,7 @@ import {
 } from './styled'
 import { openNew } from '../../lib/utils/platform'
 import Image from '../atoms/Image'
+import AppLink from '../atoms/AppLink'
 
 const AboutContents = styled.div`
   max-width: 360px;
@@ -128,6 +129,10 @@ const AboutTab = () => {
               License: GPL v3
             </SectionSubtleText>
           </div>
+          <div className='about-community'>
+            <SectionHeader>Cross-platform</SectionHeader>
+            <AppLink />
+          </div>
           <div className='about-community'>
             <SectionHeader>Community</SectionHeader>
             <div className='about-community-links'>

src/components/atoms/AppLink.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import isElectron from 'is-electron'
+import { getAppLinkFromUserAgent } from '../../lib/download'
+import { openNew } from '../../lib/utils/platform'
+import styled from '../../lib/styled'
+import cc from 'classcat'
+
+const AppLinkContainer = styled.button`
+  display: block;
+  background-color: rgb(3, 197, 136);
+  font-size: 13px;
+  padding: 0 16px;
+  height: 40px;
+  line-height: 1;
+  color: rgb(255, 255, 255);
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial;
+  border-radius: 4px;
+  margin-bottom: 10px;
+
+  &:not(:disabled):hover {
+    cursor: pointer;
+    opacity: 0.8;
+  }
+
+  &.darker {
+    background-color: #d7d7d7;
+    color: #000;
+  }
+
+  .subtext {
+    font-size: 12px;
+  }
+`
+
+interface AppLinkProps {
+  className?: string
+}
+const AppLink = ({ className }: AppLinkProps) => {
+  const runningOnElectron = isElectron()
+  const userAgent = getAppLinkFromUserAgent()
+
+  const handleClick = (event: React.MouseEvent) => {
+    event.preventDefault()
+    openNew(runningOnElectron ? 'https://note.boostio.co/app' : userAgent.link)
+  }
+
+  return (
+    <AppLinkContainer
+      className={cc(['button', className])}
+      disabled={!runningOnElectron && userAgent.link == null}
+      onClick={handleClick}
+    >
+      {runningOnElectron
+        ? 'Open in browser'
+        : `Download ${userAgent.os !== '' ? `for ${userAgent.os}` : 'our app'}`}
+    </AppLinkContainer>
+  )
+}
+
+export default AppLink