fix(dashboard): minor styling and accessibility improvements (#143)

* fix: stats item styling on safari

* chore(dashboard): upgrade deps

* perf: initial filter migration to unstyled components

* chore: upgrade go user agent to v1

* fix: dropdown styles

* fix: filter styles complete

* fix: migrate tooltip over to radix

* fix: migrate header data box over

* chore: clean up lockfile

* feat: migrate website selector to dropdown menu

* fix: migrate chart tooltips to native

* fix: migrate error page to native

.github/workflows/deploy.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Wait for Docker Edge image to be updated in registry
-        run: sleep 15s
+        run: sleep 45s
         shell: bash
 
       - uses: superfly/flyctl-actions/setup-flyctl@master

core/go.mod

@@ -13,9 +13,9 @@ require (
 	github.com/marcboeker/go-duckdb v1.7.1
 	github.com/medama-io/go-referrer-parser v0.0.0-20240903120234-0a63376371c3
 	github.com/medama-io/go-timezone-country v0.0.0-20240903121643-db228bdc5dc1
-	github.com/medama-io/go-useragent v0.0.0-20240904185757-43ce2229c0b3
+	github.com/medama-io/go-useragent v1.0.0
 	github.com/ncruces/go-sqlite3 v0.18.2
-	github.com/ogen-go/ogen v1.3.0
+	github.com/ogen-go/ogen v1.4.0
 	github.com/rs/cors v1.11.1
 	github.com/rs/zerolog v1.33.0
 	github.com/shirou/gopsutil/v4 v4.24.8
@@ -67,10 +67,10 @@ require (
 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
 	github.com/zeebo/xxh3 v1.0.2 // indirect
 	go.uber.org/zap v1.27.0 // indirect
-	golang.org/x/crypto v0.26.0 // indirect
-	golang.org/x/exp v0.0.0-20240823005443-9b4947da3948 // indirect
+	golang.org/x/crypto v0.27.0 // indirect
+	golang.org/x/exp v0.0.0-20240904232852-e7e105dedf7e // indirect
 	golang.org/x/mod v0.21.0 // indirect
-	golang.org/x/net v0.28.0 // indirect
+	golang.org/x/net v0.29.0 // indirect
 	golang.org/x/sync v0.8.0 // indirect
 	golang.org/x/sys v0.25.0 // indirect
 	golang.org/x/tools v0.24.0 // indirect

core/go.sum

@@ -78,16 +78,16 @@ github.com/medama-io/go-referrer-parser v0.0.0-20240903120234-0a63376371c3 h1:6/
 github.com/medama-io/go-referrer-parser v0.0.0-20240903120234-0a63376371c3/go.mod h1:Zng9ySjx7KXIpvVqT/mZbYfKE39CkyS/aQR4kXdJuG0=
 github.com/medama-io/go-timezone-country v0.0.0-20240903121643-db228bdc5dc1 h1:/Q1ZWbdGSRpExJRlQZybxwxXa6u4lYH7K/OLD9t/d8M=
 github.com/medama-io/go-timezone-country v0.0.0-20240903121643-db228bdc5dc1/go.mod h1:Wq7lg5D0ZdQ3bHnzOTKsb1YGlxm/l82OVA4aIbAA5w4=
-github.com/medama-io/go-useragent v0.0.0-20240904185757-43ce2229c0b3 h1:Drn4ysoeSkdEMIkHpW8oapLKxLxJdJV/Oticg8XR8Gk=
-github.com/medama-io/go-useragent v0.0.0-20240904185757-43ce2229c0b3/go.mod h1:H9GYWth4IN8vAFZh5LeARza7VwM4jK9uk7Tb9huVzLw=
+github.com/medama-io/go-useragent v1.0.0 h1:AEtLVKtUV1PiZ4u/zCkRLHBahs/crkoFw/YLSU3Rb8w=
+github.com/medama-io/go-useragent v1.0.0/go.mod h1:H9GYWth4IN8vAFZh5LeARza7VwM4jK9uk7Tb9huVzLw=
 github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
 github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 github.com/ncruces/go-sqlite3 v0.18.2 h1:m7QXhBWIwXsp84HE11t+ze0n1v3LRU+zGFg4uHjBeFA=
 github.com/ncruces/go-sqlite3 v0.18.2/go.mod h1:4sZHOm+b/FM8FJRVGN4TemkPPDq5JXGK/1EHIEWxsYo=
 github.com/ncruces/julianday v1.0.0 h1:fH0OKwa7NWvniGQtxdJRxAgkBMolni2BjDHaWTxqt7M=
 github.com/ncruces/julianday v1.0.0/go.mod h1:Dusn2KvZrrovOMJuOt0TNXL6tB7U2E8kvza5fFc9G7g=
-github.com/ogen-go/ogen v1.3.0 h1:c0+CvdbwvKmaHQUqbPpRKflvkiJ/NAsEw3L3HhofDso=
-github.com/ogen-go/ogen v1.3.0/go.mod h1:421U7mQVAE+7uaCc4tkq2uT0HDfZL13UTpL16CBrFt0=
+github.com/ogen-go/ogen v1.4.0 h1:8xNMwpvQwCxPTL2hypn60qnjiijoVzxlB9j/MOf/34U=
+github.com/ogen-go/ogen v1.4.0/go.mod h1:YeliH7gAS6QToqDqIM5BrnEUOiXiqCnNqNwzEpebDsY=
 github.com/pierrec/lz4/v4 v4.1.21 h1:yOVMLb6qSIDP67pl/5F7RepeKYu/VmTyEXvuMI5d9mQ=
 github.com/pierrec/lz4/v4 v4.1.21/go.mod h1:gZWDp/Ze/IJXGXf23ltt2EXimqmTUXEy0GFuRQyBid4=
 github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
@@ -149,10 +149,10 @@ go.uber.org/zap v1.27.0/go.mod h1:GB2qFLM7cTU87MWRP2mPIjqfIDnGu+VIO4V/SdhGo2E=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.14.0/go.mod h1:MVFd36DqK4CsrnJYDkBA3VC4m2GkXAM0PvzMCn4JQf4=
-golang.org/x/crypto v0.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
-golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
-golang.org/x/exp v0.0.0-20240823005443-9b4947da3948 h1:kx6Ds3MlpiUHKj7syVnbp57++8WpuKPcR5yjLBjvLEA=
-golang.org/x/exp v0.0.0-20240823005443-9b4947da3948/go.mod h1:akd2r19cwCdwSwWeIdzYQGa/EZZyqcOdwWiwj5L5eKQ=
+golang.org/x/crypto v0.27.0 h1:GXm2NjJrPaiv/h1tb2UH8QfgC/hOf/+z0p6PT8o1w7A=
+golang.org/x/crypto v0.27.0/go.mod h1:1Xngt8kV6Dvbssa53Ziq6Eqn0HqbZi5Z6R0ZpwQzt70=
+golang.org/x/exp v0.0.0-20240904232852-e7e105dedf7e h1:I88y4caeGeuDQxgdoFPUq097j7kNfw6uvuiNxUBfcBk=
+golang.org/x/exp v0.0.0-20240904232852-e7e105dedf7e/go.mod h1:akd2r19cwCdwSwWeIdzYQGa/EZZyqcOdwWiwj5L5eKQ=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
 golang.org/x/mod v0.8.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/mod v0.21.0 h1:vvrHzRwRfVKSiLrG+d4FMl/Qi4ukBCE6kZlTUkDYRT0=
@@ -162,8 +162,8 @@ golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v
 golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
 golang.org/x/net v0.6.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
 golang.org/x/net v0.10.0/go.mod h1:0qNGK6F8kojg2nk9dLZ2mShWaEBan6FAoqfSigmmuDg=
-golang.org/x/net v0.28.0 h1:a9JDOJc5GMUJ0+UDqmLT86WiEy7iWyIhz8gz8E4e5hE=
-golang.org/x/net v0.28.0/go.mod h1:yqtgsTWOOnlGLG9GFRrK3++bGOUEkNBoHZc8MEDWPNg=
+golang.org/x/net v0.29.0 h1:5ORfpBpCs4HzDYoodCDBbwHzdR5UrLBZ3sOnUJmFoHo=
+golang.org/x/net v0.29.0/go.mod h1:gLkgy8jTGERgjzMic6DS9+SP0ajcu6Xu3Orq/SpETg0=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=

core/services/event.go

@@ -166,32 +166,32 @@ func (h *Handler) PostEventHit(ctx context.Context, req api.EventHit, _params ap
 		ua := h.useragent.Parse(rawUserAgent)
 
 		// If the user agent is a bot, we want to ignore it.
-		if ua.Bot {
+		if ua.IsBot() {
 			log.Debug().Str("user_agent", rawUserAgent).Msg("hit: user agent is a bot")
 			return &api.PostEventHitNoContent{}, nil
 		}
 
-		uaBrowser := ua.Browser
+		uaBrowser := ua.GetBrowser()
 		if uaBrowser == "" {
 			uaBrowser = Unknown
 			unknownCounter++
 		}
 
-		uaOS := ua.OS
+		uaOS := ua.GetOS()
 		if uaOS == "" {
 			uaOS = Unknown
 			unknownCounter++
 		}
 
 		uaDevice := Unknown
 		switch {
-		case ua.Desktop:
+		case ua.IsDesktop():
 			uaDevice = "Desktop"
-		case ua.Mobile:
+		case ua.IsMobile():
 			uaDevice = "Mobile"
-		case ua.Tablet:
+		case ua.IsTablet():
 			uaDevice = "Tablet"
-		case ua.TV:
+		case ua.IsTV():
 			uaDevice = "TV"
 		default:
 			unknownCounter++

dashboard/app/components/Button.tsx

@@ -73,6 +73,7 @@ const ButtonLink = ({
 						? 'button-outline'
 						: 'button-link'
 			}
+			prefetch="intent"
 			role="button"
 			{...rest}
 		>

dashboard/app/components/DropdownSelect.module.css

@@ -85,7 +85,8 @@
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--focus-outline);
+		background-color: var(--bg-grey-blue-dark);
+		outline: none;
 	}
 
 	&[data-state="checked"] {

dashboard/app/components/ScrollArea.module.css

@@ -1,7 +1,8 @@
 .root {
+	height: 100%;
 	width: 100%;
 	overflow: hidden;
-	--scrollbar-size: 10px;
+	--scrollbar-size: 11px;
 }
 
 .viewport {
@@ -17,11 +18,11 @@
 	/* disable browser handling of all panning and zooming gestures on touch devices */
 	touch-action: none;
 	padding: 2px;
-	background: var(--black-a1);
+	background: transparent;
 	transition: background 160ms ease-out;
 
 	&:hover {
-		background: var(--black-a3);
+		background: var(--black-a1);
 	}
 
 	&[data-orientation="vertical"] {
@@ -36,7 +37,7 @@
 
 .thumb {
 	flex: 1;
-	background: var(--black-a3);
+	background: #0006;
 	border-radius: var(--scrollbar-size);
 	position: relative;
 

dashboard/app/components/Tooltip.module.css

@@ -1,36 +1,39 @@
 .content {
-	border-radius: 4px;
-	padding: 10px 15px;
-	font-size: 15px;
-	line-height: 1;
-	color: var(--violet-11);
-	background-color: white;
+	padding: 8px 12px;
+
+	color: var(--text-light);
+	background-color: var(--bg-grey-blue);
 	box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
 		hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+
+	border: 1px solid var(--bg-grey-blue-dark);
+	border-radius: 4px;
+
+	line-height: 1;
 	user-select: none;
 	animation-duration: 400ms;
 	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 	will-change: transform, opacity;
 
 	&[data-state="delayed-open"][data-side="top"] {
-		animation-name: slideUpAndFade;
+		animation-name: slideDownAndFade;
 	}
 
 	&[data-state="delayed-open"][data-side="right"] {
-		animation-name: slideRightAndFade;
+		animation-name: slideLeftAndFade;
 	}
 
 	&[data-state="delayed-open"][data-side="bottom"] {
-		animation-name: slideDownAndFade;
+		animation-name: slideUpAndFade;
 	}
 
 	&[data-state="delayed-open"][data-side="left"] {
-		animation-name: slideLeftAndFade;
+		animation-name: slideRightAndFade;
 	}
 }
 
 .arrow {
-	fill: white;
+	fill: var(--bg-grey-blue);
 }
 
 @keyframes slideUpAndFade {

dashboard/app/components/Tooltip.tsx

@@ -4,23 +4,50 @@ import classes from './Tooltip.module.css';
 
 interface TooltipProps {
 	children: React.ReactNode;
-	label: string;
+	content: string;
+	open?: boolean;
+	defaultOpen?: boolean;
+	onOpenChange?: (open: boolean) => void;
+
+	contentClassname?: string;
+	arrowClassname?: string;
 }
 
-const Tooltip = ({ children, label }: TooltipProps) => {
+const Tooltip = ({
+	children,
+	content,
+	open,
+	defaultOpen,
+	onOpenChange,
+	contentClassname,
+	arrowClassname,
+	...props
+}: TooltipProps) => {
 	return (
-		<TooltipPrimitive.Provider>
-			<TooltipPrimitive.Root>
-				<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-				<TooltipPrimitive.Portal>
-					<TooltipPrimitive.Content className={classes.content} sideOffset={5}>
-						{label}
-						<TooltipPrimitive.Arrow className={classes.arrow} />
-					</TooltipPrimitive.Content>
-				</TooltipPrimitive.Portal>
-			</TooltipPrimitive.Root>
-		</TooltipPrimitive.Provider>
+		<TooltipPrimitive.Root
+			open={open}
+			defaultOpen={defaultOpen}
+			onOpenChange={onOpenChange}
+		>
+			<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+			<TooltipPrimitive.Content
+				className={contentClassname ?? classes.content}
+				sideOffset={5}
+				side="top"
+				align="center"
+				{...props}
+			>
+				{content}
+				<TooltipPrimitive.Arrow
+					className={arrowClassname ?? classes.arrow}
+					width={11}
+					height={5}
+				/>
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Root>
 	);
 };
 
-export { Tooltip };
+const TooltipProvider = TooltipPrimitive.Provider;
+
+export { Tooltip, TooltipProvider };

dashboard/app/components/layout/Error.module.css

@@ -19,6 +19,12 @@
 	max-width: 500px;
 	margin: auto;
 	margin-bottom: 30px;
+
+	color: var(--text-muted);
+	font-size: 18px;
+	text-align: center;
+
+	line-height: 1.5;
 }
 
 .title {
@@ -42,3 +48,10 @@
 		color: var(--text-dark);
 	}
 }
+
+.error {
+	font-size: 18px;
+	color: var(--text-red);
+
+	line-height: 1.5;
+}