Highlight dangerous scopes when consenting to them

Author: sandhose

frontend/src/components/SessionDetail/SessionInfo.tsx

@@ -68,7 +68,7 @@ export const ScopeSendMessages: React.FC = () => {
 const ScopeSynapseAdmin: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <VisualListItem Icon={IconErrorSolid}>
+    <VisualListItem Icon={IconErrorSolid} destructive>
       {t("mas.scope.synapse_admin")}
     </VisualListItem>
   );
@@ -77,7 +77,7 @@ const ScopeSynapseAdmin: React.FC = () => {
 const ScopeMasAdmin: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <VisualListItem Icon={IconErrorSolid}>
+    <VisualListItem Icon={IconErrorSolid} destructive>
       {t("mas.scope.mas_admin")}
     </VisualListItem>
   );

frontend/src/templates.css

@@ -117,6 +117,16 @@
         width: var(--cpd-space-6x);
         color: var(--cpd-color-icon-quaternary);
       }
+
+      &.dangerous {
+        border: 1px solid var(--cpd-color-border-critical-subtle);
+        background-color: var(--cpd-color-bg-critical-subtle);
+        color: var(--cpd-color-text-critical-primary);
+
+        & > svg {
+          color: var(--cpd-color-icon-critical-primary);
+        }
+      }
     }
   }
 }

templates/components/scope.html

@@ -18,9 +18,9 @@
         <li>{{ icon.chat() }}<p>{{ _("mas.scope.view_messages") }}</p></li>
         <li>{{ icon.send() }}<p>{{ _("mas.scope.send_messages") }}</p></li>
       {% elif scope == "urn:synapse:admin:*" %}
-        <li>{{ icon.error_solid() }}<p>{{ _("mas.scope.synapse_admin") }}</p></li>
+        <li class="dangerous">{{ icon.room() }}<p>{{ _("mas.scope.synapse_admin") }}</p></li>
       {% elif scope == "urn:mas:admin" %}
-        <li>{{ icon.error_solid() }}<p>{{ _("mas.scope.mas_admin") }}</p></li>
+        <li class="dangerous">{{ icon.admin() }}<p>{{ _("mas.scope.mas_admin") }}</p></li>
       {% elif scope is startingwith("urn:matrix:client:device:") or scope is startingwith("urn:matrix:org.matrix.msc2967.client:device:") %}
         {# We hide this scope #}
       {% else %}