rename container to frosted container

app/(home-pages)/notifications/NotificationList.tsx

···
 
   if (notifications.length === 0)
     return (
-      <div className="w-full text-sm flex flex-col gap-1 container italic text-tertiary text-center sm:p-4 p-3">
+      <div className="w-full text-sm flex flex-col gap-1 frosted-container italic text-tertiary text-center sm:p-4 p-3">
         <div className="text-base font-bold">no notifications yet...</div>
         Here, you&apos;ll find notifications about new follows, comments,
         mentions, and replies!

app/(home-pages)/reader/GlobalContent.tsx

···
 
   if (posts.length === 0) {
     return (
-      <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
+      <div className="flex flex-col gap-2 frosted-container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
         Nothing trending right now. Check back soon!
       </div>
     );

app/(home-pages)/reader/InboxContent.tsx

···
 
 export const ReaderEmpty = () => {
   return (
-    <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
+    <div className="flex flex-col gap-2 frosted-container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
       Nothing to read yet… <br />
       Subscribe to publications and find their posts here!
       <Link href={"/reader/hot"}>

app/(home-pages)/reader/NewContent.tsx

···
 
   if (allPosts.length === 0) {
     return (
-      <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
+      <div className="flex flex-col gap-2 frosted-container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
         No posts yet. Check back soon!
       </div>
     );

app/[leaflet_id]/publish/PublishPost.tsx

···
           submit();
         }}
       >
-        <div className="container flex flex-col gap-3 sm:p-3 p-4">
+        <div className="frosted-container flex flex-col gap-3 sm:p-3 p-4">
           <PublishingTo
             publication_uri={props.publication_uri}
             record={props.record}
···
 }) => {
   let uri = props.publication_uri ? new AtUri(props.publication_uri) : null;
   return (
-    <div className="container p-4 m-3 sm:m-4 flex flex-col gap-1 justify-center text-center w-fit h-fit mx-auto">
+    <div className="frosted-container p-4 m-3 sm:m-4 flex flex-col gap-1 justify-center text-center w-fit h-fit mx-auto">
       <PublishIllustration posts_in_pub={props.posts_in_pub} />
       <h2 className="pt-2">Published!</h2>
       {uri && props.record ? (

app/globals.css

···
   .pageScrollWrapper h2,
   .pageScrollWrapper h3,
   .pageScrollWrapper h4 {
-    font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
+    font-family: var(
+      --theme-heading-font,
+      var(--theme-font, var(--font-quattro))
+    );
   }
 
   /* Scale heading sizes relative to the custom base font size */
-  .pageScrollWrapper h1 { font-size: 2em; }
-  .pageScrollWrapper h2 { font-size: 1.625em; }
-  .pageScrollWrapper h3 { font-size: 1.125em; }
-  .pageScrollWrapper h4 { font-size: 1em; }
+  .pageScrollWrapper h1 {
+    font-size: 2em;
+  }
+  .pageScrollWrapper h2 {
+    font-size: 1.625em;
+  }
+  .pageScrollWrapper h3 {
+    font-size: 1.125em;
+  }
+  .pageScrollWrapper h4 {
+    font-size: 1em;
+  }
 
   /* Scale text size classes relative to the custom base font size.
      Tailwind's text-sm/text-base/text-lg compile to fixed rem values
      which ignore the custom base size set on .pageScrollWrapper. */
-  .pageScrollWrapper .textSizeSmall { font-size: 0.875em; }
-  .pageScrollWrapper .textSizeLarge { font-size: 1.125em; }
+  .pageScrollWrapper .textSizeSmall {
+    font-size: 0.875em;
+  }
+  .pageScrollWrapper .textSizeLarge {
+    font-size: 1.125em;
+  }
 
   .pageScrollWrapper pre {
     font-family: var(--theme-font, var(--font-quattro));
···
   .pubWrapper h2,
   .pubWrapper h3,
   .pubWrapper h4 {
-    font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
+    font-family: var(
+      --theme-heading-font,
+      var(--theme-font, var(--font-quattro))
+    );
   }
   /*END FONT STYLING*/
 
···
   @apply ml-2;
 }
 
+.container {
+  @apply border;
+  @apply border-border-light;
+  @apply rounded-md;
+  background: rgba(var(--bg-page), var(--bg-page-alpha));
+}
+
 .transparent-container {
   @apply border;
   @apply border-border-light;
   @apply rounded-md;
 }
 
-.container {
+.frosted-container {
   background: rgba(var(--bg-page), 0.75);
   @apply border;
   @apply border-bg-page;
···
 .footnote-side-item {
   max-height: 4.5em;
   overflow: hidden;
-  transition: max-height 200ms ease, mask-image 200ms ease;
+  transition:
+    max-height 200ms ease,
+    mask-image 200ms ease;
 }
 .footnote-side-item.has-overflow {
   mask-image: linear-gradient(to bottom, white 50%, transparent 100%);

app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx

···
 } from "./PublicationSWRProvider";
 import { Fragment } from "react";
 import { useParams } from "next/navigation";
-import { getPublicationURL, getDocumentURL } from "app/lish/createPub/getPublicationURL";
+import {
+  getPublicationURL,
+  getDocumentURL,
+} from "app/lish/createPub/getPublicationURL";
 import { SpeedyLink } from "components/SpeedyLink";
 import { InteractionPreview } from "components/InteractionsPreview";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
···
   if (!publication) return null;
   if (!documents || documents.length === 0)
     return (
-      <div className="italic text-tertiary w-full container text-center place-items-center flex flex-col gap-3 p-3">
+      <div className="italic text-tertiary w-full frosted-container text-center place-items-center flex flex-col gap-3 p-3">
         Nothing's been published yet...
       </div>
     );
···
           }}
         >
           <div className="flex justify-between gap-2">
-            <a
-              className="hover:no-underline!"
-              target="_blank"
-              href={docUrl}
-            >
+            <a className="hover:no-underline!" target="_blank" href={docUrl}>
               <h3 className="text-primary grow leading-snug">
                 {doc.record.title}
               </h3>

app/lish/[did]/[publication]/dashboard/settings/PostSettings.tsx

···
   setShowInDiscover: (v: boolean) => void;
 }) {
   return (
-    <section className="flex flex-col gap-3">
-      <h3 className="font-bold text-primary">Post Settings</h3>
-
-      <h4 className="mb-0">Discovery</h4>
-      <Toggle
-        toggle={props.showInDiscover}
-        onToggle={() => props.setShowInDiscover(!props.showInDiscover)}
-      >
-        <div className="flex flex-col justify-start">
-          <div className="font-bold">Make Public</div>
-          <div className="text-tertiary text-sm leading-tight">
-            Your posts will appear in{" "}
-            <a href="/reader" target="_blank">
-              Leaflet Reader
-            </a>{" "}
-            and show up in search and tags.
+    <>
+      <div className="flex flex-col gap-3">
+        <h3 className="mb-0">Discovery</h3>
+        <Toggle
+          toggle={props.showInDiscover}
+          onToggle={() => props.setShowInDiscover(!props.showInDiscover)}
+        >
+          <div className="flex flex-col justify-start">
+            <div className="font-bold">Make Public</div>
+            <div className="text-tertiary text-sm leading-tight">
+              Your posts will appear in{" "}
+              <a href="/reader" target="_blank">
+                Leaflet Reader
+              </a>{" "}
+              and show up in search and tags.
+            </div>
           </div>
-        </div>
-      </Toggle>
-
+        </Toggle>
+      </div>
       <hr className="border-border-light" />
 
-      <h4 className="mb-0">Layout</h4>
+      <h3 className="mb-0">Post Layout</h3>
       <Toggle
         toggle={props.showPrevNext}
         onToggle={() => props.setShowPrevNext(!props.showPrevNext)}
       >
-        <div className="font-bold">Show Prev/Next Buttons</div>
+        <div className="font-bold">Show Prev/Next Buttons on Post</div>
       </Toggle>
 
       <hr className="border-border-light" />
 
-      <h4 className="mb-0">Interactions</h4>
+      <h3 className="mb-0">Post Interactions</h3>
       <div className="flex flex-col gap-2">
         <Toggle
           toggle={props.showComments}
···
           </div>
         </Toggle>
       </div>
-    </section>
+    </>
   );
 }

app/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx

···
 import { GeneralSettings } from "./GeneralSettings";
 import { PostSettings } from "./PostSettings";
 import { ThemeSettings } from "./ThemeSettings";
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 
 type SettingsView = "all" | "theme";
 
···
     </form>
   );
 }
+
+export const DashboardContainer = (props: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  let cardBorderHidden = useCardBorderHidden();
+  return (
+    <div
+      className={`flex flex-col ${cardBorderHidden ? "con" : "bg-transparent"}`}
+    >
+      {props.children}
+    </div>
+  );
+};

app/lish/[did]/[publication]/subscribeSuccess/page.tsx

···
 export default function SubscribeSuccess() {
   return (
     <div className="h-full w-screen bg-bg-leaflet flex place-items-center text-center ">
-      <div className="container p-4 max-w-md mx-auto justify-center place-items-center flex flex-col gap-2">
+      <div className="frosted-container p-4 max-w-md mx-auto justify-center place-items-center flex flex-col gap-2">
         <h3 className="text-secondary">You've Subscribed!</h3>
         <div className="text-tertiary">
           Add this custom feed to your Bluesky to get the updates from this and

app/lish/createPub/page.tsx

···
     return (
       <div className="createPubPage relative w-full h-full flex items-stretch bg-bg-leaflet p-4">
         <div className="createPubContent h-full flex items-center max-w-sm w-full mx-auto">
-          <div className="container w-full p-3 justify-items-center text-center">
+          <div className="frosted-container w-full p-3 justify-items-center text-center">
             <LoginForm
               text="Log in to create a publication!"
               noEmail

components/ActionBar/Sidebar.tsx

···
           ${!props.alwaysOpen ? "absolute top-0 left-0 z-10 w-max" : "w-[192px] max-w-[192px]"}
           h-fit p-[6px]
           flex flex-col gap-1 justify-start border
-          rounded-md  bg-bg-page ${open && !props.alwaysOpen ? "border-border-light" : "container"}
+          rounded-md  bg-bg-page ${open && !props.alwaysOpen ? "border-border-light" : "frosted-container"}
           ${props.className}
           `}
           onMouseOver={() => {