Profile: use AppTopBar

src/profiles/Profile.tsx

@@ -62,6 +62,7 @@ import {
   createSingluarItemSelection,
   default as ItemSelectionProvider,
 } from "../timelines/toots/ItemSelectionProvider";
+import AppTopBar from "~material/AppTopBar";
 
 const Profile: Component = () => {
   const { pop } = useNavigator();
@@ -195,44 +196,38 @@ const Profile: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar
+        <AppTopBar
           role="navigation"
           position="static"
           color={scrolledPastBanner() ? "primary" : "transparent"}
           elevation={scrolledPastBanner() ? undefined : 0}
+          style={{
+            color: scrolledPastBanner()
+              ? undefined
+              : bannerSampledColors()?.text,
+          }}
         >
-          <Toolbar
+          <IconButton color="inherit" onClick={[pop, 1]} aria-label="Close">
-            variant="dense"
+            <Close />
-            sx={{
+          </IconButton>
-              display: "flex",
+          <Title
-              color: scrolledPastBanner()
+            class="Profile__page-title"
-                ? undefined
+            style={{
-                : bannerSampledColors()?.text,
+              visibility: scrolledPastBanner() ? undefined : "hidden",
-              paddingTop: "var(--safe-area-inset-top)",
             }}
-          >
+            innerHTML={displayName()}
-            <IconButton color="inherit" onClick={[pop, 1]} aria-label="Close">
+          ></Title>
-              <Close />
-            </IconButton>
-            <Title
-              class="Profile__page-title"
-              style={{
-                visibility: scrolledPastBanner() ? undefined : "hidden",
-              }}
-              innerHTML={displayName()}
-            ></Title>
 
-            <IconButton
+          <IconButton
-              id={menuButId}
+            id={menuButId}
-              aria-controls={optMenuId}
+            aria-controls={optMenuId}
-              color="inherit"
+            color="inherit"
-              onClick={[setMenuOpen, true]}
+            onClick={[setMenuOpen, true]}
-              aria-label="Open Options for the Profile"
+            aria-label="Open Options for the Profile"
-            >
+          >
-              <MoreVert />
+            <MoreVert />
-            </IconButton>
+          </IconButton>
-          </Toolbar>
+        </AppTopBar>
-        </AppBar>
       }
       class="Profile"
     >