From 2bcc43369e224a944fc8a4a786082d9137497ebb Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Fri, 19 Sep 2025 10:53:59 -0700
Subject: [PATCH] Update icon in MediaPermissionsModal

---
 images/caption-shadow.svg               |  2 +-
 images/macos-switch.svg                 |  2 +-
 ts/components/MediaPermissionsModal.tsx | 11 +++++++++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/images/caption-shadow.svg b/images/caption-shadow.svg
index 444ae5b9a7..801cfdb135 100644
--- a/images/caption-shadow.svg
+++ b/images/caption-shadow.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><defs><filter id="b" width="138.9%" height="450%" x="-19.4%" y="-125%"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feOffset in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur in="shadowOffsetOuter2" result="shadowBlurOuter2" stdDeviation=".5"/><feColorMatrix in="shadowBlurOuter2" result="shadowMatrixOuter2" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter><filter id="f" width="138.9%" height="450%" x="-19.4%" y="-125%"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feOffset in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur in="shadowOffsetOuter2" result="shadowBlurOuter2" stdDeviation=".5"/><feColorMatrix in="shadowBlurOuter2" result="shadowMatrixOuter2" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter><filter id="h" width="158.3%" height="450%" x="-29.2%" y="-125%"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feOffset in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur in="shadowOffsetOuter2" result="shadowBlurOuter2" stdDeviation=".5"/><feColorMatrix in="shadowBlurOuter2" result="shadowMatrixOuter2" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter><path id="a" d="M0 3h18v2H0z"/><path id="d" d="M0 0h18v2H0z"/><path id="g" d="M0 6h12v2H0z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3 8)"><use xlink:href="#a" fill="#000" filter="url(#b)"/><use xlink:href="#a" fill="#fff"/></g><g transform="translate(3 8)"><use xlink:href="#d" fill="#000" filter="url(#f)"/><use xlink:href="#d" fill="#fff"/></g><g transform="translate(3 8)"><use xlink:href="#g" fill="#000" filter="url(#h)"/><use xlink:href="#g" fill="#fff"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><defs><filter id="b" width="138.9%" height="450%" x="-19.4%" y="-125%"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feOffset in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur in="shadowOffsetOuter2" result="shadowBlurOuter2" stdDeviation=".5"/><feColorMatrix in="shadowBlurOuter2" result="shadowMatrixOuter2" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter><filter id="d" width="138.9%" height="450%" x="-19.4%" y="-125%"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feOffset in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur in="shadowOffsetOuter2" result="shadowBlurOuter2" stdDeviation=".5"/><feColorMatrix in="shadowBlurOuter2" result="shadowMatrixOuter2" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter><filter id="h" width="158.3%" height="450%" x="-29.2%" y="-125%"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feOffset in="SourceAlpha" result="shadowOffsetOuter2"/><feGaussianBlur in="shadowOffsetOuter2" result="shadowBlurOuter2" stdDeviation=".5"/><feColorMatrix in="shadowBlurOuter2" result="shadowMatrixOuter2" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="shadowMatrixOuter2"/></feMerge></filter><path id="a" d="M0 3h18v2H0z"/><path id="c" d="M0 0h18v2H0z"/><path id="f" d="M0 6h12v2H0z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(3 8)"><use xlink:href="#a" fill="#000" filter="url(#b)"/><use xlink:href="#a" fill="#fff"/></g><g transform="translate(3 8)"><use xlink:href="#c" fill="#000" filter="url(#d)"/><use xlink:href="#c" fill="#fff"/></g><g transform="translate(3 8)"><use xlink:href="#f" fill="#000" filter="url(#h)"/><use xlink:href="#f" fill="#fff"/></g></g></svg>
\ No newline at end of file
diff --git a/images/macos-switch.svg b/images/macos-switch.svg
index ec589b2d17..e84340e6fc 100644
--- a/images/macos-switch.svg
+++ b/images/macos-switch.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="21" fill="none"><rect width="28" height="17" y="1" fill="#1D87FF" rx="8.5"/><g filter="url(#a)"><ellipse cx="19.515" cy="9.5" fill="#fff" rx="6.788" ry="6.8"/></g><defs><filter id="a" width="20.376" height="20.4" x="9.327" y=".15" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".85"/><feGaussianBlur stdDeviation="1.7"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_1_1422"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1422" result="shape"/></filter></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="20" fill="none"><rect width="28" height="12.44" x="1" y="3.75" fill="#0D6FFF" rx="6.22"/><rect width="16.33" height="10.11" x="11.5" y="4.92" fill="#fff" rx="5.055"/></svg>
\ No newline at end of file
diff --git a/ts/components/MediaPermissionsModal.tsx b/ts/components/MediaPermissionsModal.tsx
index ed9e245419..0be03bd656 100644
--- a/ts/components/MediaPermissionsModal.tsx
+++ b/ts/components/MediaPermissionsModal.tsx
@@ -4,6 +4,7 @@
 import React, { useCallback } from 'react';
 
 import { Modal } from './Modal.js';
+import { tw } from '../axo/tw.js';
 import type { LocalizerType } from '../types/Util.js';
 import { missingCaseError } from '../util/missingCaseError.js';
 import { Button } from './Button.js';
@@ -62,14 +63,20 @@ export function MediaPermissionsModal({
       <div className="MediaPermissionsModal__body">
         <h1>{title}</h1>
         <p className="MediaPermissionsModal__subtitle">{subtitle}</p>
-        <ol>
+        <ol className={tw('list-decimal')}>
           <li>
             {i18n('icu:MediaPermissionsModal__step-1', {
               buttonName: i18n('icu:MediaPermissionsModal__open'),
             })}
           </li>
           <li>
-            <img alt="" src="images/macos-switch.svg" width={28} height={17} />
+            <img
+              className={tw('me-1 inline-block')}
+              alt=""
+              src="images/macos-switch.svg"
+              width={30}
+              height={20}
+            />
             {i18n('icu:MediaPermissionsModal__step-2')}
           </li>
         </ol>