maxmustermann/PowerToys
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Shortcut Guide] UI tweaks (#14215)

Browse source 
* New SVGs

* Updated tooltips

* Tweaks

* Portrait mode updates

Co-authored-by: Laute <Niels.Laute@philips.com>
This commit is contained in:
Niels Laute 2021-11-05 19:30:30 +01:00 committed by GitHub
parent 159629372d
commit 019c05c8e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 606 additions and 674 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/modules/ShortcutGuide/ShortcutGuide/overlay_window.cpp
View file

@ -463,27 +463,36 @@ void D2DOverlayWindow::init()
{
colors.update();
landscape.load(L"svgs\\overlay.svg", d2d_dc.get())
.find_thumbnail(L"path-1")
.find_window_group(L"Group-1")
.recolor(0x000000, colors.start_color_menu);
.find_thumbnail(L"monitorRect")
.find_window_group(L"WindowControlsGroup")
.recolor(0x2582FB, colors.start_color_menu);
portrait.load(L"svgs\\overlay_portrait.svg", d2d_dc.get())
.find_thumbnail(L"path-1")
.find_window_group(L"Group-1")
.recolor(0x000000, colors.start_color_menu);
.find_thumbnail(L"monitorRect")
.find_window_group(L"WindowControlsGroup")
.recolor(0x2582FB, colors.start_color_menu);
no_active.load(L"svgs\\no_active_window.svg", d2d_dc.get());
arrows.resize(10);
for (unsigned i = 0; i < arrows.size(); ++i)
{
arrows[i].load(L"svgs\\" + std::to_wstring((i + 1) % 10) + L".svg", d2d_dc.get()).recolor(0x000000, colors.start_color_menu);
arrows[i].load(L"svgs\\" + std::to_wstring((i + 1) % 10) + L".svg", d2d_dc.get()).recolor(0x2582FB, colors.start_color_menu);
}
light_mode = (theme_setting == Light) || (theme_setting == System && colors.light_mode);
if (!light_mode)
if (light_mode)
{
landscape.recolor(0x222222, 0xDDDDDD);
portrait.recolor(0x222222, 0xDDDDDD);
landscape.recolor(0x2E17FC, 0x000000);
portrait.recolor(0x2E17FC, 0x000000);
for (auto& arrow : arrows)
{
arrow.recolor(0x222222, 0xDDDDDD);
arrow.recolor(0x222222, 0x000000);
}
}
else
{
landscape.recolor(0x2E17FC, 0xFFFFFF);
portrait.recolor(0x2E17FC, 0xFFFFFF);
for (auto& arrow : arrows)
{
arrow.recolor(0x222222, 0xFFFFFF);
}
}
}
@ -496,13 +505,13 @@ void D2DOverlayWindow::resize()
{ // portrait is broke right now
use_overlay = &landscape;
no_active_scale = 0.3f;
font = 15.0f;
font = 12.0f;
}
else
{
use_overlay = &portrait;
no_active_scale = 0.5f;
font = 16.0f;
font = 13.0f;
}
use_overlay->resize(0, 0, window_width, window_height, 0.8f);
auto thumb_no_active_rect = use_overlay->get_thumbnail_rect_and_scale(0, 0, no_active.width(), no_active.height(), no_active_scale).rect;
@ -718,7 +727,7 @@ void D2DOverlayWindow::render(ID2D1DeviceContext5* d2d_dc)
// render the monitors
if (render_monitors)
{
brushColor = D2D1::ColorF(colors.desktop_fill_color, miniature_shown ? current_anim_value : current_anim_value * 0.3f);
brushColor = D2D1::ColorF(colors.start_color_menu, miniature_shown ? current_anim_value * 0.9f : current_anim_value * 0.3f);
brush = nullptr;
winrt::check_hresult(d2d_dc->CreateSolidColorBrush(brushColor, brush.put()));
for (auto& monitor : monitors)

41
src/modules/ShortcutGuide/ShortcutGuide/svgs/0.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>0</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-7.000000, -159.000000)">
<g id="0" transform="translate(7.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<path d="M26.5,31.1376953 C24.166655,31.1376953 23,29.4993653 23,26.2226562 C23,24.522778 23.3155893,23.2273808 23.9467773,22.3364258 C24.5779654,21.4454708 25.4928325,21 26.6914062,21 C28.9700635,21 30.109375,22.6656734 30.109375,25.9970703 C30.109375,27.6559328 29.798343,28.9274044 29.1762695,29.8115234 C28.5541961,30.6956424 27.6621152,31.1376953 26.5,31.1376953 Z M26.5957031,22.6474609 C25.6614537,22.6474609 25.1943359,23.8209518 25.1943359,26.1679688 C25.1943359,28.3782663 25.6523392,29.4833984 26.5683594,29.4833984 C27.461593,29.4833984 27.9082031,28.3440869 27.9082031,26.0654297 C27.9082031,23.7867725 27.4707075,22.6474609 26.5957031,22.6474609 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_0" data-name="0">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M13.968,15.171a2.7,2.7,0,0,1-2.427-1.251,6.713,6.713,0,0,1-.813-3.644,7.215,7.215,0,0,1,.868-3.9,2.784,2.784,0,0,1,2.481-1.343,2.684,2.684,0,0,1,2.468,1.251,7.283,7.283,0,0,1,.772,3.76,6.981,6.981,0,0,1-.861,3.8A2.79,2.79,0,0,1,13.968,15.171ZM14.05,6.3a1.365,1.365,0,0,0-1.289.981,7.967,7.967,0,0,0-.414,2.943,7.039,7.039,0,0,0,.414,2.758,1.345,1.345,0,0,0,1.268.919,1.323,1.323,0,0,0,1.268-.94,7.716,7.716,0,0,0,.393-2.827A7.991,7.991,0,0,0,15.3,7.258,1.315,1.315,0,0,0,14.05,6.3Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

43
src/modules/ShortcutGuide/ShortcutGuide/svgs/1.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>1</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-67.000000, -159.000000)">
<g id="1" transform="translate(67.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<polygon fill="#FFFFFF" fill-rule="nonzero" points="30.2548828 30.9667969 24.0546875 30.9667969 24.0546875 29.2578125 26.0849609 29.2578125 26.0849609 23.1533203 24 23.6044922 24 21.8544922 28.2382812 21 28.2382812 29.2578125 30.2548828 29.2578125"></polygon>
</g>
</g>
</g>
</svg>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_1" data-name="1">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M15.277,15H13.691V7.022a4.525,4.525,0,0,1-.868.482,8.428,8.428,0,0,1-1.08.4l-.437-1.319a8.886,8.886,0,0,0,1.716-.673,7.345,7.345,0,0,0,1.436-.933h.82Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

