src/material/typography.tsx

@@ -43,7 +43,7 @@ export function Typography<T extends AnyElement>(
     <Dynamic
       ref={managed.ref}
       component={managed.component ?? "span"}
-      class={`${managed.class || ""} ${managed.typography}`}
+      class={`${managed.class} ${managed.typography}`}
       {...passthough}
     ></Dynamic>
   );

src/profiles/Profile.css

@@ -53,7 +53,7 @@
     flex-flow: column nowrap;
   }
 
-  .acct-mark {
+  .bot-mark {
     font-size: 1.2em;
   }
 

src/profiles/Profile.tsx

@@ -33,7 +33,6 @@ import {
   Edit,
   ExpandMore,
   Group,
-  Lock,
   MoreVert,
   OpenInBrowser,
   PersonOff,
@@ -42,6 +41,7 @@ import {
   Share,
   SmartToySharp,
   Subject,
+  Translate,
   Verified,
 } from "@suid/icons-material";
 import { Body2, Title } from "../material/typography";
@@ -372,19 +372,13 @@ const Profile: Component = () => {
       <Menu {...subscribeMenuState}>
         <MenuItem
           onClick={toggleSubscribeHome}
-          aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
+          aria-details="Subscribe or Unsubscribe this account on your home timeline"
         >
           <ListItemAvatar>
             <Avatar src={session().account?.inf?.avatar}></Avatar>
           </ListItemAvatar>
           <ListItemText
-            secondary={
-              relationship()?.following
-                ? undefined
-                : profile()?.locked
-                  ? "A request will be sent"
-                  : undefined
-            }
+            secondary={relationship()?.following ? "Subscribed" : undefined}
           >
             <span ref={useSessionDisplayName}></span>
             <span>'s Home</span>
@@ -414,10 +408,7 @@ const Profile: Component = () => {
           <div class="name-grp">
             <div class="display-name">
               <Show when={profile()?.bot}>
-                <SmartToySharp class="acct-mark" aria-label="Bot" />
-              </Show>
-              <Show when={profile()?.locked}>
-                <Lock class="acct-mark" aria-label="Locked" />
+                <SmartToySharp class="bot-mark" aria-label="Bot" />
               </Show>
               <Body2
                 component="span"

src/timelines/RegularToot.tsx

@@ -21,7 +21,6 @@ import {
   Bookmark,
   Share,
   SmartToySharp,
-  Lock,
 } from "@suid/icons-material";
 import { useTimeSource } from "../platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
@@ -155,10 +154,7 @@ function TootAuthorGroup(
       <div class={tootStyle.tootAuthorNameGrp}>
         <div class={tootStyle.tootAuthorNamePrimary}>
           <Show when={toot().account.bot}>
-            <SmartToySharp class="acct-mark" aria-label="Bot" />
-          </Show>
-          <Show when={toot().account.locked}>
-            <Lock class="acct-mark" aria-label="Locked" />
+            <SmartToySharp class="bot-mark" aria-label="Bot" />
           </Show>
           <Body2
             component="span"
@@ -373,6 +369,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
         <Show when={!!status().reblog}>
           <div class={tootStyle.tootRetootGrp}>
             <BoostIcon />
+            <span>
               <Body2
                 ref={(e: { innerHTML: string }) => {
                   createRenderEffect(() => {
@@ -382,8 +379,9 @@ const RegularToot: Component<TootCardProps> = (props) => {
                     );
                   });
                 }}
-              ></Body2>
-            <span>boosts</span>
+              ></Body2>{" "}
+              boosted
+            </span>
           </div>
         </Show>
         <TootAuthorGroup

src/timelines/toot.module.css

@@ -72,9 +72,8 @@
   align-items: center;
   gap: 4px;
 
-  > :global(.acct-mark) {
+  > :global(.bot-mark) {
     font-size: 1.2em;
-    color: var(--tutu-color-secondary-text-on-surface);
   }
 }
 
@@ -222,14 +221,11 @@
 }
 
 .tootRetootGrp {
-  display: flex;
-  gap: 0.25em;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 8px;
   margin-bottom: 8px;
   align-items: center;
-
-  > :first-child {
-    margin-right: 0.25em;
-  }
 }
 
 .tootAttachmentGrp {