diff --git a/src/components/HighlightsPanel.tsx b/src/components/HighlightsPanel.tsx index ffdd3c16..0a857e8d 100644 --- a/src/components/HighlightsPanel.tsx +++ b/src/components/HighlightsPanel.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faChevronRight, faHighlighter } from '@fortawesome/free-solid-svg-icons' +import { faChevronRight, faChevronLeft, faHighlighter } from '@fortawesome/free-solid-svg-icons' import { Highlight } from '../types/highlights' import { HighlightItem } from './HighlightItem' @@ -28,7 +28,7 @@ export const HighlightsPanel: React.FC = ({ title="Expand highlights panel" aria-label="Expand highlights panel" > - + ) @@ -48,7 +48,7 @@ export const HighlightsPanel: React.FC = ({ title="Collapse highlights panel" aria-label="Collapse highlights panel" > - + diff --git a/src/index.css b/src/index.css index 8a372c5a..a8c59beb 100644 --- a/src/index.css +++ b/src/index.css @@ -1081,6 +1081,32 @@ body { align-items: flex-start; justify-content: center; padding-top: 1rem; + background: transparent; + border: none; +} + +.highlights-container.collapsed .toggle-highlights-btn { + background: #2a2a2a; + color: #ddd; + border: 1px solid #444; + padding: 0; + border-radius: 6px; + cursor: pointer; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; +} + +.highlights-container.collapsed .toggle-highlights-btn:hover { + background: #333; + color: #fff; +} + +.highlights-container.collapsed .toggle-highlights-btn:active { + transform: translateY(1px); } .highlights-header {