41
src/modules/ShortcutGuide/ShortcutGuide/svgs/2.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>2</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-127.000000, -159.000000)">
<g id="2" transform="translate(127.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<path d="M26.4746094,29.1347656 L26.4746094,29.1757812 L30.453125,29.1757812 L30.453125,30.9667969 L24,30.9667969 L24,29.2851562 L26.8095703,26.5986328 C27.3746773,26.0563124 27.772297,25.6017271 28.0024414,25.2348633 C28.2325858,24.8679995 28.3476562,24.4817729 28.3476562,24.0761719 C28.3476562,23.1738236 27.8623095,22.7226562 26.8916016,22.7226562 C26.0484984,22.7226562 25.2418658,23.0576138 24.4716797,23.7275391 L24.4716797,21.8271484 C25.3238975,21.2757134 26.2854764,21 27.3564453,21 C28.3590545,21 29.1417615,21.2517878 29.7045898,21.7553711 C30.2674182,22.2589543 30.5488281,22.9391233 30.5488281,23.7958984 C30.5488281,24.9397844 29.8629626,26.1223897 28.4912109,27.34375 L26.4746094,29.1347656 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_2" data-name="2">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M10.974,15v-.6a3.649,3.649,0,0,1,.188-1.217A3.508,3.508,0,0,1,11.7,12.2a5.092,5.092,0,0,1,.827-.851q.485-.4,1.073-.831a7.588,7.588,0,0,0,.824-.66,5.023,5.023,0,0,0,.571-.625,1.98,1.98,0,0,0,.328-.625,2.443,2.443,0,0,0,.109-.742,1.561,1.561,0,0,0-.4-1.1,1.448,1.448,0,0,0-1.121-.431,3.157,3.157,0,0,0-1.135.229,3.742,3.742,0,0,0-1.135.708L10.8,6.291A4.651,4.651,0,0,1,14.1,5.033a2.9,2.9,0,0,1,2.167.786,2.564,2.564,0,0,1,.772,1.859,3.645,3.645,0,0,1-.178,1.2,3.375,3.375,0,0,1-.479.913,4.918,4.918,0,0,1-.728.807,10.746,10.746,0,0,1-.94.745q-.526.369-.909.66a5.2,5.2,0,0,0-.629.55,1.988,1.988,0,0,0-.373.526,1.324,1.324,0,0,0-.12.561h4.553V15Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

