Enhance/table styles

cypress/e2e/organizations/badges.cy.js

@@ -93,13 +93,13 @@ describe('Organization page', () => {
     cy.visit('/organizations/1')
 
     cy.get('[data-cy=org-members-table]')
-      .find('tbody tr:nth-child(6) td:nth-child(3)')
+      .find('tbody tr:nth-child(6) td:nth-child(2)')
       .contains('Badge 002')
     cy.get('[data-cy=org-members-table]')
-      .find('tbody tr:nth-child(6) td:nth-child(3)')
+      .find('tbody tr:nth-child(6) td:nth-child(2)')
       .contains('Badge 003')
     cy.get('[data-cy=org-members-table]')
-      .find('tbody tr:nth-child(10) td:nth-child(3)')
+      .find('tbody tr:nth-child(10) td:nth-child(2)')
       .contains('Badge 005')
   })
 })

src/components/badge.js

@@ -17,7 +17,7 @@ export default function Badge({ color, dot, children }) {
       color={color}
       bg={`rgba(${hexToRgb(color)}, 0.125)`}
       size='sm'
-      borderRadius={'full'}
+      borderRadius={dot ? 'full' : 'sm'}
       boxShadow={`0 0 0 1px rgba(${hexToRgb(color)}, 0.25)`}
       mr={2}
       overflow='hidden'

src/components/external-profile-button.js

@@ -43,7 +43,7 @@ const ExternalProfileButton = ({ type, userId }) => {
       title = 'View profile on OSMCha'
       label = 'OSMCha'
       altText = 'OSMCha Logo'
-      logoImg = 'icon-osmcha-logo.svg'
+      logoImg = 'osmcha-logo.svg'
       break
     default:
       return null
@@ -60,6 +60,7 @@ const ExternalProfileButton = ({ type, userId }) => {
       target='_blank'
       title={title}
       size='sm'
+      bg='white'
       variant='ghost'
     >
       <img

src/components/tables/members-table.js

@@ -4,13 +4,14 @@ import Table from './table'
 import join from 'url-join'
 import { useState } from 'react'
 import {
-  Button,
   Flex,
   Menu,
   MenuButton,
   MenuList,
   MenuItem,
   useToken,
+  Text,
+  IconButton,
 } from '@chakra-ui/react'
 
 import Pagination from '../pagination'
@@ -21,6 +22,9 @@ import ExternalProfileButton from '../external-profile-button'
 import Badge from '../badge'
 import { makeTitleCase } from '../../../app/lib/utils'
 import { includes, map, prop, insert, append, contains } from 'ramda'
+import { IoEllipsisHorizontal } from 'react-icons/io5'
+import { InfoOutlineIcon } from '@chakra-ui/icons'
+
 const SCOREBOARD_URL = process.env.SCOREBOARD_URL
 const HDYC_URL = process.env.HDYC_URL
 const APP_URL = process.env.APP_URL
@@ -100,12 +104,34 @@ function MembersTable({
       key: 'name',
       sortable: true,
       render: (user) => (
-        <Button size='md' variant='link' onClick={() => onUsernameClick(user)}>
-          {user.name}
-        </Button>
+        <Flex flexDir='column'>
+          <Text
+            fontWeight='bold'
+            fontFamily={'body'}
+            as='a'
+            display='flex'
+            gap={1}
+            onClick={() => onUsernameClick(user)}
+            _hover={{ cursor: 'pointer' }}
+            title='Display user profile'
+            data-component-name='username'
+          >
+            {user.name}
+            <InfoOutlineIcon
+              opacity={0}
+              transition='opacity 0.12s ease-in'
+              sx={{
+                '[data-component-name="username"]:hover &': {
+                  opacity: 'initial',
+                },
+              }}
+              alignSelf='center'
+            />
+          </Text>
+          <Text color='blackAlpha.600'>{user.id}</Text>
+        </Flex>
       ),
     },
-    { key: 'id', sortable: true },
     {
       key: 'role',
       label: 'role',
@@ -118,15 +144,34 @@ function MembersTable({
     {
       key: 'External Profiles',
       render: ({ id, name }) => (
-        <Flex>
-          <ExternalProfileButton type='osm-profile' userId={name} />
+        <Flex gap={1} justifyContent='center'>
+          <ExternalProfileButton
+            type='osm-profile'
+            userId={name}
+            title='Visit OSM profile'
+          />
           {SCOREBOARD_URL && (
-            <ExternalProfileButton type='scoreboard' userId={id} />
+            <ExternalProfileButton
+              type='scoreboard'
+              userId={id}
+              title='Visit Scoreboard profile'
+            />
+          )}
+          {HDYC_URL && (
+            <ExternalProfileButton
+              type='hdyc'
+              userId={name}
+              title='Visit HDYC profile'
+            />
           )}
-          {HDYC_URL && <ExternalProfileButton type='hdyc' userId={name} />}
-          <ExternalProfileButton type='osmcha' userId={name} />
+          <ExternalProfileButton
+            type='osmcha'
+            userId={name}
+            title='Visit OSMCha profile'
+          />
         </Flex>
       ),
+      alignment: 'center',
     },
   ]
 
@@ -195,9 +240,14 @@ function MembersTable({
       }
       return (
         <Menu>
-          <MenuButton as={Button} size='sm' variant='outline'>
-            ⋮
-          </MenuButton>
+          <MenuButton
+            as={IconButton}
+            size='sm'
+            variant='ghost'
+            aria-label='User actions menu'
+            title='Display user actions menu'
+            icon={<IoEllipsisHorizontal />}
+          />
           <MenuList>
             {actions.map((action) => {
               return (
@@ -214,6 +264,7 @@ function MembersTable({
         </Menu>
       )
     },
+    alignment: 'center',
   }
 
   if (displayBadges) {

src/components/tables/table.js

@@ -14,7 +14,7 @@ function TableHead({ dataCy, columns, sort, setSort, onClick }) {
   return (
     <Thead>
       <Tr>
-        {columns.map(({ sortable, label, key }) => {
+        {columns.map(({ sortable, label, key, alignment }) => {
           const isSorted = sortable && sort.key === key
           const currentSortDirection = (isSorted && sort.direction) || 'none'
           const nextSortDirection =
@@ -49,7 +49,7 @@ function TableHead({ dataCy, columns, sort, setSort, onClick }) {
               verticalAlign='middle'
               position='relative'
               textTransform='uppercase'
-              textAlign='left'
+              textAlign={alignment ? alignment : 'left'}
               fontFamily='mono'
               fontWeight='base'
               fontSize='sm'
@@ -58,15 +58,21 @@ function TableHead({ dataCy, columns, sort, setSort, onClick }) {
               borderBottom='4px solid var(--chakra-colors-brand-600)'
               cursor={sortable && 'pointer'}
               _hover={sortable && { fontWeight: 'bold', color: 'brand.500' }}
-              _first={[
-                null,
-                {
+              _first={{
+                base: {
                   position: 'sticky',
                   left: '0',
                   zIndex: '2',
+                  background: 'brand.50',
                   borderRight: '2px solid var(--chakra-colors-brand-100)',
                 },
-              ]}
+                md: {
+                  position: 'initial',
+                  left: 'initial',
+                  zIndex: 'initial',
+                  borderRight: 'none',
+                },
+              }}
             >
               {label || key}
               {sortable && sortIcon}
@@ -87,7 +93,7 @@ function Row({ columns, row, index, onRowClick, showRowNumber }) {
       }}
       role='group'
     >
-      {columns.map(({ key, render }) => {
+      {columns.map(({ key, render, alignment }) => {
         let item =
           typeof render === 'function' ? render(row, index, columns) : row[key]
         if (showRowNumber && key === ' ') {
@@ -97,26 +103,31 @@ function Row({ columns, row, index, onRowClick, showRowNumber }) {
           <Td
             width={showRowNumber && key === ' ' && '1rem'}
             padding='0.875rem'
-            borderBottom={1}
-            borderColor='brand.800'
+            boxShadow='inset 0 -1px 0 0 var(--chakra-colors-brand-50)'
             fontSize='0.9rem'
+            textAlign={alignment ? alignment : 'left'}
             _groupHover={
               onRowClick && {
                 cursor: 'pointer',
                 background: 'brand.50',
                 color: 'brand.500',
               }
             }
-            _first={[
-              null,
-              {
+            _first={{
+              base: {
                 position: 'sticky',
                 left: '0',
-                background: 'white',
                 zIndex: '2',
+                bg: 'white',
                 borderRight: '2px solid var(--chakra-colors-brand-100)',
               },
-            ]}
+              md: {
+                position: 'initial',
+                left: 'initial',
+                zIndex: 'initial',
+                borderRight: 'none',
+              },
+            }}
             key={`row-${index}-key-${key}`}
           >
             {item}
@@ -185,11 +196,17 @@ export default function Table({
     >
       <BaseTable
         data-cy={dataCy}
-        borderCollapse={['collapse', 'separate']}
-        borderSpacing='0'
         marginBottom={2}
-        tableLayout='fixed'
-        whiteSpace='pre'
+        layout='fixed'
+        size='sm'
+        width='initial'
+        sx={{
+          base: {
+            borderSpacing: '0',
+            borderCollapse: 'separate',
+          },
+          md: { borderCollapse: 'collapse' },
+        }}
       >
         <TableHead
           dataCy={dataCy}