Merge branch 'main' into glitch-soc/merge-upstream

app/javascript/mastodon/components/admin/Retention.js

@@ -42,6 +42,7 @@ export default class Retention extends React.PureComponent {
 
   render () {
     const { loading, data } = this.state;
+    const { frequency } = this.props;
 
     let content;
 
@@ -129,9 +130,18 @@ export default class Retention extends React.PureComponent {
       );
     }
 
+    let title = null;
+    switch(frequency) {
+    case 'day':
+      title = <FormattedMessage id='admin.dashboard.daily_retention' defaultMessage='User retention rate by day after sign-up' />;
+      break;
+    default:
+      title = <FormattedMessage id='admin.dashboard.monthly_retention' defaultMessage='User retention rate by month after sign-up' />;
+    };
+
     return (
       <div className='retention'>
-        <h4><FormattedMessage id='admin.dashboard.retention' defaultMessage='Retention' /></h4>
+        <h4>{title}</h4>
 
         {content}
       </div>

app/javascript/styles/mastodon/components.scss

@@ -3074,17 +3074,20 @@ a.account__display-name {
   box-sizing: border-box;
   width: 100%;
   margin: 0;
-  color: $inverted-text-color;
-  background: $simple-background-color;
-  padding: 10px;
+  color: $darker-text-color;
+  background: transparent;
+  padding: 7px 0;
   font-family: inherit;
   font-size: 14px;
   resize: vertical;
   border: 0;
+  border-bottom: 2px solid $ui-primary-color;
   outline: 0;
-  border-radius: 4px;
 
-  &:focus {
+  &:focus,
+  &:active {
+    color: $primary-text-color;
+    border-bottom-color: $ui-highlight-color;
     outline: 0;
   }