client/read only note info bar: refactor

apps/client/src/widgets/react/InfoBar.css

@@ -0,0 +1,19 @@
+.info-bar {
+    margin-top: 4px;
+    padding: 8px 20px;
+    color: var(--read-only-note-info-bar-color);
+    font-size: .9em;
+
+}
+
+.info-bar-prominent {
+    background: var(--alert-bar-background, var(--accented-background-color));
+}
+
+.info-bar-subtle {
+    color: var(--muted-text-color);
+    border-bottom: 1px solid var(--main-border-color);
+    margin-block: 0;
+    margin-inline: 10px;
+    padding-inline: 12px;
+}

apps/client/src/widgets/react/InfoBar.tsx

@@ -0,0 +1,18 @@
+import { ComponentChildren } from "preact";
+
+import "./InfoBar.css";
+
+export type InfoBarParams = {
+    type: "prominent" | "subtle"
+    children: ComponentChildren;
+};
+
+export default function InfoBar(props: InfoBarParams) {
+    return <div className={`info-bar info-bar-${props.type}`}>
+        {props?.children}
+    </div>
+}
+
+InfoBar.defaultProps = {
+    type: "prominent"
+} as InfoBarParams