Profile redesign: Nudge to add featured tags (#38315)

app/javascript/mastodon/components/callout/index.tsx

@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from 'react';
+import type { FC, ReactElement, ReactNode } from 'react';
 
 import { useIntl } from 'react-intl';
 
@@ -19,7 +19,7 @@ import classes from './styles.module.css';
 export interface CalloutProps {
   variant?:
     | 'default'
-    // | 'subtle'
+    | 'subtle'
     | 'feature'
     | 'inverted'
     | 'success'
@@ -31,9 +31,9 @@ export interface CalloutProps {
   /** Set to false to hide the icon. */
   icon?: IconProp | boolean;
   onPrimary?: () => void;
-  primaryLabel?: string;
+  primaryLabel?: string | ReactElement;
   onSecondary?: () => void;
-  secondaryLabel?: string;
+  secondaryLabel?: string | ReactElement;
   onClose?: () => void;
   id?: string;
   extraContent?: ReactNode;
@@ -41,7 +41,7 @@ export interface CalloutProps {
 
 const variantClasses = {
   default: classes.variantDefault as string,
-  // subtle: classes.variantSubtle as string,
+  subtle: classes.variantSubtle as string,
   feature: classes.variantFeature as string,
   inverted: classes.variantInverted as string,
   success: classes.variantSuccess as string,

app/javascript/mastodon/components/callout/styles.module.css

@@ -32,6 +32,10 @@
 .body {
   flex-grow: 1;
 
+  a {
+    color: inherit;
+  }
+
   h3 {
     font-weight: 500;
     margin-bottom: 5px;
@@ -51,6 +55,7 @@
   color: inherit;
   font-weight: 500;
   padding: 0;
+  text-wrap: nowrap;
   text-decoration: underline;
   transition: color 0.1s ease-in-out;
 
@@ -80,14 +85,14 @@
   }
 }
 
-/* .variantSubtle {
+.variantSubtle {
   border: 1px solid var(--color-bg-brand-softer);
   background-color: var(--color-bg-primary);
 
   .icon {
     background-color: var(--color-bg-brand-softer);
   }
-} */
+}
 
 .variantFeature {
   background-color: var(--color-bg-brand-base);