diff --git a/src/components/Label/Label.css b/src/components/Label/Label.css index 5b1788f5..67774719 100644 --- a/src/components/Label/Label.css +++ b/src/components/Label/Label.css @@ -1,3 +1,8 @@ .label { white-space: nowrap; + padding: 1px 5px; + display: inline-block; + margin: 2px; + border-radius: 6px; + color: #eee; } diff --git a/src/components/LabelsFilter/LabelsFilter.css b/src/components/LabelsFilter/LabelsFilter.css new file mode 100644 index 00000000..7d50e42e --- /dev/null +++ b/src/components/LabelsFilter/LabelsFilter.css @@ -0,0 +1,13 @@ +.labels.filter { + margin: 15px 0; +} + +.labels .label-link { + opacity: 50%; + cursor: pointer; +} + +.labels .label-link.active { + opacity: 100%; +} + diff --git a/src/components/LabelsFilter/LabelsFilter.tsx b/src/components/LabelsFilter/LabelsFilter.tsx index 62057cf5..4d1f68b1 100644 --- a/src/components/LabelsFilter/LabelsFilter.tsx +++ b/src/components/LabelsFilter/LabelsFilter.tsx @@ -1,3 +1,4 @@ +import "./LabelsFilter.css"; import { type MouseEventHandler, useCallback } from "react"; import { Label } from "../Label/Label"; import type { ILabel } from "../NotesProvider/hooks/useLabels"; @@ -31,7 +32,7 @@ function LabelLink({ label, onToggleLabel }: LabelLinkProps) { [label, onToggleLabel], ); - const clazz = `label ${label.isActive && "active"}`; + const clazz = `label-link ${label.isActive ? "active" : ""}`; const ico = label.isActive ? "⊙" : "∅"; return ( diff --git a/src/components/NoteManager/NoteManager.css b/src/components/NoteManager/NoteManager.css index 056b56eb..90c03cee 100644 --- a/src/components/NoteManager/NoteManager.css +++ b/src/components/NoteManager/NoteManager.css @@ -107,23 +107,3 @@ filter: none; opacity: 100%; } - -.note-manager .labels.filter { - margin: 15px 0; -} - -.note-manager .labels .label { - opacity: 50%; -} - -.note-manager .labels .label.active { - opacity: 100%; -} - -.note-manager .labels span { - padding: 1px 5px; - display: inline-block; - margin: 2px; - border-radius: 6px; - color: #eee; -}