Merge pull request #1323 from mfts/fix/link-layout-details

chore: cleanup of links
mfts · Oct 28, 2024 · 1e4c38f · 1e4c38f
2 parents 6f37a75 + 750f1e6
commit 1e4c38f
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 24 deletions.
diff --git a/components/links/link-sheet/link-item.tsx b/components/links/link-sheet/link-item.tsx
@@ -1,9 +1,9 @@
-import { InfoIcon, RotateCcwIcon } from "lucide-react";
+import { CircleHelpIcon, RotateCcwIcon } from "lucide-react";
 
 import PlanBadge from "@/components/billing/plan-badge";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { BadgeTooltip, ButtonTooltip, Tooltip } from "@/components/ui/tooltip";
+import { BadgeTooltip, ButtonTooltip } from "@/components/ui/tooltip";
 
 import { cn } from "@/lib/utils";
 
@@ -45,7 +45,7 @@ export default function LinkItem({
               key="link_tooltip"
               link={link}
             >
-              <InfoIcon className="h-4 w-4 shrink-0 text-muted-foreground hover:text-foreground" />
+              <CircleHelpIcon className="h-4 w-4 shrink-0 text-muted-foreground hover:text-foreground" />
             </BadgeTooltip>
           )}
           {!isAllowed && requiredPlan && <PlanBadge plan={requiredPlan} />}