41
src/modules/ShortcutGuide/ShortcutGuide/svgs/3.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>3</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-187.000000, -159.000000)">
<g id="3" transform="translate(187.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<path d="M24,30.6455078 L24,28.765625 C24.6562533,29.244143 25.4218706,29.4833984 26.296875,29.4833984 C26.84831,29.4833984 27.2778305,29.36491 27.5854492,29.1279297 C27.8930679,28.8909493 28.046875,28.560549 28.046875,28.1367188 C28.046875,27.6992166 27.85661,27.3619804 27.4760742,27.125 C27.0955385,26.8880196 26.5725945,26.7695312 25.9072266,26.7695312 L25.0253906,26.7695312 L25.0253906,25.1152344 L25.8388672,25.1152344 C27.1149152,25.1152344 27.7529297,24.6914105 27.7529297,23.84375 C27.7529297,23.04622 27.2630257,22.6474609 26.2832031,22.6474609 C25.6269498,22.6474609 24.9889354,22.8593729 24.3691406,23.2832031 L24.3691406,21.5195312 C25.0572951,21.1731754 25.8593704,21 26.7753906,21 C27.7779998,21 28.5584282,21.2255837 29.1166992,21.6767578 C29.6749702,22.1279319 29.9541016,22.7135381 29.9541016,23.4335938 C29.9541016,24.7141991 29.304694,25.5162744 28.0058594,25.8398438 L28.0058594,25.8740234 C28.6985712,25.9606124 29.2454407,26.2124003 29.6464844,26.6293945 C30.047528,27.0463888 30.2480469,27.5579397 30.2480469,28.1640625 C30.2480469,29.0800827 29.9130893,29.8046848 29.2431641,30.3378906 C28.5732388,30.8710964 27.6481179,31.1376953 26.4677734,31.1376953 C25.4560496,31.1376953 24.6334667,30.9736345 24,30.6455078 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_3" data-name="3">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M10.857,14.344l.663-1.094a4.564,4.564,0,0,0,1.036.5,3.6,3.6,0,0,0,1.083.154,2,2,0,0,0,1.446-.461,1.516,1.516,0,0,0,.475-1.131,1.453,1.453,0,0,0-.636-1.3,3.3,3.3,0,0,0-1.832-.424h-.807V9.319h.752a2.827,2.827,0,0,0,1.644-.393,1.435,1.435,0,0,0,.55-1.254,1.3,1.3,0,0,0-.4-1.022A1.477,1.477,0,0,0,13.817,6.3a3.274,3.274,0,0,0-1.008.164,4.127,4.127,0,0,0-1.029.513l-.67-1.053A4.8,4.8,0,0,1,14,5.033a3.1,3.1,0,0,1,2.071.663,2.192,2.192,0,0,1,.786,1.764,2.46,2.46,0,0,1-.455,1.5,2.608,2.608,0,0,1-1.371.9v.027a2.585,2.585,0,0,1,1.555.762,2.2,2.2,0,0,1,.6,1.583,2.679,2.679,0,0,1-.926,2.129,3.629,3.629,0,0,1-2.464.8,5.294,5.294,0,0,1-2.933-.827Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

