Tighten UI density (#89)

benvinegar · Aug 4, 2024 · f0aea15 · f0aea15
1 parent 362eb95
commit f0aea15
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
@@ -88,7 +88,7 @@ const TableHead = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "h-12 p-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+            "h-12 p-3 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
             className,
         )}
         {...props}
@@ -103,7 +103,7 @@ const TableCell = React.forwardRef<
     <div
         ref={ref}
         className={cn(
-            "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+            "p-3 align-middle [&:has([role=checkbox])]:pr-0",
             className,
         )}
         {...props}

diff --git a/app/root.tsx b/app/root.tsx
@@ -74,7 +74,7 @@ export const Layout = ({ children = [] }: { children: React.ReactNode }) => {
                 <Links />
             </head>
             <body>
-                <div className="container mx-auto mt-4">{children}</div>
+                <div className="container mx-auto">{children}</div>
                 <ScrollRestoration />
                 <Scripts />
                 <script
@@ -91,31 +91,31 @@ export const Layout = ({ children = [] }: { children: React.ReactNode }) => {
 export default function App() {
     const data = useLoaderData<typeof loader>();
     return (
-        <div>
-            <header className="border-b-2 mb-12 py-4">
+        <div className="mt-4">
+            <header className="border-b-2 mb-8 py-2">
                 <nav className="flex justify-between items-center">
                     <div className="flex items-center">
-                        <a href="/" className="text-xl sm:text-2xl font-bold">
+                        <a href="/" className="text-lg font-bold">
                             Counterscale
                         </a>
                         <img
-                            className="w-6 sm:w-8 ml-1"
+                            className="w-6 ml-1"
                             src="/favicon.png"
                             alt="Counterscale Icon"
                         />
                     </div>
-                    <div className="flex items-center font-small font-medium text-md sm:text-lg">
+                    <div className="flex items-center font-small font-medium text-md">
                         <a href="/dashboard">Dashboard</a>
                         <a
                             href="/admin-redirect"
                             target="_blank"
-                            className="hidden sm:inline-block ml-2 sm:ml-4"
+                            className="hidden sm:inline-block ml-2"
                         >
                             Admin
                         </a>
                         <a
                             href="https://github.com/benvinegar/counterscale"
-                            className="w-8 ml-2 sm:ml-4"
+                            className="w-6 ml-2"
                         >
                             <img
                                 src="/github-mark.svg"

diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
@@ -236,7 +236,7 @@ export default function Dashboard() {
                     </Select>
                 </div>
 
-                <div className="lg:basis-1/5-gap-4 sm:basis-1/4-gap-4 basis-1/2-gap-4">
+                <div className="lg:basis-1/6-gap-4 sm:basis-1/5-gap-4 basis-1/3-gap-4">
                     <Select
                         defaultValue={data.interval}
                         onValueChange={(interval) => changeInterval(interval)}
@@ -265,40 +265,38 @@ export default function Dashboard() {
             <div className="transition" style={{ opacity: loading ? 0.6 : 1 }}>
                 <div className="w-full mb-4">
                     <Card>
-                        <CardContent className="pt-6">
+                        <div className="p-4 pl-6">
                             <div className="grid grid-cols-3 gap-10 items-end">
                                 <div>
-                                    <div className="text-sm sm:text-lg">
-                                        Views
-                                    </div>
+                                    <div className="text-md">Views</div>
                                     <div className="text-4xl">
                                         {countFormatter.format(data.views)}
                                     </div>
                                 </div>
                                 <div>
-                                    <div className="text-sm sm:text-lg">
+                                    <div className="text-md sm:text-lg">
                                         Visits
                                     </div>
                                     <div className="text-4xl">
                                         {countFormatter.format(data.visits)}
                                     </div>
                                 </div>
                                 <div>
-                                    <div className="text-sm sm:text-lg">
+                                    <div className="text-md sm:text-lg">
                                         Visitors
                                     </div>
                                     <div className="text-4xl">
                                         {countFormatter.format(data.visitors)}
                                     </div>
                                 </div>
                             </div>
-                        </CardContent>
+                        </div>
                     </Card>
                 </div>
                 <div className="w-full mb-4">
                     <Card>
                         <CardContent>
-                            <div className="h-80 pt-6 -m-4 -ml-8 sm:m-0">
+                            <div className="h-72 pt-6 -m-4 -ml-8 sm:m-0">
                                 <TimeSeriesChart
                                     data={chartData}
                                     intervalType={data.intervalType}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -23,6 +23,7 @@ module.exports = {
                 "1/3-gap-4": "calc(33.333333% - (1/3 * 1rem))",
                 "1/4-gap-4": "calc(25% - (1/4 * 1rem))",
                 "1/5-gap-4": "calc(20% - (1/5 * 1rem))",
+                "1/6-gap-4": "calc(16.666667% - (1/6 * 1rem))",
             },
             colors: {
                 border: "hsl(var(--border))",