public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix design of showing generated API key (#5180) 

* fix design of api key

* fix copy icon

* Fix copy key height

* Add mobile style fixes

* Fix styles

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Alan <alannnc@gmail.com>
pull/5184/head^2
Carina Wollendorfer 2022-10-24 23:13:27 +02:00 committed by GitHub
parent f135f7baad
commit 3d595e9299
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/app-store/zapier/pages/v2/setup/index.tsx
View File

@ -1,4 +1,3 @@
import { ClipboardCopyIcon } from "@heroicons/react/solid";
import { Trans } from "next-i18next";
import Link from "next/link";
import { useState } from "react";
@ -6,6 +5,7 @@ import { Toaster } from "react-hot-toast";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { ClipboardCopyIcon } from "@calcom/ui/Icon";
import { Button, Loader, showToast, Tooltip } from "@calcom/ui/v2";
export interface IZapierSetupProps {
@ -64,16 +64,18 @@ export default function ZapierSetup(props: IZapierSetupProps) {
) : (
<>
<div className="mt-1 text-xl">{t("your_unique_api_key")}</div>
<div className="my-2 mt-3 flex">
<div className="w-full rounded bg-gray-100 py-2 pl-2 pr-5">{newApiKey}</div>
<Tooltip side="top" content="copy">
<div className="my-2 mt-3 flex-wrap sm:flex sm:flex-nowrap">
<code className="h-full w-full whitespace-pre-wrap rounded-md bg-gray-100 py-2 pl-2 pr-2 sm:rounded-r-none sm:pr-5">
{newApiKey}
</code>
<Tooltip side="top" content={t("copy_to_clipboard")}>
<Button
onClick={() => {
navigator.clipboard.writeText(newApiKey);
showToast(t("api_key_copied"), "success");
}}
type="button"
className="rounded-l-none px-4 text-base">
className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
<ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
{t("copy")}
</Button>

6
packages/features/ee/api-keys/components/v2/ApiKeyDialogForm.tsx
View File

@ -68,7 +68,7 @@ export default function ApiKeyDialogForm({
</div>
<div>
<div className="flex">
<code className="my-2 mr-1 w-full truncate rounded-sm bg-gray-100 py-2 px-3 align-middle font-mono text-gray-800">
<code className="mb-2 w-full truncate rounded-md rounded-r-none bg-gray-100 px-3 py-2 align-middle font-mono text-gray-800">
{apiKey}
</code>
<Tooltip side="top" content={t("copy_to_clipboard")}>
@ -78,7 +78,7 @@ export default function ApiKeyDialogForm({
showToast(t("api_key_copied"), "success");
}}
type="button"
className=" my-2 px-4 text-base">
className="rounded-l-none py-[19px] text-base ">
<ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
{t("copy")}
</Button>
@ -112,7 +112,7 @@ export default function ApiKeyDialogForm({
}
}}
className="space-y-4">
<div className="mb-10 mt-1">
<div className="mt-1 mb-10">
<h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">
{defaultValues ? t("edit_api_key") : t("create_api_key")}
</h2>