settings

src/front/settings/About.tsx

@@ -1,21 +1,6 @@
 import React, { useCallback } from 'react'
-import { shell } from 'electron'
 
-const Link: React.FC<{ text: string; link: string }> = ({ text, link }) => {
-  const fn = useCallback(
-    (e: any) => {
-      e.preventDefault()
-      shell.openExternal(link)
-    },
-    [link]
-  )
-  return (
-    <a onClick={fn} href={link}>
-      {' '}
-      {text}{' '}
-    </a>
-  )
-}
+import Link from './ExternalLink'
 
 const About: React.FC = () => {
   return (

src/front/settings/ExternalLink.tsx

@@ -0,0 +1,20 @@
+import React, { useCallback } from 'react'
+import { shell } from 'electron'
+
+const ExternalLink: React.FC<{ text: string; link: string }> = ({ text, link }) => {
+  const fn = useCallback(
+    (e: any) => {
+      e.preventDefault()
+      shell.openExternal(link)
+    },
+    [link]
+  )
+  return (
+    <a onClick={fn} href={link}>
+      {' '}
+      {text}{' '}
+    </a>
+  )
+}
+
+export default ExternalLink

src/front/settings/Footer.tsx

@@ -1,10 +1,19 @@
 import React from 'react'
 import { version } from '../../../package.json'
 
+import Link from './ExternalLink'
+
 const Footer: React.FC = () => {
   return (
-    <div className="tc mt4 f6 o-40">
-      <span className="code">version: {version}</span>
+    <div className="tc mt4 f6">
+      <div className="flex justify-center items-center">
+        <Link link="https://github.com/cupcakearmy" text="Github" />
+        <div className="ph1"> - </div>
+        <Link link="https://nicco.io/support" text="Support" />
+      </div>
+      <div className="code o-20 mt1">
+        <small>version: {version}</small>
+      </div>
     </div>
   )
 }

src/front/settings/Settings.tsx

@@ -8,7 +8,7 @@ import Field from './Field'
 const Settings = () => {
   return (
     <div>
-      <h3 className="ma0 mb2">Settings</h3>
+      <h3 className="ma0 mv3">Settings</h3>
       <form>
         <fieldset className="ma0 pa0">
           <Field setting="every" />