fix: muted note styles

closes #721

packages/app/src/Components/Event/EventComponent.css

@@ -137,15 +137,6 @@
   overflow-y: hidden;
 }
 
-.hidden-note .header {
-  display: flex;
-  align-items: center;
-}
-
-.card.note.hidden-note {
-  min-height: unset;
-}
-
 .expand-note {
   padding: 0 0 16px 0;
   font-weight: 400;

packages/app/src/Components/Event/HiddenNote.tsx

@@ -1,22 +1,23 @@
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-import messages from "../messages";
+import useLogin from "@/Hooks/useLogin";
 
 const HiddenNote = ({ children }: { children: React.ReactNode }) => {
+  const hideMutedNotes = useLogin(s => s.appData.item.preferences.hideMutedNotes);
   const [show, setShow] = useState(false);
+  if (hideMutedNotes) return;
+
   return show ? (
     children
   ) : (
-    <div className="card note hidden-note p-0">
-      <div className="header">
-        <p>
-          <FormattedMessage defaultMessage="This note has been muted" id="qfmMQh" />
-        </p>
-        <button className="btn btn-sm btn-neutral" onClick={() => setShow(true)}>
-          <FormattedMessage {...messages.Show} />
-        </button>
+    <div className="bb p flex items-center justify-between">
+      <div className="text-sm text-secondary">
+        <FormattedMessage defaultMessage="This note has been muted" id="qfmMQh" />
       </div>
+      <button className="btn btn-sm btn-neutral" onClick={() => setShow(true)}>
+        <FormattedMessage defaultMessage="Show" id="K7AkdL" />
+      </button>
     </div>
   );
 };

packages/app/src/Pages/settings/Preferences.tsx

@@ -477,10 +477,10 @@ const PreferencesPage = () => {
       <div className="flex justify-between">
         <div className="flex flex-col g8">
           <h4>
-            <FormattedMessage {...messages.HideMutedNotes} />
+            <FormattedMessage defaultMessage="Hide muted notes" id="9kO0VQ" />
           </h4>
           <small>
-            <FormattedMessage {...messages.HideMutedNotesHelp} />
+            <FormattedMessage defaultMessage="Muted notes will not be shown" id="sfL/O+" />
           </small>
         </div>
         <div>

packages/app/src/Pages/settings/messages.ts

@@ -76,9 +76,4 @@ export default defineMessages({
   ServiceWorkerNotRunning: { defaultMessage: "Service Worker Not Running", id: "RDha9y" },
   SubscribedToPush: { defaultMessage: "Subscribed to Push", id: "G3A56c" },
   NotSubscribedToPush: { defaultMessage: "Not Subscribed to Push", id: "d2ebEu" },
-  HideMutedNotes: { defaultMessage: "Hide Muted Notes", id: "M3Oira" },
-  HideMutedNotesHelp: {
-    defaultMessage: "Muted notes will not be shown",
-    id: "MBAYRA",
-  },
 });