43
src/modules/ShortcutGuide/ShortcutGuide/svgs/4.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>4</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-247.000000, -159.000000)">
<g id="4" transform="translate(247.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<path d="M30.4169922,28.7177734 L29.2412109,28.7177734 L29.2412109,30.8027344 L27.2724609,30.8027344 L27.2724609,28.7177734 L23,28.7177734 L23,27.34375 L27.1152344,21 L29.2412109,21 L29.2412109,27.1796875 L30.4169922,27.1796875 L30.4169922,28.7177734 Z M27.2998047,23.1601562 L27.2587891,23.1601562 C27.1949867,23.3242196 27.071941,23.5794254 26.8896484,23.9257812 L24.7910156,27.1796875 L27.2724609,27.1796875 L27.2724609,24.0966797 C27.2724609,23.8232408 27.2815754,23.5110695 27.2998047,23.1601562 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_4" data-name="4">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M16.576,5.149v6.405h1.032V12.86H16.576v2.194H14.983V12.86H10.43V11.555q.629-.69,1.275-1.494t1.241-1.637q.595-.834,1.1-1.671a15.328,15.328,0,0,0,.858-1.6Zm-4.532,6.405h2.939v-4.2q-.41.7-.8,1.3t-.752,1.114q-.376.52-.721.957T12.043,11.555Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

41
src/modules/ShortcutGuide/ShortcutGuide/svgs/5.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>5</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-307.000000, -159.000000)">
<g id="5" transform="translate(307.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<path d="M24,30.5498047 L24,28.7041016 C24.6699252,29.1142599 25.3831342,29.3193359 26.1396484,29.3193359 C26.7093127,29.3193359 27.1547835,29.1837579 27.4760742,28.9125977 C27.7973649,28.6414374 27.9580078,28.2734398 27.9580078,27.8085938 C27.9580078,26.8378858 27.2721423,26.3525391 25.9003906,26.3525391 C25.4537738,26.3525391 24.9137401,26.3935543 24.2802734,26.4755859 L24.2802734,21 L29.7080078,21 L29.7080078,22.7636719 L26.1259766,22.7636719 L26.1259766,24.7255859 C26.4130874,24.6982421 26.6842435,24.6845703 26.9394531,24.6845703 C27.9466196,24.6845703 28.7350232,24.9488906 29.3046875,25.4775391 C29.8743518,26.0061875 30.1591797,26.7171179 30.1591797,27.6103516 C30.1591797,28.5992888 29.8196649,29.4070607 29.140625,30.0336914 C28.4615851,30.6603221 27.5410214,30.9736328 26.3789062,30.9736328 C25.4355422,30.9736328 24.6425813,30.8323582 24,30.5498047 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_5" data-name="5">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M10.816,14.18l.772-1.012a3.292,3.292,0,0,0,2.1.731,1.913,1.913,0,0,0,1.395-.513,1.753,1.753,0,0,0,.526-1.312,1.613,1.613,0,0,0-.588-1.35,2.748,2.748,0,0,0-1.723-.461q-.39,0-.841.027t-.861.075L11.944,5.2h4.826V6.551H13.223l-.171,2.461q.239-.014.475-.024t.427-.01a3.435,3.435,0,0,1,2.4.79,2.8,2.8,0,0,1,.868,2.177,3.054,3.054,0,0,1-.954,2.328,3.532,3.532,0,0,1-2.526.9,4.532,4.532,0,0,1-2.926-.991Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

