Commit ed391c34 authored by Kuo Jen Wei's avatar Kuo Jen Wei Committed by Commit Bot

CCA: Polish setting menu UI

This CL polish CCA setting menu UI by:
1. Refresh icons.
2. Adjust sections size in setting menu.
3. Add color highlight to selected options.

Bug: 1123750
Test: Manually

Change-Id: Ia711d7747597e05c9301a5c60efa188bd1eb89d4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2409686
Commit-Queue: Inker Kuo <inker@chromium.org>
Reviewed-by: default avatarShik Chen <shik@chromium.org>
Auto-Submit: Inker Kuo <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#807810}
parent b3e9c52b
......@@ -80,6 +80,7 @@ copy("chrome_camera_app_images") {
"src/images/camera_shutter_video_pause.svg",
"src/images/settings_button_back.svg",
"src/images/settings_button_expand.svg",
"src/images/settings_expert.svg",
"src/images/settings_feedback.svg",
"src/images/settings_grid_type.svg",
"src/images/settings_help.svg",
......
......@@ -142,6 +142,7 @@
<include name="IDR_CAMERA_CAMERA_MODE_VIDEO_SVG" file="src/images/camera_mode_video.svg" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_SHUTTER_PHOTO_STOP_SVG" file="src/images/camera_shutter_photo_stop.svg" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_BUTTON_MIC_OFF_SVG" file="src/images/camera_button_mic_off.svg" type="BINDATA" />
<include name="IDR_CAMERA_SETTINGS_EXPERT_SVG" file="src/images/settings_expert.svg" type="BINDATA" />
<include name="IDR_CAMERA_SETTINGS_RESOLUTION_SVG" file="src/images/settings_resolution.svg" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_APP_ICONS_48_PNG" file="src/images/camera_app_icons_48.png" type="BINDATA" />
<include name="IDR_CAMERA_CAMERA_BUTTON_TIMER_OFF_SVG" file="src/images/camera_button_timer_off.svg" type="BINDATA" />
......
......@@ -1133,6 +1133,8 @@ body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_ms
.menu-header,
.menu-item {
--toggled-color: rgb(140, 180, 245);
align-items: center;
color: rgb(241, 243, 244);
display: flex;
......@@ -1152,7 +1154,7 @@ body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_ms
.menu-header {
color: white;
font-size: 20px;
height: 88px;
height: 72px;
}
.menu-header .icon,
......@@ -1207,16 +1209,20 @@ body._10sec .description span[i18n-content=label_timer_10s],
.menu-item input:checked::before {
background-clip: padding-box;
background-color: rgb(241, 243, 244);
background-color: var(--toggled-color);
border: 4px solid transparent;
bottom: 12px;
box-shadow: 0 0 0 1px rgb(241, 243, 244);
box-shadow: 0 0 0 1px var(--toggled-color);
left: 12px;
right: 12px;
top: 12px;
transition: border-width 100ms ease-in;
}
.menu-item input:checked + span {
color: var(--toggled-color);
}
body.tab-navigation button.menu-item:focus::after {
left: 2px;
right: 2px;
......@@ -1243,8 +1249,7 @@ body.no-resolution-settings #settings-resolution {
}
#settings-expert .icon {
/* TODO(kaihsien): use correct icon */
background-image: url(../images/settings_resolution.svg);
background-image: url(../images/settings_expert.svg);
}
#settings-feedback .icon {
......
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-80.8%" y="-80.8%" width="261.5%" height="261.5%" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(5.5 5.5)" fill="#FFF" fill-rule="nonzero"><path d="M.722 0v1.444h3.611V2.89H1.444v1.444h2.89v1.445H.721v1.444h3.611c.795 0 1.445-.65 1.445-1.444V4.694c0-.599-.123-1.083-.722-1.083.599 0 .722-.484.722-1.083V1.444C5.778.65 5.128 0 4.333 0H.723zm10.111 0c.795 0 1.445.65 1.445 1.444v4.334c0 .794-.65 1.444-1.445 1.444H8.667c-.795 0-1.445-.65-1.445-1.444V1.444C7.222.65 7.872 0 8.667 0h2.166zm0 1.444H8.667v4.334h2.166V1.444zM1.444 13H0V9.389h1.444V13zm2.89 0H2.888V9.389h1.444V13zm2.888 0H5.778V9.389h1.444V13zM13 13H8.667V9.389H13V13z"/></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
<title>ic_fps-30</title>
<g jetway-hook-id="29EF10CE-3344-4C6B-9F98-881C9378E5F7" id="ic_fps-30" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M11,12.5 C11.4230769,12.5 11.7751479,12.8195266 11.8268093,13.2291761 L11.8333333,13.3333333 L11.8333333,15 C11.8333333,15.4230769 11.5138067,15.7751479 11.1041572,15.8268093 L11,15.8333333 L9.33333333,15.8333333 L9.33333333,17.5 L8.08333333,17.5 L8.08333333,12.5 L11,12.5 Z M16.75,12.5 L16.75,13.75 L14.25,13.75 L14.25,14.375 L15.9166667,14.375 C16.375,14.375 16.75,14.75 16.75,15.2083333 L16.75,15.2083333 L16.75,16.6666667 C16.75,17.125 16.375,17.5 15.9166667,17.5 L15.9166667,17.5 L13,17.5 L13,16.25 L15.5,16.25 L15.5,15.625 L13.625,15.625 C13.2833333,15.625 13,15.3416667 13,15 L13,15 L13,13.3333333 C13,12.875 13.375,12.5 13.8333333,12.5 L13.8333333,12.5 L16.75,12.5 Z M6.75,12.5 L6.75,13.75 L4.25,13.75 L4.25,14.5833333 L6.75,14.5833333 L6.75,15.7833333 L4.25,15.8333333 L4.25,17.5 L3,17.5 L3,12.5 L6.75,12.5 Z M10.5833333,13.75 L9.33333333,13.75 L9.33333333,14.5833333 L10.5833333,14.5833333 L10.5833333,13.75 Z M7.5,2 C8.32842712,2 9,2.67157288 9,3.5 L9,5.5 C9,5.88469382 8.85518454,6.23556417 8.61709458,6.50107009 C8.8555371,6.76529062 9,7.11577475 9,7.5 L9,9.5 C9,10.3284271 8.32842712,11 7.5,11 L3,11 L3,9 L7,9 L7,7.5 L4,7.5 L4,5.5 L7,5.5 L7,4 L3,4 L3,2 L7.5,2 Z M15.5,2 C16.3284271,2 17,2.57563389 17,3.28571429 L17,9.71428571 C17,10.4243661 16.3284271,11 15.5,11 L12.5,11 C11.6715729,11 11,10.4243661 11,9.71428571 L11,3.28571429 C11,2.57563389 11.6715729,2 12.5,2 L15.5,2 Z M15,4 L13,4 L13,9 L15,9 L15,4 Z" jetway-hook-id="A904BF57-4289-4DD5-9200-C8507D3585C4" id="30fps" fill="#5E6369"></path>
</g>
</svg>
\ No newline at end of file
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(5.5 5.5)" fill="#FFF" fill-rule="nonzero"><path d="M10.833 1.444v4.334H8.667V1.444h2.166zm0-1.444H8.667c-.795 0-1.445.65-1.445 1.444v4.334c0 .794.65 1.444 1.445 1.444h2.166c.795 0 1.445-.65 1.445-1.444V1.444C12.278.65 11.628 0 10.833 0zM5.778 1.444V0H2.167C1.372 0 .722.65.722 1.444v4.334c0 .794.65 1.444 1.445 1.444h2.166c.795 0 1.445-.65 1.445-1.444V4.333c0-.794-.65-1.444-1.445-1.444H2.167V1.444h3.61zm-1.445 2.89v1.444H2.167V4.333h2.166zM1.444 13H0V9.389h1.444V13zm2.89 0H2.888V9.389h1.444V13zm2.888 0H5.778V9.389h1.444V13zM13 13H8.667V9.389H13V13z"/></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
<title>ic_fps-60</title>
<defs>
<path d="M8,11 C8.42307692,11 8.77514793,11.3195266 8.82680929,11.7291761 L8.83333333,11.8333333 L8.83333333,13.5 C8.83333333,13.9230769 8.51380671,14.2751479 8.10415718,14.3268093 L8,14.3333333 L6.33333333,14.3333333 L6.33333333,16 L5.08333333,16 L5.08333333,11 L8,11 Z M13.75,11 L13.75,12.25 L11.25,12.25 L11.25,12.875 L12.9166667,12.875 C13.375,12.875 13.75,13.25 13.75,13.7083333 L13.75,13.7083333 L13.75,15.1666667 C13.75,15.625 13.375,16 12.9166667,16 L12.9166667,16 L10,16 L10,14.75 L12.5,14.75 L12.5,14.125 L10.625,14.125 C10.2833333,14.125 10,13.8416667 10,13.5 L10,13.5 L10,11.8333333 C10,11.375 10.375,11 10.8333333,11 L10.8333333,11 L13.75,11 Z M3.75,11 L3.75,12.25 L1.25,12.25 L1.25,13.0833333 L3.75,13.0833333 L3.75,14.2833333 L1.25,14.3333333 L1.25,16 L0,16 L0,11 L3.75,11 Z M7.58333333,12.25 L6.33333333,12.25 L6.33333333,13.0833333 L7.58333333,13.0833333 L7.58333333,12.25 Z M6,0.5 L6,2.42857143 L2,2.42857143 L2,3.71428571 L4,3.71428571 C5.05636364,3.71428571 5.91834711,4.49918241 5.99452667,5.49867433 L6,5.64285714 L6,7.57142857 C6,8.59006494 5.18603306,9.42126328 4.14952292,9.49472215 L4,9.5 L2,9.5 C0.943636364,9.5 0.0816528926,8.71510331 0.00547332832,7.71561138 L0,7.57142857 L0,2.42857143 C0,1.40993506 0.813966942,0.578736718 1.85047708,0.505277852 L2,0.5 L6,0.5 Z M12.5,0.5 C13.3284271,0.5 14,1.07563389 14,1.78571429 L14,8.21428571 C14,8.92436611 13.3284271,9.5 12.5,9.5 L9.5,9.5 C8.67157288,9.5 8,8.92436611 8,8.21428571 L8,1.78571429 C8,1.07563389 8.67157288,0.5 9.5,0.5 L12.5,0.5 Z M4,5.5 L2,5.5 L2,7.5 L4,7.5 L4,5.5 Z M12,2.5 L10,2.5 L10,7.5 L12,7.5 L12,2.5 Z" id="path-1"></path>
</defs>
<g jetway-hook-id="561A6AC0-F2FB-429B-AF6E-E123A861FCE3" id="ic_fps-60" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g jetway-hook-id="C6D4D255-A366-4EE3-B773-C04D145CDA99" id="device/60fps_24px" transform="translate(3.000000, 1.500000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use jetway-hook-id="2246F24F-32BE-40AA-9F85-1B8289CC61AA" id="Combined-Shape" fill="#5F6368" fill-rule="nonzero" xlink:href="#path-1"></use>
</g>
</g>
</svg>
\ No newline at end of file
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-31.0%" y="-31.0%" width="161.9%" height="161.9%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Page-1" filter="url(#filter-1)" transform="translate(2.000000, 2.000000)">
<path d="M13.725,6.999875 L17.0583333,6.999875 L17.0583333,3.66654167 L13.725,3.66654167 L13.725,6.999875 Z M7.05833333,3.66654167 L7.05833333,5.137375 L8.725,6.80404167 L8.725,3.66654167 L12.0583333,3.66654167 L12.0583333,6.999875 L8.92125,6.999875 L10.5879167,8.66654167 L12.0583333,8.66654167 L12.0583333,10.137375 L12.49375,10.5727917 L13.725,11.8040417 L13.725,8.66654167 L17.0583333,8.66654167 L17.0583333,11.999875 L13.92125,11.999875 L15.5879167,13.6665417 L17.0583333,13.6665417 L17.0583333,15.137375 L18.725,16.8040417 L18.725,3.66654167 C18.725,2.749875 17.975,1.999875 17.0583333,1.999875 L3.92125,1.999875 L5.58791667,3.66654167 L7.05833333,3.66654167 Z" id="Fill-1" fill="#FFFFFF"></path>
<path d="M13.725,17 L13.725,15.975 L14.75,17 L13.725,17 Z M8.725,17 L8.725,13.6666667 L11.4166667,13.6666667 L12.0583333,14.3083333 L12.0583333,17 L8.725,17 Z M3.725,12 L3.725,8.66666667 L6.41666667,8.66666667 L7.05833333,9.30833333 L7.05833333,12 L3.725,12 Z M3.725,17 L7.05833333,17 L7.05833333,13.6666667 L3.725,13.6666667 L3.725,17 Z M4.75,7 L3.725,7 L3.725,5.975 L4.75,7 Z M8.725,10.975 L9.75,12 L8.725,12 L8.725,10.975 Z M18.4420833,18.5754167 L11.4666667,11.6 L2.05833333,2.19166667 L1,3.25 L2.05833333,4.30833333 L2.05833333,17 C2.05833333,17.9166667 2.80833333,18.6666667 3.725,18.6666667 L16.4166667,18.6666667 L17.38375,19.63375 L18.4420833,18.5754167 Z" id="Fill-3" fill="#FFFFFF"></path>
<rect id="Rectangle" x="0.395833313" y="0.333333333" width="20" height="20"></rect>
</g>
</g>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.08579L17.5563 17.6421L16.1421 19.0563L15.0858 18H4C2.89543 18 2 17.1046 2 16L1.99978 4.914L0.585785 3.5L2 2.08579ZM10.0858 13H8V16H12L11.9998 14.914L10.0858 13ZM7 13H4V16H7V13ZM16 2C17.1046 2 18 2.89543 18 4V15L15 12H16V8H13V10L12 9V8H11L10 7H12V4H8V5L5 2H16ZM9.08578 12L7.99978 10.914L8 12H9.08578ZM5.08578 8H4V12H7L6.99978 9.914L5.08578 8ZM16 4H13V7H16V4Z" fill="#E8EAED"/>
</svg>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M19.3,4 L5.7,4 C4.765,4 4,4.765 4,5.7 L4,19.3 C4,20.235 4.765,21 5.7,21 L19.3,21 C20.235,21 21,20.235 21,19.3 L21,5.7 C21,4.765 20.235,4 19.3,4 Z M9.1,19.3 L5.7,19.3 L5.7,15.9 L9.1,15.9 L9.1,19.3 Z M9.1,14.2 L5.7,14.2 L5.7,10.8 L9.1,10.8 L9.1,14.2 Z M9.1,9.1 L5.7,9.1 L5.7,5.7 L9.1,5.7 L9.1,9.1 Z M14.2,19.3 L10.8,19.3 L10.8,15.9 L14.2,15.9 L14.2,19.3 Z M14.2,14.2 L10.8,14.2 L10.8,10.8 L14.2,10.8 L14.2,14.2 Z M14.2,9.1 L10.8,9.1 L10.8,5.7 L14.2,5.7 L14.2,9.1 Z M19.3,19.3 L15.9,19.3 L15.9,15.9 L19.3,15.9 L19.3,19.3 Z M19.3,14.2 L15.9,14.2 L15.9,10.8 L19.3,10.8 L19.3,14.2 Z M19.3,9.1 L15.9,9.1 L15.9,5.7 L19.3,5.7 L19.3,9.1 Z" id="path-1"></path>
<filter x="-26.5%" y="-26.5%" width="152.9%" height="152.9%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="ic_grid_on_24px" fill-rule="nonzero">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" xlink:href="#path-1"></use>
</g>
</g>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2C17.1046 2 18 2.89543 18 4V16C18 17.1046 17.1046 18 16 18H4C2.89543 18 2 17.1046 2 16V4C2 2.89543 2.89543 2 4 2H16ZM7 13H4V16H7V13ZM16 13H13V16H16V13ZM12 13H8V16H12V13ZM7 8H4V12H7V8ZM16 8H13V12H16V8ZM12 8H8V12H12V8ZM7 4H4V7H7V4ZM16 4H13V7H16V4ZM12 4H8V7H12V4Z" fill="#E8EAED"/>
</svg>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-32.5%" y="-32.5%" width="165.0%" height="165.0%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<polygon id="path-2" points="0 20 20 20 20 0 0 0"></polygon>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-13" filter="url(#filter-1)" transform="translate(2.000000, 2.100000)">
<path d="M16,16 L16,18 C16.8215,18 17.5305,17.4975 17.8375,16.7855 L17.0515,16 L16,16 Z" id="Fill-1" fill="#FFFFFF"></path>
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Clip-4"></g>
<polygon id="Fill-3" fill="#FFFFFF" mask="url(#mask-3)" points="12.5 17.9 14.5 17.9 14.5 15.9 12.5 15.9"></polygon>
<polygon id="Fill-5" fill="#FFFFFF" mask="url(#mask-3)" points="11 1 9 1 9 5.598 11 7.598"></polygon>
<polygon id="Fill-6" fill="#FFFFFF" mask="url(#mask-3)" points="6.599 2 5 2 6.599 3.5995"></polygon>
<polygon id="Fill-7" fill="#FFFFFF" mask="url(#mask-3)" points="12 4 14 4 14 2 12 2"></polygon>
<path d="M16,2 L16,4 L18,4 C18,2.9 17.1,2 16,2" id="Fill-8" fill="#FFFFFF" mask="url(#mask-3)"></path>
<path d="M18.683,17.8898895 L2.183,2 L1,3.175 C1.78866667,3.97597656 2.183,4.37646484 2.183,4.37646484 L2.183,16.2894766 C2.183,17.2144766 2.75,17.9709766 3.6665,17.9709766 L7.00479126,17.9709766 L7.00479126,15.9634766 L4.0022583,15.9634766 L4.0022583,6.14196777 L9,11.0465088 L9,19.0653895 L11.183,19.0653895 L11.183,12.9332275 L17.508,19.0653895 L18.683,17.8898895 Z" id="Fill-9" fill="#FFFFFF" mask="url(#mask-3)"></path>
<polygon id="Fill-10" fill="#FFFFFF" mask="url(#mask-3)" points="16 8 18 8 18 6 16 6"></polygon>
<polygon id="Fill-11" fill="#FFFFFF" mask="url(#mask-3)" points="16 11 18 11 18 9 16 9"></polygon>
<polygon id="Fill-12" fill="#FFFFFF" mask="url(#mask-3)" points="18 14.5 18 12.5 16 12.5 16 12.5975 17.9025 14.5"></polygon>
</g>
</g>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.08579L17.5563 17.6421L16.1421 19.0563L14.9998 17.914L15 18H13V16H13.0858L10.9998 13.914L11 19H9L8.99978 11.914L3.99978 6.914L4 16H7V18H4C2.94564 18 2.08183 17.1841 2.00548 16.1493L2 16L1.99978 4.914L0.585785 3.5L2 2.08579ZM18 12V14H17L16 13V12H18ZM18 9V11H16V9H18ZM18 6V8H16V6H18ZM11 1V8L9 6V1H11ZM16 2L16.1493 2.00549C17.1324 2.07802 17.9179 2.86123 17.994 3.84335L18 4V5H16V2ZM7 2V4L5 2H7ZM15 2V4H13V2H15Z" fill="#E8EAED"/>
</svg>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-38.2%" y="-36.1%" width="176.5%" height="172.2%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path d="M10,17 L12,17 L12,15 L10,15 L10,17 Z M14,7 L16,7 L16,5 L14,5 L14,7 Z M0,2.72727273 L0,15.3054421 C0,16.2554421 0.773999977,17 1.71999995,17 L5,17 L5,15 L2,15 L2,3.05543312 L5,3.05543312 L5,1 L1.71999995,1 C0.773999977,1 0,1.77727273 0,2.72727273 Z M14,1 L14,3 L16,3 C16,1.9 15.1,1 14,1 Z M7,18 L9,18 L9,0 L7,0 L7,18 Z M14,13 L16,13 L16,11 L14,11 L14,13 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M14,10 L16,10 L16,8 L14,8 L14,10 Z M14,17.0540541 C15.1354839,17.0540541 16.0645161,16.1297297 16.0645161,15 L14,15 L14,17.0540541 Z" id="path-2"></path>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" filter="url(#filter-1)" transform="translate(4.000000, 3.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<use id="ic_flip_24px" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-2"></use>
</g>
</g>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 1V19H9V1H11ZM15 16V18H13V16H15ZM18 15V16C18 17.0544 17.1841 17.9182 16.1493 17.9945L16 18V15H18ZM7 2V4H4V16H7V18H4C2.94564 18 2.08183 17.1841 2.00549 16.1493L2 16V4C2 2.94564 2.81588 2.08183 3.85074 2.00549L4 2H7ZM18 12V14H16V12H18ZM18 9V11H16V9H18ZM18 6V8H16V6H18ZM16 2L16.1493 2.00549C17.1324 2.07802 17.9179 2.86123 17.994 3.84335L18 4V5H16V2ZM15 2V4H13V2H15Z" fill="#E8EAED"/>
</svg>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M18.4083333,5.95833333 L17.225,7.14166667 C15.9333333,6.11666667 14.3083333,5.5 12.5416667,5.5 C11.0166667,5.5 9.6,5.95833333 8.41666667,6.73333333 L9.63333333,7.95 C10.4833333,7.45833333 11.4833333,7.16666667 12.5416667,7.16666667 C15.7666667,7.16666667 18.375,9.775 18.375,13 C18.375,14.0583333 18.0833333,15.0583333 17.5916667,15.9083333 L18.8,17.1166667 C19.5833333,15.9416667 20.0416667,14.525 20.0416667,13 C20.0416667,11.2333333 19.425,9.60833333 18.4,8.325 L19.5833333,7.14166667 L18.4083333,5.95833333 Z M15.0416667,3 L10.0416667,3 L10.0416667,4.66666667 L15.0416667,4.66666667 L15.0416667,3 Z M11.7083333,10.0333333 L13.375,11.7 L13.375,8.83333333 L11.7083333,8.83333333 L11.7083333,10.0333333 Z M5.05833333,5.5 L4,6.55833333 L6.29166667,8.85833333 C5.5,10.0416667 5.04166667,11.4666667 5.04166667,13 C5.04166667,17.1416667 8.39166667,20.5 12.5416667,20.5 C14.075,20.5 15.5,20.0416667 16.6916667,19.25 L18.775,21.3333333 L19.8333333,20.275 L13.4083333,13.85 L5.05833333,5.5 Z M12.5416667,18.8333333 C9.31666667,18.8333333 6.70833333,16.225 6.70833333,13 C6.70833333,11.9333333 7,10.9333333 7.5,10.0666667 L15.4666667,18.0333333 C14.6083333,18.5416667 13.6083333,18.8333333 12.5416667,18.8333333 Z" id="path-1"></path>
<filter x="-28.1%" y="-24.5%" width="156.1%" height="149.1%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Shape" fill-rule="nonzero">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" xlink:href="#path-1"></use>
</g>
</g>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 2.08579L18.0563 17.6421L16.6421 19.0563L14.8261 17.2412C13.5218 18.3388 11.8381 19 10 19C5.85786 19 2.5 15.6421 2.5 11.5C2.5 9.66143 3.16157 7.97737 4.25965 6.6729L1.08578 3.5L2.5 2.08579ZM4.5 11.5C4.5 14.5376 6.96243 17 10 17C11.2859 17 12.4687 16.5587 13.4052 15.8194L5.68081 8.09455C4.94134 9.03115 4.5 10.214 4.5 11.5ZM15.9142 3.58579L17.3284 5L15.7017 6.62736C16.8229 7.93807 17.5 9.63996 17.5 11.5C17.5 12.3968 17.3426 13.2568 17.0539 14.054L15.4229 12.423C15.4736 12.1229 15.5 11.8145 15.5 11.5C15.5 8.46243 13.0376 6 10 6C9.68548 6 9.37712 6.0264 9.07703 6.07711L7.44604 4.44607C8.24319 4.1574 9.10321 4 10 4C11.5601 4 13.0089 4.47633 14.209 5.2915L15.9142 3.58579ZM11 7V8L10 7H11ZM13 1V3H7V1H13Z" fill="#E8EAED"/>
</svg>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M15,3 L10,3 L10,4.66666667 L15,4.66666667 L15,3 Z M18.3583333,8.325 L19.5416667,7.14166667 C19.1833333,6.71666667 18.7916667,6.31666667 18.3666667,5.96666667 L17.1833333,7.15 C15.8916667,6.11666667 14.2666667,5.5 12.5,5.5 C8.35833333,5.5 5,8.85833333 5,13 C5,17.1416667 8.35,20.5 12.5,20.5 C16.65,20.5 20,17.1416667 20,13 C20,11.2333333 19.3833333,9.60833333 18.3583333,8.325 Z M12.5,18.8333333 C9.275,18.8333333 6.66666667,16.225 6.66666667,13 C6.66666667,9.775 9.275,7.16666667 12.5,7.16666667 C15.725,7.16666667 18.3333333,9.775 18.3333333,13 C18.3333333,16.225 15.725,18.8333333 12.5,18.8333333 Z M8.33333333,11.0952381 L9.28571429,11.0952381 L9.28571429,16.3333333 L10.7142857,16.3333333 L10.7142857,9.66666667 L8.33333333,9.66666667 L8.33333333,11.0952381 Z M15.8333333,11.0952381 L15.8333333,14.9047619 C15.8333333,15.6952381 15.1952381,16.3333333 14.4047619,16.3333333 L13.452381,16.3333333 C12.6619048,16.3333333 12.0238095,15.6952381 12.0238095,14.9047619 L12.0238095,11.0952381 C12.0238095,10.3047619 12.6619048,9.66666667 13.452381,9.66666667 L14.4047619,9.66666667 C15.1952381,9.66666667 15.8333333,10.3047619 15.8333333,11.0952381 Z M14.4047619,11.0952381 L13.452381,11.0952381 L13.452381,14.9047619 L14.4047619,14.9047619 L14.4047619,11.0952381 Z" id="path-1"></path>
<filter x="-30.0%" y="-25.7%" width="160.0%" height="151.4%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Shape" fill-rule="nonzero">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" xlink:href="#path-1"></use>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
<title>ic_timer-10</title>
<g jetway-hook-id="456B24E1-A13D-48E7-9013-0A3415A7CD1A" id="ic_timer-10" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g jetway-hook-id="2956E583-6A43-4CDC-A327-70E5118D8285" id="Timer-On-10" transform="translate(2.500000, 1.000000)">
<path d="M13.4142136,2.58578644 L14.8284271,4 L13.2017107,5.62736216 C14.3228895,6.93806572 15,8.63995905 15,10.5 C15,14.6421356 11.6421356,18 7.5,18 C3.35786438,18 0,14.6421356 0,10.5 C0,6.35786438 3.35786438,3 7.5,3 C9.06008715,3 10.5089204,3.47633472 11.7089962,4.29150074 L13.4142136,2.58578644 Z M7.5,5 C4.46243388,5 2,7.46243388 2,10.5 C2,13.5375661 4.46243388,16 7.5,16 C10.5375661,16 13,13.5375661 13,10.5 C13,7.46243388 10.5375661,5 7.5,5 Z M10.5,0 L10.5,2 L4.5,2 L4.5,0 L10.5,0 Z" jetway-hook-id="2AF483DB-FAD8-4689-999B-1E6D698CAA61" id="Combined-Shape" fill="#E8EAED" fill-rule="nonzero"></path>
<path d="M6,7 L6,14 L4.5,14 L4.5,8.5 L4,8.5 L4,7 L6,7 Z M10,7 C10.5522847,7 11,7.44771525 11,8 L11,13 C11,13.5522847 10.5522847,14 10,14 L8,14 C7.44771525,14 7,13.5522847 7,13 L7,8 C7,7.44771525 7.44771525,7 8,7 L10,7 Z M9.5,8.5 L8.5,8.5 L8.5,12.5 L9.5,12.5 L9.5,8.5 Z" jetway-hook-id="83796552-3971-4FAC-9D2C-8C76D7EE128C" id="Combined-Shape" fill="#E8EAED"></path>
</g>
</g>
</svg>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M15,3 L10,3 L10,4.66666667 L15,4.66666667 L15,3 Z M18.3583333,8.325 L19.5416667,7.14166667 C19.1833333,6.71666667 18.7916667,6.31666667 18.3666667,5.96666667 L17.1833333,7.15 C15.8916667,6.11666667 14.2666667,5.5 12.5,5.5 C8.35833333,5.5 5,8.85833333 5,13 C5,17.1416667 8.35,20.5 12.5,20.5 C16.65,20.5 20,17.1416667 20,13 C20,11.2333333 19.3833333,9.60833333 18.3583333,8.325 Z M12.5,18.8333333 C9.275,18.8333333 6.66666667,16.225 6.66666667,13 C6.66666667,9.775 9.275,7.16666667 12.5,7.16666667 C15.725,7.16666667 18.3333333,9.775 18.3333333,13 C18.3333333,16.225 15.725,18.8333333 12.5,18.8333333 Z M15,14.9047619 L15,13.8333333 C15,13.2428571 14.4388889,12.7619048 13.75,12.7619048 C14.4388889,12.7619048 15,12.2809524 15,11.6904762 L15,11.0952381 C15,10.3047619 14.25,9.66666667 13.3333333,9.66666667 L10,9.66666667 L10,11.0952381 L13.3333333,11.0952381 L13.3333333,12.047619 L11.6666667,12.047619 L11.6666667,13.4761905 L13.3333333,13.4761905 L13.3333333,14.9047619 L10,14.9047619 L10,16.3333333 L13.3333333,16.3333333 C14.25,16.3333333 15,15.6952381 15,14.9047619 Z" id="path-1"></path>
<filter x="-30.0%" y="-25.7%" width="160.0%" height="151.4%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.125490196 0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Shape" fill-rule="nonzero">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" xlink:href="#path-1"></use>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
<title>ic_timer-3</title>
<g jetway-hook-id="F918D1D1-9AC8-4F48-9FCF-D6CEE6B9A229" id="ic_timer-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g jetway-hook-id="BB682FD6-032E-4A60-A614-68C8DFF13491" id="Timer-On" transform="translate(2.500000, 1.000000)" fill="#E8EAED" fill-rule="nonzero">
<path d="M13.4142136,2.58578644 L14.8284271,4 L13.2017107,5.62736216 C14.3228895,6.93806572 15,8.63995905 15,10.5 C15,14.6421356 11.6421356,18 7.5,18 C3.35786438,18 0,14.6421356 0,10.5 C0,6.35786438 3.35786438,3 7.5,3 C9.06008715,3 10.5089204,3.47633472 11.7089962,4.29150074 L13.4142136,2.58578644 Z M7.5,5 C4.46243388,5 2,7.46243388 2,10.5 C2,13.5375661 4.46243388,16 7.5,16 C10.5375661,16 13,13.5375661 13,10.5 C13,7.46243388 10.5375661,5 7.5,5 Z M10.5,0 L10.5,2 L4.5,2 L4.5,0 L10.5,0 Z" jetway-hook-id="5CD36442-76F5-4E77-954C-F064CB697065" id="Combined-Shape"></path>
</g>
<g jetway-hook-id="CACF4E7D-D2C4-41F9-AC43-7DBDA6045ABE" id="Group" transform="translate(7.500000, 8.000000)" fill="#E8EAED">
<path d="M0.5,7 L0.5,5.25 L3.83333333,5.25 L3.83333333,4.375 L0.5,4.375 L0.5,2.625 L3.83333333,2.625 L3.83333333,1.75 L0.5,1.75 L0.5,0 L4,0 C4.82842712,-1.52179594e-16 5.5,0.671572875 5.5,1.5 L5.5,2 C5.5,2.82842712 4.82842712,3.5 4,3.5 C4.82842712,3.5 5.5,4.17157288 5.5,5 L5.5,5.5 C5.5,6.32842712 4.82842712,7 4,7 L0.5,7 Z" jetway-hook-id="D1C8F32A-FF3C-4C0E-9520-9058D5F87123" id="Combined-Shape"></path>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" jetway-hooks="{}">
<title>ic_expert-mode</title>
<g jetway-hook-id="04941339-7CAF-4883-B347-389047E6178A" id="ic_expert-mode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M10,3 L18,7.5 L18,13.5 L16,13.5 L16,8.625 L15,9.188 L15,13.741037 L10,16.6577037 L5,13.741037 L5,9.188 L2,7.5 L10,3 Z M13,10.313 L10,12 L7,10.313 L7,12.592 L10,14.342 L13,12.591 L13,10.313 Z M10,5.295 L6.08,7.499 L10,9.704 L13.919,7.499 L10,5.295 Z" jetway-hook-id="3EAF0F3F-242F-43D9-824B-9C94BA8D6905" id="Combined-Shape" fill="#E8EAED" fill-rule="nonzero"></path>
</g>
</svg>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M16.6666667,1.66666667 L3.33333333,1.66666667 C2.41666667,1.66666667 1.675,2.41666667 1.675,3.33333333 L1.66666667,18.3333333 L5,15 L16.6666667,15 C17.5833333,15 18.3333333,14.25 18.3333333,13.3333333 L18.3333333,3.33333333 C18.3333333,2.41666667 17.5833333,1.66666667 16.6666667,1.66666667 Z M16.6666667,13.3333333 L5,13.3333333 L4.30833333,13.3333333 L3.81666667,13.825 L3.33333333,14.3083333 L3.33333333,3.33333333 L16.6666667,3.33333333 L16.6666667,13.3333333 Z M9.16666667,10 L10.8333333,10 L10.8333333,11.6666667 L9.16666667,11.6666667 L9.16666667,10 Z M9.16666667,5 L10.8333333,5 L10.8333333,8.33333333 L9.16666667,8.33333333 L9.16666667,5 Z" id="path-1"></path>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="ic_feedback_24px" fill="#FFFFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
<rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2C17.1046 2 18 2.89543 18 4V13C18 14.1046 17.1046 15 16 15H6L2 18V4C2 2.89543 2.89543 2 4 2H16ZM16 4H4V14L5.33333 13H16V4ZM11 10V12H9V10H11ZM11 5V9H9V5H11Z" fill="#E8EAED"/>
</svg>
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h20v20H0z"/><path d="M7 13h3v3H7v-3zm6 0h3v3h-3v-3zM7 7h3v3H7V7zm6 0h3v3h-3V7zm-9 3h3v3H4v-3zm6 0h3v3h-3v-3zM4 4h3v3H4V4zm6 0h3v3h-3V4z" fill="#E8EAED"/></g></svg>
\ No newline at end of file
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 13V16H7V13H10ZM16 13V16H13V13H16ZM7 10V13H4V10H7ZM13 10V13H10V10H13ZM10 7V10H7V7H10ZM16 7V10H13V7H16ZM7 4V7H4V4H7ZM13 4V7H10V4H13Z" fill="#E8EAED"/>
</svg>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment