chore: css improvements

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

web/src/components/card.module.css

@@ -0,0 +1,84 @@
+a.card {
+  all: unset;
+  cursor: pointer;
+
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+  z-index: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+
+  margin: 0;
+  padding: 0.3rem 0.4rem 0.3rem 0.5rem;
+
+  transition: background-color 0.2s ease;
+  border-radius: var(--pico-border-radius);
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--pico-border-radius);
+    background-color: var(--pico-card-background-color);
+    box-shadow: var(--pico-card-box-shadow);
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
+button.card {
+  all: unset;
+  cursor: pointer;
+
+  position: relative;
+  box-sizing: border-box;
+  user-select: none;
+  z-index: 0;
+
+  margin: 0;
+  padding: 0.5rem 0.5rem 0.3rem 0.5rem;
+
+  transition: background-color 0.2s ease;
+  border-radius: var(--pico-border-radius);
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--pico-border-radius);
+    background-color: var(--pico-card-background-color);
+    opacity: 0;
+    transform: scale(0.94) scaleX(1.04);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+  }
+
+  &[data-active="true"] {
+    &::before {
+      box-shadow: var(--pico-card-box-shadow);
+      opacity: 1;
+      transform: scale(1) scaleX(1);
+    }
+  }
+
+  &:hover:not([data-active="true"]) {
+    &::before {
+      opacity: 0.5;
+    }
+  }
+}

web/src/components/card.tsx

@@ -0,0 +1,48 @@
+import styles from "./card.module.css";
+import { cls } from "../utils";
+
+export const CardButton = ({
+	active,
+	children,
+	onClick,
+	className,
+	type = "button",
+	disabled,
+}: {
+	children?: React.ReactNode;
+	active?: boolean;
+	onClick?: () => void;
+	className?: string;
+	type?: "button" | "submit" | "reset";
+	disabled?: boolean;
+}) => {
+	return (
+		<button
+			type={type}
+			className={cls(className, styles.card)}
+			onClick={onClick}
+			disabled={disabled}
+			data-active={active}
+		>
+			{children}
+		</button>
+	);
+};
+
+export const CardLink = ({
+	href,
+	target,
+	children,
+	className,
+}: {
+	href: string;
+	target?: string;
+	children?: React.ReactNode;
+	className?: string;
+}) => {
+	return (
+		<a href={href} target={target} className={cls(className, styles.card)}>
+			{children}
+		</a>
+	);
+};

web/src/components/project.module.css

@@ -9,7 +9,6 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.2rem;
-  margin-left: 0.1rem;
   flex-wrap: wrap;
   gap: 1rem;
 
