Make clickable elements have pointer as cursor

Author: Huulivoide

ui/src/components/common/search/SearchBar/SearchQueryFilter.tsx

@@ -46,7 +46,7 @@ export const SearchQueryFilter = <FormState extends FieldValues>({
         />
 
         <button
-          className="icon-search w-(--input-height) rounded-r bg-tweaked-brand text-2xl text-white"
+          className="icon-search w-(--input-height) cursor-pointer rounded-r bg-tweaked-brand text-2xl text-white"
           type="submit"
           aria-label={t('search.search')}
           title={t('search.search')}

ui/src/components/forms/common/LabeledContainer.tsx

@@ -70,7 +70,7 @@ export const LabeledContainer: FC<PropsWithChildren<LabeledContainerProps>> = ({
     <button
       type="button"
       className={twMerge(
-        'group inline-flex cursor-default items-center gap-2 rounded-[5px] border-solid text-sm font-bold select-none focus-visible:outline-2 focus-visible:outline-black focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-70',
+        'group inline-flex cursor-pointer items-center gap-2 rounded-[5px] border-solid text-sm font-bold select-none focus-visible:outline-2 focus-visible:outline-black focus-visible:outline-solid disabled:cursor-not-allowed disabled:opacity-70',
         containerStyleSelectedStatus,
         containerStyleErrorStatus,
         containerBorderSizeStyles,

ui/src/components/navbar/NavigationDropdownMenu.tsx

@@ -18,7 +18,7 @@ export const NavigationDropdownMenu: FC<NavigationDropdownMenuProps> = ({
   return (
     <Menu as="div" className={dropdownMenuStyles.root(className)}>
       <MenuButton
-        className="mx-4 flex h-full items-center border-b-4 border-transparent px-3 hover:border-white"
+        className="mx-4 flex h-full cursor-pointer items-center border-b-4 border-transparent px-3 hover:border-white"
         data-testid={testId}
       >
         {buttonContent}

ui/src/components/stop-registry/search/components/StopSearchBar/BasicFilters/SearchCriteriaRadioButtons.tsx

@@ -43,7 +43,7 @@ export const SearchCriteriaRadioButtons: FC<
       {searchByOptions.map((option) => (
         <label
           htmlFor={option.name}
-          className="inline-flex text-nowrap"
+          className="inline-flex cursor-pointer text-nowrap"
           key={option.name}
         >
           <input

ui/src/styles/globals.css

@@ -61,6 +61,11 @@
     color: #666666;
   }
 
+  input[type="checkbox"]:not(:disabled),
+  label:has(input[type="checkbox"]:not(:disabled)) {
+    cursor: pointer;
+  }
+
   label,
   legend {
     font-weight: 700;

ui/src/uiComponents/EditButton.tsx

@@ -29,7 +29,7 @@ export const EditButton: FC<EditButtonProps> = (props) => {
   const onClick = (props as ButtonProps)?.onClick;
 
   const classNames = twMerge(
-    'ml-5 flex h-10 w-10 items-center justify-center rounded-full border border-grey bg-white',
+    'ml-5 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-grey bg-white',
     'hover:enabled:border-tweaked-brand enabled:hover:outline-tweaked-brand',
     className,
   );

ui/src/uiComponents/IconButton.tsx

@@ -46,7 +46,10 @@ export const IconButtonImpl: ForwardRefRenderFunction<
       id={identifier}
       data-testid={testId}
       title={tooltip}
-      className={twMerge('text-center', className)}
+      className={twMerge(
+        'cursor-pointer text-center disabled:cursor-default',
+        className,
+      )}
       type="button"
       onClick={onClick}
       disabled={disabled}

ui/src/uiComponents/IconToggle.tsx

@@ -33,7 +33,9 @@ export const IconToggle: FC<IconToggleProps> = ({
       type="button"
       disabled={disabled}
       className={twMerge(
-        'flex h-[26px] w-[26px] items-center justify-center rounded-sm border border-gray-300',
+        'h-[26px] w-[26px]',
+        'flex items-center justify-center',
+        'cursor-pointer rounded-sm border border-gray-300 disabled:cursor-default',
         colorClassNames,
         disabledClassNames,
         className,

ui/src/uiComponents/SimpleButton.tsx

@@ -68,7 +68,7 @@ function getCommonClassNames(
   shape: SimpleButtonShape,
 ) {
   return twJoin(
-    'flex items-center justify-center',
+    'flex cursor-pointer items-center justify-center',
     getShapeClassNames(shape),
     getColorClassNames(inverted, shape),
     // We cannot use 'disabled:' specifier, because the underlying implementation could be

ui/src/uiComponents/SimpleDropdownMenu.tsx

@@ -28,7 +28,7 @@ export const SimpleDropdownMenu: FC<SimpleDropdownMenuProps> = ({
     <Menu as="div" className={dropdownMenuStyles.root(className)}>
       <MenuButton
         className={twMerge(
-          'mx-auto flex items-center rounded-full',
+          'mx-auto flex cursor-pointer items-center rounded-full disabled:cursor-default',
           buttonClassName,
         )}
         data-testid={testId}