diff --git a/web/src/components/BewegungIcon.jsx b/web/src/components/BewegungIcon.jsx index f108e15..dcdcd6e 100644 --- a/web/src/components/BewegungIcon.jsx +++ b/web/src/components/BewegungIcon.jsx @@ -4,20 +4,20 @@ import Icon from "./Icon"; * Die Art einer Bestandsbewegung als Sinnbild statt als Wort. * * Kiste mit Pfeil hinein (Einlagern), Kiste mit Pfeil heraus (Auslagern), - * Stapel mit Stift (Korrektur). Die Kachel traegt dieselbe Bedeutung wie - * frueher die Farbe des Badges – gruen rein, orange raus, neutral Korrektur. + * Stapel mit Stift (Korrektur). Alle drei in derselben Farbe: gruen fuer rein + * und orange fuer raus las sich wie gut und schlecht, dabei ist Auslagern + * schlicht der Normalfall. Unterschieden wird ueber die Pfeilrichtung. * * Titel und aria-label behalten das Wort: fuer Screenreader und fuer alle, die * ein Sinnbild nicht auf Anhieb lesen. */ const LABEL = { in: "Eingelagert", out: "Ausgelagert", adjust: "Korrektur" }; const ICON = { in: "einlagern", out: "auslagern", adjust: "korrektur" }; -const TON = { in: "ein", out: "aus", adjust: "" }; export default function BewegungIcon({ typ, size = 18 }) { const wort = LABEL[typ] || typ; return ( - + ); diff --git a/web/src/styles.css b/web/src/styles.css index 994d305..7e2e6ee 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -488,16 +488,15 @@ td select { width: auto; min-width: 0; max-width: 100%; } } .badge.accent { background: var(--accent-soft); color: var(--accent); } -/* Verlauf: die Bewegungsart als Sinnbild statt als Wort. Ein gefuelltes Icon - in einer getoenten Kachel – die Farbe traegt dieselbe Bedeutung wie vorher - das Badge (gruen rein, orange raus, neutral Korrektur). */ +/* Verlauf: die Bewegungsart als Sinnbild statt als Wort. + BEWUSST fuer alle drei Arten dieselbe Farbe: Gruen fuer Einlagern und Orange + fuer Auslagern las sich wie gut und schlecht, dabei ist Auslagern schlicht + der Normalfall. Die Pfeilrichtung im Icon traegt die Bedeutung. */ .bewegung-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent); } -.bewegung-icon.ein { background: #e6f4ec; color: var(--ok); } -.bewegung-icon.aus { background: var(--warn-soft); color: var(--warn); } /* Eine Bewegung als Zeile: Kachel links, Zeitpunkt ueber Produkt. */ .bewegung-liste { display: flex; flex-direction: column; } @@ -1018,7 +1017,6 @@ select.zeitraum:hover { color: var(--text); } --shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .badge.ok { background: #14301f; } - .bewegung-icon.ein { background: #14301f; } .alert.ok { background: #14301f; border-color: #21503a; } } :root[data-theme="dark"] {