fix(css): set the css border color of the annotation card to the high…

…light color of the annotation (Fixes #2534 PR #2552)
edrlab · Sep 19, 2024 · 85fedfb · 85fedfb
1 parent f7b410e
commit 85fedfb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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}`}