feat(ui): introduce logo component

ui/src/logos/Logo.tsx

@@ -0,0 +1,24 @@
+import React, { CSSProperties } from 'react'
+
+import keeper from './KeeperLogo.svg'
+import pocket from './PocketLogo.svg'
+import readflow from './ReadflowLogo.svg'
+import wallabag from './WallabagLogo.svg'
+import webhook from './WebhookLogo.svg'
+
+const logos = {
+  keeper,
+  pocket,
+  readflow,
+  wallabag,
+  webhook,
+  generic: webhook,
+}
+
+interface Props {
+  name: 'keeper' | 'pocket' | 'readflow' | 'wallabag' | 'webhook' | 'generic'
+  title?: string
+  style?: CSSProperties
+}
+
+export default ({ name, style, title }: Props) => <img src={logos[name]} alt={name} title={title} style={style} />

ui/src/settings/about/AboutButton.tsx

@@ -6,9 +6,9 @@ import { useModal } from 'react-modal-hook'
 import ButtonIcon from '../../components/ButtonIcon'
 import dialogStyles from '../../components/Dialog.module.css'
 import Panel from '../../components/Panel'
+import Logo from '../../logos/Logo'
 import { VERSION } from '../../constants'
 import styles from './AboutButton.module.css'
-import logo from './logo.svg'
 
 interface Props {
   closeHandler: () => void
@@ -18,7 +18,7 @@ const AboutPanel = ({ closeHandler }: Props) => (
   <Panel className={styles.about}>
     <ButtonIcon title="close" onClick={closeHandler} icon="close" />
     <h1>
-      <img src={logo} alt="logo" />
+      <Logo name="readflow" />
     </h1>
     <span>({VERSION})</span>
     <p>Read your Internet article flow in one place with complete peace of mind and freedom.</p>

ui/src/settings/intergrations/incoming-webhook/IncomingWebhookHelp.tsx

@@ -5,7 +5,7 @@ import Masked from '../../../components/Masked'
 import { IncomingWebhook } from './models'
 import Bookmarklet from './Bookmarklet'
 import HelpLink from '../../../components/HelpLink'
-import WebhookLogo from '../WebhookLogo'
+import Logo from '../../../logos/Logo'
 import HelpSection from '../../HelpSection'
 import QRCodeIncomingWebhookButton from './QRCodeIncomingWebhookButton'
 
@@ -15,7 +15,7 @@ interface Props {
 
 export default ({ data }: Props) => (
   <HelpSection>
-    <WebhookLogo maxWidth="10%" />
+    <Logo name="webhook" style={{ maxWidth: '10%', verticalAlign: 'middle' }} />
     <span>
       Use incoming webhooks to post articles to your Readflow. <br />
       Messages are sent via an HTTP POST request to Readflow integration URL.

ui/src/settings/intergrations/incoming-webhook/IncomingWebhookSection.tsx

@@ -4,7 +4,7 @@ import { Link, useRouteMatch } from 'react-router-dom'
 import Button from '../../../components/Button'
 import { MessageContext } from '../../../context/MessageContext'
 import ErrorPanel from '../../../error/ErrorPanel'
-import WebhookLogo from '../WebhookLogo'
+import Logo from '../../../logos/Logo'
 import DeleteIncomingWebhookButton from './DeleteIncomingWebhookButton'
 import IncomingWebhookList from './IncomingWebhookList'
 
@@ -23,7 +23,7 @@ export default () => {
     <section>
       <header>
         <h2>
-          <WebhookLogo />
+          <Logo name="webhook" style={{ maxWidth: '2em', verticalAlign: 'middle' }} />
           Incoming Webhooks
         </h2>
         <DeleteIncomingWebhookButton

ui/src/settings/intergrations/outgoing-webhook/AddOutgoingWebhookForm.tsx

@@ -14,7 +14,7 @@ import ErrorPanel from '../../../error/ErrorPanel'
 import { getGQLError, isValidForm } from '../../../helpers'
 import { usePageTitle } from '../../../hooks'
 import { updateCacheAfterCreate } from './cache'
-import { CreateOrUpdateOutgoingWebhookResponse, CreateOrUpdateOutgoingWebhookRequest } from './models'
+import { CreateOrUpdateOutgoingWebhookResponse, CreateOrUpdateOutgoingWebhookRequest, Provider } from './models'
 import KeeperConfigForm from './providers/KeeperConfigForm'
 import { CreateOrUpdateOutgoingWebhook } from './queries'
 import WallabagConfigForm from './providers/WallabagConfigForm'
@@ -23,15 +23,15 @@ import PocketConfigForm from './providers/PocketConfigForm'
 
 interface AddOutgoingWebhookFormFields {
   alias: string
-  provider: string
+  provider: Provider
   isDefault: boolean
 }
 
-const getFormStateFromQueryParams = (qs: string) => {
+const getFormStateFromQueryParams = (qs: string): AddOutgoingWebhookFormFields => {
   const params = new URLSearchParams(qs)
   return {
     alias: params.get('alias') || '',
-    provider: params.get('provider') || '',
+    provider: (params.get('provider') as Provider) || '',
     isDefault: false,
   }
 }

ui/src/settings/intergrations/outgoing-webhook/EditOutgoingWebhookForm.tsx

@@ -12,7 +12,12 @@ import FormSelectField from '../../../components/FormSelectField'
 import { MessageContext } from '../../../context/MessageContext'
 import ErrorPanel from '../../../error/ErrorPanel'
 import { getGQLError, isValidForm } from '../../../helpers'
-import { OutgoingWebhook, CreateOrUpdateOutgoingWebhookResponse, CreateOrUpdateOutgoingWebhookRequest } from './models'
+import {
+  OutgoingWebhook,
+  CreateOrUpdateOutgoingWebhookResponse,
+  CreateOrUpdateOutgoingWebhookRequest,
+  Provider,
+} from './models'
 import KeeperConfigForm from './providers/KeeperConfigForm'
 import { CreateOrUpdateOutgoingWebhook } from './queries'
 import WallabagConfigForm from './providers/WallabagConfigForm'
@@ -21,7 +26,7 @@ import PocketConfigForm from './providers/PocketConfigForm'
 
 interface EditOutgoingWebhookFormFields {
   alias: string
-  provider: string
+  provider: Provider
   is_default: boolean
 }
 

ui/src/settings/intergrations/outgoing-webhook/OutgoingWebhookList.tsx

@@ -7,6 +7,7 @@ import DataTable, { OnSelectedFn } from '../../../components/DataTable'
 import Loader from '../../../components/Loader'
 import TimeAgo from '../../../components/TimeAgo'
 import ErrorPanel from '../../../error/ErrorPanel'
+import Logo from '../../../logos/Logo'
 import { GetOutgoingWebhooksResponse, OutgoingWebhook } from './models'
 import { GetOutgoingWebhooks } from './queries'
 import { matchResponse } from '../../../helpers'
@@ -22,7 +23,9 @@ const definition = [
   },
   {
     title: 'Provider',
-    render: (val: OutgoingWebhook) => val.provider,
+    render: (val: OutgoingWebhook) => (
+      <Logo name={val.provider} style={{ maxWidth: '2em' }} title={`${val.provider} provider`} />
+    ),
   },
   {
     title: 'Created',

ui/src/settings/intergrations/outgoing-webhook/OutgoingWebhookSection.tsx

@@ -4,7 +4,7 @@ import { Link, useRouteMatch } from 'react-router-dom'
 import Button from '../../../components/Button'
 import { MessageContext } from '../../../context/MessageContext'
 import ErrorPanel from '../../../error/ErrorPanel'
-import WebhookLogo from '../WebhookLogo'
+import Logo from '../../../logos/Logo'
 import DeleteOutgoingWebhooksButton from './DeleteOutgoingWebhookButton'
 import OutgoingWebhooksList from './OutgoingWebhookList'
 
@@ -23,7 +23,7 @@ export default () => {
     <section>
       <header>
         <h2>
-          <WebhookLogo />
+          <Logo name="webhook" style={{ maxWidth: '2em', verticalAlign: 'middle' }} />
           Outgoing Webhooks
         </h2>
         <DeleteOutgoingWebhooksButton

ui/src/settings/intergrations/outgoing-webhook/models.ts

@@ -1,7 +1,9 @@
+export type Provider = 'keeper' | 'pocket' | 'wallabag' | 'generic'
+
 export interface OutgoingWebhook {
   id: number
   alias: string
-  provider: string
+  provider: Provider
   config: string
   is_default: boolean
   created_at?: string
@@ -19,7 +21,7 @@ export interface GetOutgoingWebhookResponse {
 export interface CreateOrUpdateOutgoingWebhookRequest {
   id?: number
   alias: string
-  provider: string
+  provider: Provider
   config: string
   is_default: boolean
 }