1
0
mirror of https://github.com/pavlobu/deskreen.git synced 2025-05-28 05:10:09 -07:00
deskreen/app/components/SettingsOverlay/__snapshots__/SettingsOverlay.spec.tsx.snap
Pavlo Buidenkov b925803d9f better client UI code
huge work done on sharing desktop session
2020-11-22 17:07:01 +02:00

1985 lines
116 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should match exact snapshot 1`] = `
<Suspense
fallback={
<div>
Loading...
</div>
}
>
<SettingsProvider>
<BrowserRouter>
<Router
history={
Object {
"action": "POP",
"block": [Function],
"createHref": [Function],
"go": [Function],
"goBack": [Function],
"goForward": [Function],
"length": 1,
"listen": [Function],
"location": Object {
"hash": "",
"pathname": "/",
"search": "",
"state": undefined,
},
"push": [Function],
"replace": [Function],
}
}
>
<SettingsOverlay
handleClose={[Function]}
isSettingsOpen={true}
>
<Blueprint3.Overlay
autoFocus={true}
backdropProps={Object {}}
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="bp3-overlay-scroll-container bp3-overlay-settings"
enforceFocus={true}
hasBackdrop={true}
isOpen={true}
lazy={true}
onClose={[Function]}
transitionDuration={0}
transitionName="bp3-overlay"
usePortal={true}
>
<Blueprint3.Portal
container={
<body
class="bp3-overlay-open"
>
<div
class="bp3-portal"
>
<div
class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container bp3-overlay-settings"
>
<div
class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
/>
<div
class="makeStyles-overlayInnerRoot-8 bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
>
<div
class="react-reveal makeStyles-overlayInsideFade-9 bp3-card"
id="settings-overlay-inner"
>
<button
class="bp3-button makeStyles-closeButton-13 makeStyles-absoluteCloseButton-10"
id="close-overlay-button"
type="button"
>
<span
class="bp3-button-text"
>
<span
class="bp3-icon bp3-icon-cross"
icon="cross"
>
<svg
data-icon="cross"
height="30"
viewBox="0 0 20 20"
width="30"
>
<desc>
cross
</desc>
<path
d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
fill-rule="evenodd"
/>
</svg>
</span>
</span>
</button>
<div
class="bp3-tabs bp3-vertical"
>
<div
class="bp3-tab-list"
role="tablist"
>
<div
class="bp3-tab-indicator-wrapper"
style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px; transition: none;"
>
<div
class="bp3-tab-indicator"
/>
</div>
<div
aria-controls="bp3-tab-panel_TabsExample_rx"
aria-disabled="false"
aria-expanded="true"
aria-selected="true"
class="bp3-tab"
data-tab-id="rx"
id="bp3-tab-title_TabsExample_rx"
role="tab"
tabindex="0"
>
<div
class="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<span
class="bp3-icon bp3-icon-wrench makeStyles-iconInTablLeftButton-12"
icon="wrench"
>
<svg
data-icon="wrench"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
wrench
</desc>
<path
d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
fill-rule="evenodd"
/>
</svg>
</span>
<div
class="bp3-text-large"
>
General
</div>
</div>
</div>
<div
aria-controls="bp3-tab-panel_TabsExample_ng"
aria-disabled="false"
aria-expanded="false"
aria-selected="false"
class="bp3-tab"
data-tab-id="ng"
id="bp3-tab-title_TabsExample_ng"
role="tab"
tabindex="0"
>
<div
class="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<span
class="bp3-icon bp3-icon-shield makeStyles-iconInTablLeftButton-12"
icon="shield"
>
<svg
data-icon="shield"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
shield
</desc>
<path
d="M8 16c4.667-3.048 7-7.238 7-12.571-1.556 0-3.889-1.143-7-3.429-3.111 2.286-5.444 3.429-7 3.429C1 8.762 3.333 12.952 8 16zM8 2.121c2.005 1.388 3.715 2.304 5.186 2.735-.342 3.702-2.05 6.683-5.186 9.038V2.121z"
fill-rule="evenodd"
/>
</svg>
</span>
<div
class="bp3-text-large"
>
Security
</div>
</div>
</div>
<div
aria-controls="bp3-tab-panel_TabsExample_bb"
aria-disabled="true"
aria-expanded="false"
aria-selected="false"
class="bp3-tab"
data-tab-id="bb"
id="bp3-tab-title_TabsExample_bb"
role="tab"
>
<div
class="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<span
class="bp3-icon bp3-icon-blocked-person makeStyles-iconInTablLeftButton-12"
icon="blocked-person"
>
<svg
data-icon="blocked-person"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
blocked-person
</desc>
<path
d="M9.39 12.69c-1.2-.53-1.04-.85-1.08-1.29-.01-.07-.01-.13-.02-.2.41-.37.75-.87.97-1.44 0 0 .01-.03.01-.04.05-.13.09-.26.13-.39.27-.06.43-.36.5-.63.01-.03.03-.08.05-.12C8.18 7.8 6.94 6.04 6.94 4c0-.32.04-.62.09-.92-.17-.03-.35-.08-.51-.08-.65 0-1.37.2-1.88.59-.5.38-.87.92-1.05 1.51-.04.14-.07.27-.09.41-.09.48-.14 1.23-.14 1.74v.06c-.19.08-.36.27-.4.68-.03.31.1.59.16.7.06.28.23.59.51.64.04.14.08.27.13.39 0 .01.01.02.01.02v.01c.22.59.57 1.1.99 1.46 0 .06-.01.12-.01.17-.04.44.08.76-1.12 1.29-1.2.53-3.01 1.1-3.38 1.95C-.12 15.5.03 16 .03 16h12.96s.15-.5-.22-1.36c-.37-.85-2.18-1.42-3.38-1.95zM11.97 0C9.75 0 7.94 1.79 7.94 4s1.8 4 4.03 4S16 6.21 16 4s-1.8-4-4.03-4zM9.96 4c0-1.1.9-2 2.01-2 .37 0 .72.11 1.02.28l-2.75 2.73c-.17-.3-.28-.64-.28-1.01zm2.01 2c-.37 0-.72-.11-1.02-.28l2.75-2.73c.18.3.28.64.28 1.01.01 1.1-.9 2-2.01 2z"
fill-rule="evenodd"
/>
</svg>
</span>
<div
class="bp3-text-large"
>
Blackilsted IPs
</div>
</div>
</div>
<div
class="bp3-flex-expander"
/>
</div>
<div
aria-hidden="false"
aria-labelledby="bp3-tab-title_TabsExample_rx"
class="bp3-tab-panel"
id="bp3-tab-panel_TabsExample_rx"
role="tabpanel"
>
<div
class="row middle-xs"
>
<h3
class="bp3-heading bp3-text-muted"
>
General Settings
</h3>
</div>
<div
class="row middle-xs between-xs"
>
<div
class="col-xs-6"
>
<div
class="makeStyles-oneSettingRow-20 row middle-xs"
>
<div
class=""
>
<span
class="bp3-icon bp3-icon-style makeStyles-settingRowIcon-21"
icon="style"
>
<svg
data-icon="style"
height="25"
viewBox="0 0 20 20"
width="25"
>
<desc>
style
</desc>
<path
d="M18 18H2V2h12.3l2-2H1C.4 0 0 .4 0 1v18c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V7.7l-2 2V18zm1.2-18l-7.6 7.6 2.8 2.8L20 4.8V0h-.8zM4 15.9c3.1.2 5.9.2 8.2-2 1.1-1.1 1.1-3 0-4.1-.6-.5-1.3-.8-2-.8s-1.4.3-1.9.8C7.2 11 6.6 14.3 4 15.9z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
<div
class=""
>
<div
class=""
>
Colors
</div>
</div>
</div>
</div>
<div
class="col-xs-6"
>
<div
class="row"
>
<div
class="bp3-control-group bp3-fill"
>
<button
class="bp3-button bp3-active"
type="button"
>
<span
class="bp3-icon bp3-icon-flash"
icon="flash"
>
<svg
data-icon="flash"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
flash
</desc>
<path
d="M4 8c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1zm4-4c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1S7 .45 7 1v2c0 .55.45 1 1 1zM3.79 5.21a1.003 1.003 0 001.42-1.42l-1.5-1.5a1.003 1.003 0 00-1.42 1.42l1.5 1.5zm.71 5.29c-.28 0-.53.11-.71.29l-1.5 1.5a1.003 1.003 0 001.42 1.42l1.5-1.5a1.003 1.003 0 00-.71-1.71zm7-5c.28 0 .53-.11.71-.29l1.5-1.5a1.003 1.003 0 00-1.42-1.42l-1.5 1.5a1.003 1.003 0 00.71 1.71zm.71 5.29a1.003 1.003 0 00-1.42 1.42l1.5 1.5a1.003 1.003 0 001.42-1.42l-1.5-1.5zM15 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1s-.45-1-1-1zM8 5C6.34 5 5 6.34 5 8s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm0 3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-button-text"
>
Light
</span>
</button>
<button
class="bp3-button"
type="button"
>
<span
class="bp3-icon bp3-icon-moon"
icon="moon"
>
<svg
data-icon="moon"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
moon
</desc>
<path
d="M15 11.38A7.835 7.835 0 017.85 16C3.51 16 0 12.49 0 8.15 0 4.97 1.89 2.23 4.62 1c-.45.99-.7 2.08-.7 3.23a7.85 7.85 0 007.85 7.85c1.15 0 2.24-.25 3.23-.7z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-button-text"
>
Dark
</span>
</button>
</div>
</div>
</div>
</div>
<div
class="row middle-xs between-xs"
>
<div
class="col-xs-6"
>
<div
class="makeStyles-oneSettingRow-22 row middle-xs"
>
<div
class=""
>
<span
class="bp3-icon bp3-icon-translate makeStyles-settingRowIcon-23"
icon="translate"
>
<svg
data-icon="translate"
height="25"
viewBox="0 0 20 20"
width="25"
>
<desc>
translate
</desc>
<path
d="M19.89 18.56l-4.99-10h-.01c-.17-.33-.5-.56-.89-.56s-.72.23-.89.56h-.01l-1.73 3.46-2.8-2.3 1.99-1.64C11.44 7.34 12 6.23 12 5V4h1c.55 0 1-.45 1-1s-.45-1-1-1H8V1c0-.55-.45-1-1-1S6 .45 6 1v1H1c-.55 0-1 .45-1 1s.45 1 1 1h9v1c0 .62-.28 1.18-.73 1.54L7 8.42 4.73 6.54C4.28 6.18 4 5.62 4 5H2c0 1.23.56 2.34 1.44 3.07l1.99 1.64-3.06 2.52.01.01c-.23.18-.38.45-.38.76 0 .55.45 1 1 1 .24 0 .45-.1.63-.24l.01.01L7 11l3.36 2.77.01-.01c.02.02.05.03.08.05.01 0 .01.01.02.02l-2.36 4.73h.01c-.07.13-.12.28-.12.44 0 .55.45 1 1 1 .39 0 .72-.23.89-.56h.01L11.12 17h5.76l1.22 2.45h.01c.17.32.5.55.89.55.55 0 1-.45 1-1 0-.16-.05-.31-.11-.44zM12.12 15L14 11.24 15.88 15h-3.76z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
<div
class=""
>
<div
class=""
>
Language
</div>
</div>
</div>
</div>
<div
class="col-xs-6"
>
<div
class="row"
>
<div
class="bp3-html-select"
>
<select>
<option
value="English"
>
English
</option>
<option
value="Русский"
>
Русский
</option>
<option
value="Українська"
>
Українська
</option>
</select>
<span
class="bp3-icon bp3-icon-double-caret-vertical"
icon="double-caret-vertical"
>
<svg
data-icon="double-caret-vertical"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
double-caret-vertical
</desc>
<path
d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
<div
class="row middle-xs between-xs"
>
<div
class="col-xs-6"
>
<div
class="makeStyles-oneSettingRow-24 row middle-xs"
>
<div
class=""
>
<span
class="bp3-icon bp3-icon-automatic-updates makeStyles-settingRowIcon-25"
icon="automatic-updates"
>
<svg
data-icon="automatic-updates"
height="25"
viewBox="0 0 20 20"
width="25"
>
<desc>
automatic-updates
</desc>
<path
d="M10 18c-4.42 0-8-3.58-8-8 0-2.52 1.18-4.76 3-6.22V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1h2.06C1.61 3.82 0 6.71 0 10c0 5.52 4.48 10 10 10 .55 0 1-.45 1-1s-.45-1-1-1zm0-16c1.64 0 3.15.49 4.42 1.34l1.43-1.43A9.869 9.869 0 0010 0c-.55 0-1 .45-1 1s.45 1 1 1zm10 8c0-1.13-.2-2.21-.54-3.22L17.84 8.4A7.962 7.962 0 0115 16.22V15c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1h-2.06c2.45-1.82 4.06-4.71 4.06-8zm0-7a1.003 1.003 0 00-1.71-.71L12 8.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7c.18-.18.29-.43.29-.71z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
<div
class=""
>
<div
class=""
>
Automatic Updates
</div>
</div>
</div>
</div>
<div
class="col-xs-6"
>
<div
class="row"
>
<label
class="bp3-control bp3-checkbox makeStyles-checkboxSettings-7"
>
<input
checked=""
type="checkbox"
/>
<span
class="bp3-control-indicator"
/>
Enabled
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
}
>
<Portal
containerInfo={
<div
class="bp3-portal"
>
<div
class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container bp3-overlay-settings"
>
<div
class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
/>
<div
class="makeStyles-overlayInnerRoot-8 bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
>
<div
class="react-reveal makeStyles-overlayInsideFade-9 bp3-card"
id="settings-overlay-inner"
>
<button
class="bp3-button makeStyles-closeButton-13 makeStyles-absoluteCloseButton-10"
id="close-overlay-button"
type="button"
>
<span
class="bp3-button-text"
>
<span
class="bp3-icon bp3-icon-cross"
icon="cross"
>
<svg
data-icon="cross"
height="30"
viewBox="0 0 20 20"
width="30"
>
<desc>
cross
</desc>
<path
d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
fill-rule="evenodd"
/>
</svg>
</span>
</span>
</button>
<div
class="bp3-tabs bp3-vertical"
>
<div
class="bp3-tab-list"
role="tablist"
>
<div
class="bp3-tab-indicator-wrapper"
style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px; transition: none;"
>
<div
class="bp3-tab-indicator"
/>
</div>
<div
aria-controls="bp3-tab-panel_TabsExample_rx"
aria-disabled="false"
aria-expanded="true"
aria-selected="true"
class="bp3-tab"
data-tab-id="rx"
id="bp3-tab-title_TabsExample_rx"
role="tab"
tabindex="0"
>
<div
class="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<span
class="bp3-icon bp3-icon-wrench makeStyles-iconInTablLeftButton-12"
icon="wrench"
>
<svg
data-icon="wrench"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
wrench
</desc>
<path
d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
fill-rule="evenodd"
/>
</svg>
</span>
<div
class="bp3-text-large"
>
General
</div>
</div>
</div>
<div
aria-controls="bp3-tab-panel_TabsExample_ng"
aria-disabled="false"
aria-expanded="false"
aria-selected="false"
class="bp3-tab"
data-tab-id="ng"
id="bp3-tab-title_TabsExample_ng"
role="tab"
tabindex="0"
>
<div
class="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<span
class="bp3-icon bp3-icon-shield makeStyles-iconInTablLeftButton-12"
icon="shield"
>
<svg
data-icon="shield"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
shield
</desc>
<path
d="M8 16c4.667-3.048 7-7.238 7-12.571-1.556 0-3.889-1.143-7-3.429-3.111 2.286-5.444 3.429-7 3.429C1 8.762 3.333 12.952 8 16zM8 2.121c2.005 1.388 3.715 2.304 5.186 2.735-.342 3.702-2.05 6.683-5.186 9.038V2.121z"
fill-rule="evenodd"
/>
</svg>
</span>
<div
class="bp3-text-large"
>
Security
</div>
</div>
</div>
<div
aria-controls="bp3-tab-panel_TabsExample_bb"
aria-disabled="true"
aria-expanded="false"
aria-selected="false"
class="bp3-tab"
data-tab-id="bb"
id="bp3-tab-title_TabsExample_bb"
role="tab"
>
<div
class="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<span
class="bp3-icon bp3-icon-blocked-person makeStyles-iconInTablLeftButton-12"
icon="blocked-person"
>
<svg
data-icon="blocked-person"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
blocked-person
</desc>
<path
d="M9.39 12.69c-1.2-.53-1.04-.85-1.08-1.29-.01-.07-.01-.13-.02-.2.41-.37.75-.87.97-1.44 0 0 .01-.03.01-.04.05-.13.09-.26.13-.39.27-.06.43-.36.5-.63.01-.03.03-.08.05-.12C8.18 7.8 6.94 6.04 6.94 4c0-.32.04-.62.09-.92-.17-.03-.35-.08-.51-.08-.65 0-1.37.2-1.88.59-.5.38-.87.92-1.05 1.51-.04.14-.07.27-.09.41-.09.48-.14 1.23-.14 1.74v.06c-.19.08-.36.27-.4.68-.03.31.1.59.16.7.06.28.23.59.51.64.04.14.08.27.13.39 0 .01.01.02.01.02v.01c.22.59.57 1.1.99 1.46 0 .06-.01.12-.01.17-.04.44.08.76-1.12 1.29-1.2.53-3.01 1.1-3.38 1.95C-.12 15.5.03 16 .03 16h12.96s.15-.5-.22-1.36c-.37-.85-2.18-1.42-3.38-1.95zM11.97 0C9.75 0 7.94 1.79 7.94 4s1.8 4 4.03 4S16 6.21 16 4s-1.8-4-4.03-4zM9.96 4c0-1.1.9-2 2.01-2 .37 0 .72.11 1.02.28l-2.75 2.73c-.17-.3-.28-.64-.28-1.01zm2.01 2c-.37 0-.72-.11-1.02-.28l2.75-2.73c.18.3.28.64.28 1.01.01 1.1-.9 2-2.01 2z"
fill-rule="evenodd"
/>
</svg>
</span>
<div
class="bp3-text-large"
>
Blackilsted IPs
</div>
</div>
</div>
<div
class="bp3-flex-expander"
/>
</div>
<div
aria-hidden="false"
aria-labelledby="bp3-tab-title_TabsExample_rx"
class="bp3-tab-panel"
id="bp3-tab-panel_TabsExample_rx"
role="tabpanel"
>
<div
class="row middle-xs"
>
<h3
class="bp3-heading bp3-text-muted"
>
General Settings
</h3>
</div>
<div
class="row middle-xs between-xs"
>
<div
class="col-xs-6"
>
<div
class="makeStyles-oneSettingRow-20 row middle-xs"
>
<div
class=""
>
<span
class="bp3-icon bp3-icon-style makeStyles-settingRowIcon-21"
icon="style"
>
<svg
data-icon="style"
height="25"
viewBox="0 0 20 20"
width="25"
>
<desc>
style
</desc>
<path
d="M18 18H2V2h12.3l2-2H1C.4 0 0 .4 0 1v18c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V7.7l-2 2V18zm1.2-18l-7.6 7.6 2.8 2.8L20 4.8V0h-.8zM4 15.9c3.1.2 5.9.2 8.2-2 1.1-1.1 1.1-3 0-4.1-.6-.5-1.3-.8-2-.8s-1.4.3-1.9.8C7.2 11 6.6 14.3 4 15.9z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
<div
class=""
>
<div
class=""
>
Colors
</div>
</div>
</div>
</div>
<div
class="col-xs-6"
>
<div
class="row"
>
<div
class="bp3-control-group bp3-fill"
>
<button
class="bp3-button bp3-active"
type="button"
>
<span
class="bp3-icon bp3-icon-flash"
icon="flash"
>
<svg
data-icon="flash"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
flash
</desc>
<path
d="M4 8c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1zm4-4c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1S7 .45 7 1v2c0 .55.45 1 1 1zM3.79 5.21a1.003 1.003 0 001.42-1.42l-1.5-1.5a1.003 1.003 0 00-1.42 1.42l1.5 1.5zm.71 5.29c-.28 0-.53.11-.71.29l-1.5 1.5a1.003 1.003 0 001.42 1.42l1.5-1.5a1.003 1.003 0 00-.71-1.71zm7-5c.28 0 .53-.11.71-.29l1.5-1.5a1.003 1.003 0 00-1.42-1.42l-1.5 1.5a1.003 1.003 0 00.71 1.71zm.71 5.29a1.003 1.003 0 00-1.42 1.42l1.5 1.5a1.003 1.003 0 001.42-1.42l-1.5-1.5zM15 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1s-.45-1-1-1zM8 5C6.34 5 5 6.34 5 8s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm0 3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-button-text"
>
Light
</span>
</button>
<button
class="bp3-button"
type="button"
>
<span
class="bp3-icon bp3-icon-moon"
icon="moon"
>
<svg
data-icon="moon"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
moon
</desc>
<path
d="M15 11.38A7.835 7.835 0 017.85 16C3.51 16 0 12.49 0 8.15 0 4.97 1.89 2.23 4.62 1c-.45.99-.7 2.08-.7 3.23a7.85 7.85 0 007.85 7.85c1.15 0 2.24-.25 3.23-.7z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-button-text"
>
Dark
</span>
</button>
</div>
</div>
</div>
</div>
<div
class="row middle-xs between-xs"
>
<div
class="col-xs-6"
>
<div
class="makeStyles-oneSettingRow-22 row middle-xs"
>
<div
class=""
>
<span
class="bp3-icon bp3-icon-translate makeStyles-settingRowIcon-23"
icon="translate"
>
<svg
data-icon="translate"
height="25"
viewBox="0 0 20 20"
width="25"
>
<desc>
translate
</desc>
<path
d="M19.89 18.56l-4.99-10h-.01c-.17-.33-.5-.56-.89-.56s-.72.23-.89.56h-.01l-1.73 3.46-2.8-2.3 1.99-1.64C11.44 7.34 12 6.23 12 5V4h1c.55 0 1-.45 1-1s-.45-1-1-1H8V1c0-.55-.45-1-1-1S6 .45 6 1v1H1c-.55 0-1 .45-1 1s.45 1 1 1h9v1c0 .62-.28 1.18-.73 1.54L7 8.42 4.73 6.54C4.28 6.18 4 5.62 4 5H2c0 1.23.56 2.34 1.44 3.07l1.99 1.64-3.06 2.52.01.01c-.23.18-.38.45-.38.76 0 .55.45 1 1 1 .24 0 .45-.1.63-.24l.01.01L7 11l3.36 2.77.01-.01c.02.02.05.03.08.05.01 0 .01.01.02.02l-2.36 4.73h.01c-.07.13-.12.28-.12.44 0 .55.45 1 1 1 .39 0 .72-.23.89-.56h.01L11.12 17h5.76l1.22 2.45h.01c.17.32.5.55.89.55.55 0 1-.45 1-1 0-.16-.05-.31-.11-.44zM12.12 15L14 11.24 15.88 15h-3.76z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
<div
class=""
>
<div
class=""
>
Language
</div>
</div>
</div>
</div>
<div
class="col-xs-6"
>
<div
class="row"
>
<div
class="bp3-html-select"
>
<select>
<option
value="English"
>
English
</option>
<option
value="Русский"
>
Русский
</option>
<option
value="Українська"
>
Українська
</option>
</select>
<span
class="bp3-icon bp3-icon-double-caret-vertical"
icon="double-caret-vertical"
>
<svg
data-icon="double-caret-vertical"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
double-caret-vertical
</desc>
<path
d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
<div
class="row middle-xs between-xs"
>
<div
class="col-xs-6"
>
<div
class="makeStyles-oneSettingRow-24 row middle-xs"
>
<div
class=""
>
<span
class="bp3-icon bp3-icon-automatic-updates makeStyles-settingRowIcon-25"
icon="automatic-updates"
>
<svg
data-icon="automatic-updates"
height="25"
viewBox="0 0 20 20"
width="25"
>
<desc>
automatic-updates
</desc>
<path
d="M10 18c-4.42 0-8-3.58-8-8 0-2.52 1.18-4.76 3-6.22V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1h2.06C1.61 3.82 0 6.71 0 10c0 5.52 4.48 10 10 10 .55 0 1-.45 1-1s-.45-1-1-1zm0-16c1.64 0 3.15.49 4.42 1.34l1.43-1.43A9.869 9.869 0 0010 0c-.55 0-1 .45-1 1s.45 1 1 1zm10 8c0-1.13-.2-2.21-.54-3.22L17.84 8.4A7.962 7.962 0 0115 16.22V15c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1h-2.06c2.45-1.82 4.06-4.71 4.06-8zm0-7a1.003 1.003 0 00-1.71-.71L12 8.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7c.18-.18.29-.43.29-.71z"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
<div
class=""
>
<div
class=""
>
Automatic Updates
</div>
</div>
</div>
</div>
<div
class="col-xs-6"
>
<div
class="row"
>
<label
class="bp3-control bp3-checkbox makeStyles-checkboxSettings-7"
>
<input
checked=""
type="checkbox"
/>
<span
class="bp3-control-indicator"
/>
Enabled
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
>
<TransitionGroup
appear={true}
childFactory={[Function]}
className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container bp3-overlay-settings"
component="div"
onKeyDown={[Function]}
>
<div
className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container bp3-overlay-settings"
onKeyDown={[Function]}
>
<CSSTransition
appear={true}
classNames="bp3-overlay"
in={true}
key=".$__backdrop"
onExited={[Function]}
timeout={0}
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={0}
unmountOnExit={false}
>
<div
className="bp3-overlay-backdrop"
onMouseDown={[Function]}
tabIndex={0}
/>
</Transition>
</CSSTransition>
<CSSTransition
appear={true}
classNames="bp3-overlay"
in={true}
key=".$.0"
onExited={[Function]}
timeout={0}
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={0}
unmountOnExit={false}
>
<div
className="makeStyles-overlayInnerRoot-8 bp3-overlay-content"
tabIndex={0}
>
<Fade
duration={0}
>
<RevealBase
fraction={0.2}
inEffect={
Object {
"count": 1,
"delay": 0,
"duration": 0,
"forever": undefined,
"make": [Function],
"reverse": undefined,
"style": Object {
"animationFillMode": "both",
},
}
}
outEffect={
Object {
"count": 1,
"delay": 0,
"duration": 0,
"forever": undefined,
"make": [Function],
"reverse": undefined,
"style": Object {
"animationFillMode": "both",
},
}
}
refProp="ref"
>
<div
className="react-reveal makeStyles-overlayInsideFade-9 bp3-card"
id="settings-overlay-inner"
style={
Object {
"opacity": undefined,
}
}
>
<CloseOverlayButton
className="makeStyles-absoluteCloseButton-10"
isDefaultStyles={true}
onClick={[Function]}
>
<Blueprint3.Button
className="makeStyles-closeButton-13 makeStyles-absoluteCloseButton-10"
id="close-overlay-button"
onClick={[Function]}
>
<button
className="bp3-button makeStyles-closeButton-13 makeStyles-absoluteCloseButton-10"
id="close-overlay-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<span
className="bp3-button-text"
key="text"
>
<Blueprint3.Icon
icon="cross"
iconSize={30}
>
<span
className="bp3-icon bp3-icon-cross"
icon="cross"
>
<svg
data-icon="cross"
height={30}
viewBox="0 0 20 20"
width={30}
>
<desc>
cross
</desc>
<path
d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</CloseOverlayButton>
<Blueprint3.Tabs
animate={true}
id="TabsExample"
key="vertical"
large={false}
renderActiveTabPanelOnly={true}
vertical={true}
>
<div
className="bp3-tabs bp3-vertical"
>
<div
className="bp3-tab-list"
onKeyDown={[Function]}
onKeyPress={[Function]}
role="tablist"
>
<div
className="bp3-tab-indicator-wrapper"
style={
Object {
"height": 0,
"transform": "translateX(0px) translateY(0px)",
"transition": "none",
"width": 0,
}
}
>
<div
className="bp3-tab-indicator"
/>
</div>
<Blueprint3.TabTitle
disabled={false}
id="rx"
key=".0"
onClick={[Function]}
panel={<GeneralSettingsPanel />}
parentId="TabsExample"
selected={true}
title=""
>
<div
aria-controls="bp3-tab-panel_TabsExample_rx"
aria-disabled={false}
aria-expanded={true}
aria-selected={true}
className="bp3-tab"
data-tab-id="rx"
id="bp3-tab-title_TabsExample_rx"
onClick={[Function]}
role="tab"
tabIndex={0}
>
<Row
className="makeStyles-tabNavigationRowButton-11"
middle="xs"
>
<div
className="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<Blueprint3.Icon
className="makeStyles-iconInTablLeftButton-12"
icon="wrench"
>
<span
className="bp3-icon bp3-icon-wrench makeStyles-iconInTablLeftButton-12"
icon="wrench"
>
<svg
data-icon="wrench"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
wrench
</desc>
<path
d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
<Blueprint3.Text
className="bp3-text-large"
>
<div
className="bp3-text-large"
>
General
</div>
</Blueprint3.Text>
</div>
</Row>
</div>
</Blueprint3.TabTitle>
<Blueprint3.TabTitle
disabled={false}
id="ng"
key=".1"
onClick={[Function]}
panel={<SecurityPanel />}
parentId="TabsExample"
selected={false}
title=""
>
<div
aria-controls="bp3-tab-panel_TabsExample_ng"
aria-disabled={false}
aria-expanded={false}
aria-selected={false}
className="bp3-tab"
data-tab-id="ng"
id="bp3-tab-title_TabsExample_ng"
onClick={[Function]}
role="tab"
tabIndex={0}
>
<Row
className="makeStyles-tabNavigationRowButton-11"
middle="xs"
>
<div
className="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<Blueprint3.Icon
className="makeStyles-iconInTablLeftButton-12"
icon="shield"
>
<span
className="bp3-icon bp3-icon-shield makeStyles-iconInTablLeftButton-12"
icon="shield"
>
<svg
data-icon="shield"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
shield
</desc>
<path
d="M8 16c4.667-3.048 7-7.238 7-12.571-1.556 0-3.889-1.143-7-3.429-3.111 2.286-5.444 3.429-7 3.429C1 8.762 3.333 12.952 8 16zM8 2.121c2.005 1.388 3.715 2.304 5.186 2.735-.342 3.702-2.05 6.683-5.186 9.038V2.121z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
<Blueprint3.Text
className="bp3-text-large"
>
<div
className="bp3-text-large"
>
Security
</div>
</Blueprint3.Text>
</div>
</Row>
</div>
</Blueprint3.TabTitle>
<Blueprint3.TabTitle
disabled={true}
id="bb"
key=".2"
onClick={[Function]}
panel={<BlockedIPsPanel />}
parentId="TabsExample"
selected={false}
title=""
>
<div
aria-controls="bp3-tab-panel_TabsExample_bb"
aria-disabled={true}
aria-expanded={false}
aria-selected={false}
className="bp3-tab"
data-tab-id="bb"
id="bp3-tab-title_TabsExample_bb"
role="tab"
>
<Row
className="makeStyles-tabNavigationRowButton-11"
middle="xs"
>
<div
className="makeStyles-tabNavigationRowButton-11 row middle-xs"
>
<Blueprint3.Icon
className="makeStyles-iconInTablLeftButton-12"
icon="blocked-person"
>
<span
className="bp3-icon bp3-icon-blocked-person makeStyles-iconInTablLeftButton-12"
icon="blocked-person"
>
<svg
data-icon="blocked-person"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
blocked-person
</desc>
<path
d="M9.39 12.69c-1.2-.53-1.04-.85-1.08-1.29-.01-.07-.01-.13-.02-.2.41-.37.75-.87.97-1.44 0 0 .01-.03.01-.04.05-.13.09-.26.13-.39.27-.06.43-.36.5-.63.01-.03.03-.08.05-.12C8.18 7.8 6.94 6.04 6.94 4c0-.32.04-.62.09-.92-.17-.03-.35-.08-.51-.08-.65 0-1.37.2-1.88.59-.5.38-.87.92-1.05 1.51-.04.14-.07.27-.09.41-.09.48-.14 1.23-.14 1.74v.06c-.19.08-.36.27-.4.68-.03.31.1.59.16.7.06.28.23.59.51.64.04.14.08.27.13.39 0 .01.01.02.01.02v.01c.22.59.57 1.1.99 1.46 0 .06-.01.12-.01.17-.04.44.08.76-1.12 1.29-1.2.53-3.01 1.1-3.38 1.95C-.12 15.5.03 16 .03 16h12.96s.15-.5-.22-1.36c-.37-.85-2.18-1.42-3.38-1.95zM11.97 0C9.75 0 7.94 1.79 7.94 4s1.8 4 4.03 4S16 6.21 16 4s-1.8-4-4.03-4zM9.96 4c0-1.1.9-2 2.01-2 .37 0 .72.11 1.02.28l-2.75 2.73c-.17-.3-.28-.64-.28-1.01zm2.01 2c-.37 0-.72-.11-1.02-.28l2.75-2.73c.18.3.28.64.28 1.01.01 1.1-.9 2-2.01 2z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
<Blueprint3.Text
className="bp3-text-large"
>
<div
className="bp3-text-large"
>
Blackilsted IPs
</div>
</Blueprint3.Text>
</div>
</Row>
</div>
</Blueprint3.TabTitle>
<Component
key=".3"
>
<div
className="bp3-flex-expander"
/>
</Component>
</div>
<div
aria-hidden={false}
aria-labelledby="bp3-tab-title_TabsExample_rx"
className="bp3-tab-panel"
id="bp3-tab-panel_TabsExample_rx"
key="rx"
role="tabpanel"
>
<GeneralSettingsPanel>
<Row
middle="xs"
>
<div
className="row middle-xs"
>
<Component
className="bp3-text-muted"
>
<h3
className="bp3-heading bp3-text-muted"
>
General Settings
</h3>
</Component>
</div>
</Row>
<SettingRowLabelAndInput
icon="style"
input={
<Blueprint3.ControlGroup
fill={true}
vertical={false}
>
<Blueprint3.Button
active={true}
icon="flash"
onClick={[Function]}
text="Light"
/>
<Blueprint3.Button
active={false}
icon="moon"
onClick={[Function]}
text="Dark"
/>
</Blueprint3.ControlGroup>
}
label="Colors"
>
<Row
between="xs"
middle="xs"
>
<div
className="row middle-xs between-xs"
>
<Col
xs={6}
>
<div
className="col-xs-6"
>
<Row
className="makeStyles-oneSettingRow-20"
middle="xs"
>
<div
className="makeStyles-oneSettingRow-20 row middle-xs"
>
<Col>
<div
className=""
>
<Blueprint3.Icon
className="makeStyles-settingRowIcon-21"
icon="style"
iconSize={25}
>
<span
className="bp3-icon bp3-icon-style makeStyles-settingRowIcon-21"
icon="style"
>
<svg
data-icon="style"
height={25}
viewBox="0 0 20 20"
width={25}
>
<desc>
style
</desc>
<path
d="M18 18H2V2h12.3l2-2H1C.4 0 0 .4 0 1v18c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V7.7l-2 2V18zm1.2-18l-7.6 7.6 2.8 2.8L20 4.8V0h-.8zM4 15.9c3.1.2 5.9.2 8.2-2 1.1-1.1 1.1-3 0-4.1-.6-.5-1.3-.8-2-.8s-1.4.3-1.9.8C7.2 11 6.6 14.3 4 15.9z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</div>
</Col>
<Col>
<div
className=""
>
<Blueprint3.Text>
<div
className=""
>
Colors
</div>
</Blueprint3.Text>
</div>
</Col>
</div>
</Row>
</div>
</Col>
<Col
xs={6}
>
<div
className="col-xs-6"
>
<Row>
<div
className="row"
>
<Blueprint3.ControlGroup
fill={true}
vertical={false}
>
<div
className="bp3-control-group bp3-fill"
>
<Blueprint3.Button
active={true}
icon="flash"
onClick={[Function]}
text="Light"
>
<button
className="bp3-button bp3-active"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
type="button"
>
<Blueprint3.Icon
icon="flash"
key="leftIcon"
>
<span
className="bp3-icon bp3-icon-flash"
icon="flash"
>
<svg
data-icon="flash"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
flash
</desc>
<path
d="M4 8c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1zm4-4c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1S7 .45 7 1v2c0 .55.45 1 1 1zM3.79 5.21a1.003 1.003 0 001.42-1.42l-1.5-1.5a1.003 1.003 0 00-1.42 1.42l1.5 1.5zm.71 5.29c-.28 0-.53.11-.71.29l-1.5 1.5a1.003 1.003 0 001.42 1.42l1.5-1.5a1.003 1.003 0 00-.71-1.71zm7-5c.28 0 .53-.11.71-.29l1.5-1.5a1.003 1.003 0 00-1.42-1.42l-1.5 1.5a1.003 1.003 0 00.71 1.71zm.71 5.29a1.003 1.003 0 00-1.42 1.42l1.5 1.5a1.003 1.003 0 001.42-1.42l-1.5-1.5zM15 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1s-.45-1-1-1zM8 5C6.34 5 5 6.34 5 8s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm0 3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
<span
className="bp3-button-text"
key="text"
>
Light
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
<Blueprint3.Button
active={false}
icon="moon"
onClick={[Function]}
text="Dark"
>
<button
className="bp3-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
type="button"
>
<Blueprint3.Icon
icon="moon"
key="leftIcon"
>
<span
className="bp3-icon bp3-icon-moon"
icon="moon"
>
<svg
data-icon="moon"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
moon
</desc>
<path
d="M15 11.38A7.835 7.835 0 017.85 16C3.51 16 0 12.49 0 8.15 0 4.97 1.89 2.23 4.62 1c-.45.99-.7 2.08-.7 3.23a7.85 7.85 0 007.85 7.85c1.15 0 2.24-.25 3.23-.7z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
<span
className="bp3-button-text"
key="text"
>
Dark
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</div>
</Blueprint3.ControlGroup>
</div>
</Row>
</div>
</Col>
</div>
</Row>
</SettingRowLabelAndInput>
<SettingRowLabelAndInput
icon="translate"
input={
<HTMLSelect
onChange={[Function]}
options={
Array [
"English",
"Русский",
"Українська",
]
}
/>
}
label="Language"
>
<Row
between="xs"
middle="xs"
>
<div
className="row middle-xs between-xs"
>
<Col
xs={6}
>
<div
className="col-xs-6"
>
<Row
className="makeStyles-oneSettingRow-22"
middle="xs"
>
<div
className="makeStyles-oneSettingRow-22 row middle-xs"
>
<Col>
<div
className=""
>
<Blueprint3.Icon
className="makeStyles-settingRowIcon-23"
icon="translate"
iconSize={25}
>
<span
className="bp3-icon bp3-icon-translate makeStyles-settingRowIcon-23"
icon="translate"
>
<svg
data-icon="translate"
height={25}
viewBox="0 0 20 20"
width={25}
>
<desc>
translate
</desc>
<path
d="M19.89 18.56l-4.99-10h-.01c-.17-.33-.5-.56-.89-.56s-.72.23-.89.56h-.01l-1.73 3.46-2.8-2.3 1.99-1.64C11.44 7.34 12 6.23 12 5V4h1c.55 0 1-.45 1-1s-.45-1-1-1H8V1c0-.55-.45-1-1-1S6 .45 6 1v1H1c-.55 0-1 .45-1 1s.45 1 1 1h9v1c0 .62-.28 1.18-.73 1.54L7 8.42 4.73 6.54C4.28 6.18 4 5.62 4 5H2c0 1.23.56 2.34 1.44 3.07l1.99 1.64-3.06 2.52.01.01c-.23.18-.38.45-.38.76 0 .55.45 1 1 1 .24 0 .45-.1.63-.24l.01.01L7 11l3.36 2.77.01-.01c.02.02.05.03.08.05.01 0 .01.01.02.02l-2.36 4.73h.01c-.07.13-.12.28-.12.44 0 .55.45 1 1 1 .39 0 .72-.23.89-.56h.01L11.12 17h5.76l1.22 2.45h.01c.17.32.5.55.89.55.55 0 1-.45 1-1 0-.16-.05-.31-.11-.44zM12.12 15L14 11.24 15.88 15h-3.76z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</div>
</Col>
<Col>
<div
className=""
>
<Blueprint3.Text>
<div
className=""
>
Language
</div>
</Blueprint3.Text>
</div>
</Col>
</div>
</Row>
</div>
</Col>
<Col
xs={6}
>
<div
className="col-xs-6"
>
<Row>
<div
className="row"
>
<HTMLSelect
onChange={[Function]}
options={
Array [
"English",
"Русский",
"Українська",
]
}
>
<div
className="bp3-html-select"
>
<select
multiple={false}
onChange={[Function]}
>
<option
key="English"
value="English"
>
English
</option>
<option
key="Русский"
value="Русский"
>
Русский
</option>
<option
key="Українська"
value="Українська"
>
Українська
</option>
</select>
<Blueprint3.Icon
icon="double-caret-vertical"
>
<span
className="bp3-icon bp3-icon-double-caret-vertical"
icon="double-caret-vertical"
>
<svg
data-icon="double-caret-vertical"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
double-caret-vertical
</desc>
<path
d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</div>
</HTMLSelect>
</div>
</Row>
</div>
</Col>
</div>
</Row>
</SettingRowLabelAndInput>
<SettingRowLabelAndInput
icon="automatic-updates"
input={
<Blueprint3.Checkbox
checked={true}
className="makeStyles-checkboxSettings-7"
label="Enabled"
/>
}
label="Automatic Updates"
>
<Row
between="xs"
middle="xs"
>
<div
className="row middle-xs between-xs"
>
<Col
xs={6}
>
<div
className="col-xs-6"
>
<Row
className="makeStyles-oneSettingRow-24"
middle="xs"
>
<div
className="makeStyles-oneSettingRow-24 row middle-xs"
>
<Col>
<div
className=""
>
<Blueprint3.Icon
className="makeStyles-settingRowIcon-25"
icon="automatic-updates"
iconSize={25}
>
<span
className="bp3-icon bp3-icon-automatic-updates makeStyles-settingRowIcon-25"
icon="automatic-updates"
>
<svg
data-icon="automatic-updates"
height={25}
viewBox="0 0 20 20"
width={25}
>
<desc>
automatic-updates
</desc>
<path
d="M10 18c-4.42 0-8-3.58-8-8 0-2.52 1.18-4.76 3-6.22V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1h2.06C1.61 3.82 0 6.71 0 10c0 5.52 4.48 10 10 10 .55 0 1-.45 1-1s-.45-1-1-1zm0-16c1.64 0 3.15.49 4.42 1.34l1.43-1.43A9.869 9.869 0 0010 0c-.55 0-1 .45-1 1s.45 1 1 1zm10 8c0-1.13-.2-2.21-.54-3.22L17.84 8.4A7.962 7.962 0 0115 16.22V15c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1h-2.06c2.45-1.82 4.06-4.71 4.06-8zm0-7a1.003 1.003 0 00-1.71-.71L12 8.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7c.18-.18.29-.43.29-.71z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</div>
</Col>
<Col>
<div
className=""
>
<Blueprint3.Text>
<div
className=""
>
Automatic Updates
</div>
</Blueprint3.Text>
</div>
</Col>
</div>
</Row>
</div>
</Col>
<Col
xs={6}
>
<div
className="col-xs-6"
>
<Row>
<div
className="row"
>
<Blueprint3.Checkbox
checked={true}
className="makeStyles-checkboxSettings-7"
label="Enabled"
>
<Control
checked={true}
className="makeStyles-checkboxSettings-7"
inputRef={[Function]}
label="Enabled"
onChange={[Function]}
type="checkbox"
typeClassName="bp3-checkbox"
>
<label
className="bp3-control bp3-checkbox makeStyles-checkboxSettings-7"
>
<input
checked={true}
onChange={[Function]}
type="checkbox"
/>
<span
className="bp3-control-indicator"
/>
Enabled
</label>
</Control>
</Blueprint3.Checkbox>
</div>
</Row>
</div>
</Col>
</div>
</Row>
</SettingRowLabelAndInput>
</GeneralSettingsPanel>
</div>
</div>
</Blueprint3.Tabs>
</div>
</RevealBase>
</Fade>
</div>
</Transition>
</CSSTransition>
</div>
</TransitionGroup>
</Portal>
</Blueprint3.Portal>
</Blueprint3.Overlay>
</SettingsOverlay>
</Router>
</BrowserRouter>
</SettingsProvider>
</Suspense>
`;