41
src/modules/ShortcutGuide/ShortcutGuide/svgs/6.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>6</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-367.000000, -159.000000)">
<g id="6" transform="translate(367.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<path d="M30.2070312,21.2666016 L30.2070312,23.0712891 C29.710284,22.7887356 29.1679717,22.6474609 28.5800781,22.6474609 C27.8554651,22.6474609 27.2709983,22.9243136 26.8266602,23.4780273 C26.382322,24.031741 26.1510418,24.7734329 26.1328125,25.703125 L26.1738281,25.703125 C26.6432315,25.0104132 27.3290971,24.6640625 28.2314453,24.6640625 C29.0517619,24.6640625 29.7023088,24.9420545 30.1831055,25.4980469 C30.6639021,26.0540392 30.9042969,26.7900345 30.9042969,27.7060547 C30.9042969,28.6904346 30.5852896,29.5084603 29.9472656,30.1601562 C29.3092416,30.8118522 28.4980518,31.1376953 27.5136719,31.1376953 C26.4108018,31.1376953 25.5494823,30.7389363 24.9296875,29.9414062 C24.3098927,29.1438762 24,28.0250723 24,26.5849609 C24,24.88964 24.398759,23.5349986 25.1962891,22.5209961 C25.9938191,21.5069936 27.076165,21 28.4433594,21 C29.1998736,21 29.7877583,21.0888663 30.2070312,21.2666016 Z M27.5,26.2636719 C27.1035136,26.2636719 26.7879244,26.4026679 26.5532227,26.6806641 C26.318521,26.9586602 26.2011719,27.3141254 26.2011719,27.7470703 C26.2011719,28.2255883 26.3207996,28.6346012 26.5600586,28.9741211 C26.7993176,29.313641 27.1171855,29.4833984 27.5136719,29.4833984 C27.9010436,29.4833984 28.2109363,29.33187 28.4433594,29.0288086 C28.6757824,28.7257472 28.7919922,28.3304061 28.7919922,27.8427734 C28.7919922,26.7900338 28.3613324,26.2636719 27.5,26.2636719 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_6" data-name="6">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M17.249,11.849a3.289,3.289,0,0,1-.9,2.4,3.053,3.053,0,0,1-2.283.926A2.824,2.824,0,0,1,11.654,14a5.564,5.564,0,0,1-.865-3.346,10.182,10.182,0,0,1,.236-2.211,5.023,5.023,0,0,1,.837-1.89,3.714,3.714,0,0,1,1.292-1.142,3.851,3.851,0,0,1,1.777-.376,3.546,3.546,0,0,1,1.039.161,3.365,3.365,0,0,1,1.06.571l-.807,1a2.328,2.328,0,0,0-.636-.352,2.2,2.2,0,0,0-.731-.113,2.074,2.074,0,0,0-.995.232,2.535,2.535,0,0,0-.81.731,3.2,3.2,0,0,0-.513,1.094,5.618,5.618,0,0,0-.185,1.436h.034a2.468,2.468,0,0,1,.947-.749,2.885,2.885,0,0,1,1.193-.25,2.5,2.5,0,0,1,1.979.844A3.228,3.228,0,0,1,17.249,11.849Zm-1.545.082a2.094,2.094,0,0,0-.417-1.422,1.413,1.413,0,0,0-1.114-.472,1.652,1.652,0,0,0-1.289.516,1.818,1.818,0,0,0-.468,1.268,2.34,2.34,0,0,0,.461,1.49,1.461,1.461,0,0,0,1.207.588,1.477,1.477,0,0,0,1.179-.513A2.167,2.167,0,0,0,15.7,11.931Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

41
src/modules/ShortcutGuide/ShortcutGuide/svgs/7.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>7</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-427.000000, -159.000000)">
<g id="7" transform="translate(427.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<polygon fill="#FFFFFF" fill-rule="nonzero" points="30.8222656 21.9980469 27.3632812 30.8027344 25.0800781 30.8027344 28.5664062 22.7636719 24 22.7636719 24 21 30.8222656 21"></polygon>
</g>
</g>
</g>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_7" data-name="7">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M17.164,6.113A43.443,43.443,0,0,0,15.1,10.4,19.372,19.372,0,0,0,13.869,15h-1.62a18.538,18.538,0,0,1,1.285-4.539,37.232,37.232,0,0,1,1.935-3.91H10.875V5.2h6.289Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

