[feature] refactor status prepend box

app/javascript/flavours/glitch/components/status_prepend.jsx

@@ -28,10 +28,10 @@ export default class StatusPrepend extends PureComponent {
     let link = (
       <a
         onClick={this.handleClick}
-        href={account.get("url")}
-        className='status__display-name'
+        href={account.get('url')}
+        className='status__prepend-display-name'
       >
-        <b
+        <span
           dangerouslySetInnerHTML={{
             __html : account.get("display_name_html") || account.get("username"),
           }}

app/javascript/flavours/glitch/styles/accessibility.scss

@@ -15,23 +15,6 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
   }
 }
 
-// Display a checkmark on active UI elements otherwise differing only by color
-.status__action-bar-button,
-.detailed-status__button .icon-button {
-  position: relative;
-
-  &.active::after {
-    position: absolute;
-    content: '\F00C';
-    font-size: 50%;
-    inset-inline-end: -0.55em;
-    top: -0.44em;
-
-    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- this is an icon font, this can't use a generic font */
-    font-family: FontAwesome;
-  }
-}
-
 .hicolor-privacy-icons {
   .status__visibility-icon.fa-globe,
   .privacy-dropdown__option .fa-globe {

app/javascript/flavours/glitch/styles/components/status.scss

@@ -194,11 +194,6 @@
   border-bottom: 1px solid lighten($ui-base-color, 8%);
 }
 
-.status__prepend-icon-wrapper {
-  inset-inline-start: -26px;
-  position: absolute;
-}
-
 .notification-follow,
 .notification-follow-request {
   position: relative;
@@ -500,24 +495,6 @@
   }
 }
 
-.status__prepend {
-  margin-top: -2px;
-  margin-bottom: 8px;
-  margin-inline-start: 58px;
-  color: $dark-text-color;
-  font-size: 14px;
-  position: relative;
-
-  .status__display-name strong {
-    color: $dark-text-color;
-  }
-
-  > span {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
 
 .status__action-bar {
   align-items: center;

app/javascript/flavours/glitch/styles/gts.scss

@@ -88,16 +88,6 @@
   height: var(--size);
 }
 
-.status__prepend {
-  margin-inline-start: 28px;
-}
-
-.status__prepend-icon {
-  --size: 18px;
-  width: var(--size);
-  height: var(--size);
-}
-
 .detailed-status__meta {
   display: flex;
   align-items: center;

app/javascript/flavours/glitch/styles/gts/_config.scss

@@ -4,3 +4,9 @@
   Legacy components will be in the parent directory.
   This’ll help keep track of renoavation work.
 */
+
+/* 🛠️ Config */
+@import 'colors';
+
+/* 🧩 Components */
+@import 'status-prepend';

app/javascript/flavours/glitch/styles/gts/colors.scss

@@ -0,0 +1,14 @@
+/* 🎨 Colors */
+:root {
+    color-scheme: dark;
+
+    --color-accent: #8c8dff;
+    --color-accent-hover: #a3a3ff;
+    --color-accent-focus: var(--color-accent-hover);
+    --color-accent-fg: #9baec8;
+
+    --color-fg: #d6d2e0;
+    --color-secondary-bg: #13111f;
+    --color-content-fg: var(--color-fg);
+    --color-content-secondary-bg: var(--color-secondary-bg);
+}

app/javascript/flavours/glitch/styles/gts/status-prepend.scss

@@ -0,0 +1,41 @@
+/* Status: Prepend */
+.status__prepend {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    margin-block-end: 10px;
+    padding: 5px 10px;
+    border: 1px solid var(--color-accent-lines);
+    border-radius: 50px;
+    color: var(--color-accent-fg);
+    font-size: 13px;
+    font-weight: 500;
+    background-color: var(--color-accent-bg);
+
+    &:focus-within {
+        outline: 2px solid var(--color-accent-focus);
+        outline-offset: 3px;
+    }
+}
+
+.status__prepend-icon {
+    --size: 18px;
+    display: block;
+    width: var(--size);
+    height: var(--size);
+}
+
+.status__prepend-display-name {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+        color: var(--color-accent-hover);
+        text-decoration: underline;
+    }
+
+    &:focus-visible {
+        color: var(--color-accent-focus);
+        outline-color: transparent;
+    }
+}