feat(frontend): notices facelift

packages/frontend/src/app/canvas/[canvasId]/admin/paste/page.tsx

@@ -450,7 +450,6 @@ function AdminPasteTab() {
           actionPanel={actionPanel}
           canvasLabel="Admin paste"
           showInvite={false}
-          showNotices={false}
           showReticle={false}
         />
         <SlideableDrawer>{actionPanel}</SlideableDrawer>

packages/frontend/src/app/canvas/[canvasId]/moderation/ModerationDashboard.tsx

@@ -46,7 +46,6 @@ export default function ModerationDashboard() {
         searchOverlayPixels={searchOverlayPixels}
         searchOverlayVisible={isSearchOverlayVisible}
         showInvite={false}
-        showNotices={false}
         showReticle={false}
       />
       <SlideableDrawer>{actionPanel}</SlideableDrawer>

packages/frontend/src/components/ContentUnavailableView.tsx

@@ -0,0 +1,33 @@
+import { styled } from "@mui/material";
+
+export const Root = styled("article")`
+  align-content: center;
+  margin-trim: block;
+  min-block-size: min(100vb, 16em); /* fallback */
+  min-block-size: min(100dvb, 16em);
+  padding-block: 2rem;
+  text-align: center;
+  text-wrap: balance;
+  svg,
+  .lucide {
+    margin-inline: auto;
+    opacity: 55%;
+    font-size: 3.375rem;
+    height: 3.375rem;
+    width: auto;
+  }
+`;
+
+export const Heading = styled("h2")`
+  color: unset;
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-block-start: 0.5em;
+`;
+
+export const Description = styled("p")`
+  color: ${(props) => props.theme.palette.text.secondary};
+  margin-block-start: 0.5em;
+`;
+
+export default { Root, Heading, Description };

packages/frontend/src/components/canvas/CanvasView.tsx

@@ -39,7 +39,6 @@ import { CANVAS_WRAPPER_CLASS_NAME, clamp, normalizeFrameBounds } from "@/util";
 import type { ActionPanel } from "../action-panel";
 import { Button } from "../button";
 import CanvasIcon from "../CanvasIcon";
-import Notices from "../notices/Notices";
 import VisuallyHidden from "../VisuallyHidden";
 import {
   addPoints,
@@ -209,7 +208,6 @@ const FullscreenButton = styled(BaseFullscreenButton)`
 const FullscreenPanelButton = styled(BaseFullscreenButton)`
   border-radius: 0.5rem 0.5rem 0.5rem 1rem;
   inset-block-start: 4rem;
-  z-index: 3;
 `;
 
 const FullscreenPanelOverlay = styled("div")`
@@ -221,7 +219,6 @@ const FullscreenPanelOverlay = styled("div")`
   pointer-events: auto;
   position: absolute;
   width: min(var(--action-panel-width), calc(100vw - 1rem));
-  z-index: 2;
 
   > * {
     width: 100%;
@@ -490,7 +487,6 @@ interface CanvasViewProps {
   searchOverlayPixels?: PixelHistoryOverlayPixel[] | null;
   searchOverlayVisible?: boolean;
   showInvite?: boolean;
-  showNotices?: boolean;
   showReticle?: boolean;
 }
 
@@ -500,7 +496,6 @@ export default function CanvasView({
   searchOverlayPixels = null,
   searchOverlayVisible = false,
   showInvite = true,
-  showNotices = true,
   showReticle = true,
 }: CanvasViewProps) {
   const imageRef = useRef<HTMLImageElement>(null);
@@ -1239,7 +1234,6 @@ export default function CanvasView({
       ref={containerRef}
       onPointerDown={handlePointerDown}
     >
-      {showNotices && <Notices />}
       {canUseFullscreen && (
         <FullscreenButton
           $isFullscreen={isFullscreen}

packages/frontend/src/components/header/Header.tsx

@@ -2,7 +2,6 @@
 
 import { css, styled } from "@mui/material";
 import Image from "next/image";
-import { useCanvasContext } from "@/contexts/CanvasContext";
 import { CanvasPicker } from "../canvas";
 import Nav, { NavLink } from "./Nav";
 
@@ -58,12 +57,12 @@ const Logo = styled(Image)(
   `,
 );
 
-export default function Header() {
-  const { canvas } = useCanvasContext();
-
+export default function Header(
+  props: React.ComponentPropsWithRef<typeof Wrapper>,
+) {
   return (
-    <Wrapper>
-      <CompositeLogo href={`/canvas/${canvas.id}`}>
+    <Wrapper {...props}>
+      <CompositeLogo href="/">
         <Logo
           alt="Blurple Canvas logo"
           src="/images/blurple-canvas-logo~dark.svg"

packages/frontend/src/components/header/Nav.tsx

@@ -9,35 +9,29 @@ import Link from "next/link";
 import type React from "react";
 import { useState } from "react";
 import { useAuthContext, useCanvasContext } from "@/contexts";
+import { Noticeboard } from "../notices";
 
 const Links = styled("ul")`
   display: none;
-
   ${({ theme }) => theme.breakpoints.up("md")} {
+    align-items: baseline;
     display: flex;
   }
-
   li {
     display: inline-flex;
   }
-
-  /*
-   * Workaround for accessibility issue with VoiceOver.
-   * See https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html
-   */
-  li::before {
-    content: "\\200B"; /* zero-width space */
-  }
 `;
 
 export const NavLink = styled(Link)`
   border-radius: 0.5rem;
   color: var(--discord-white);
+  font-weight: 450;
+  letter-spacing: 0.01em;
   padding-block: 0.5rem;
   padding-inline: 0.75rem;
   text-decoration: none;
-  transition-duration: var(--transition-duration-fast);
-  transition-property: background-color, opacity, outline-width;
+  transition-property: background-color, outline-width;
+  transition-timing-function: var(--transition-duration-fast);
 
   :hover {
     opacity: 55%;
@@ -137,6 +131,7 @@ export default function Nav() {
         ))}
       </Menu>
       <Links>
+        <Noticeboard />
         {links.map(({ href, label }) => (
           <li key={href}>
             <NavLink href={href}>{label}</NavLink>