Round UI, tweak sidebar

src/components/Badge.tsx

@@ -29,7 +29,7 @@ export default function Badge({
       case 'small':
         return clsx(
           'px-[5px] h-[17px] md:h-[18px]',
-          'text-[0.7rem] font-medium rounded-[0.25rem]',
+          'text-[0.7rem] font-medium rounded-md',
           contrast === 'high'
             ? 'text-invert bg-invert'
             : contrast === 'frosted'

src/photo/PhotoGridSidebar.tsx

@@ -125,12 +125,12 @@ export default function PhotoGridSidebar({
       key="years"
       title={appText.category.yearPlural}
       icon={<IconYear
-        size={14}
+        size={13}
         className="translate-x-[0.5px]"
       />}
       maxItems={maxItemsPerCategory}
       items={yearRows.map((row, index) =>
-        <div key={index} className="flex gap-1">
+        <div key={index} className="flex gap-[5px]">
           {row.map(({ year, count }) =>
             <PhotoYear
               key={year}
@@ -152,8 +152,8 @@ export default function PhotoGridSidebar({
       key="cameras"
       title={appText.category.cameraPlural}
       icon={<IconCamera
-        size={15}
-        className="translate-x-[0.5px]"
+        size={14}
+        className="translate-x-[1px]"
       />}
       maxItems={maxItemsPerCategory}
       items={cameras
@@ -195,7 +195,8 @@ export default function PhotoGridSidebar({
       key="albums"
       title={appText.category.albumPlural}
       icon={<IconAlbum
-        className="translate-x-[1px]"
+        size={13.5}
+        className="translate-x-[1.5px]"
       />}
       maxItems={maxItemsPerCategory}
       items={albums
@@ -219,8 +220,8 @@ export default function PhotoGridSidebar({
       key="tags"
       title={appText.category.tagPlural}
       icon={<IconTag
-        size={14}
-        className="translate-x-[1px] translate-y-[1px]"
+        size={13.5}
+        className="translate-x-[1.5px] translate-y-[1px]"
       />}
       maxItems={maxItemsPerCategory}
       items={tagsIncludingHidden

tailwind.css

@@ -238,7 +238,7 @@ html {
   input[type=text], input[type=email], input[type=password], select, textarea {
     @apply
       px-2.5 py-2
-      border rounded-md
+      border rounded-lg
       bg-main
       border-gray-200 dark:border-gray-700
       font-mono text-base leading-tight