Website design: Fix Cursor (#2761)

packages/web/app/pages/[organizationId]/[projectId]/[targetId]/checks.tsx

@@ -800,7 +800,7 @@ function ChecksPageContent() {
               </div>
             ) : (
               <div>
-                <div className="text-sm">
+                <div className="text-sm cursor-default">
                   {hasActiveSchemaCheck ? 'List is empty' : 'Your schema check list is empty'}
                 </div>
                 <DocsLink href="/features/schema-registry#check-a-schema">

packages/web/app/pages/[organizationId]/[projectId]/[targetId]/history.tsx

@@ -320,7 +320,7 @@ function ComparisonView({ versionId }: { versionId: string }) {
               after={comparison.service?.after ?? ''}
             />
           ) : (
-            <div>
+            <div className="cursor-default">
               <div className="m-3 p-4">
                 <div className="mb-3 flex items-center gap-3">
                   <CheckCircledIcon className="h-4 w-auto text-emerald-500" />

packages/web/app/pages/[organizationId]/[projectId]/[targetId]/settings.tsx

@@ -120,7 +120,7 @@ function RegistryAccessTokens(props: {
   return (
     <Card>
       <Heading className="mb-2">Registry Access Tokens</Heading>
-      <div className="text-sm text-gray-400">
+      <div className="text-sm text-gray-400 cursor-default">
         Registry Access Tokens are used to access to Hive Registry and perform actions on your
         targets/projects. In most cases, this token is used from the Hive CLI.
       </div>
@@ -206,7 +206,7 @@ const ExtendBaseSchema = (props: { baseSchema: string }): ReactElement => {
   return (
     <Card>
       <Heading className="mb-2">Extend Your Schema</Heading>
-      <div className="text-sm text-gray-400">
+      <div className="text-sm text-gray-400 cursor-default">
         Schema Extensions is pre-defined GraphQL schema that is automatically merged with your
         published schemas, before being checked and validated.
         <br />
@@ -479,7 +479,7 @@ const ConditionalBreakingChanges = (): ReactElement => {
             />
           )}
         </Heading>
-        <div className="text-sm text-gray-400">
+        <div className="text-sm text-gray-400 cursor-default">
           Conditional Breaking Changes can change the behavior of schema checks, based on real
           traffic data sent to Hive.{' '}
           <DocsLink href="/management/targets#conditional-breaking-changes">Learn more</DocsLink>
@@ -665,7 +665,7 @@ function TargetName(props: {
   return (
     <Card>
       <Heading className="mb-2">Target Name</Heading>
-      <div className="text-sm text-gray-400">
+      <div className="text-sm text-gray-400 cursor-default">
         Changing the name of your target will also change the slug of your target URL, and will
         invalidate any existing links to your target.
         <br />
@@ -760,7 +760,7 @@ function GraphQLEndpointUrl(props: {
   return (
     <Card>
       <Heading className="mb-2">GraphQL Endpoint URL</Heading>
-      <div className="text-sm text-gray-400">
+      <div className="text-sm text-gray-400 cursor-default">
         The endpoint url will be used for querying the target from the{' '}
         <NextLink
           href={{
@@ -859,11 +859,11 @@ function TargetDelete(props: { organizationId: string; projectId: string; target
 
   return (
     <>
-      <Card>
+      <Card className="mb-10">
         <div className="flex items-center justify-between">
           <div>
             <Heading className="mb-2">Delete Target</Heading>
-            <div className="text-sm text-gray-400">
+            <div className="text-sm text-gray-400 cursor-default">
               Deleting an project also delete all schemas and data associated with it.
               <br />
               <DocsLink href="/management/targets#delete-a-target">

packages/web/app/src/components/target/explorer/filter.tsx

@@ -90,7 +90,7 @@ export function SchemaExplorerFilter({
   return (
     <div className="flex flex-row items-center gap-x-4">
       <Autocomplete
-        className="grow min-w-[250px]"
+        className="grow min-w-[250px] cursor-text"
         placeholder="Search for a type"
         defaultValue={typename ? { value: typename, label: typename } : null}
         options={types}
@@ -104,7 +104,7 @@ export function SchemaExplorerFilter({
       <RadixSelect placeholder="Select a date range" {...periodSelector} />
       <div className="flex flex-row items-center gap-4">
         <Switch checked={!collapsed} onCheckedChange={toggleCollapsed} />
-        <div>
+        <div className="cursor-default">
           <div>Show all arguments</div>
           <p className="text-xs text-gray-500">List of arguments is collapsed by default</p>
         </div>

packages/web/app/src/components/target/settings/cdn-access-tokens.tsx

@@ -381,7 +381,7 @@ export function CDNAccessTokens(props: {
       <Heading id="cdn-access-tokens" className="mb-2">
         CDN Access Token
       </Heading>
-      <div className="text-sm text-gray-400">
+      <div className="text-sm text-gray-400 cursor-default">
         CDN Access Tokens are used to access to Hive High-Availability CDN and read your schema
         artifacts.
         <br />

packages/web/app/src/components/ui/card.tsx

@@ -14,7 +14,11 @@ Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 p-6 cursor-default', className)}
+      {...props}
+    />
   ),
 );
 CardHeader.displayName = 'CardHeader';
@@ -24,7 +28,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
     // eslint-disable-next-line jsx-a11y/heading-has-content
     <h3
       ref={ref}
-      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      className={cn('text-lg font-semibold leading-none tracking-tight cursor-default', className)}
       {...props}
     />
   ),
@@ -35,7 +39,11 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground cursor-default', className)}
+    {...props}
+  />
 ));
 CardDescription.displayName = 'CardDescription';
 

packages/web/app/src/components/ui/page.tsx

@@ -2,9 +2,13 @@ import type { ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 
 export function Title({ children, className }: { children: ReactNode; className?: string }) {
-  return <h3 className={cn('text-lg font-semibold tracking-tight', className)}>{children}</h3>;
+  return (
+    <h3 className={cn('text-lg font-semibold tracking-tight cursor-default', className)}>
+      {children}
+    </h3>
+  );
 }
 
 export function Subtitle({ children, className }: { children: string; className?: string }) {
-  return <p className={cn('text-sm text-gray-400', className)}>{children}</p>;
+  return <p className={cn('text-sm text-gray-400 cursor-default', className)}>{children}</p>;
 }

packages/web/app/src/components/v2/activities.tsx

@@ -297,6 +297,7 @@ const ActivityContainer = (props: { children: ReactNode }) => (
     last:border-b-0
     last:pb-0
     first-of-type:mt-0
+    cursor-default
   "
   >
     {props.children}

packages/web/app/src/components/v2/empty-list.tsx

@@ -16,7 +16,10 @@ export const EmptyList = ({
   className?: string;
 }): ReactElement => {
   return (
-    <Card className={cn('flex grow flex-col items-center gap-y-2', className)} data-cy="empty-list">
+    <Card
+      className={cn('flex grow flex-col items-center gap-y-2 cursor-default', className)}
+      data-cy="empty-list"
+    >
       <Image
         src={magnifier}
         alt="Magnifier illustration"

packages/web/app/src/components/v2/heading.tsx

@@ -17,7 +17,7 @@ export const Heading = ({
   return (
     <HeadingLevel
       className={clsx(
-        'text-white',
+        'text-white cursor-default',
         {
           lg: 'text-lg font-bold',
           xl: 'text-xl font-bold',

packages/web/app/src/components/v2/switch.tsx

@@ -7,7 +7,7 @@ export const Switch = ({ className, disabled, ...props }: SwitchProps): ReactEle
   return (
     <SwitchPrimitive.Root
       className={clsx(
-        'relative h-[25px] w-[45px] rounded-full bg-gray-800 focus:ring disabled:cursor-not-allowed',
+        'relative h-[25px] w-[45px] rounded-full bg-gray-800 focus:ring  disabled:cursor-not-allowed',
         className,
       )}
       disabled={disabled}

packages/web/app/src/components/v2/time-ago.tsx

@@ -29,7 +29,7 @@ export const TimeAgo = ({
         <time
           dateTime={formattedDate}
           title={formattedDate}
-          className={clsx('whitespace-nowrap', className)}
+          className={clsx('whitespace-nowrap cursor-default', className)}
         >
           {value}
         </time>