client/shared note info bar: improve appearance

apps/client/src/stylesheets/theme-next/shell.css

@@ -1328,14 +1328,6 @@ body.mobile .note-title {
     border-bottom: 2px solid #0000001c !important;
 }
 
-/*
- * Read-only note info bar
- */
-
-.read-only-note-info-bar-widget {
-    --link-color: var(--main-text-color);
-}
-
 /*
  * Promoted attributes
  */

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

@@ -1,10 +1,11 @@
 .info-bar {
+    --link-color: var(--main-text-color);
+    
     margin-top: 4px;
     contain: unset !important;
     padding: 8px 20px;
     color: var(--read-only-note-info-bar-color);
     font-size: .9em;
-
 }
 
 .info-bar-prominent {

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

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

apps/client/src/widgets/shared_info.tsx

@@ -49,7 +49,7 @@ export default function SharedInfo() {
     });
 
     return (
-        <InfoBar className="shared-info-widget" type="subtle">
+        <InfoBar className="shared-info-widget" type="subtle" style={{display: (!link) ? "none" : undefined}}>
             {link && (
                 <RawHtml html={syncServerHost
                 ? t("shared_info.shared_publicly", { link })