From 29c6c49b3eef98beaa696c982e2355b193b19b29 Mon Sep 17 00:00:00 2001
From: april <aprl.petersen@gmail.com>
Date: Mon, 15 Jan 2024 12:47:00 -0600
Subject: [PATCH] Style image carousel

---
 .../logbook.flights.$id/route.module.css      | 28 +++++++++++++++++++
 web/app/routes/logbook.flights.$id/route.tsx  |  3 ++
 2 files changed, 31 insertions(+)
 create mode 100644 web/app/routes/logbook.flights.$id/route.module.css

diff --git a/web/app/routes/logbook.flights.$id/route.module.css b/web/app/routes/logbook.flights.$id/route.module.css
new file mode 100644
index 0000000..08d650e
--- /dev/null
+++ b/web/app/routes/logbook.flights.$id/route.module.css
@@ -0,0 +1,28 @@
+.control {
+  &[data-inactive] {
+    opacity: 0;
+    cursor: default;
+  }
+}
+.controls {
+  transition: opacity 150ms ease;
+  opacity: 0;
+}
+
+.root {
+  &:hover {
+    .controls {
+      opacity: 1;
+    }
+  }
+}
+
+.indicator {
+  width: rem(12px);
+  height: rem(4px);
+  transition: width 250ms ease;
+
+  &[data-active] {
+    width: rem(40px);
+  }
+}
diff --git a/web/app/routes/logbook.flights.$id/route.tsx b/web/app/routes/logbook.flights.$id/route.tsx
index 247f40a..0068f47 100644
--- a/web/app/routes/logbook.flights.$id/route.tsx
+++ b/web/app/routes/logbook.flights.$id/route.tsx
@@ -25,6 +25,8 @@ import { IconPencil, IconTrash } from "@tabler/icons-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
+import classes from "./route.module.css";
+
 export default function Flight() {
   const params = useParams();
 
@@ -136,6 +138,7 @@ export default function Flight() {
                           withIndicators
                           slideGap="sm"
                           slideSize={{ base: "100%", sm: "80%" }}
+                          classNames={classes}
                         >
                           {imageIds.map((img) => (
                             <Carousel.Slide key={randomId()}>