From 82e8e32bf02b8d3c45ebaa801ca8d4840be07f46 Mon Sep 17 00:00:00 2001 From: anirbanpaulcom Date: Fri, 19 Jul 2024 23:59:17 +0530 Subject: [PATCH] preflight --- apps/extension/content/ContentApp.tsx | 2 +- apps/extension/content/base.css | 3 +- apps/extension/content/content.css | 9 +- apps/extension/content/content.tsx | 7 +- apps/extension/manifest.json | 1 + apps/extension/popup.html | 14 ++ apps/extension/popup.js | 8 + apps/extension/public/IconMenu.tsx | 8 +- apps/extension/public/icons/clickIcon.tsx | 88 ++++++++ apps/extension/public/icons/emailIcon.tsx | 33 +++ apps/extension/public/icons/facebookIcon.tsx | 21 ++ apps/extension/public/icons/instagramIcon.tsx | 19 ++ apps/extension/public/icons/linkTemplate.tsx | 7 +- apps/extension/public/icons/linkedinIcon.tsx | 16 ++ .../extension/public/icons/loading-circle.tsx | 25 +++ apps/extension/public/icons/pinterestIcon.tsx | 44 ++-- apps/extension/public/icons/redditIcon.tsx | 6 +- apps/extension/public/icons/telegramIcon.tsx | 21 ++ apps/extension/public/icons/twitterIcon.tsx | 16 ++ apps/extension/public/icons/whatsappIcon.tsx | 7 +- apps/extension/public/index.ts | 9 + .../src/{extension.tsx => index.tsx} | 17 +- apps/extension/src/link/all-links.tsx | 3 +- apps/extension/src/link/link-card.tsx | 81 ++++--- apps/extension/src/link/link-input.tsx | 39 ++-- apps/extension/src/types.tsx | 1 - apps/extension/src/usespace/userspace.tsx | 12 +- .../extension/src/workspace/workspaceList.tsx | 11 +- apps/extension/tailwind.config.js | 1 + apps/extension/ui/button.tsx | 16 +- apps/extension/ui/copy-button.tsx | 10 +- apps/extension/ui/index.tsx | 1 + apps/extension/ui/input-select.tsx | 22 +- apps/extension/ui/input.tsx | 15 ++ apps/extension/ui/link-preview.tsx | 7 +- apps/extension/ui/modal.tsx | 4 +- .../add-edit-link-modal/android-section.tsx | 5 +- .../add-edit-link-modal/cloaking-section.tsx | 12 +- .../add-edit-link-modal/comments-section.tsx | 2 +- .../expiration-section.tsx | 9 +- .../modal/add-edit-link-modal/geo-section.tsx | 26 +-- .../ui/modal/add-edit-link-modal/index.tsx | 72 +++--- .../modal/add-edit-link-modal/ios-section.tsx | 5 +- .../modal/add-edit-link-modal/og-section.tsx | 77 ++++--- .../add-edit-link-modal/password-section.tsx | 12 +- .../ui/modal/add-edit-link-modal/preview.tsx | 14 +- .../add-edit-link-modal/tags-section.tsx | 5 +- .../add-edit-link-modal/unsplash-search.tsx | 4 +- .../modal/add-edit-link-modal/utm-section.tsx | 12 +- .../extension/ui/modal/archive-link-modal.tsx | 2 +- apps/extension/ui/modal/delete-link-modal.tsx | 8 +- apps/extension/ui/modal/link-qr-modal.tsx | 17 +- apps/extension/ui/modal/share-link-modal.tsx | 208 ++++++++++-------- .../ui/modal/transfer-link-modal.tsx | 2 +- apps/extension/ui/popover.tsx | 2 +- apps/extension/ui/switch.tsx | 79 +++---- apps/extension/ui/tooltip.tsx | 10 +- 57 files changed, 775 insertions(+), 412 deletions(-) create mode 100644 apps/extension/popup.html create mode 100644 apps/extension/popup.js create mode 100644 apps/extension/public/icons/clickIcon.tsx create mode 100644 apps/extension/public/icons/emailIcon.tsx create mode 100644 apps/extension/public/icons/facebookIcon.tsx create mode 100644 apps/extension/public/icons/instagramIcon.tsx create mode 100644 apps/extension/public/icons/linkedinIcon.tsx create mode 100644 apps/extension/public/icons/loading-circle.tsx create mode 100644 apps/extension/public/icons/telegramIcon.tsx create mode 100644 apps/extension/public/icons/twitterIcon.tsx rename apps/extension/src/{extension.tsx => index.tsx} (81%) create mode 100644 apps/extension/ui/input.tsx diff --git a/apps/extension/content/ContentApp.tsx b/apps/extension/content/ContentApp.tsx index d2c9bf041e..ea67acee13 100644 --- a/apps/extension/content/ContentApp.tsx +++ b/apps/extension/content/ContentApp.tsx @@ -1,6 +1,6 @@ import React from "react"; import DubLogo from "../public/icons/logo"; -import Extension from "../src/extension"; +import Extension from "../src"; export default function ContentApp() { const [isOpen, setIsOpen] = React.useState(false); diff --git a/apps/extension/content/base.css b/apps/extension/content/base.css index bd6213e1df..7c05d4ddc4 100644 --- a/apps/extension/content/base.css +++ b/apps/extension/content/base.css @@ -1,3 +1,2 @@ -@tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; diff --git a/apps/extension/content/content.css b/apps/extension/content/content.css index 2879949061..2101da5fec 100644 --- a/apps/extension/content/content.css +++ b/apps/extension/content/content.css @@ -2,7 +2,14 @@ position: fixed; bottom: 0; right: 0; - z-index: 99999; + z-index: 99999 !important; + color: black; +} +button{ + +} +p { + margin:0; } @keyframes blink { 50% { fill: transparent }} diff --git a/apps/extension/content/content.tsx b/apps/extension/content/content.tsx index 1fd2a8c406..71cdeb05fd 100644 --- a/apps/extension/content/content.tsx +++ b/apps/extension/content/content.tsx @@ -1,3 +1,4 @@ +import React from "react"; import ReactDOM from "react-dom/client"; import ContentApp from "./ContentApp"; import("./base.css"); @@ -10,5 +11,9 @@ function initial() { rootDiv.id = "extension-root"; document.body.appendChild(rootDiv); const root = ReactDOM.createRoot(rootDiv); - root.render(); + root.render( + + + , + ); } diff --git a/apps/extension/manifest.json b/apps/extension/manifest.json index 556d73d534..6301fff438 100644 --- a/apps/extension/manifest.json +++ b/apps/extension/manifest.json @@ -10,6 +10,7 @@ "background": { "service_worker": "./background.ts" }, + "action": { "default_popup": "popup.html" }, "content_scripts": [ { "matches": [ diff --git a/apps/extension/popup.html b/apps/extension/popup.html new file mode 100644 index 0000000000..d6c3783eec --- /dev/null +++ b/apps/extension/popup.html @@ -0,0 +1,14 @@ + + + + + + Document + + + + +
+ + + \ No newline at end of file diff --git a/apps/extension/popup.js b/apps/extension/popup.js new file mode 100644 index 0000000000..5033a5d947 --- /dev/null +++ b/apps/extension/popup.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import Extension from './src/index.tsx'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + +); diff --git a/apps/extension/public/IconMenu.tsx b/apps/extension/public/IconMenu.tsx index 3e84dbf97f..ebc90038ed 100644 --- a/apps/extension/public/IconMenu.tsx +++ b/apps/extension/public/IconMenu.tsx @@ -4,12 +4,16 @@ interface IconMenuProps { text?: string; icon: JSX.Element; style?: CSSProperties; + className?: string; } function IconMenu(props: IconMenuProps) { - const { text, icon, style } = props; + const { text, icon, style, className } = props; return ( -
+
{icon} {text && {text}}
diff --git a/apps/extension/public/icons/clickIcon.tsx b/apps/extension/public/icons/clickIcon.tsx new file mode 100644 index 0000000000..3328bb05a1 --- /dev/null +++ b/apps/extension/public/icons/clickIcon.tsx @@ -0,0 +1,88 @@ +export default function ClickIcon(className: { className?: string }) { + return ( + + + + + + + + + + + + ); +} diff --git a/apps/extension/public/icons/emailIcon.tsx b/apps/extension/public/icons/emailIcon.tsx new file mode 100644 index 0000000000..92977e2d1d --- /dev/null +++ b/apps/extension/public/icons/emailIcon.tsx @@ -0,0 +1,33 @@ +export default function EmailIcon({ className }: { className?: string }) { + return ( + + + + + + + + ); +} diff --git a/apps/extension/public/icons/facebookIcon.tsx b/apps/extension/public/icons/facebookIcon.tsx new file mode 100644 index 0000000000..cd880e3dca --- /dev/null +++ b/apps/extension/public/icons/facebookIcon.tsx @@ -0,0 +1,21 @@ +export default function FacebookIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/extension/public/icons/instagramIcon.tsx b/apps/extension/public/icons/instagramIcon.tsx new file mode 100644 index 0000000000..51d5f849db --- /dev/null +++ b/apps/extension/public/icons/instagramIcon.tsx @@ -0,0 +1,19 @@ +export default function InstagramIcon({ className }: { className?: string }) { + return ( + + + + + + + + ); +} diff --git a/apps/extension/public/icons/linkTemplate.tsx b/apps/extension/public/icons/linkTemplate.tsx index 17d6a08a31..7806c0075a 100644 --- a/apps/extension/public/icons/linkTemplate.tsx +++ b/apps/extension/public/icons/linkTemplate.tsx @@ -1,15 +1,16 @@ const LinkTemplate = () => { return ( -
+
-
+
-
+
+
); }; diff --git a/apps/extension/public/icons/linkedinIcon.tsx b/apps/extension/public/icons/linkedinIcon.tsx new file mode 100644 index 0000000000..accb8daad6 --- /dev/null +++ b/apps/extension/public/icons/linkedinIcon.tsx @@ -0,0 +1,16 @@ +export default function LinkedinIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/extension/public/icons/loading-circle.tsx b/apps/extension/public/icons/loading-circle.tsx new file mode 100644 index 0000000000..ec645e7120 --- /dev/null +++ b/apps/extension/public/icons/loading-circle.tsx @@ -0,0 +1,25 @@ +import { cn } from "@dub/utils"; + +export default function LoadingCircle({ className }: { className?: string }) { + return ( + + ); +} diff --git a/apps/extension/public/icons/pinterestIcon.tsx b/apps/extension/public/icons/pinterestIcon.tsx index 3c865201a4..efc5dc035c 100644 --- a/apps/extension/public/icons/pinterestIcon.tsx +++ b/apps/extension/public/icons/pinterestIcon.tsx @@ -1,29 +1,27 @@ -const PinterestIcon = () => { +export default function PinterestIcon({ className }: { className?: string }) { return ( - + + + + + ); -}; -export default PinterestIcon; +} diff --git a/apps/extension/public/icons/redditIcon.tsx b/apps/extension/public/icons/redditIcon.tsx index 201ed036dc..269bef9cce 100644 --- a/apps/extension/public/icons/redditIcon.tsx +++ b/apps/extension/public/icons/redditIcon.tsx @@ -1,4 +1,4 @@ -const RedditIcon = () => { +export default function RedditIcon({ className }: { className?: string }) { return ( { width="28px" height="28px" viewBox="0 0 256 256" + className={className} > @@ -18,5 +19,4 @@ const RedditIcon = () => { ); -}; -export default RedditIcon; +} diff --git a/apps/extension/public/icons/telegramIcon.tsx b/apps/extension/public/icons/telegramIcon.tsx new file mode 100644 index 0000000000..e17120fb6b --- /dev/null +++ b/apps/extension/public/icons/telegramIcon.tsx @@ -0,0 +1,21 @@ +export default function TelegramIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/extension/public/icons/twitterIcon.tsx b/apps/extension/public/icons/twitterIcon.tsx new file mode 100644 index 0000000000..da5d5355d0 --- /dev/null +++ b/apps/extension/public/icons/twitterIcon.tsx @@ -0,0 +1,16 @@ +export default function TwitterIcon({ className }: { className?: string }) { + return ( + + + + + ); +} diff --git a/apps/extension/public/icons/whatsappIcon.tsx b/apps/extension/public/icons/whatsappIcon.tsx index b7dfe5c300..1524973236 100644 --- a/apps/extension/public/icons/whatsappIcon.tsx +++ b/apps/extension/public/icons/whatsappIcon.tsx @@ -1,4 +1,4 @@ -const WhatsappIcon = () => { +export default function WhatsappIcon({ className }: { className?: string }) { return ( { width="28px" height="28px" clipRule="evenodd" + className={className} > { /> ); -}; - -export default WhatsappIcon; +} diff --git a/apps/extension/public/index.ts b/apps/extension/public/index.ts index 3195ca9fb5..c13e05403b 100644 --- a/apps/extension/public/index.ts +++ b/apps/extension/public/index.ts @@ -1,6 +1,15 @@ export { default as DotIcon } from "./icons/dot"; +export { default as EmailIcon } from "./icons/emailIcon"; +export { default as FacebookIcon } from "./icons/facebookIcon"; +export { default as InstagramIcon } from "./icons/instagramIcon"; export { default as LinkTemplateIcon } from "./icons/linkTemplate"; +export { default as LinkedinIcon } from "./icons/linkedinIcon"; export { default as PinterestIcon } from "./icons/pinterestIcon"; export { default as RedditIcon } from "./icons/redditIcon"; +export { default as TelegramIcon } from "./icons/telegramIcon"; export { default as TitleIcon } from "./icons/title"; +export { default as TwitterIcon } from "./icons/twitterIcon"; export { default as WhatsappIcon } from "./icons/whatsappIcon"; + +export * from "./icons/clickIcon"; +export * from "./icons/loading-circle"; diff --git a/apps/extension/src/extension.tsx b/apps/extension/src/index.tsx similarity index 81% rename from apps/extension/src/extension.tsx rename to apps/extension/src/index.tsx index 2c5008d53f..bd5c6bfe16 100644 --- a/apps/extension/src/extension.tsx +++ b/apps/extension/src/index.tsx @@ -12,7 +12,7 @@ function Extension({ handleClose }: { handleClose: () => void }) { const [openTab, setOpenTab] = useState(true); return ( -
+
@@ -26,31 +26,32 @@ function Extension({ handleClose }: { handleClose: () => void }) {
- - +
+
{openTab && } {!openTab && } - +
{allLinks?.length ? ( allLinks?.map((link) => ) diff --git a/apps/extension/src/link/link-card.tsx b/apps/extension/src/link/link-card.tsx index a7b6a8f8c2..4357c42d69 100644 --- a/apps/extension/src/link/link-card.tsx +++ b/apps/extension/src/link/link-card.tsx @@ -4,6 +4,7 @@ import { fetcher, getApexDomain, isDubDomain, + linkConstructor, nFormatter, punycode, timeAgo, @@ -13,10 +14,10 @@ import { CheckCircle, Copy, CopyPlus, + CornerDownRight, Delete, Edit3, EllipsisVertical, - Eye, FolderInput, QrCode, Share2, @@ -24,10 +25,11 @@ import { TimerOff, Trash2, } from "lucide-react"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useMemo, useRef, useState } from "react"; import { toast } from "sonner"; import useSWR, { mutate } from "swr"; import IconMenu from "../../public/IconMenu"; +import ClickIcon from "../../public/icons/clickIcon"; import { Button, CopyButton, Popover, useIntersectionObserver } from "../../ui"; import { useAddEditLinkModal } from "../../ui/modal/add-edit-link-modal"; import { useArchiveLinkModal } from "../../ui/modal/archive-link-modal"; @@ -45,6 +47,14 @@ export default function LinkCard({ props }: { props: ShortLinkProps }) { const apexDomain = getApexDomain(props.url); + const shortLink = useMemo(() => { + return linkConstructor({ + key: props.key, + domain: props.domain, + pretty: true, + }); + }, [props.key, props.domain]); + const linkRef = useRef(); const entry = useIntersectionObserver(linkRef, {}); const isVisible = !!entry?.isIntersecting; @@ -101,7 +111,7 @@ export default function LinkCard({ props }: { props: ShortLinkProps }) { }); const { setShowShareLinkModal, ShareLinkModal } = useShareLinkModal({ - prop: props.shortLink, + props: props, }); const [openPopover, setOpenPopover] = useState(false); @@ -201,7 +211,7 @@ export default function LinkCard({ props }: { props: ShortLinkProps }) { return (
)} + {expired ? ( ) : ( )} -

{timeAgo(props.createdAt)}

+

{timeAgo(props.createdAt)}

 - +
- - +
- } /> -

{nFormatter(clicks)}

+ } /> +

{nFormatter(clicks)}

 +
+
); diff --git a/apps/extension/src/link/link-input.tsx b/apps/extension/src/link/link-input.tsx index dea1817f2b..08d01db686 100644 --- a/apps/extension/src/link/link-input.tsx +++ b/apps/extension/src/link/link-input.tsx @@ -1,14 +1,15 @@ import { cn, isValidUrl } from "@dub/utils"; import { Ban, CornerDownLeftIcon, Link2 } from "lucide-react"; import React, { useEffect, useState } from "react"; -import IconMenu from "../../public/IconMenu"; import LinkTemplate from "../../public/icons/linkTemplate"; +import Input from "../../ui/input"; import { useAddEditLinkModal } from "../../ui/modal/add-edit-link-modal"; import { setLocalLinks } from "../../utils/functions/localLinks"; import { useAuth } from "../auth/use-Auth"; import { ShortLinkProps } from "../types"; import { useSelectedWorkspace } from "../workspace/workspace-now"; import LinkCard from "./link-card"; +import AllLinks from "./all-links"; export default function LinkInput() { const [url, setUrl] = useState(""); @@ -75,19 +76,16 @@ export default function LinkInput() {
- - } + - - +
- {link ? : } +
+ {link ? : } +
); } diff --git a/apps/extension/src/types.tsx b/apps/extension/src/types.tsx index 3f0a30c48e..a54bf58a8f 100644 --- a/apps/extension/src/types.tsx +++ b/apps/extension/src/types.tsx @@ -85,7 +85,6 @@ export type LinkProps = Link; export interface ShortLinkProps extends LinkProps { tags: TagProps[]; - shortLink: string; tagId: null; qrCode: string; workspaceId: string; diff --git a/apps/extension/src/usespace/userspace.tsx b/apps/extension/src/usespace/userspace.tsx index de4d64a67e..18eec6982c 100644 --- a/apps/extension/src/usespace/userspace.tsx +++ b/apps/extension/src/usespace/userspace.tsx @@ -12,7 +12,7 @@ import { useSelectedWorkspace } from "../workspace/workspace-now"; import WorkspaceList from "../workspace/workspaceList"; export default function UserSpace() { - const { workspaces } = useWorkspaces(); + const { workspaces } = useWorkspaces() const { user, loading } = useAuth(); const { selectedWorkspace, setSelectedWorkspace } = useSelectedWorkspace(); const [openPopover, setOpenPopover] = useState(false); @@ -63,17 +63,17 @@ export default function UserSpace() { > + Add New + ); } diff --git a/apps/extension/tailwind.config.js b/apps/extension/tailwind.config.js index 069e1bc35b..2021c3b029 100644 --- a/apps/extension/tailwind.config.js +++ b/apps/extension/tailwind.config.js @@ -1,5 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { + important: true, content: ['**/*.html', '**/*.tsx'], theme: { extend: {} diff --git a/apps/extension/ui/button.tsx b/apps/extension/ui/button.tsx index 6df8758eb9..c4f1354673 100644 --- a/apps/extension/ui/button.tsx +++ b/apps/extension/ui/button.tsx @@ -1,6 +1,6 @@ import { cn } from "@dub/utils"; -import { Loader } from "lucide-react"; import { ReactNode } from "react"; +import LoadingCircle from "../public/icons/loading-circle"; import { Tooltip } from "./tooltip"; export interface ButtonProps @@ -42,9 +42,9 @@ export function Button({ )} > {icon} -

{text}

+

{text}

{shortcut && ( - {shortcut} - + )} @@ -64,7 +64,7 @@ export function Button({ // if onClick is passed, it's a "button" type, otherwise it's being used in a form, hence "submit" type={props.onClick ? "button" : "submit"} className={cn( - "group flex h-10 w-full items-center justify-center space-x-2 rounded-md border px-4 text-sm transition-all", + "group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-opacity-25 bg-white px-4 text-sm transition-all", props.disabled || loading ? "cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400" : { @@ -86,10 +86,10 @@ export function Button({ disabled={props.disabled || loading} {...props} > - {loading ? : icon ? icon : null} + {loading ? : icon ? icon : null} {text &&

{text}

} {shortcut && ( - {shortcut} - + )} ); diff --git a/apps/extension/ui/copy-button.tsx b/apps/extension/ui/copy-button.tsx index 86b00fc3e0..77967804a3 100644 --- a/apps/extension/ui/copy-button.tsx +++ b/apps/extension/ui/copy-button.tsx @@ -15,7 +15,7 @@ export function CopyButton({ const [copied, setCopied] = useState(false); const Comp = icon || Copy; return ( - + ); } diff --git a/apps/extension/ui/index.tsx b/apps/extension/ui/index.tsx index 61e7c78211..985ebc7318 100644 --- a/apps/extension/ui/index.tsx +++ b/apps/extension/ui/index.tsx @@ -5,6 +5,7 @@ export * from "./badge"; export * from "./button"; export * from "./checkbox"; export * from "./form"; +export * from "./input"; export * from "./input-select"; export * from "./label"; export * from "./modal"; diff --git a/apps/extension/ui/input-select.tsx b/apps/extension/ui/input-select.tsx index 7263274ea1..c8f2160566 100644 --- a/apps/extension/ui/input-select.tsx +++ b/apps/extension/ui/input-select.tsx @@ -91,19 +91,19 @@ export function InputSelect({ } }} disabled={disabled} - className="block w-full truncate rounded-md border-none px-0 text-base text-gray-900 placeholder-gray-400 outline-none outline-0 transition-all duration-300 focus:ring-0 md:text-sm" + className="block w-full truncate border-none border-white bg-white px-0 text-base text-gray-900 placeholder-gray-400 shadow-none outline-none outline-0 transition-all duration-300 focus:ring-0 md:text-sm" /> ); }); const CloseChevron = memo(() => ( - + )); // renders a reusable list of items @@ -227,7 +227,10 @@ export function InputSelect({ {openCommandList && ( - + {items.length === 0 && inputValue === "" && (noItemsElement ? ( @@ -257,7 +260,7 @@ export function InputSelect({
@@ -275,13 +278,16 @@ export function InputSelect({ icon || )}
-
+
{openCommandList && ( - + {items.length === 0 && inputValue === "" && (noItemsElement ? ( diff --git a/apps/extension/ui/input.tsx b/apps/extension/ui/input.tsx new file mode 100644 index 0000000000..dbe15c3d13 --- /dev/null +++ b/apps/extension/ui/input.tsx @@ -0,0 +1,15 @@ +import { cn } from "@dub/utils"; + +interface InputProps extends React.InputHTMLAttributes {} + +export default function Input({ className, ...props }: InputProps) { + return ( + + ); +} diff --git a/apps/extension/ui/link-preview.tsx b/apps/extension/ui/link-preview.tsx index 58d141c711..1c7d94fd8c 100644 --- a/apps/extension/ui/link-preview.tsx +++ b/apps/extension/ui/link-preview.tsx @@ -1,11 +1,12 @@ "use client"; import { fetcher, getDomainWithoutWWW, getUrlFromString } from "@dub/utils"; -import { Image, Link2, Loader } from "lucide-react"; +import { Image, Link2 } from "lucide-react"; import { useRouter, useSearchParams } from "next/navigation"; import { useEffect, useMemo, useRef } from "react"; import useSWR from "swr"; import { useDebounce } from "use-debounce"; +import LoadingCircle from "../public/icons/loading-circle"; import { useMediaQuery } from "./hooks"; export function LinkPreview({ defaultUrl }: { defaultUrl?: string }) { @@ -70,7 +71,7 @@ export function LinkPreview({ defaultUrl }: { defaultUrl?: string }) {
{isValidating && (
- +
)} {image ? ( @@ -135,7 +136,7 @@ export function LinkPreviewPlaceholder({
- +
diff --git a/apps/extension/ui/modal.tsx b/apps/extension/ui/modal.tsx index 1b0abfcd8c..2a0d922b64 100644 --- a/apps/extension/ui/modal.tsx +++ b/apps/extension/ui/modal.tsx @@ -78,13 +78,13 @@ export function Modal({ e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} className={cn( - "animate-scale-in fixed inset-0 z-40 m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-xl sm:rounded-2xl", + "animate-scale-in fixed inset-0 !z-[999999] m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-xl sm:rounded-2xl", className, )} > diff --git a/apps/extension/ui/modal/add-edit-link-modal/android-section.tsx b/apps/extension/ui/modal/add-edit-link-modal/android-section.tsx index d68912c137..0f104231b6 100644 --- a/apps/extension/ui/modal/add-edit-link-modal/android-section.tsx +++ b/apps/extension/ui/modal/add-edit-link-modal/android-section.tsx @@ -3,6 +3,7 @@ import { motion } from "framer-motion"; import { Dispatch, SetStateAction, useEffect, useState } from "react"; import { LinkProps } from "src/types"; import { SimpleTooltipContent, Switch } from "../../"; +import Input from "../../../ui/input"; import { ProBadgeTooltip } from "../../shared/pro-badge-tooltip"; export default function AndroidSection({ @@ -53,7 +54,7 @@ export default function AndroidSection({ className="mt-3 flex rounded-md shadow-sm" {...FADE_IN_ANIMATION_SETTINGS} > - { setData({ ...data, android: e.target.value }); }} - className="block w-full rounded-md border-gray-300 px-5 py-2 text-gray-900 placeholder-gray-400 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm" + className="block w-full rounded-md border border-gray-300 bg-white px-5 py-2 text-gray-900 placeholder-gray-400 shadow-none focus:border-gray-500 focus:shadow-lg focus:outline-none focus:ring-gray-500 sm:text-sm" aria-invalid="true" /> diff --git a/apps/extension/ui/modal/add-edit-link-modal/cloaking-section.tsx b/apps/extension/ui/modal/add-edit-link-modal/cloaking-section.tsx index f7842fa49b..27f85b2255 100644 --- a/apps/extension/ui/modal/add-edit-link-modal/cloaking-section.tsx +++ b/apps/extension/ui/modal/add-edit-link-modal/cloaking-section.tsx @@ -4,11 +4,12 @@ import { getUrlFromString, } from "@dub/utils"; import { motion } from "framer-motion"; -import { AlertCircle, CheckCircle, Loader } from "lucide-react"; +import { AlertCircle, CheckCircle } from "lucide-react"; import { Dispatch, SetStateAction, useEffect, useState } from "react"; import { LinkProps } from "src/types"; import useSWR from "swr"; import { SimpleTooltipContent, Switch } from "../../"; +import LoadingCircle from "../../../public/icons/loading-circle"; import { ProBadgeTooltip } from "../../shared/pro-badge-tooltip"; export default function CloakingSection({ @@ -57,8 +58,13 @@ export default function CloakingSection({