UI tweaks (#20401)

* font changes to better match figma

* fix alignment in debug view

web/src/components/mobile/MobilePage.tsx

@@ -222,7 +222,7 @@ export function MobilePageHeader({
 type MobilePageTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
 export function MobilePageTitle({ className, ...props }: MobilePageTitleProps) {
-  return <h2 className={cn("text-lg font-semibold", className)} {...props} />;
+  return <h2 className={cn("text-lg", className)} {...props} />;
 }
 
 type MobilePageDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;

web/src/components/overlay/RoleChangeDialog.tsx

@@ -42,7 +42,7 @@ export default function RoleChangeDialog({
     <Dialog open={show} onOpenChange={onCancel}>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
-          <DialogTitle className="text-xl font-semibold">
+          <DialogTitle className="text-xl">
             {t("users.dialog.changeRole.title")}
           </DialogTitle>
           <DialogDescription>

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -1170,11 +1170,7 @@ export function ObjectSnapshotTab({
                 <Card className="p-1 text-sm md:p-2">
                   <CardContent className="flex flex-col items-center justify-between gap-3 p-2 md:flex-row">
                     <div className={cn("flex flex-col space-y-3")}>
-                      <div
+                      <div className={"text-lg leading-none"}>
-                        className={
-                          "text-lg font-semibold leading-none tracking-tight"
-                        }
-                      >
                         {t("explore.plus.submitToPlus.label")}
                       </div>
                       <div className="text-sm text-muted-foreground">

web/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
+import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
-)
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
+));
-Alert.displayName = "Alert"
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -38,11 +38,11 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    className={cn("mb-1 font-medium leading-none", className)}
     {...props}
   />
-))
+));
-AlertTitle.displayName = "AlertTitle"
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
+));
-AlertDescription.displayName = "AlertDescription"
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };

web/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
-Card.displayName = "Card"
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
+));
-CardHeader.displayName = "CardHeader"
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -35,14 +35,11 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn(
+    className={cn("text-2xl font-semibold leading-none", className)}
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
     {...props}
   />
-))
+));
-CardTitle.displayName = "CardTitle"
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
-CardDescription.displayName = "CardDescription"
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
+));
-CardContent.displayName = "CardContent"
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -73,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
+));
-CardFooter.displayName = "CardFooter"
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

web/src/components/ui/dialog.tsx

@@ -149,10 +149,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
+    className={cn("text-lg font-semibold leading-none", className)}
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
     {...props}
   />
 ));

web/src/components/ui/drawer.tsx

@@ -85,10 +85,7 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn(
+    className={cn("text-lg font-semibold leading-none", className)}
-      "text-lg font-semibold leading-none tracking-tight",
-      className,
-    )}
     {...props}
   />
 ));

web/src/components/ui/heading.tsx

@@ -14,12 +14,7 @@ const Heading = ({
   switch (as) {
     case "h1":
       return (
-        <h1
+        <h1 className={cn("scroll-m-20 text-3xl font-extrabold", className)}>
-          className={cn(
-            "scroll-m-20 text-3xl font-extrabold tracking-tight",
-            className
-          )}
-        >
           {children}
         </h1>
       );
@@ -27,8 +22,8 @@ const Heading = ({
       return (
         <h2
           className={cn(
-            "scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0 mb-3",
+            "mb-3 scroll-m-20 text-3xl font-semibold transition-colors first:mt-0",
-            className
+            className,
           )}
         >
           {children}
@@ -36,34 +31,19 @@ const Heading = ({
       );
     case "h3":
       return (
-        <h3
+        <h3 className={cn("mb-3 scroll-m-20 text-2xl font-medium", className)}>
-          className={cn(
-            "scroll-m-20 text-2xl font-semibold tracking-tight mb-3",
-            className
-          )}
-        >
           {children}
         </h3>
       );
     case "h4":
       return (
-        <h4
+        <h4 className={cn("scroll-m-20 text-xl font-medium", className)}>
-          className={cn(
-            "scroll-m-20 text-xl font-semibold tracking-tight",
-            className
-          )}
-        >
           {children}
         </h4>
       );
     default:
       return (
-        <h1
+        <h1 className={cn("scroll-m-20 text-3xl font-extrabold", className)}>
-          className={cn(
-            "scroll-m-20 text-3xl font-extrabold tracking-tight",
-            className
-          )}
-        >
           {children}
         </h1>
       );

web/src/pages/Settings.tsx

@@ -292,7 +292,7 @@ export default function Settings() {
                 <Logo className="h-8" />
               </div>
               <div className="flex flex-row text-center">
-                <h2 className="ml-2 text-lg font-semibold">
+                <h2 className="ml-2 text-lg">
                   {t("menu.settings", { ns: "common" })}
                 </h2>
               </div>

web/src/views/settings/ObjectSettingsView.tsx

@@ -162,9 +162,9 @@ export default function ObjectSettingsView({
   }
 
   return (
-    <div className="flex size-full flex-col md:flex-row">
+    <div className="mt-1 flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:w-3/12">
+      <div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
         <Heading as="h4" className="mb-2">
           {t("debug.title")}
         </Heading>