Update existing podkit components to use new contextual pk classes (#…

…19256)

* use pk color classes

* updating to use pk classes

* pk styles yah

* fix positioning

* swap to pk classes

* adjusting colors on copy input

* adding repo link and id to page

* using pk class names

* Update components/dashboard/src/repositories/detail/general/ConfigurationName.tsx

Co-authored-by: Filip Troníček <[email protected]>

* inset focus ring

---------

Co-authored-by: Filip Troníček <[email protected]>

components/dashboard/src/components/InputWithCopy.tsx

@@ -31,10 +31,14 @@ export const InputWithCopy: FC<Props> = ({ value, tip = "Click to copy", classNa
     return (
         // max-w-lg is to mirror width of TextInput so Tooltip is positioned correctly
         <div className={`w-full relative max-w-lg ${className ?? ""}`}>
-            <TextInput value={value} disabled className="w-full pr-8 overscroll-none dark:text-[#A8A29E]" />
+            <TextInput
+                value={value}
+                disabled
+                className="w-full pr-8 overscroll-none bg-pk-surface-tertiary text-pk-content-primary"
+            />
 
-            <Tooltip content={tip} className="absolute top-1.5 right-1">
-                <Button variant="ghost" size={"icon"} onClick={handleCopyToClipboard}>
+            <Tooltip content={tip} className="absolute top-0 right-0">
+                <Button variant="ghost" size={"icon"} onClick={handleCopyToClipboard} className="ring-inset">
                     {copied ? <CheckIcon className="text-green-500 w-5 h-5" /> : <CopyIcon className="w-3.5 h-3.5" />}
                 </Button>
             </Tooltip>

components/dashboard/src/components/RepositoryFinder.tsx

@@ -108,9 +108,7 @@ export default function RepositoryFinder({
                 result.push({
                     id: "more",
                     element: (
-                        <div className="text-sm text-gray-400 dark:text-gray-500">
-                            Repo missing? Try refining your search.
-                        </div>
+                        <div className="text-sm text-pk-content-tertiary">Repo missing? Try refining your search.</div>
                     ),
                     isSelectable: false,
                 } as ComboboxElement);
@@ -123,7 +121,7 @@ export default function RepositoryFinder({
                 result.push({
                     id: "bitbucket-server",
                     element: (
-                        <div className="text-sm text-gray-400 dark:text-gray-500">
+                        <div className="text-sm text-pk-content-tertiary">
                             <div className="flex items-center">
                                 <Exclamation2 className="w-4 h-4"></Exclamation2>
                                 <span className="ml-2">Bitbucket Server only supports searching by prefix.</span>
@@ -138,7 +136,7 @@ export default function RepositoryFinder({
                 result.push({
                     id: "not-searched",
                     element: (
-                        <div className="text-sm text-gray-400 dark:text-gray-500">
+                        <div className="text-sm text-pk-content-tertiary">
                             Please type at least 3 characters to search.
                         </div>
                     ),
@@ -199,18 +197,18 @@ const SuggestedRepositoryOption: FC<SuggestedRepositoryOptionProps> = ({ repo })
             aria-label={`${repo.configurationId ? "Project" : "Repo"}: ${repo.url}`}
         >
             <span className={"pr-2"}>
-                <RepositoryIcon className={`w-5 h-5 text-gray-400`} />
+                <RepositoryIcon className={`w-5 h-5 text-pk-content-tertiary`} />
             </span>
 
             {name && (
                 <>
                     <span className="text-sm whitespace-nowrap font-semibold">{name}</span>
-                    <MiddleDot className="px-0.5 text-gray-300 dark:text-gray-500" />
+                    <MiddleDot className="px-0.5 text-pk-content-tertiary" />
                 </>
             )}
 
             <span
-                className="text-sm whitespace-nowrap truncate overflow-ellipsis text-gray-500 dark:text-gray-400"
+                className="text-sm whitespace-nowrap truncate overflow-ellipsis text-pk-content-secondary"
                 title={repoPath}
             >
                 {repoPath}

components/dashboard/src/components/SelectIDEComponent.tsx

@@ -9,6 +9,7 @@ import { FC, useCallback, useEffect, useMemo } from "react";
 import { Combobox, ComboboxElement, ComboboxSelectedItem } from "./podkit/combobox/Combobox";
 import Editor from "../icons/Editor.svg";
 import { useIDEOptions } from "../data/ide-options/ide-options-query";
+import { MiddleDot } from "./typography/MiddleDot";
 
 interface SelectIDEComponentProps {
     selectedIdeOption?: string;
@@ -147,21 +148,21 @@ const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({ option, useLatest
             htmlTitle={title}
             title={
                 <div>
-                    {title} <span className="text-gray-300 dark:text-gray-600 font-normal">&middot;</span>{" "}
-                    <span className="text-gray-400 dark:text-gray-500 font-normal">{version}</span>{" "}
+                    {title} <MiddleDot className="text-pk-content-tertiary" />{" "}
+                    <span className="font-normal">{version}</span>{" "}
                     {useLatest && (
-                        <div className="ml-1 rounded-xl bg-gray-200 dark:bg-gray-600 px-2 inline text-sm text-gray-500 dark:text-gray-400 font-normal">
+                        <div className="ml-1 rounded-xl bg-pk-content-tertiary/10 px-2 py-1 inline text-sm font-normal">
                             Latest
                         </div>
                     )}
                 </div>
             }
             subtitle={
-                <div className="flex">
+                <div className="flex gap-0.5">
                     <div className="font-semibold">Editor</div>
                     {label && (
                         <>
-                            <div className="mx-1">&middot;</div>
+                            <MiddleDot />
                             <div>{capitalize(label)}</div>
                         </>
                     )}

components/dashboard/src/components/podkit/breadcrumbs/BreadcrumbNav.tsx

@@ -33,7 +33,7 @@ export const BreadcrumbNav: FC<BreadcrumbPageNavProps> = ({ pageTitle, pageDescr
             {backLink && (
                 <LinkButton
                     variant={"ghost"}
-                    className="py-1 pl-0 pr-2 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-200 flex flex-row gap-1 items-center"
+                    className="py-1 pl-0 pr-2 text-content-primary hover:bg-pk-surface-tertiary flex flex-row gap-1 items-center"
                     href={backLink}
                 >
                     <ChevronLeft size={24} />

components/dashboard/src/components/podkit/combobox/Combobox.tsx

@@ -174,13 +174,13 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
             <RadixPopover.Trigger
                 disabled={disabled}
                 className={classNames(
-                    "w-full h-16 bg-gray-100 dark:bg-gray-800 flex flex-row items-center justify-start px-2 text-left",
+                    "w-full h-16 bg-pk-surface-secondary flex flex-row items-center justify-start px-2 text-left",
                     // when open, just have border radius on top
                     showDropDown ? "rounded-none rounded-t-lg" : "rounded-lg",
                     // Dropshadow when expanded
                     showDropDown && "filter drop-shadow-xl",
                     // hover when not disabled or expanded
-                    !showDropDown && !disabled && "hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer",
+                    !showDropDown && !disabled && "hover:bg-pk-surface-tertiary cursor-pointer",
                     // opacity when disabled
                     disabled && "opacity-70",
                 )}
@@ -189,8 +189,7 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
                 <div className="flex-grow" />
                 <div
                     className={classNames(
-                        // TODO: work on abstracting icon colors once we have a few places using lucide icons
-                        "mr-2 text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-transform",
+                        "mr-2 text-pk-content-secondary transition-transform",
                         showDropDown && "rotate-180 transition-all",
                     )}
                 >
@@ -201,7 +200,7 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
                 <RadixPopover.Content
                     className={classNames(
                         "rounded-b-lg p-2 filter drop-shadow-xl z-50 outline-none",
-                        "bg-gray-100 dark:bg-gray-800 ",
+                        "bg-pk-surface-secondary",
                         "w-[--radix-popover-trigger-width]",
                     )}
                     onKeyDown={onKeyDown}
@@ -227,8 +226,8 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
                     <ul className="max-h-60 overflow-auto">
                         {showResultsLoadingIndicator && (
                             <div className="flex-col space-y-2 animate-pulse">
-                                <div className="bg-gray-300 dark:bg-gray-500 h-4 rounded" />
-                                <div className="bg-gray-300 dark:bg-gray-500 h-4 rounded" />
+                                <div className="bg-pk-content-tertiary/25 h-5 rounded" />
+                                <div className="bg-pk-content-tertiary/25 h-5 rounded" />
                             </div>
                         )}
                         {!showResultsLoadingIndicator && filteredOptions.length > 0 ? (
@@ -245,7 +244,7 @@ export const Combobox: FunctionComponent<ComboboxProps> = ({
                             })
                         ) : !showResultsLoadingIndicator ? (
                             <li key="no-elements" className={"rounded-md "}>
-                                <div className="h-12 pl-8 py-3 text-gray-800 dark:text-gray-200">No results</div>
+                                <div className="h-12 pl-8 py-3 text-pk-content-secondary">No results</div>
                             </li>
                         ) : null}
                     </ul>
@@ -288,13 +287,13 @@ export const ComboboxSelectedItem: FC<ComboboxSelectedItemProps> = ({
             <div className="flex-col ml-1 flex-grow truncate">
                 {loading ? (
                     <div className="flex-col space-y-2">
-                        <div className="bg-gray-300 dark:bg-gray-500 h-4 w-24 rounded" />
-                        <div className="bg-gray-300 dark:bg-gray-500 h-2 w-40 rounded" />
+                        <div className="bg-pk-content-tertiary/25 h-4 w-24 rounded" />
+                        <div className="bg-pk-content-tertiary/25 h-2 w-40 rounded" />
                     </div>
                 ) : (
                     <>
-                        <div className="text-gray-700 dark:text-gray-300 font-semibold">{title}</div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{subtitle}</div>
+                        <div className="text-pk-content-secondary font-semibold">{title}</div>
+                        <div className="text-xs text-pk-content-tertiary truncate">{subtitle}</div>
                     </>
                 )}
             </div>
@@ -310,9 +309,9 @@ type ComboboxItemProps = {
 };
 
 export const ComboboxItem: FC<ComboboxItemProps> = ({ element, isActive, onSelected, onFocused }) => {
-    let selectionClasses = `dark:bg-gray-800 cursor-pointer`;
+    let selectionClasses = `bg-pk-surface-tertiary/25 cursor-pointer`;
     if (isActive) {
-        selectionClasses = `bg-gray-200 dark:bg-gray-700 cursor-pointer focus:outline-none focus:ring-0`;
+        selectionClasses = `bg-pk-content-tertiary/10 cursor-pointer focus:outline-none focus:ring-0`;
     }
     if (!element.isSelectable) {
         selectionClasses = ``;

components/dashboard/src/components/podkit/dropdown/DropDown.tsx

@@ -66,7 +66,9 @@ const DropdownMenuContent = React.forwardRef<
             ref={ref}
             sideOffset={sideOffset}
             className={cn(
-                "z-50 min-w-[8rem] w-48 overflow-hidden rounded-md border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-1 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                "z-50 min-w-[8rem] w-48 overflow-hidden rounded-md",
+                "border border-pk-border-base bg-pk-surface-primary p-1 shadow-md",
+                "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 className,
             )}
             {...props}
@@ -84,7 +86,9 @@ const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none bg-white dark:bg-gray-900 focus:text-gray-800 dark:focus:text-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            "relative flex cursor-default select-none items-center px-2 py-1.5 text-sm",
+            "outline-none bg-pk-surface-primary focus:text-pk-content-primary focus:bg-pk-surface-tertiary",
+            "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
             inset && "pl-8",
             className,
         )}
@@ -156,7 +160,11 @@ const DropdownMenuSeparator = React.forwardRef<
     React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
     React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-    <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+    <DropdownMenuPrimitive.Separator
+        ref={ref}
+        className={cn("-mx-1 my-1 h-px bg-pk-content-tertiary", className)}
+        {...props}
+    />
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 

components/dashboard/src/components/podkit/dropdown/DropDownActions.tsx

@@ -12,8 +12,8 @@ export const DropdownActions = ({ ...props }) => {
     return (
         <DropdownMenu>
             {/* Todo: finally move the styles out of index.css */}
-            <DropdownMenuTrigger className="flex hover:bg-gray-200 dark:hover:bg-gray-700 bg-transparent rounded-md p-1">
-                <MoreVertical className={cn("w-8 h-8 p-1 rounded-md text-gray-600 dark:text-gray-300")} />
+            <DropdownMenuTrigger className="flex hover:bg-pk-surface-tertiary bg-transparent rounded-md p-1">
+                <MoreVertical className={cn("w-8 h-8 p-1 rounded-md text-pk-content-primary")} />
             </DropdownMenuTrigger>
             <DropdownMenuContent>{props.children}</DropdownMenuContent>
         </DropdownMenu>

components/dashboard/src/components/podkit/forms/RadioListField.tsx

@@ -20,7 +20,9 @@ export const RadioGroupItem = React.forwardRef<
             <RadioGroupPrimitive.Item
                 ref={ref}
                 className={cn(
-                    "aspect-square h-4 w-4 my-0 rounded-full border-2 ring-offset-white dark:ring-offset-gray-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 p-0 text-black dark:text-gray-200 border-black dark:border-gray-200 bg-inherit",
+                    "aspect-square h-4 w-4 my-0 rounded-full",
+                    "border-2 ring-offset-pk-surface-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                    "disabled:cursor-not-allowed disabled:opacity-50 p-0 text-pk-content-primary border-pk-content-primary bg-inherit",
                     className,
                 )}
                 {...props}

components/dashboard/src/components/podkit/typography/Text.tsx

@@ -10,5 +10,5 @@ import { PropsWithClassName, cn } from "@podkit/lib/cn";
 type TextProps = PropsWithChildren<PropsWithClassName>;
 
 export const Text: FC<TextProps> = ({ className, children }) => {
-    return <span className={cn("text-black dark:text-white", className)}>{children}</span>;
+    return <span className={cn("text-pk-content-primary", className)}>{children}</span>;
 };

components/dashboard/src/components/podkit/typography/TextMuted.tsx

@@ -10,5 +10,5 @@ import { PropsWithClassName, cn } from "@podkit/lib/cn";
 type TextMutedProps = PropsWithChildren<PropsWithClassName>;
 
 export const TextMuted: FC<TextMutedProps> = ({ className, children }) => {
-    return <span className={cn("text-gray-500 dark:text-gray-400", className)}>{children}</span>;
+    return <span className={cn("text-pk-content-tertiary", className)}>{children}</span>;
 };

components/dashboard/src/repositories/detail/general/ConfigurationName.tsx

@@ -12,6 +12,9 @@ import { useToast } from "../../../components/toasts/Toasts";
 import { useOnBlurError } from "../../../hooks/use-onblur-error";
 import { ConfigurationSettingsField } from "../ConfigurationSettingsField";
 import { useConfigurationMutation } from "../../../data/configurations/configuration-queries";
+import { InputWithCopy } from "../../../components/InputWithCopy";
+import { InputField } from "../../../components/forms/InputField";
+import { usePrettyRepoURL } from "../../../hooks/use-pretty-repo-url";
 
 const MAX_LENGTH = 100;
 
@@ -27,6 +30,8 @@ export const ConfigurationNameForm: FC<Props> = ({ configuration }) => {
     const nameChanged = configurationName !== configuration.name;
     const nameError = useOnBlurError("Sorry, this name is too long.", configurationName.length <= MAX_LENGTH);
 
+    const url = usePrettyRepoURL(configuration.cloneUrl);
+
     const updateName = useCallback(
         async (e: React.FormEvent) => {
             e.preventDefault();
@@ -58,14 +63,22 @@ export const ConfigurationNameForm: FC<Props> = ({ configuration }) => {
         <ConfigurationSettingsField>
             <form onSubmit={updateName}>
                 <TextInputField
-                    label="Configuration name"
-                    hint={`The name can be up to ${MAX_LENGTH} characters long.`}
-                    containerClassName="mt-0"
+                    label="Display name"
+                    hint={
+                        <a href={configuration.cloneUrl} target="_blank" rel="noopener noreferrer" className="gp-link">
+                            {url}
+                        </a>
+                    }
                     value={configurationName}
                     error={nameError.message}
                     onChange={setConfigurationName}
                     onBlur={nameError.onBlur}
                 />
+
+                <InputField label="Repository ID">
+                    <InputWithCopy value={configuration.id} tip="Click to copy configuration ID" />
+                </InputField>
+
                 <div className="flex flex-row items-center justify-start gap-2 mt-4 w-full">
                     <LoadingButton type="submit" disabled={!nameChanged} loading={updateConfiguration.isLoading}>
                         Save