fix: minor design fixes

Signed-off-by: Varun Raj <varun@skcript.com>

src/components/albums/AlbumCreateDialog.tsx

@@ -55,7 +55,7 @@ export default function AlbumCreateDialog({ onSubmit, assetIds }: IProps) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button>Create Album</Button>
+        <Button size={"sm"}>Create Album</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

src/components/albums/AlbumSelectorDialog.tsx

@@ -78,7 +78,7 @@ export default function AlbumSelectorDialog({ onSelected }: IProps) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button>Select Album</Button>
+        <Button size={"sm"}>Select Album</Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

src/components/albums/info/AlbumImages.tsx

@@ -125,22 +125,21 @@ export default function AlbumImages({ album }: AlbumImagesProps) {
         index={index}
         close={() => setIndex(-1)}
       />
-      <div className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 p-2">
+      <div className="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2 p-2">
         {images.map((image) => (
           <div
             key={image.id}
-            className="w-full h-[200px] overflow-hidden relative"
+            className="w-full h-[180px] overflow-hidden relative"
             >
             <LazyImage
               loading="lazy"
               key={image.id}
               src={image.original}
               alt={image.originalFileName}
-              className='overflow-hidden'
+              className='overflow-hidden max-h-[180px] max-w-[180px] min-h-[180px] min-w-[180px]'
               style={{
                 objectPosition: 'center',
-                objectFit: 'cover',
-                height: '100%',
+                objectFit: 'cover'
               }}
               onClick={() => handleClick(images.indexOf(image))}
             />

src/components/albums/info/AlbumPeople.tsx

@@ -99,7 +99,7 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) {
   }
 
   return (
-    <div className="overflow-y-auto min-w-[200px] sticky top-0 py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)]  dark:bg-zinc-900 bg-gray-200 flex flex-col gap-2 px-2">
+    <div className="overflow-y-auto min-w-[200px] sticky top-0 py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)] border-r border-gray-200 dark:border-zinc-800 flex flex-col gap-2 px-2">
 
       {selectedPerson && (
         <div className='flex flex-col gap-2 bg-white dark:bg-zinc-900 p-2 rounded-md'>
@@ -157,7 +157,7 @@ export default function AlbumPeople({ album, onSelect }: AlbumPeopleProps) {
           </Button>
         )}
         {selectedPeople.length > 0 && (
-          <div className='absolute mx-auto bottom-0 w-full py-2 dark:bg-white bg-black -mx-2 px-2'>
+          <div className='absolute mx-auto bottom-0 w-full py-2 bg-white darl:bg-black -mx-2 px-2'>
             <Button variant="outline" className="!py-0.5 !px-2 text-xs h-7" onClick={handleHideSelectedPeople}>
               Hide {selectedPeople.length} people
             </Button>

src/components/albums/potential-albums/PotentialAlbumsDates.tsx

@@ -46,7 +46,7 @@ export default function PotentialAlbumsDates() {
   }, [filters]);
 
   return (
-    <div className="overflow-y-auto min-w-[200px] py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)]  dark:bg-zinc-900 bg-gray-200 flex flex-col gap-2 px-2">
+    <div className="min-w-[200px] py-4 max-h-[calc(100vh-60px)] min-h-[calc(100vh-60px)]  border-r border-gray-200 dark:border-zinc-800 flex flex-col gap-2 px-1">
       <div className="flex justify-between items-center gap-2">
         <Select
           defaultValue={filters.sortBy}
@@ -69,14 +69,15 @@ export default function PotentialAlbumsDates() {
           </Button>
         </div>
       </div>
-
-      {dateRecords.map((record) => (
-        <PotentialDateItem
-          key={record.date}
-          record={record}
-          onSelect={handleSelect}
-        />
-      ))}
+      <div className="overflow-y-auto">
+        {dateRecords.map((record) => (
+          <PotentialDateItem
+            key={record.date}
+            record={record}
+            onSelect={handleSelect}
+          />
+        ))}
+    </div>
     </div>
   );
 }

src/components/albums/potential-albums/PotentialDateItem.tsx

@@ -20,11 +20,11 @@ export default function PotentialDateItem({ record, onSelect }: IProps) {
       onClick={() => onSelect(record.date)}
       key={record.date}
       className={
-        cn("flex gap-1 flex-col p-2 py-1 rounded-lg hover:dark:bg-zinc-800 border border-transparent hover:bg-zinc-100 px-4",
+        cn("flex gap-1 flex-col p-2 py-1 rounded-lg hover:dark:bg-zinc-800 border border-transparent hover:bg-zinc-100",
         startDate === record.date ? "bg-zinc-100 dark:bg-zinc-800 border-gray-300 dark:border-zinc-700" : "")
       }
     >
-      <p className="font-mono text-sm">{dateLabel}</p>
+      <p className="text-sm">{dateLabel}</p>
       <p className="text-xs text-foreground/50">{record.asset_count} Orphan Assets</p>
     </div>
   );

src/components/analytics/exif/AssetHeatMap.tsx

@@ -58,7 +58,7 @@ export default function AssetHeatMap() {
     const threshold2 = minCount + range * 0.4;
     const threshold3 = minCount + range * 0.6;
     const threshold4 = minCount + range * 0.8;
-    if (count === 0) return "bg-zinc-800";
+    if (count === 0) return "bg-zinc-200 dark:bg-zinc-800";
     if (count <= threshold1) return "bg-green-200";
     if (count <= threshold2) return "bg-green-400";
     if (count <= threshold3) return "bg-green-500";

src/pages/albums/potential-albums.tsx

@@ -74,13 +74,14 @@ export default function PotentialAlbums() {
       <Header
         leftComponent="Potential Albums"
         rightComponent={
-          <>
+          <div className="flex gap-2 items-center">
             <Badge variant={"outline"}>
               {config.selectedIds.length} Selected
             </Badge>
             {config.selectedIds.length && config.selectedIds.length === config.assets.length ? (
               <Button
                 variant={"outline"}
+                size={"sm"}
                 onClick={() =>
                   setConfig({
                     ...config,
@@ -93,6 +94,7 @@ export default function PotentialAlbums() {
             ) : (
               <Button
                 variant={"outline"}
+                size={"sm"}
                 onClick={() =>
                   setConfig({
                     ...config,
@@ -106,7 +108,7 @@ export default function PotentialAlbums() {
             <AlbumSelectorDialog onSelected={handleSelect} />
             <AlbumCreateDialog onSubmit={handleCreate} assetIds={config.assets.map((a) => a.id)} />
             <AssetsOptions assets={selectedAssets} onAdd={() => { }} />
-          </>
+          </div>
         }
       />
       <PotentialAlbumContext.Provider