Use images in 3rd party buttons

Author: LanesGood

public/static/icon-osmcha-logo.svg

@@ -8,8 +8,11 @@ const URL = process.env.APP_URL
 
 const ButtonStyles = css.global`
   .button {
-    display: inline-block;
+    display: inline-flex;
     text-align: center;
+    justify-content: center;
+    align-items: center;
+    gap: 0.25rem;
     white-space: nowrap;
     vertical-align: middle;
     line-height: 1.5rem;
@@ -38,13 +41,29 @@ const ButtonStyles = css.global`
     box-shadow: 0 0;
   }
 
+  /* Button variations
+   ========================================================================== */
+
   .button.primary {
     color: #ffffff;
     background: ${theme.colors.primaryColor};
     border: none;
     box-shadow: 2px 2px #ffffff, 4px 4px ${theme.colors.primaryColor};
   }
 
+  .borderless {
+    border: none;
+    box-shadow: none;
+  }
+  .transparent {
+    background: transparent;
+  }
+  .unstyled {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
   /* Button size modifiers
    ========================================================================== */
 

public/static/neis-one-logo.png

@@ -1,11 +1,14 @@
 import T from 'prop-types'
 import Table from '../../../components/tables/table'
 import { useState } from 'react'
+import join from 'url-join'
+
 import Pagination from '../../../components/pagination'
 import { serverRuntimeConfig } from '../../../../next.config.js'
 import * as R from 'ramda'
 import SearchInput from '../../../components/tables/search-input'
 import Button from '../../../components/button'
+const URL = process.env.APP_URL
 const { DEFAULT_PAGE_SIZE } = serverRuntimeConfig
 
 function MembersTable({ rows: allRows, onRowClick }) {
@@ -21,38 +24,74 @@ function MembersTable({ rows: allRows, onRowClick }) {
     { key: 'id', sortable: true },
     { key: 'role', sortable: true },
     {
-      key: '3rd party',
+      key: 'External Profiles',
       render: ({ name }) => (
         <>
           <Button
             onClick={(e) => {
               e.stopPropagation()
               window.open(
                 `https://www.openstreetmap.org/user/${name}`,
-                '_blank'
+                '_blank',
+                'noreferrer'
               )
             }}
+            flat
+            size='small'
+            className='unstyled small'
+            title='View profile on OSM'
           >
-            OSM Profile
+            <img
+              src={`${join(URL, `/static/osm_logo.png`)}`}
+              alt='OSM Logo'
+              width='16'
+              height='16'
+            />
+            OSM
           </Button>
           <Button
             onClick={(e) => {
               e.stopPropagation()
-              window.open(`https://hdyc.neis-one.org/?${name}`, '_blank')
+              window.open(
+                `https://hdyc.neis-one.org/?${name}`,
+                '_blank',
+                'noreferrer'
+              )
             }}
+            flat
+            size='small'
+            className='unstyled small'
+            title='View profile on HDYC'
           >
+            <img
+              src={`${join(URL, `/static/neis-one-logo.png`)}`}
+              alt='How Do You Contribute Logo'
+              width='16'
+              height='16'
+            />
             HDYC
           </Button>
           <Button
             onClick={(e) => {
               e.stopPropagation()
               window.open(
                 `https://osmcha.org/?filters={"users":[{"label":"${name}","value":"${name}"}]}`,
-                '_blank'
+                '_blank',
+                'noreferrer'
               )
             }}
+            flat
+            size='small'
+            className='unstyled small'
+            title='View profile on OSMCha'
           >
-            OSM Profile
+            <img
+              src={`${join(URL, `/static/icon-osmcha-logo.svg`)}`}
+              alt='OSMCha Logo'
+              width='16'
+              height='16'
+            />
+            OSMCha
           </Button>
         </>
       ),