Refine insights UI

src/admin/AdminAppConfigurationClient.tsx

@@ -213,7 +213,7 @@ export default function AdminAppConfigurationClient({
     </WarningNote>;
 
   return (
-    <div className="max-w-xl w-full">
+    <>
       <div className="space-y-3 -mt-3">
         <ChecklistGroup
           title="Storage"
@@ -732,6 +732,6 @@ export default function AdminAppConfigurationClient({
             </div>
           </div>}
       </div>
-    </div>
+    </>
   );
 }

src/admin/AdminAppInsightsClient.tsx

@@ -5,7 +5,6 @@ import ScoreCard from '@/components/ScoreCard';
 import ScoreCardRow from '@/components/ScoreCardRow';
 import { dateRangeForPhotos, PhotoDateRange } from '@/photo';
 import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon';
-import clsx from 'clsx/lite';
 import { FaCamera } from 'react-icons/fa';
 import { FaTag } from 'react-icons/fa';
 import { FaRegCalendar } from 'react-icons/fa6';
@@ -66,29 +65,16 @@ export default function AdminAppInsightsClient({
 
   const { descriptionWithSpaces } = dateRangeForPhotos(undefined, dateRange);
 
-  const renderTitle = (title: string) =>
-    <div className={clsx(
-      'uppercase font-medium tracking-wider text-[0.8rem]',
-      'text-medium',
-    )}>
-      {title}
-    </div>;
-
   return (
-    <div className={clsx(
+    <div className="space-y-6 md:space-y-8">
-      'flex flex-col items-center w-full',
-    )}>
-      <div className={clsx(
-        'w-full sm:w-[80%] lg:w-[60%]',
-        'space-y-4 md:space-y-6',
-      )}>
       {(codeMeta?.isBaseRepo || codeMeta?.isForkedFromBase || debug) && <>
-          {renderTitle('Build details')}
+        <ScoreCard title="Build details">
-          <ScoreCard>
           <ScoreCardRow
             icon={<BiLogoGithub size={17} />}
-              content={<div className="flex items-center gap-4">
+            content={<div
-                <div className="flex items-center gap-1">
+              className="flex flex-wrap gap-x-4 gap-y-1 overflow-auto"
+            >
+              <div className="flex items-center gap-1 *:whitespace-nowrap">
                 <div>{codeMeta?.owner ?? TEMPLATE_REPO_OWNER}</div>
                 <div>/</div>
                 <div>{codeMeta?.repo ?? TEMPLATE_REPO_NAME}</div>
@@ -101,18 +87,6 @@ export default function AdminAppInsightsClient({
               </div>
             </div>}
           />
-            {(codeMeta?.behindBy || debug) &&
-              <ScoreCardRow
-                icon={<HiOutlineRefresh
-                  size={17}
-                  className="translate-x-[0.5px] text-amber-600"
-                />}
-                // eslint-disable-next-line max-len
-                content={`This fork is ${codeMeta?.behindBy ?? 9} commits behind`}
-                additionalContent={<>
-                  Sync your fork to receive new features and fixes
-                </>}
-              />}
           <ScoreCardRow
             // icon={<BiLogoGithub size={17} />}
             icon={<BiGitCommit size={18} className="translate-y-[0px]" />}
@@ -125,10 +99,20 @@ export default function AdminAppInsightsClient({
               </div>
             </div>}
           />
+          {(codeMeta?.behindBy || debug) &&
+            <ScoreCardRow
+              icon={<HiOutlineRefresh
+                size={17}
+                className="translate-x-[0.5px] text-blue-500"
+              />}
+              content={`This fork is ${codeMeta?.behindBy ?? 9} commits behind`}
+              additionalContent={<>
+                Sync your fork to receive new features and fixes
+              </>}
+            />}
         </ScoreCard>
       </>}
-        {renderTitle('Template recommendations')}
+      <ScoreCard title="Template recommendations">
-        <ScoreCard>
         <ScoreCardRow
           icon={<PiWarningBold
             size={17}
@@ -157,8 +141,7 @@ export default function AdminAppInsightsClient({
           content="Enable AI text generation in the app configuration"
         />
       </ScoreCard>
-        {renderTitle('Library Stats')}
+      <ScoreCard title="Library Stats">
-        <ScoreCard className="uppercase">
         <ScoreCardRow
           icon={<HiOutlinePhotograph
             size={17}
@@ -207,6 +190,5 @@ export default function AdminAppInsightsClient({
         />
       </ScoreCard>
     </div>
-    </div>
   );
 }

src/admin/AdminAppInsightsIcon.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx/lite';
 import { FaInfo } from 'react-icons/fa';
 
 export default function AdminAppInsightsIcon({
-  notification = true,
+  indicator = 'blue',
 }: {
-  notification?: boolean,
+  indicator?: 'blue' | 'yellow'
 }) {
   return (
     <span className="inline-flex relative">
@@ -19,11 +19,15 @@ export default function AdminAppInsightsIcon({
           aria-label="App Configuration"
         />
       </span>
-      {notification && <span className={clsx(
+      {indicator && <span className={clsx(
         'absolute',
         'top-[0.5px] right-[-2.5px]',
         'size-2 rounded-full',
-        'bg-blue-500',
+        indicator === 'yellow'
+          ? 'bg-amber-500'
+          : indicator === 'blue'
+            ? 'bg-blue-500'
+            : undefined,
       )} />}
     </span>
   );

src/admin/AdminInfoPage.tsx

@@ -22,7 +22,9 @@ export default function AdminInfoPage({
             {accessory}
           </div>
           <Container spaceChildren={false}>
+            <div className="max-w-xl w-full">
               {children}
+            </div>
           </Container>
         </div>}
     />

src/components/ScoreCard.tsx

@@ -2,18 +2,30 @@ import clsx from 'clsx/lite';
 import { ReactNode } from 'react';
 
 export default function ScoreCard({
+  title,
   children,
   className,
 }: {
+  title?: string,
   children: ReactNode,
   className?: string,
 }) {
   return (
+    <div className="space-y-3">
+      {title &&
         <div className={clsx(
-      'component-surface shadow-xs divide-y divide-main',
+          'pl-4',
+          'uppercase font-medium tracking-wider text-[0.8rem]',
+          'text-medium',
+        )}>
+          {title}
+        </div>}
+      <div className={clsx(
+        'component-surface shadow-xs divide-y divide-medium',
         className,
       )}>
         {children}
       </div>
+    </div>
   );
 }

src/components/ScoreCardRow.tsx

@@ -6,10 +6,12 @@ export default function ScoreCardRow({
   icon,
   content,
   additionalContent,
+  className,
 }: {
   icon: ReactNode
   content: ReactNode
   additionalContent?: ReactNode
+  className?: string
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -17,6 +19,7 @@ export default function ScoreCardRow({
     <div className={clsx(
       'flex',
       'py-2 pr-2',
+      className,
     )}>
       <div className={clsx(
         'flex justify-center pt-[8px] w-11 sm:w-14',

tailwind.css

@@ -128,6 +128,14 @@
   @apply
     divide-gray-200 dark:divide-gray-700
 }
+@utility border-medium {
+  @apply
+    border border-gray-200 dark:border-gray-800
+}
+@utility divide-medium {
+  @apply
+    divide-gray-200 dark:divide-gray-800
+}
 /* Background */
 @utility bg-main {
   @apply
@@ -139,8 +147,7 @@
 }
 @utility bg-content {
   @apply
-    bg-white border-gray-200
+    bg-main border-medium
-    dark:bg-black dark:border-gray-800
 }
 @utility bg-invert {
   @apply
@@ -305,7 +312,6 @@
 @layer components {
   .component-surface {
     @apply
-      bg-content border-main
+      bg-content rounded-lg
-      rounded-lg
   }
 }