From 0122aa17c3fdb9be52c88a14b2e9e5c2f0f94d78 Mon Sep 17 00:00:00 2001 From: Russell Vinegar Date: Fri, 13 Sep 2024 12:58:23 -0700 Subject: [PATCH 1/2] clickable items in Gateways list --- src/nextapp/pages/manager/gateways/list.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/nextapp/pages/manager/gateways/list.tsx b/src/nextapp/pages/manager/gateways/list.tsx index 6e9389835..d92689d03 100644 --- a/src/nextapp/pages/manager/gateways/list.tsx +++ b/src/nextapp/pages/manager/gateways/list.tsx @@ -17,6 +17,7 @@ import Head from 'next/head'; import { gql } from 'graphql-request'; import { FaPlus, FaLaptopCode, FaRocket, FaServer } from 'react-icons/fa'; import { useQueryClient } from 'react-query'; +import { css } from '@emotion/react'; import PageHeader from '@/components/page-header'; import GridLayout from '@/layouts/grid'; @@ -187,6 +188,14 @@ const MyGatewaysPage: React.FC = () => { } }, [data, search, filter]); + const clickableItemStyle = css` + cursor: pointer; + transition: background-color 0.2s; + &:hover { + background-color: #f0f0f0; + } + `; + return ( <> @@ -289,6 +298,8 @@ const MyGatewaysPage: React.FC = () => { py={2} mb={4} data-testid={`ns-list-item-${namespace.name}`} + onClick={handleNamespaceChange(namespace)} + css={clickableItemStyle} > @@ -298,16 +309,15 @@ const MyGatewaysPage: React.FC = () => { mr={4} boxSize={4} /> - {namespace.displayName} - + {namespace.name} From e27499ac89985272e110f2d8511f1d6b522a803a Mon Sep 17 00:00:00 2001 From: Russell Vinegar Date: Fri, 13 Sep 2024 13:05:18 -0700 Subject: [PATCH 2/2] use inline styles --- src/nextapp/pages/manager/gateways/list.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/nextapp/pages/manager/gateways/list.tsx b/src/nextapp/pages/manager/gateways/list.tsx index d92689d03..64b2f14d4 100644 --- a/src/nextapp/pages/manager/gateways/list.tsx +++ b/src/nextapp/pages/manager/gateways/list.tsx @@ -17,7 +17,6 @@ import Head from 'next/head'; import { gql } from 'graphql-request'; import { FaPlus, FaLaptopCode, FaRocket, FaServer } from 'react-icons/fa'; import { useQueryClient } from 'react-query'; -import { css } from '@emotion/react'; import PageHeader from '@/components/page-header'; import GridLayout from '@/layouts/grid'; @@ -188,14 +187,6 @@ const MyGatewaysPage: React.FC = () => { } }, [data, search, filter]); - const clickableItemStyle = css` - cursor: pointer; - transition: background-color 0.2s; - &:hover { - background-color: #f0f0f0; - } - `; - return ( <> @@ -299,7 +290,9 @@ const MyGatewaysPage: React.FC = () => { mb={4} data-testid={`ns-list-item-${namespace.name}`} onClick={handleNamespaceChange(namespace)} - css={clickableItemStyle} + cursor="pointer" + transition="background-color 0.2s" + _hover={{ backgroundColor: "#f0f0f0" }} >