thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved Sidebar styling

Browse Source
This commit is contained in:
Tim Howitz 2025-06-01 14:18:44 +01:00
parent f88f783de9
commit 6cd95fa0e4
1 changed files with 116 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Sidebar.tsx
View File

@ -1,6 +1,6 @@
import React, { Dispatch, SetStateAction, useEffect, useRef } from "react";
import { TbHexagon } from "react-icons/tb";
import GeologicalEvent from "@appTypes/Event";
import GeologicalEvent from "@appTypes/GeologicalEvent";
import getMagnitudeColor from "@utils/getMagnitudeColour";
interface SidebarProps {
logTitle: string;
@ -71,13 +71,13 @@ export default function Sidebar({
<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
<button
className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
${button1Disabled
${
button1Disabled
? "bg-gray-300 text-gray-500 cursor-not-allowed"
: "bg-blue-600 hover:bg-blue-700 text-white"
}`}
onClick={onButton1Click}
type="button"
tabIndex={button1Disabled ? -1 : 0}
aria-disabled={button1Disabled ? "true" : "false"}
>
@ -100,9 +100,13 @@ export default function Sidebar({
<button
key={event.id}
data-event-id={event.id}
className={`w-full border ${hoveredEventId === event.id ? "bg-neutral-100" : "bg-white"} ${
selectedEventId === event.id ? "border-neutral-800" : "border-neutral-200"
} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 shadow-sm text-left`}
className={`w-full border ${
selectedEventId === event.id
? "border-neutral-500 border-2 shadow-md"
: hoveredEventId === event.id
? "bg-neutral-100 shadow-sm"
: "bg-white border-neutral-200 shadow-sm"
} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 text-left`}
onClick={() => {
setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
}}