@@ -25,7 +24,6 @@
 }
 
 .projectStats {
-  margin: 0 0.4rem;
 }
 
 .tables {

web/src/components/project/metric.module.css

@@ -5,64 +5,18 @@
   gap: 0.7rem;
   margin-bottom: -0.4rem;
 
-  @media (max-width: 768px) {
+  @media (max-width: 820px) {
     flex-wrap: wrap;
 
     button.metric {
-      width: 50%;
+      width: calc(50% - 0.4rem);
     }
   }
 }
 
 button.metric {
-  all: unset;
-  cursor: pointer;
-  margin: 0;
-  font-size: 0.8rem;
   min-width: 7rem;
-  padding: 0.5rem 0.8rem 0.3rem 0.6rem;
-  margin-left: -0.4rem;
-  transition: background-color 0.2s ease;
-  border-radius: var(--pico-border-radius);
-  user-select: none;
-  position: relative;
-  z-index: 0;
-  box-sizing: border-box;
-
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: var(--pico-border-radius);
-    background-color: var(--pico-card-background-color);
-    opacity: 0;
-    transform: scale(0.97);
-    transition: opacity 0.2s ease, transform 0.2s ease;
-  }
-
-  &[data-active="true"] {
-    &::before {
-      box-shadow: var(--pico-card-box-shadow);
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    h2,
-    h2,
-    h3 {
-      color: var(--pico-h1-color);
-    }
-  }
-
-  &:hover:not([data-active="true"]) {
-    &::before {
-      opacity: 0.5;
-    }
-  }
+  font-size: 0.8rem;
 
   h3 {
     margin: 0;
@@ -86,4 +40,12 @@ button.metric {
     font-size: 0.8rem;
     font-weight: 500;
   }
+
+  &[data-active="true"] {
+    h2,
+    h2,
+    h3 {
+      color: var(--pico-h1-color);
+    }
+  }
 }

web/src/components/project/metric.tsx

@@ -3,6 +3,7 @@ import { TrendingDownIcon, TrendingUpIcon } from "lucide-react";
 
 import type { Metric, StatsResponse } from "../../api";
 import { cls, formatMetricVal, formatPercent } from "../../utils";
+import { CardButton } from "../card";
 
 export const SelectMetrics = ({
 	data,
@@ -75,14 +76,14 @@ export const SelectMetric = ({
 	const icon = change > 0 ? <TrendingUpIcon size={14} /> : change < 0 ? <TrendingDownIcon size={14} /> : "—";
 
 	return (
-		<button type="button" onClick={onSelect} data-active={selected} className={styles.metric}>
+		<CardButton onClick={onSelect} active={selected} className={styles.metric}>
 			<h2>{title}</h2>
 			<h3>
 				{formatMetricVal(metric, value)}
 				<span style={{ color }} className={styles.change}>
 					{icon} {formatPercent(changePercent)}
 				</span>
 			</h3>
-		</button>
+		</CardButton>
 	);
 };

web/src/components/project/project.module.css

@@ -4,11 +4,6 @@
   align-items: center;
   display: flex;
 
-  a {
-    all: unset;
-    cursor: pointer;
-  }
-
   > span.online {
     margin-left: 0.2rem;
     > svg {

web/src/components/project/project.tsx

@@ -3,6 +3,7 @@ import { CircleIcon, LockIcon } from "lucide-react";
 
 import { formatMetricVal } from "../../utils";
 import type { ProjectResponse, StatsResponse } from "../../api";
+import { CardLink } from "../card";
 
 export const ProjectHeader = ({
 	project,
@@ -14,15 +15,10 @@ export const ProjectHeader = ({
 	return (
 		<h1 className={styles.statsHeader}>
 			<span>
-				<a href={`/p/${project.id}`}>
-					{project.public ? null : (
-						<>
-							<LockIcon size={16} />
-							&nbsp;
-						</>
-					)}
+				<CardLink href={`/p/${project.id}`}>
 					{project.displayName}
-				</a>
+					{project.public ? null : <LockIcon size={16} />}
+				</CardLink>
 				&nbsp;
 			</span>
 			{stats && <LiveVisitorCount count={stats.currentVisitors} />}

web/src/components/projects.module.css

@@ -35,7 +35,7 @@
       z-index: 0;
       margin-bottom: 0.5rem;
 
-      a {
+      /* a {
         padding: 0.5rem 0.6rem 0.3rem 0.6rem;
         margin-left: -0.4rem;
         margin-top: -0.4rem;
@@ -49,9 +49,9 @@
             transform: scale(1);
           }
         }
-      }
+      } */
 
-      a::before {
+      /* a::before {
         content: "";
         position: absolute;
         inset: 0;
@@ -61,7 +61,7 @@
         opacity: 0;
         transform: scale(0.95);
         transition: opacity 0.2s ease, transform 0.2s ease;
-      }
+      } */
     }
   }
 
@@ -90,7 +90,6 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
-  margin-left: 0.1rem;
 
   h1,
   details {

web/src/components/projects.tsx

@@ -12,6 +12,7 @@ import { SelectRange } from "./project/range";
 import { SelectMetrics } from "./project/metric";
 import { ProjectHeader } from "./project/project";
 import * as Accordion from "@radix-ui/react-accordion";
+import { CardButton } from "./card";
 
 const signedIn = getUsername();
 
@@ -112,7 +113,7 @@ const Project = ({
 				<div className={styles.projectTitle}>
 					<ProjectHeader project={project} stats={stats.data} />
 					<Accordion.Trigger className={styles.AccordionTrigger} aria-label="Toggle details">
-						<ChevronDownIcon size={30} strokeWidth={4} color="var(--pico-h1-color)" />
+						<ChevronDownIcon size={35} strokeWidth={2} color="var(--pico-h1-color)" />
 					</Accordion.Trigger>
 				</div>
 				<div>