From 85fedfb2eb6c6d00e4ebffe67e4e285c63ae1660 Mon Sep 17 00:00:00 2001
From: arthur-lemeur <113124595+arthur-lemeur@users.noreply.github.com>
Date: Thu, 19 Sep 2024 12:15:30 +0200
Subject: [PATCH] fix(css): set the css border color of the annotation card to
 the highlight color of the annotation (Fixes #2534 PR #2552)

---
 src/renderer/assets/styles/components/annotations.scss   | 9 +++++++++
 .../assets/styles/components/annotations.scss.d.ts       | 6 ++++++
 src/renderer/reader/components/ReaderMenu.tsx            | 4 +++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss
index a184b66f6..43c83e700 100644
--- a/src/renderer/assets/styles/components/annotations.scss
+++ b/src/renderer/assets/styles/components/annotations.scss
@@ -7,6 +7,15 @@
   gap: 5px;
 }
 
+.popover_dialog_reader .settings_tab.annotations_tab {
+  margin-top: 15px !important;
+}
+
+.separator {
+  border-bottom: 1px solid var(--color-extralight-grey-alt);
+  padding-bottom: 10px;
+}
+
 .annotations_options {
   z-index: 10;
   width: fit-content;
diff --git a/src/renderer/assets/styles/components/annotations.scss.d.ts b/src/renderer/assets/styles/components/annotations.scss.d.ts
index 4b0c14887..248cdca90 100644
--- a/src/renderer/assets/styles/components/annotations.scss.d.ts
+++ b/src/renderer/assets/styles/components/annotations.scss.d.ts
@@ -1,5 +1,6 @@
 export declare const ___DEBUG___FOCUS_CSS: string;
 export declare const ___DEBUG___FOCUS_MIXIN_CSS: string;
+export declare const ___DEBUG___PARTIALS_MIXINS_CSS: string;
 export declare const annnotation_container: string;
 export declare const annotation_actions: string;
 export declare const annotation_actions_buttons: string;
@@ -32,11 +33,16 @@ export declare const button_primary_blue: string;
 export declare const colorPicker: string;
 export declare const docked_annotation_line: string;
 export declare const drawType_active: string;
+export declare const my_combobox_container: string;
 export declare const popover_dialog_reader: string;
 export declare const R2_CSS_CLASS__FORCE_NO_FOCUS_OUTLINE: string;
 export declare const R2_CSS_CLASS__FORCE_NO_TARGET_OUTLINE: string;
 export declare const R2_CSS_CLASS__KEYBOARD_INTERACT: string;
+export declare const react_aria_ComboBox: string;
+export declare const react_aria_Label: string;
 export declare const readium2ElectronAnimation_TARGET: string;
+export declare const separator: string;
 export declare const settings_tab: string;
 export declare const stylePicker: string;
+export declare const tag: string;
 export declare const update_form: string;
diff --git a/src/renderer/reader/components/ReaderMenu.tsx b/src/renderer/reader/components/ReaderMenu.tsx
index 4b6902602..5e3527c38 100644
--- a/src/renderer/reader/components/ReaderMenu.tsx
+++ b/src/renderer/reader/components/ReaderMenu.tsx
@@ -429,6 +429,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
     const tagsStringArray = tagsStringArrayMaybeUndefined || [];
     const tagName = tagsStringArray[0] || "";
     const dockedEditAnnotation = isEdited && dockedMode;
+    const annotationColor = rgbToHex(annotation.color);
 
     const dispatch = useDispatch();
     const [__] = useTranslator();
@@ -482,7 +483,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState
 
     return (<div
         className={stylesAnnotations.annotations_line}
-        style={{ backgroundColor: dockedEditAnnotation ? "var(--color-extralight-grey)" : "", borderLeft: dockedEditAnnotation && "none" }}
+        style={{ backgroundColor: dockedEditAnnotation ? "var(--color-extralight-grey)" : "", borderLeft: dockedEditAnnotation ? "none" : `4px solid ${annotationColor}` }}
         onKeyDown={isEdited ? (e) => {
             if (e.key === "Escape") {
                 e.preventDefault();
@@ -972,6 +973,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
                     </Popover.Portal>
                 </Popover.Root>
             </div>
+            <div className={stylesAnnotations.separator} />
             {annotationsPagedArray.map(([timestamp, annotationItem], _i) =>
                 <AnnotationCard
                     key={`annotation-card_${annotationItem.uuid}`}