41
src/modules/ShortcutGuide/ShortcutGuide/svgs/8.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>8</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-487.000000, -159.000000)">
<g id="8" transform="translate(487.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<path d="M25.9755859,25.8740234 L25.9755859,25.8398438 C24.8544866,25.379555 24.2939453,24.6344453 24.2939453,23.6044922 C24.2939453,22.847978 24.5947236,22.2247746 25.1962891,21.7348633 C25.7978546,21.244952 26.574865,21 27.5273438,21 C28.4980517,21 29.2727836,21.2290016 29.8515625,21.6870117 C30.4303414,22.1450218 30.7197266,22.7363245 30.7197266,23.4609375 C30.7197266,24.5319064 30.0999411,25.32031 28.8603516,25.8261719 L28.8603516,25.8535156 C29.5257195,26.0494801 30.0418276,26.3719053 30.4086914,26.8208008 C30.7755552,27.2696963 30.9589844,27.7744113 30.9589844,28.3349609 C30.9589844,29.2008507 30.6388378,29.8844376 29.9985352,30.3857422 C29.3582325,30.8870468 28.4638729,31.1376953 27.3154297,31.1376953 C26.3219351,31.1376953 25.5209991,30.8927433 24.9125977,30.402832 C24.3041962,29.9129207 24,29.2646525 24,28.4580078 C24,27.286778 24.6585221,26.4254585 25.9755859,25.8740234 Z M28.6894531,23.6455078 C28.6894531,23.3128239 28.5834972,23.0473643 28.371582,22.8491211 C28.1596669,22.6508779 27.878257,22.5517578 27.5273438,22.5517578 C27.1855452,22.5517578 26.9018566,22.6554352 26.6762695,22.862793 C26.4506825,23.0701508 26.3378906,23.3356104 26.3378906,23.6591797 C26.3378906,24.2698598 26.7298138,24.7324203 27.5136719,25.046875 C28.29753,24.7233057 28.6894531,24.2561879 28.6894531,23.6455078 Z M27.4179688,26.6943359 C26.5019485,27.0543638 26.0439453,27.6057906 26.0439453,28.3486328 C26.0439453,28.7041033 26.1840806,28.9980457 26.4643555,29.2304688 C26.7446303,29.4628918 27.0852845,29.5791016 27.4863281,29.5791016 C27.919273,29.5791016 28.2679023,29.4651704 28.5322266,29.2373047 C28.7965508,29.009439 28.9287109,28.7086607 28.9287109,28.3349609 C28.9287109,27.5875614 28.4251352,27.0406918 27.4179688,26.6943359 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_8" data-name="8">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M10.728,12.307A2.72,2.72,0,0,1,12.5,9.764a2.918,2.918,0,0,1-1.019-.93,2.225,2.225,0,0,1-.369-1.251,2.323,2.323,0,0,1,.827-1.825,3.059,3.059,0,0,1,2.092-.725,3.069,3.069,0,0,1,2.1.725,2.309,2.309,0,0,1,.827,1.812,2.157,2.157,0,0,1-.383,1.244,3.029,3.029,0,0,1-1.039.93,2.666,2.666,0,0,1,1.319,1.046,2.742,2.742,0,0,1,.458,1.511,2.613,2.613,0,0,1-.909,2.061,3.479,3.479,0,0,1-2.379.8,3.518,3.518,0,0,1-2.382-.793A2.59,2.59,0,0,1,10.728,12.307Zm1.565-.137a1.693,1.693,0,0,0,.482,1.278,1.905,1.905,0,0,0,2.5-.007,1.672,1.672,0,0,0,.5-1.271,1.74,1.74,0,0,0-.479-1.23,1.64,1.64,0,0,0-1.258-.513,1.689,1.689,0,0,0-1.743,1.743Zm.321-4.457a1.415,1.415,0,0,0,.424,1.053,1.423,1.423,0,0,0,2.013,0,1.409,1.409,0,0,0,.427-1.053A1.414,1.414,0,0,0,14.043,6.25a1.362,1.362,0,0,0-1.029.417A1.451,1.451,0,0,0,12.614,7.713Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

