+
-
+
+
+ {!!field.verified_at && (
+
+ )}
+
))}
diff --git a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
index 5ccdb1f310..4bc64d05a9 100644
--- a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
+++ b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
@@ -64,6 +64,39 @@ svg.badgeIcon {
margin-top: 16px;
}
+.fieldCard {
+ position: relative;
+
+ a {
+ color: var(--color-text-brand);
+ text-decoration: none;
+ }
+}
+
+.fieldCardVerified {
+ background-color: var(--color-bg-brand-softer);
+
+ dt {
+ padding-right: 1rem;
+ }
+
+ .fieldIconVerified {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ }
+}
+
+.fieldIconVerified {
+ width: 1rem;
+ height: 1rem;
+
+ // Need to override .icon path.
+ path {
+ fill: revert-layer;
+ }
+}
+
.fieldNumbersWrapper {
a {
font-weight: unset;
@@ -106,4 +139,9 @@ svg.badgeIcon {
font-weight: 600;
font-size: 15px;
}
+
+ .fieldIconVerified {
+ vertical-align: middle;
+ margin-left: 4px;
+ }
}
diff --git a/app/javascript/styles/mastodon/theme/_dark.scss b/app/javascript/styles/mastodon/theme/_dark.scss
index e6fd6d3cc1..9485464e09 100644
--- a/app/javascript/styles/mastodon/theme/_dark.scss
+++ b/app/javascript/styles/mastodon/theme/_dark.scss
@@ -142,6 +142,7 @@
var(--border-strength-primary)
)};
--color-border-media: rgb(252 248 255 / 15%);
+ --color-border-verified: rgb(220, 3, 240);
--color-border-on-bg-secondary: #{utils.css-alpha(
var(--color-indigo-200),
calc(var(--border-strength-primary) / 1.5)
diff --git a/app/javascript/styles/mastodon/theme/_light.scss b/app/javascript/styles/mastodon/theme/_light.scss
index f0dc1bdfbc..534a18367c 100644
--- a/app/javascript/styles/mastodon/theme/_light.scss
+++ b/app/javascript/styles/mastodon/theme/_light.scss
@@ -140,6 +140,7 @@
var(--color-grey-950) var(--border-strength-primary)
);
--color-border-media: rgb(252 248 255 / 15%);
+ --color-border-verified: rgb(220, 3, 240);
--color-border-on-bg-secondary: var(--color-grey-200);
--color-border-on-bg-brand-softer: var(--color-indigo-200);
--color-border-on-bg-error-softer: #{utils.css-alpha(