More style cleanup on Pages screen

package.json

@@ -28,14 +28,15 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@sentry/react": "^8.17.0",
     "@tanstack/react-query": "^5.14.1",
     "@tanstack/react-query-devtools": "^5.37.1",
     "@tanstack/react-table": "^8.16.0",
     "aws-amplify": "^6.0.8",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
+    "date-fns": "^4.1.0",
     "input-otp": "^1.2.4",
     "posthog-js": "^1.147.0",
     "react": "^18.2.0",

src/globals.css

@@ -413,3 +413,101 @@ body {
 	background-color: white;
 	cursor: default;
 }
+
+/* Radix Tooltip */
+
+.TooltipContent {
+	border-radius: 4px;
+	padding: 10px 15px;
+	font-size: 15px;
+	line-height: 1;
+	color: var(--violet-11);
+	background-color: white;
+	box-shadow:
+		hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+		hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+	user-select: none;
+	animation-duration: 400ms;
+	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+	will-change: transform, opacity;
+}
+.TooltipContent[data-state="delayed-open"][data-side="top"] {
+	animation-name: slideDownAndFade;
+}
+.TooltipContent[data-state="delayed-open"][data-side="right"] {
+	animation-name: slideLeftAndFade;
+}
+.TooltipContent[data-state="delayed-open"][data-side="bottom"] {
+	animation-name: slideUpAndFade;
+}
+.TooltipContent[data-state="delayed-open"][data-side="left"] {
+	animation-name: slideRightAndFade;
+}
+
+.TooltipArrow {
+	fill: white;
+}
+
+.IconButton {
+	font-family: inherit;
+	border-radius: 100%;
+	height: 35px;
+	width: 35px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--violet-11);
+	background-color: white;
+	box-shadow: 0 2px 10px var(--black-a7);
+	user-select: none;
+}
+.IconButton:hover {
+	background-color: var(--violet-3);
+}
+.IconButton:focus {
+	box-shadow: 0 0 0 2px black;
+}
+
+@keyframes slideUpAndFade {
+	from {
+		opacity: 0;
+		transform: translateY(2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes slideRightAndFade {
+	from {
+		opacity: 0;
+		transform: translateX(-2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes slideDownAndFade {
+	from {
+		opacity: 0;
+		transform: translateY(-2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes slideLeftAndFade {
+	from {
+		opacity: 0;
+		transform: translateX(2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}