Update icon in MediaPermissionsModal

This commit is contained in:
Fedor Indutny
2025-09-19 10:53:59 -07:00
committed by GitHub
parent d7f074eb1e
commit 2bcc43369e
3 changed files with 11 additions and 4 deletions

View File

@@ -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>
<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>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -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>
<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>

Before

Width:  |  Height:  |  Size: 805 B

After

Width:  |  Height:  |  Size: 231 B

View File

@@ -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>