41
src/modules/ShortcutGuide/ShortcutGuide/svgs/9.svg
View file

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="53px" height="52px" viewBox="0 0 53 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
<title>9</title>
<desc>Created with Sketch.</desc>
<g id="Devices" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-547.000000, -159.000000)">
<g id="9" transform="translate(547.000000, 159.000000)">
<rect id="Rectangle" fill="#000000" x="7" y="6" width="40" height="40"></rect>
<g id="left" transform="translate(0.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="bottom" transform="translate(15.000000, 28.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="right" transform="translate(29.000000, 14.000000)" fill="#000000">
<rect id="carat" transform="translate(12.000000, 12.000000) rotate(-314.000000) translate(-12.000000, -12.000000) " x="4" y="4" width="16" height="16"></rect>
</g>
<g id="top" transform="translate(16.000000, 0.000000)" fill="#000000">
<rect id="carat" transform="translate(11.311985, 12.000000) rotate(-314.000000) translate(-11.311985, -12.000000) " x="3.31198537" y="4" width="16" height="16"></rect>
</g>
<path d="M24.5605469,30.7548828 L24.5605469,28.9775391 C25.0755234,29.3147803 25.6953089,29.4833984 26.4199219,29.4833984 C27.1764361,29.4833984 27.7609029,29.2270533 28.1733398,28.7143555 C28.5857768,28.2016576 28.7942708,27.4736375 28.7988281,26.5302734 L28.7578125,26.5166016 C28.3248676,27.1591829 27.6663456,27.4804688 26.7822266,27.4804688 C25.9801392,27.4804688 25.3159206,27.2001981 24.7895508,26.6396484 C24.263181,26.0790988 24,25.352218 24,24.4589844 C24,23.4153594 24.3212858,22.5779654 24.9638672,21.9467773 C25.6064485,21.3155893 26.4381459,21 27.4589844,21 C28.5071667,21 29.342282,21.3964804 29.9643555,22.1894531 C30.5864289,22.9824258 30.8974609,24.1171801 30.8974609,25.59375 C30.8974609,27.3437587 30.5226274,28.705236 29.7729492,29.6782227 C29.023271,30.6512093 27.9762437,31.1376953 26.6318359,31.1376953 C25.8343059,31.1376953 25.1438831,31.0100924 24.5605469,30.7548828 Z M27.3974609,22.6474609 C27.0237612,22.6474609 26.716147,22.7989894 26.4746094,23.1020508 C26.2330717,23.4051122 26.1123047,23.795896 26.1123047,24.2744141 C26.1123047,24.7711613 26.2319324,25.1619452 26.4711914,25.4467773 C26.7104504,25.7316095 27.0351542,25.8740234 27.4453125,25.8740234 C27.8190123,25.8740234 28.1243478,25.7384454 28.3613281,25.4672852 C28.5983085,25.1961249 28.7167969,24.8554708 28.7167969,24.4453125 C28.7167969,23.930336 28.5926119,23.5019548 28.3442383,23.1601562 C28.0958646,22.8183577 27.7802754,22.6474609 27.3974609,22.6474609 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
<g id="Artboard" clip-path="url(#clip-Artboard)">
<g id="_9" data-name="9">
<rect id="Rectangle" width="29" height="36" rx="4" transform="translate(13 8)" fill="#2582fb"/>
<g id="bottom">
<rect id="carat" width="14" height="14" transform="translate(18 39) rotate(-45)" fill="#2582fb"/>
</g>
<g id="left">
<rect id="carat-2" data-name="carat" width="14" height="14" transform="translate(7.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="right">
<rect id="carat-3" data-name="carat" width="14" height="14" transform="translate(26.899 26) rotate(-45)" fill="#2582fb"/>
</g>
<g id="top">
<rect id="carat-4" data-name="carat" width="14" height="14" transform="translate(18 13) rotate(-45)" fill="#2582fb"/>
</g>
<path id="A" d="M17.27,9.565a7.426,7.426,0,0,1-.974,4.163,3.4,3.4,0,0,1-3.032,1.442,3.851,3.851,0,0,1-1.336-.222,3.755,3.755,0,0,1-1.159-.7l.827-.978a2.674,2.674,0,0,0,.779.465,2.74,2.74,0,0,0,.957.15,2.071,2.071,0,0,0,1.791-.865,4.586,4.586,0,0,0,.622-2.663l-.034-.007a2.05,2.05,0,0,1-.834.81,2.651,2.651,0,0,1-1.237.27,2.617,2.617,0,0,1-2.017-.854,3.1,3.1,0,0,1-.786-2.187,3.316,3.316,0,0,1,.913-2.427,3.13,3.13,0,0,1,2.334-.93,2.708,2.708,0,0,1,2.348,1.189A5.744,5.744,0,0,1,17.27,9.565Zm-1.6-1.073a2.551,2.551,0,0,0-.465-1.576,1.487,1.487,0,0,0-2.362-.068,2.071,2.071,0,0,0-.461,1.377,2.044,2.044,0,0,0,.461,1.429,1.572,1.572,0,0,0,1.22.506,1.513,1.513,0,0,0,1.148-.485A1.659,1.659,0,0,0,15.67,8.492Z" transform="translate(13.5 15.689)" fill="#fff"/>
</g>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

20
src/modules/ShortcutGuide/ShortcutGuide/svgs/no_active_window.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

407
src/modules/ShortcutGuide/ShortcutGuide/svgs/overlay.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 KiB

After

Width:  |  Height:  |  Size: 177 KiB

402
src/modules/ShortcutGuide/ShortcutGuide/svgs/overlay_portrait.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 368 KiB

After

Width:  |  Height:  |  Size: 177 KiB