diff --git a/components/links/link-sheet/og-section.tsx b/components/links/link-sheet/og-section.tsx
@@ -200,7 +200,7 @@ export default function OGSection({
             </div>
             <label
               htmlFor="image"
-              className="group relative mt-1 flex aspect-auto h-full min-h-[14rem] cursor-pointer flex-col items-center justify-center rounded-md border border-input bg-white shadow-sm transition-all hover:border-muted-foreground hover:bg-gray-50 hover:ring-muted-foreground dark:bg-gray-800 hover:dark:bg-transparent sm:aspect-[1200/630]"
+              className="group relative mt-1 flex aspect-[1200/630] h-fit cursor-pointer flex-col items-center justify-center rounded-md border border-input bg-white shadow-sm transition-all hover:border-muted-foreground hover:bg-gray-50 hover:ring-muted-foreground dark:bg-gray-800 hover:dark:bg-transparent"
             >
               {false && (
                 <div className="absolute z-[5] flex h-full w-full items-center justify-center rounded-md bg-white">
@@ -310,7 +310,7 @@ export default function OGSection({
             </div>
             <label
               htmlFor="faviconIcon"
-              className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
+              className="group relative mt-1 flex size-14 cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
               style={{
                 backgroundImage:
                   "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",

diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
@@ -36,7 +36,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 overflow-hidden rounded-md border bg-popover px-2 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
@@ -67,7 +67,7 @@ export const BadgeTooltip = ({
         {children}
       </TooltipTrigger>
       <TooltipPortal>
-        <TooltipContent className="max-w-72 text-center">
+        <TooltipContent className="max-w-72 text-center text-muted-foreground">
           {link ? (
             <p>
               {content}{" "}

diff --git a/components/welcome/dataroom-upload.tsx b/components/welcome/dataroom-upload.tsx
@@ -318,7 +318,7 @@ export default function DataroomUpload({ dataroomId }: DataroomUploadProps) {
               </main>
             )}
             {currentLinkId && (
-              <main className="min-h-[300px]">
+              <main className="max-h-[calc(100dvh-10rem)] min-h-[300px] overflow-y-scroll scrollbar-hide">
                 <div className="flex flex-col justify-center">
                   <div className="relative">
                     <div className="flex py-8">

diff --git a/components/welcome/notion-form.tsx b/components/welcome/notion-form.tsx
@@ -310,7 +310,7 @@ export default function NotionForm() {
               </main>
             )}
             {currentLinkId && currentDocId && (
-              <main className="min-h-[300px]">
+              <main className="max-h-[calc(100dvh-10rem)] min-h-[300px] overflow-y-scroll scrollbar-hide">
                 <div className="flex flex-col justify-center">
                   <div className="relative">
                     <div className="flex py-8">

diff --git a/components/welcome/special-upload.tsx b/components/welcome/special-upload.tsx
@@ -324,7 +324,7 @@ export default function DeckGeneratorUpload() {
               </main>
             )}
             {currentLinkId && currentDocId && (
-              <main className="min-h-[300px]">
+              <main className="max-h-[calc(100dvh-10rem)] min-h-[300px] overflow-y-scroll scrollbar-hide">
                 <div className="flex flex-col justify-center">
                   <div className="relative">
                     <div className="flex py-8">

diff --git a/components/welcome/upload.tsx b/components/welcome/upload.tsx
@@ -305,7 +305,7 @@ export default function Upload() {
               </main>
             )}
             {currentLinkId && currentDocId && (
-              <main className="min-h-[300px]">
+              <main className="max-h-[calc(100dvh-10rem)] min-h-[300px] overflow-y-scroll scrollbar-hide">
                 <div className="flex flex-col justify-center">
                   <div className="relative">
                     <div className="flex py-8">

diff --git a/pages/settings/branding.tsx b/pages/settings/branding.tsx
@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { useTeam } from "@/context/team-context";
-import { InfoIcon, PlusIcon } from "lucide-react";
-import { encode } from "next-auth/jwt";
+import { CircleHelpIcon, PlusIcon } from "lucide-react";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 import { toast } from "sonner";
 import { mutate } from "swr";
@@ -147,13 +146,13 @@ export default function Branding() {
               <p className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
                 Customize how your brand appears globally across Papermark
                 documents your visitors see.
-                <BadgeTooltip
+                {/* <BadgeTooltip
                   linkText="Click here"
-                  content="How to customize data room branding?"
+                  content="How to customize document branding?"
                   key="branding"
                 >
-                  <InfoIcon className="h-4 w-4 shrink-0 text-foreground" />
-                </BadgeTooltip>
+                  <CircleHelpIcon className="h-4 w-4 shrink-0 text-muted-foreground hover:text-foreground" />
+                </BadgeTooltip> */}
               </p>
             </div>
           </div>

diff --git a/pages/settings/domains.tsx b/pages/settings/domains.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useTeam } from "@/context/team-context";
-import { InfoIcon } from "lucide-react";
+import { CircleHelpIcon } from "lucide-react";
 import { mutate } from "swr";
 
 import { AddDomainModal } from "@/components/domains/add-domain-modal";
@@ -53,7 +53,7 @@ export default function Domains() {
                   linkText="Click here"
                   link="https://www.papermark.io/help/article/how-to-add-custom-domain-to-link"
                 >
-                  <InfoIcon className="h-4 w-4 shrink-0 text-foreground" />
+                  <CircleHelpIcon className="h-4 w-4 shrink-0 text-muted-foreground hover:text-foreground" />
                 </BadgeTooltip>
               </p>
             </div>

diff --git a/pages/settings/presets.tsx b/pages/settings/presets.tsx
@@ -2,10 +2,13 @@ import { ChangeEvent, useCallback, useEffect, useState } from "react";
 
 import { useTeam } from "@/context/team-context";
 import { LinkPreset } from "@prisma/client";
-import { Upload as ArrowUpTrayIcon, InfoIcon, PlusIcon } from "lucide-react";
-import { DropEvent } from "react-dropzone";
+import {
+  Upload as ArrowUpTrayIcon,
+  CircleHelpIcon,
+  PlusIcon,
+} from "lucide-react";
 import { toast } from "sonner";
-import useSWR, { mutate } from "swr";
+import { mutate } from "swr";
 import useSWRImmutable from "swr/immutable";
 
 import { UpgradePlanModal } from "@/components/billing/upgrade-plan-modal";
@@ -224,7 +227,7 @@ export default function Presets() {
                   key="verified"
                   link="https://www.papermark.io/help/article/change-social-media-cards"
                 >
-                  <InfoIcon className="h-4 w-4 shrink-0 cursor-pointer text-foreground" />
+                  <CircleHelpIcon className="h-4 w-4 shrink-0 cursor-pointer text-muted-foreground hover:text-foreground" />
                 </BadgeTooltip>
               </p>
             </div>
@@ -355,7 +358,7 @@ export default function Presets() {
                   </div>
                   <label
                     htmlFor="faviconIcon"
-                    className="group relative mt-1 flex h-[4rem] w-[12rem] cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
+                    className="group relative mt-1 flex size-14 cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
                     style={{
                       backgroundImage:
                         "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",