v/deskreen
1
0
Fork 0
mirror of https://github.com/pavlobu/deskreen.git synced 2025-05-21 09:50:13 -07:00
Code Issues Projects Releases Wiki Activity
deskreen/app/containers/__snapshots__/HomePage.spec.tsx.snap
Pavlo Buidenkov 1129b67c3a translations ru,ua done, ready for 1.0.6
2021-02-11 01:23:43 +02:00

4032 lines
240 KiB
Plaintext
Raw Blame History

// 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],
}
}
>
<HomePage>
<ToastProvider
autoDismiss={false}
autoDismissTimeout={5000}
components={
Object {
"Toast": [Function],
}
}
placement="top-center"
transitionDuration={220}
>
<div
className="bp3-tree"
>
<TopPanel
stepperRef={
Object {
"current": Object {
"handleReset": [Function],
},
}
}
>
<div
className="makeStyles-topPanelRoot-117"
>
<Row
center="xs"
middle="xs"
style={
Object {
"transform": "translateX(-50px)",
"width": "100%",
}
}
>
<div
className="row center-xs middle-xs"
style={
Object {
"transform": "translateX(-50px)",
"width": "100%",
}
}
>
<Col>
<div
className=""
>
<Blueprint3.Tooltip
content=""
hoverCloseDelay={0}
hoverOpenDelay={100}
minimal={false}
position="bottom"
transitionDuration={100}
>
<Blueprint3.Popover
autoFocus={false}
boundary="scrollParent"
canEscapeKeyClose={false}
captureDismiss={false}
content=""
defaultIsOpen={false}
disabled={false}
enforceFocus={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={0}
hoverOpenDelay={100}
inheritDarkTheme={true}
interactionKind="hover-target"
lazy={true}
minimal={false}
modifiers={
Object {
"arrow": Object {
"enabled": true,
},
}
}
openOnTargetFocus={true}
popoverClassName="bp3-tooltip"
position="bottom"
targetTagName="span"
transitionDuration={100}
usePortal={true}
wrapperTagName="span"
>
<Manager>
<span
className="bp3-popover-wrapper"
>
<Reference
innerRef={[Function]}
>
<InnerReference
innerRef={[Function]}
setReferenceNode={[Function]}
>
<Blueprint3.ResizeSensor
onResize={[Function]}
>
<span
className="bp3-popover-target"
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Blueprint3.Button
className=""
key=".0"
onClick={[Function]}
style={
Object {
"borderRadius": "100px",
"marginRight": "10px",
}
}
tabIndex={0}
>
<button
className="bp3-button"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
style={
Object {
"borderRadius": "100px",
"marginRight": "10px",
}
}
tabIndex={0}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<span
className="bp3-button-text"
key="text"
>
<Row
start="xs"
>
<div
className="row start-xs"
>
<Col
xs={true}
>
<div
className="col-xs"
>
<img
alt="heart"
height={16}
src="test-file-stub"
style={
Object {
"transform": "translateY(2px)",
}
}
width={16}
/>
</div>
</Col>
<Col
xs={true}
>
<div
className="col-xs"
>
<div
style={
Object {
"transform": "translateY(2px) translateX(-5px)",
}
}
>
<Blueprint3.Text
ellipsize={false}
tagName="div"
>
<div
className=""
/>
</Blueprint3.Text>
</div>
</div>
</Col>
</div>
</Row>
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</span>
</Blueprint3.ResizeSensor>
</InnerReference>
</Reference>
<Blueprint3.Overlay
autoFocus={false}
backdropClassName="bp3-popover-backdrop"
backdropProps={Object {}}
canEscapeKeyClose={false}
canOutsideClickClose={false}
enforceFocus={false}
hasBackdrop={false}
isOpen={false}
lazy={true}
onClose={[Function]}
transitionDuration={100}
transitionName="bp3-popover"
usePortal={true}
/>
</span>
</Manager>
</Blueprint3.Popover>
</Blueprint3.Tooltip>
</div>
</Col>
<Col>
<div
className=""
>
<div
className="makeStyles-logoWithAppName-125"
id="logo-with-popover-visit-website"
>
<Blueprint3.Tooltip
content=""
hoverCloseDelay={0}
hoverOpenDelay={100}
minimal={false}
position="bottom"
transitionDuration={100}
>
<Blueprint3.Popover
autoFocus={false}
boundary="scrollParent"
canEscapeKeyClose={false}
captureDismiss={false}
content=""
defaultIsOpen={false}
disabled={false}
enforceFocus={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={0}
hoverOpenDelay={100}
inheritDarkTheme={true}
interactionKind="hover-target"
lazy={true}
minimal={false}
modifiers={
Object {
"arrow": Object {
"enabled": true,
},
}
}
openOnTargetFocus={true}
popoverClassName="bp3-tooltip"
position="bottom"
targetTagName="span"
transitionDuration={100}
usePortal={true}
wrapperTagName="span"
>
<Manager>
<span
className="bp3-popover-wrapper"
>
<Reference
innerRef={[Function]}
>
<InnerReference
innerRef={[Function]}
setReferenceNode={[Function]}
>
<Blueprint3.ResizeSensor
onResize={[Function]}
>
<span
className="bp3-popover-target"
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Blueprint3.Button
className=""
key=".0"
minimal={true}
onClick={[Function]}
style={
Object {
"borderRadius": "100px",
}
}
tabIndex={0}
>
<button
className="bp3-button bp3-minimal"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
style={
Object {
"borderRadius": "100px",
}
}
tabIndex={0}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<span
className="bp3-button-text"
key="text"
>
<h4
className="makeStyles-appNameHeader-133"
id="deskreen-top-app-name-header"
style={
Object {
"transform": "translateY(-3px)",
}
}
>
Deskreen
</h4>
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</span>
</Blueprint3.ResizeSensor>
</InnerReference>
</Reference>
<Blueprint3.Overlay
autoFocus={false}
backdropClassName="bp3-popover-backdrop"
backdropProps={Object {}}
canEscapeKeyClose={false}
canOutsideClickClose={false}
enforceFocus={false}
hasBackdrop={false}
isOpen={false}
lazy={true}
onClose={[Function]}
transitionDuration={100}
transitionName="bp3-popover"
usePortal={true}
/>
</span>
</Manager>
</Blueprint3.Popover>
</Blueprint3.Tooltip>
</div>
</div>
</Col>
</div>
</Row>
<div
className="makeStyles-topPanelControlButtonsRoot-141"
>
<div
className="makeStyles-topPanelControlButtonMargin-150"
>
<Blueprint3.Tooltip
content=""
hoverCloseDelay={0}
hoverOpenDelay={100}
minimal={false}
position="bottom"
transitionDuration={100}
>
<Blueprint3.Popover
autoFocus={false}
boundary="scrollParent"
canEscapeKeyClose={false}
captureDismiss={false}
content=""
defaultIsOpen={false}
disabled={false}
enforceFocus={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={0}
hoverOpenDelay={100}
inheritDarkTheme={true}
interactionKind="hover-target"
lazy={true}
minimal={false}
modifiers={
Object {
"arrow": Object {
"enabled": true,
},
}
}
openOnTargetFocus={true}
popoverClassName="bp3-tooltip"
position="bottom"
targetTagName="span"
transitionDuration={100}
usePortal={true}
wrapperTagName="span"
>
<Manager>
<span
className="bp3-popover-wrapper"
>
<Reference
innerRef={[Function]}
>
<InnerReference
innerRef={[Function]}
setReferenceNode={[Function]}
>
<Blueprint3.ResizeSensor
onResize={[Function]}
>
<span
className="bp3-popover-target"
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Blueprint3.Button
className="makeStyles-topPanelControlButton-156"
id="top-panel-connected-devices-list-button"
intent="primary"
key=".0"
onClick={[Function]}
tabIndex={0}
>
<button
className="bp3-button bp3-intent-primary makeStyles-topPanelControlButton-156"
id="top-panel-connected-devices-list-button"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
tabIndex={0}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<span
className="bp3-button-text"
key="text"
>
<Blueprint3.Icon
className="makeStyles-topPanelIconOfControlButton-165"
icon="th-list"
iconSize={20}
>
<span
className="bp3-icon bp3-icon-th-list makeStyles-topPanelIconOfControlButton-165"
icon="th-list"
>
<svg
data-icon="th-list"
height={20}
viewBox="0 0 20 20"
width={20}
>
<desc>
th-list
</desc>
<path
d="M19 1H1c-.6 0-1 .5-1 1v16c0 .5.4 1 1 1h18c.5 0 1-.5 1-1V2c0-.5-.5-1-1-1zm-1 16H2v-3h16v3zm0-4H2v-3h16v3zm0-4H2V6h16v3z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</span>
</Blueprint3.ResizeSensor>
</InnerReference>
</Reference>
<Blueprint3.Overlay
autoFocus={false}
backdropClassName="bp3-popover-backdrop"
backdropProps={Object {}}
canEscapeKeyClose={false}
canOutsideClickClose={false}
enforceFocus={false}
hasBackdrop={false}
isOpen={false}
lazy={true}
onClose={[Function]}
transitionDuration={100}
transitionName="bp3-popover"
usePortal={true}
/>
</span>
</Manager>
</Blueprint3.Popover>
</Blueprint3.Tooltip>
</div>
<div
className="makeStyles-topPanelControlButtonMargin-171"
>
<Blueprint3.Tooltip
content=""
hoverCloseDelay={0}
hoverOpenDelay={100}
minimal={false}
position="bottom"
transitionDuration={100}
>
<Blueprint3.Popover
autoFocus={false}
boundary="scrollParent"
canEscapeKeyClose={false}
captureDismiss={false}
content=""
defaultIsOpen={false}
disabled={false}
enforceFocus={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={0}
hoverOpenDelay={100}
inheritDarkTheme={true}
interactionKind="hover-target"
lazy={true}
minimal={false}
modifiers={
Object {
"arrow": Object {
"enabled": true,
},
}
}
openOnTargetFocus={true}
popoverClassName="bp3-tooltip"
position="bottom"
targetTagName="span"
transitionDuration={100}
usePortal={true}
wrapperTagName="span"
>
<Manager>
<span
className="bp3-popover-wrapper"
>
<Reference
innerRef={[Function]}
>
<InnerReference
innerRef={[Function]}
setReferenceNode={[Function]}
>
<Blueprint3.ResizeSensor
onResize={[Function]}
>
<span
className="bp3-popover-target"
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Blueprint3.Button
className="makeStyles-topPanelControlButton-177"
id="top-panel-help-button"
intent="none"
key=".0"
onClick={[Function]}
tabIndex={0}
>
<button
className="bp3-button makeStyles-topPanelControlButton-177"
id="top-panel-help-button"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
tabIndex={0}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<span
className="bp3-button-text"
key="text"
>
<Blueprint3.Icon
className="makeStyles-topPanelIconOfControlButton-186"
icon="learning"
iconSize={22}
>
<span
className="bp3-icon bp3-icon-learning makeStyles-topPanelIconOfControlButton-186"
icon="learning"
>
<svg
data-icon="learning"
height={22}
viewBox="0 0 20 20"
width={22}
>
<desc>
learning
</desc>
<path
d="M10.551 1.127a1.256 1.256 0 00-1.102 0L.456 5.89c-.608.309-.608.913 0 1.222l8.993 4.762c.334.17.767.17 1.102 0l8.992-4.762c.61-.309.61-.913 0-1.222l-8.992-4.762z"
fillRule="evenodd"
key="0"
/>
<path
d="M18 6.5l.016 4.514c.002.548.447.99.994.99a.99.99 0 00.99-.99V6.5h-2zM3.366 10.033l6.401 3.358a.5.5 0 00.465 0l6.406-3.358a.25.25 0 01.366.221v5.109a.25.25 0 01-.139.224l-6.64 3.302a.5.5 0 01-.446 0l-6.64-3.302A.25.25 0 013 15.363v-5.108a.25.25 0 01.366-.222z"
fillRule="evenodd"
key="1"
/>
</svg>
</span>
</Blueprint3.Icon>
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</span>
</Blueprint3.ResizeSensor>
</InnerReference>
</Reference>
<Blueprint3.Overlay
autoFocus={false}
backdropClassName="bp3-popover-backdrop"
backdropProps={Object {}}
canEscapeKeyClose={false}
canOutsideClickClose={false}
enforceFocus={false}
hasBackdrop={false}
isOpen={false}
lazy={true}
onClose={[Function]}
transitionDuration={100}
transitionName="bp3-popover"
usePortal={true}
/>
</span>
</Manager>
</Blueprint3.Popover>
</Blueprint3.Tooltip>
</div>
<div
className="makeStyles-topPanelControlButtonMargin-192"
>
<Blueprint3.Tooltip
content=""
hoverCloseDelay={0}
hoverOpenDelay={100}
minimal={false}
position="bottom"
transitionDuration={100}
>
<Blueprint3.Popover
autoFocus={false}
boundary="scrollParent"
canEscapeKeyClose={false}
captureDismiss={false}
content=""
defaultIsOpen={false}
disabled={false}
enforceFocus={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={0}
hoverOpenDelay={100}
inheritDarkTheme={true}
interactionKind="hover-target"
lazy={true}
minimal={false}
modifiers={
Object {
"arrow": Object {
"enabled": true,
},
}
}
openOnTargetFocus={true}
popoverClassName="bp3-tooltip"
position="bottom"
targetTagName="span"
transitionDuration={100}
usePortal={true}
wrapperTagName="span"
>
<Manager>
<span
className="bp3-popover-wrapper"
>
<Reference
innerRef={[Function]}
>
<InnerReference
innerRef={[Function]}
setReferenceNode={[Function]}
>
<Blueprint3.ResizeSensor
onResize={[Function]}
>
<span
className="bp3-popover-target"
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Blueprint3.Button
className="makeStyles-topPanelControlButton-198"
id="top-panel-settings-button"
key=".0"
onClick={[Function]}
tabIndex={0}
>
<button
className="bp3-button makeStyles-topPanelControlButton-198"
id="top-panel-settings-button"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
tabIndex={0}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<span
className="bp3-button-text"
key="text"
>
<Blueprint3.Icon
className="makeStyles-topPanelIconOfControlButton-207"
icon="cog"
iconSize={22}
>
<span
className="bp3-icon bp3-icon-cog makeStyles-topPanelIconOfControlButton-207"
icon="cog"
>
<svg
data-icon="cog"
height={22}
viewBox="0 0 20 20"
width={22}
>
<desc>
cog
</desc>
<path
d="M19 8h-2.31c-.14-.46-.33-.89-.56-1.3l1.7-1.7a.996.996 0 000-1.41l-1.41-1.41a.996.996 0 00-1.41 0l-1.7 1.7c-.41-.22-.84-.41-1.3-.55V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v2.33c-.48.14-.94.34-1.37.58L5 2.28a.972.972 0 00-1.36 0L2.28 3.64c-.37.38-.37.99 0 1.36L3.9 6.62c-.24.44-.44.89-.59 1.38H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h2.31c.14.46.33.89.56 1.3L2.17 15a.996.996 0 000 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l1.7-1.7c.41.22.84.41 1.3.55V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-2.33c.48-.14.94-.35 1.37-.59L15 17.72c.37.37.98.37 1.36 0l1.36-1.36c.37-.37.37-.98 0-1.36l-1.62-1.62c.24-.43.45-.89.6-1.38H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 6c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</span>
</Blueprint3.ResizeSensor>
</InnerReference>
</Reference>
<Blueprint3.Overlay
autoFocus={false}
backdropClassName="bp3-popover-backdrop"
backdropProps={Object {}}
canEscapeKeyClose={false}
canOutsideClickClose={false}
enforceFocus={false}
hasBackdrop={false}
isOpen={false}
lazy={true}
onClose={[Function]}
transitionDuration={100}
transitionName="bp3-popover"
usePortal={true}
/>
</span>
</Manager>
</Blueprint3.Popover>
</Blueprint3.Tooltip>
</div>
</div>
</div>
<SettingsOverlay
handleClose={[Function]}
isSettingsOpen={false}
>
<Blueprint3.Overlay
autoFocus={true}
backdropProps={Object {}}
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="bp3-overlay-scroll-container bp3-overlay-settings"
enforceFocus={true}
hasBackdrop={true}
isOpen={false}
lazy={true}
onClose={[Function]}
transitionDuration={0}
transitionName="bp3-overlay"
usePortal={true}
/>
</SettingsOverlay>
<ConnectedDevicesListDrawer
handleToggle={[Function]}
isOpen={false}
stepperRef={
Object {
"current": Object {
"handleReset": [Function],
},
}
}
>
<Blueprint3.Drawer
canOutsideClickClose={true}
className="makeStyles-drawerRoot-98"
isOpen={false}
onClose={[Function]}
position="bottom"
size="90%"
style={Object {}}
transitionDuration={0}
vertical={false}
>
<Blueprint3.Overlay
autoFocus={true}
backdropProps={Object {}}
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="bp3-overlay-container"
enforceFocus={true}
hasBackdrop={true}
isOpen={false}
lazy={true}
onClose={[Function]}
position="bottom"
size="90%"
style={Object {}}
transitionDuration={0}
transitionName="bp3-overlay"
usePortal={true}
vertical={false}
/>
</Blueprint3.Drawer>
<Blueprint3.Alert
canEscapeKeyCancel={true}
canOutsideClickCancel={true}
cancelButtonText=""
confirmButtonText=""
icon="warning-sign"
intent="danger"
isOpen={false}
onCancel={[Function]}
onClose={[Function]}
onConfirm={[Function]}
transitionDuration={0}
>
<Blueprint3.Dialog
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="bp3-alert"
isOpen={false}
onCancel={[Function]}
onClose={[Function]}
onConfirm={[Function]}
transitionDuration={0}
>
<Blueprint3.Overlay
autoFocus={true}
backdropProps={Object {}}
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="bp3-overlay-scroll-container"
enforceFocus={true}
hasBackdrop={true}
isOpen={false}
lazy={true}
onCancel={[Function]}
onClose={[Function]}
onConfirm={[Function]}
transitionDuration={0}
transitionName="bp3-overlay"
usePortal={true}
/>
</Blueprint3.Dialog>
</Blueprint3.Alert>
</ConnectedDevicesListDrawer>
</TopPanel>
<ForwardRef>
<Row
style={
Object {
"width": "100%",
}
}
>
<div
className="row"
style={
Object {
"width": "100%",
}
}
>
<Col
xs={12}
>
<div
className="col-xs-12"
>
<WithStyles(ForwardRef(Stepper))
activeStep={0}
alternativeLabel={true}
className="makeStyles-stepperComponent-105"
connector={<WithStyles(WithStyles(ForwardRef(StepConnector))) />}
style={
Object {
"background": "transparent",
}
}
>
<ForwardRef(Stepper)
activeStep={0}
alternativeLabel={true}
className="makeStyles-stepperComponent-105"
classes={
Object {
"alternativeLabel": "MuiStepper-alternativeLabel",
"horizontal": "MuiStepper-horizontal",
"root": "MuiStepper-root",
"vertical": "MuiStepper-vertical",
}
}
connector={<WithStyles(WithStyles(ForwardRef(StepConnector))) />}
style={
Object {
"background": "transparent",
}
}
>
<WithStyles(ForwardRef(Paper))
className="MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-105 MuiStepper-alternativeLabel"
elevation={0}
square={true}
style={
Object {
"background": "transparent",
}
}
>
<ForwardRef(Paper)
className="MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-105 MuiStepper-alternativeLabel"
classes={
Object {
"elevation0": "MuiPaper-elevation0",
"elevation1": "MuiPaper-elevation1",
"elevation10": "MuiPaper-elevation10",
"elevation11": "MuiPaper-elevation11",
"elevation12": "MuiPaper-elevation12",
"elevation13": "MuiPaper-elevation13",
"elevation14": "MuiPaper-elevation14",
"elevation15": "MuiPaper-elevation15",
"elevation16": "MuiPaper-elevation16",
"elevation17": "MuiPaper-elevation17",
"elevation18": "MuiPaper-elevation18",
"elevation19": "MuiPaper-elevation19",
"elevation2": "MuiPaper-elevation2",
"elevation20": "MuiPaper-elevation20",
"elevation21": "MuiPaper-elevation21",
"elevation22": "MuiPaper-elevation22",
"elevation23": "MuiPaper-elevation23",
"elevation24": "MuiPaper-elevation24",
"elevation3": "MuiPaper-elevation3",
"elevation4": "MuiPaper-elevation4",
"elevation5": "MuiPaper-elevation5",
"elevation6": "MuiPaper-elevation6",
"elevation7": "MuiPaper-elevation7",
"elevation8": "MuiPaper-elevation8",
"elevation9": "MuiPaper-elevation9",
"outlined": "MuiPaper-outlined",
"root": "MuiPaper-root",
"rounded": "MuiPaper-rounded",
}
}
elevation={0}
square={true}
style={
Object {
"background": "transparent",
}
}
>
<div
className="MuiPaper-root MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-105 MuiStepper-alternativeLabel MuiPaper-elevation0"
style={
Object {
"background": "transparent",
}
}
>
<WithStyles(ForwardRef(Step))
active={true}
alternativeLabel={true}
completed={false}
connector={
<WithStyles(WithStyles(ForwardRef(StepConnector)))
orientation="horizontal"
/>
}
disabled={false}
index={0}
key=".$"
last={false}
orientation="horizontal"
>
<ForwardRef(Step)
active={true}
alternativeLabel={true}
classes={
Object {
"alternativeLabel": "MuiStep-alternativeLabel",
"completed": "MuiStep-completed",
"horizontal": "MuiStep-horizontal",
"root": "MuiStep-root",
"vertical": "MuiStep-vertical",
}
}
completed={false}
connector={
<WithStyles(WithStyles(ForwardRef(StepConnector)))
orientation="horizontal"
/>
}
disabled={false}
index={0}
last={false}
orientation="horizontal"
>
<div
className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
>
<WithStyles(ForwardRef(StepLabel))
StepIconComponent={[Function]}
StepIconProps={
Object {
"isApplicationWindowSelected": false,
"isEntireScreenSelected": false,
}
}
active={true}
alternativeLabel={true}
className="makeStyles-stepLabelContent-104"
completed={false}
disabled={false}
expanded={false}
icon={1}
id="step-label-deskreen"
key=".0"
last={false}
orientation="horizontal"
>
<ForwardRef(StepLabel)
StepIconComponent={[Function]}
StepIconProps={
Object {
"isApplicationWindowSelected": false,
"isEntireScreenSelected": false,
}
}
active={true}
alternativeLabel={true}
className="makeStyles-stepLabelContent-104"
classes={
Object {
"active": "MuiStepLabel-active",
"alternativeLabel": "MuiStepLabel-alternativeLabel",
"completed": "MuiStepLabel-completed",
"disabled": "Mui-disabled",
"error": "Mui-error",
"horizontal": "MuiStepLabel-horizontal",
"iconContainer": "MuiStepLabel-iconContainer",
"label": "MuiStepLabel-label",
"labelContainer": "MuiStepLabel-labelContainer",
"root": "MuiStepLabel-root",
"vertical": "MuiStepLabel-vertical",
}
}
completed={false}
disabled={false}
expanded={false}
icon={1}
id="step-label-deskreen"
last={false}
orientation="horizontal"
>
<span
className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-104 MuiStepLabel-alternativeLabel"
id="step-label-deskreen"
>
<span
className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
>
<ColorlibStepIcon
active={true}
completed={false}
error={false}
icon={1}
isApplicationWindowSelected={false}
isEntireScreenSelected={false}
>
<div
className="makeStyles-root-106 makeStyles-active-107"
>
<Blueprint3.Icon
color="#fff"
icon="feed"
iconSize={25}
>
<span
className="bp3-icon bp3-icon-feed"
icon="feed"
>
<svg
data-icon="feed"
fill="#fff"
height={25}
viewBox="0 0 20 20"
width={25}
>
<desc>
feed
</desc>
<path
d="M2.5 15a2.5 2.5 0 000 5 2.5 2.5 0 000-5zm.5-5c-.55 0-1 .45-1 1s.45 1 1 1c2.76 0 5 2.24 5 5 0 .55.45 1 1 1s1-.45 1-1c0-3.87-3.13-7-7-7zM3 0c-.55 0-1 .45-1 1s.45 1 1 1c8.28 0 15 6.72 15 15 0 .55.45 1 1 1s1-.45 1-1C20 7.61 12.39 0 3 0zm0 5c-.55 0-1 .45-1 1s.45 1 1 1c5.52 0 10 4.48 10 10 0 .55.45 1 1 1s1-.45 1-1C15 10.37 9.63 5 3 5z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</div>
</ColorlibStepIcon>
</span>
<span
className="MuiStepLabel-labelContainer"
>
<WithStyles(ForwardRef(Typography))
className="MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active"
component="span"
display="block"
variant="body2"
>
<ForwardRef(Typography)
className="MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
component="span"
display="block"
variant="body2"
>
<span
className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active MuiTypography-body2 MuiTypography-displayBlock"
>
<Blueprint3.Text
className="bp3-text-muted"
ellipsize={false}
tagName="div"
>
<div
className="bp3-text-muted"
/>
</Blueprint3.Text>
</span>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</span>
</span>
</ForwardRef(StepLabel)>
</WithStyles(ForwardRef(StepLabel))>
</div>
</ForwardRef(Step)>
</WithStyles(ForwardRef(Step))>
<WithStyles(ForwardRef(Step))
active={false}
alternativeLabel={true}
completed={false}
connector={
<WithStyles(WithStyles(ForwardRef(StepConnector)))
orientation="horizontal"
/>
}
disabled={true}
index={1}
key=".$"
last={false}
orientation="horizontal"
>
<ForwardRef(Step)
active={false}
alternativeLabel={true}
classes={
Object {
"alternativeLabel": "MuiStep-alternativeLabel",
"completed": "MuiStep-completed",
"horizontal": "MuiStep-horizontal",
"root": "MuiStep-root",
"vertical": "MuiStep-vertical",
}
}
completed={false}
connector={
<WithStyles(WithStyles(ForwardRef(StepConnector)))
orientation="horizontal"
/>
}
disabled={true}
index={1}
last={false}
orientation="horizontal"
>
<div
className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
>
<WithStyles(WithStyles(ForwardRef(StepConnector)))
active={false}
alternativeLabel={true}
completed={false}
disabled={true}
index={1}
orientation="horizontal"
>
<WithStyles(ForwardRef(StepConnector))
active={false}
alternativeLabel={true}
classes={
Object {
"active": "WithStyles(ForwardRef(StepConnector))-active-111",
"alternativeLabel": "WithStyles(ForwardRef(StepConnector))-alternativeLabel-110",
"completed": "WithStyles(ForwardRef(StepConnector))-completed-112",
"line": "WithStyles(ForwardRef(StepConnector))-line-113",
}
}
completed={false}
disabled={true}
index={1}
orientation="horizontal"
>
<ForwardRef(StepConnector)
active={false}
alternativeLabel={true}
classes={
Object {
"active": "MuiStepConnector-active WithStyles(ForwardRef(StepConnector))-active-111",
"alternativeLabel": "MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-110",
"completed": "MuiStepConnector-completed WithStyles(ForwardRef(StepConnector))-completed-112",
"disabled": "Mui-disabled",
"horizontal": "MuiStepConnector-horizontal",
"line": "MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-113",
"lineHorizontal": "MuiStepConnector-lineHorizontal",
"lineVertical": "MuiStepConnector-lineVertical",
"root": "MuiStepConnector-root",
"vertical": "MuiStepConnector-vertical",
}
}
completed={false}
disabled={true}
index={1}
orientation="horizontal"
>
<div
className="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-110 Mui-disabled"
>
<span
className="MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-113 MuiStepConnector-lineHorizontal"
/>
</div>
</ForwardRef(StepConnector)>
</WithStyles(ForwardRef(StepConnector))>
</WithStyles(WithStyles(ForwardRef(StepConnector)))>
<WithStyles(ForwardRef(StepLabel))
StepIconComponent={[Function]}
StepIconProps={
Object {
"isApplicationWindowSelected": false,
"isEntireScreenSelected": false,
}
}
active={false}
alternativeLabel={true}
className="makeStyles-stepLabelContent-104"
completed={false}
disabled={true}
expanded={false}
icon={2}
id="step-label-deskreen"
key=".0"
last={false}
orientation="horizontal"
>
<ForwardRef(StepLabel)
StepIconComponent={[Function]}
StepIconProps={
Object {
"isApplicationWindowSelected": false,
"isEntireScreenSelected": false,
}
}
active={false}
alternativeLabel={true}
className="makeStyles-stepLabelContent-104"
classes={
Object {
"active": "MuiStepLabel-active",
"alternativeLabel": "MuiStepLabel-alternativeLabel",
"completed": "MuiStepLabel-completed",
"disabled": "Mui-disabled",
"error": "Mui-error",
"horizontal": "MuiStepLabel-horizontal",
"iconContainer": "MuiStepLabel-iconContainer",
"label": "MuiStepLabel-label",
"labelContainer": "MuiStepLabel-labelContainer",
"root": "MuiStepLabel-root",
"vertical": "MuiStepLabel-vertical",
}
}
completed={false}
disabled={true}
expanded={false}
icon={2}
id="step-label-deskreen"
last={false}
orientation="horizontal"
>
<span
className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-104 Mui-disabled MuiStepLabel-alternativeLabel"
id="step-label-deskreen"
>
<span
className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
>
<ColorlibStepIcon
active={false}
completed={false}
error={false}
icon={2}
isApplicationWindowSelected={false}
isEntireScreenSelected={false}
>
<div
className="makeStyles-root-106"
>
<Blueprint3.Icon
color="#5C7080"
icon="flow-branch"
iconSize={25}
>
<span
className="bp3-icon bp3-icon-flow-branch"
icon="flow-branch"
>
<svg
data-icon="flow-branch"
fill="#5C7080"
height={25}
viewBox="0 0 20 20"
width={25}
>
<desc>
flow-branch
</desc>
<path
d="M14.425 7.953a3.98 3.98 0 01.562 2.045 3.98 3.98 0 01-.583 2.08L18 15.671V12.98c0-.248.097-.496.29-.689.379-.379 1.047-.38 1.426 0a.94.94 0 01.283.696l-.001 5.049a.957.957 0 01-.276.69.955.955 0 01-.69.273h-5.059a.971.971 0 01-.689-.289 1.026 1.026 0 010-1.417.972.972 0 01.69-.29h2.702l-3.634-3.573a3.998 3.998 0 01-5.924-2.431H1a1 1 0 010-2h6.12a3.998 3.998 0 015.96-2.409L16.665 3l-2.694-.001a.972.972 0 01-.689-.29 1.035 1.035 0 010-1.425.94.94 0 01.696-.283l5.05.001c.248 0 .497.083.69.276a.954.954 0 01.272.69l.001 5.052a.971.971 0 01-.29.689 1.028 1.028 0 01-1.419 0 .972.972 0 01-.29-.69V4.323l-3.567 3.63z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</div>
</ColorlibStepIcon>
</span>
<span
className="MuiStepLabel-labelContainer"
>
<WithStyles(ForwardRef(Typography))
className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
component="span"
display="block"
variant="body2"
>
<ForwardRef(Typography)
className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
component="span"
display="block"
variant="body2"
>
<span
className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiTypography-body2 MuiTypography-displayBlock"
>
<Blueprint3.Text
className="bp3-text-muted"
ellipsize={false}
tagName="div"
>
<div
className="bp3-text-muted"
/>
</Blueprint3.Text>
</span>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</span>
</span>
</ForwardRef(StepLabel)>
</WithStyles(ForwardRef(StepLabel))>
</div>
</ForwardRef(Step)>
</WithStyles(ForwardRef(Step))>
<WithStyles(ForwardRef(Step))
active={false}
alternativeLabel={true}
completed={false}
connector={
<WithStyles(WithStyles(ForwardRef(StepConnector)))
orientation="horizontal"
/>
}
disabled={true}
index={2}
key=".$"
last={true}
orientation="horizontal"
>
<ForwardRef(Step)
active={false}
alternativeLabel={true}
classes={
Object {
"alternativeLabel": "MuiStep-alternativeLabel",
"completed": "MuiStep-completed",
"horizontal": "MuiStep-horizontal",
"root": "MuiStep-root",
"vertical": "MuiStep-vertical",
}
}
completed={false}
connector={
<WithStyles(WithStyles(ForwardRef(StepConnector)))
orientation="horizontal"
/>
}
disabled={true}
index={2}
last={true}
orientation="horizontal"
>
<div
className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
>
<WithStyles(WithStyles(ForwardRef(StepConnector)))
active={false}
alternativeLabel={true}
completed={false}
disabled={true}
index={2}
orientation="horizontal"
>
<WithStyles(ForwardRef(StepConnector))
active={false}
alternativeLabel={true}
classes={
Object {
"active": "WithStyles(ForwardRef(StepConnector))-active-111",
"alternativeLabel": "WithStyles(ForwardRef(StepConnector))-alternativeLabel-110",
"completed": "WithStyles(ForwardRef(StepConnector))-completed-112",
"line": "WithStyles(ForwardRef(StepConnector))-line-113",
}
}
completed={false}
disabled={true}
index={2}
orientation="horizontal"
>
<ForwardRef(StepConnector)
active={false}
alternativeLabel={true}
classes={
Object {
"active": "MuiStepConnector-active WithStyles(ForwardRef(StepConnector))-active-111",
"alternativeLabel": "MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-110",
"completed": "MuiStepConnector-completed WithStyles(ForwardRef(StepConnector))-completed-112",
"disabled": "Mui-disabled",
"horizontal": "MuiStepConnector-horizontal",
"line": "MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-113",
"lineHorizontal": "MuiStepConnector-lineHorizontal",
"lineVertical": "MuiStepConnector-lineVertical",
"root": "MuiStepConnector-root",
"vertical": "MuiStepConnector-vertical",
}
}
completed={false}
disabled={true}
index={2}
orientation="horizontal"
>
<div
className="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-110 Mui-disabled"
>
<span
className="MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-113 MuiStepConnector-lineHorizontal"
/>
</div>
</ForwardRef(StepConnector)>
</WithStyles(ForwardRef(StepConnector))>
</WithStyles(WithStyles(ForwardRef(StepConnector)))>
<WithStyles(ForwardRef(StepLabel))
StepIconComponent={[Function]}
StepIconProps={
Object {
"isApplicationWindowSelected": false,
"isEntireScreenSelected": false,
}
}
active={false}
alternativeLabel={true}
className="makeStyles-stepLabelContent-104"
completed={false}
disabled={true}
expanded={false}
icon={3}
id="step-label-deskreen"
key=".0"
last={true}
orientation="horizontal"
>
<ForwardRef(StepLabel)
StepIconComponent={[Function]}
StepIconProps={
Object {
"isApplicationWindowSelected": false,
"isEntireScreenSelected": false,
}
}
active={false}
alternativeLabel={true}
className="makeStyles-stepLabelContent-104"
classes={
Object {
"active": "MuiStepLabel-active",
"alternativeLabel": "MuiStepLabel-alternativeLabel",
"completed": "MuiStepLabel-completed",
"disabled": "Mui-disabled",
"error": "Mui-error",
"horizontal": "MuiStepLabel-horizontal",
"iconContainer": "MuiStepLabel-iconContainer",
"label": "MuiStepLabel-label",
"labelContainer": "MuiStepLabel-labelContainer",
"root": "MuiStepLabel-root",
"vertical": "MuiStepLabel-vertical",
}
}
completed={false}
disabled={true}
expanded={false}
icon={3}
id="step-label-deskreen"
last={true}
orientation="horizontal"
>
<span
className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-104 Mui-disabled MuiStepLabel-alternativeLabel"
id="step-label-deskreen"
>
<span
className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
>
<ColorlibStepIcon
active={false}
completed={false}
error={false}
icon={3}
isApplicationWindowSelected={false}
isEntireScreenSelected={false}
>
<div
className="makeStyles-root-106"
>
<Blueprint3.Icon
color="#5C7080"
icon="confirm"
iconSize={25}
>
<span
className="bp3-icon bp3-icon-confirm"
icon="confirm"
>
<svg
data-icon="confirm"
fill="#5C7080"
height={25}
viewBox="0 0 20 20"
width={25}
>
<desc>
confirm
</desc>
<path
d="M9.71 5.29a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7a1.003 1.003 0 00-1.42-1.42L12 7.59l-2.29-2.3zm7.93 2.32c.23.75.36 1.56.36 2.39 0 4.42-3.58 8-8 8s-8-3.58-8-8a7.998 7.998 0 0111.8-7.04l1.46-1.46C13.73.56 11.93 0 10 0 4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10c0-1.4-.29-2.73-.81-3.95l-1.55 1.56z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</div>
</ColorlibStepIcon>
</span>
<span
className="MuiStepLabel-labelContainer"
>
<WithStyles(ForwardRef(Typography))
className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
component="span"
display="block"
variant="body2"
>
<ForwardRef(Typography)
className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
classes={
Object {
"alignCenter": "MuiTypography-alignCenter",
"alignJustify": "MuiTypography-alignJustify",
"alignLeft": "MuiTypography-alignLeft",
"alignRight": "MuiTypography-alignRight",
"body1": "MuiTypography-body1",
"body2": "MuiTypography-body2",
"button": "MuiTypography-button",
"caption": "MuiTypography-caption",
"colorError": "MuiTypography-colorError",
"colorInherit": "MuiTypography-colorInherit",
"colorPrimary": "MuiTypography-colorPrimary",
"colorSecondary": "MuiTypography-colorSecondary",
"colorTextPrimary": "MuiTypography-colorTextPrimary",
"colorTextSecondary": "MuiTypography-colorTextSecondary",
"displayBlock": "MuiTypography-displayBlock",
"displayInline": "MuiTypography-displayInline",
"gutterBottom": "MuiTypography-gutterBottom",
"h1": "MuiTypography-h1",
"h2": "MuiTypography-h2",
"h3": "MuiTypography-h3",
"h4": "MuiTypography-h4",
"h5": "MuiTypography-h5",
"h6": "MuiTypography-h6",
"noWrap": "MuiTypography-noWrap",
"overline": "MuiTypography-overline",
"paragraph": "MuiTypography-paragraph",
"root": "MuiTypography-root",
"srOnly": "MuiTypography-srOnly",
"subtitle1": "MuiTypography-subtitle1",
"subtitle2": "MuiTypography-subtitle2",
}
}
component="span"
display="block"
variant="body2"
>
<span
className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiTypography-body2 MuiTypography-displayBlock"
>
<Blueprint3.Text
className="bp3-text-muted"
ellipsize={false}
tagName="div"
>
<div
className="bp3-text-muted"
/>
</Blueprint3.Text>
</span>
</ForwardRef(Typography)>
</WithStyles(ForwardRef(Typography))>
</span>
</span>
</ForwardRef(StepLabel)>
</WithStyles(ForwardRef(StepLabel))>
</div>
</ForwardRef(Step)>
</WithStyles(ForwardRef(Step))>
</div>
</ForwardRef(Paper)>
</WithStyles(ForwardRef(Paper))>
</ForwardRef(Stepper)>
</WithStyles(ForwardRef(Stepper))>
</div>
</Col>
<Col
className="makeStyles-stepContent-103"
xs={12}
>
<div
className="col-xs-12 makeStyles-stepContent-103"
>
<div
id="intermediate-step-container"
style={
Object {
"width": "100%",
}
}
>
<IntermediateStep
activeStep={0}
handleBack={[Function]}
handleNext={[Function]}
handleNextApplicationWindow={[Function]}
handleNextEntireScreen={[Function]}
resetPendingConnectionDevice={[Function]}
resetUserAllowedConnection={[Function]}
steps={
Array [
"",
"",
"",
]
}
>
<Col
style={
Object {
"alignItems": "center",
"display": "flex",
"flexDirection": "column",
"height": "260px",
"justifyContent": "center",
"width": "100%",
}
}
xs={12}
>
<div
className="col-xs-12"
style={
Object {
"alignItems": "center",
"display": "flex",
"flexDirection": "column",
"height": "260px",
"justifyContent": "center",
"width": "100%",
}
}
>
<ScanQRStep>
<div
style={
Object {
"textAlign": "center",
}
}
>
<Blueprint3.Text
ellipsize={false}
tagName="div"
>
<div
className=""
>
<span
style={
Object {
"backgroundColor": "#00f99273",
"borderRadius": "20px",
"fontWeight": 900,
"paddingLeft": "8px",
"paddingRight": "8px",
}
}
/>
</div>
</Blueprint3.Text>
<Blueprint3.Text
className="bp3-text"
ellipsize={false}
tagName="div"
>
<div
className="bp3-text"
/>
</Blueprint3.Text>
</div>
<div>
<Blueprint3.Tooltip
content=""
hoverCloseDelay={0}
hoverOpenDelay={100}
minimal={false}
position="left"
transitionDuration={100}
>
<Blueprint3.Popover
autoFocus={false}
boundary="scrollParent"
canEscapeKeyClose={false}
captureDismiss={false}
content=""
defaultIsOpen={false}
disabled={false}
enforceFocus={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={0}
hoverOpenDelay={100}
inheritDarkTheme={true}
interactionKind="hover-target"
lazy={true}
minimal={false}
modifiers={
Object {
"arrow": Object {
"enabled": true,
},
}
}
openOnTargetFocus={true}
popoverClassName="bp3-tooltip"
position="left"
targetTagName="span"
transitionDuration={100}
usePortal={true}
wrapperTagName="span"
>
<Manager>
<span
className="bp3-popover-wrapper"
>
<Reference
innerRef={[Function]}
>
<InnerReference
innerRef={[Function]}
setReferenceNode={[Function]}
>
<Blueprint3.ResizeSensor
onResize={[Function]}
>
<span
className="bp3-popover-target"
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Blueprint3.Button
className="makeStyles-smallQRCode-114"
id="magnify-qr-code-button"
key=".0"
onClick={[Function]}
tabIndex={0}
>
<button
className="bp3-button makeStyles-smallQRCode-114"
id="magnify-qr-code-button"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
tabIndex={0}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<span
className="bp3-button-text"
key="text"
>
<QRCode
bgColor="rgba(0,0,0,0.0)"
fgColor="#000000"
imageSettings={
Object {
"height": 40,
"src": "http://127.0.0.1:3000/logo192.png",
"width": 40,
}
}
includeMargin={false}
level="H"
renderAs="svg"
size={128}
value="http://:3000/"
>
<QRCodeSVG
bgColor="rgba(0,0,0,0.0)"
fgColor="#000000"
imageSettings={
Object {
"height": 40,
"src": "http://127.0.0.1:3000/logo192.png",
"width": 40,
}
}
includeMargin={false}
level="H"
size={128}
value="http://:3000/"
>
<svg
height={128}
shapeRendering="crispEdges"
viewBox="0 0 25 25"
width={128}
>
<path
d="M0,0 h25v25H0z"
fill="rgba(0,0,0,0.0)"
/>
<path
d="M0 0h7v1H0zM8 0h1v1H8zM10 0h1v1H10zM12 0h1v1H12zM14 0h2v1H14zM18,0 h7v1H18zM0 1h1v1H0zM6 1h1v1H6zM13 1h1v1H13zM15 1h2v1H15zM18 1h1v1H18zM24,1 h1v1H24zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h3v1H8zM12 2h1v1H12zM14 2h2v1H14zM18 2h1v1H18zM20 2h3v1H20zM24,2 h1v1H24zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM9 3h4v1H9zM16 3h1v1H16zM18 3h1v1H18zM20 3h3v1H20zM24,3 h1v1H24zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM8 4h3v1H8zM15 4h1v1H15zM18 4h1v1H18zM20 4h3v1H20zM24,4 h1v1H24zM0 5h1v1H0zM6 5h1v1H6zM9 5h1v1H9zM11 5h1v1H11zM13 5h1v1H13zM18 5h1v1H18zM24,5 h1v1H24zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18,6 h7v1H18zM8 7h2v1H8zM12 7h4v1H12zM5 8h2v1H5zM10 8h5v1H10zM18 8h1v1H18zM20 8h1v1H20zM22 8h1v1H22zM24,8 h1v1H24zM1 9h1v1H1zM3 9h2v1H3zM7 9h2v1H7zM11 9h1v1H11zM13 9h1v1H13zM16 9h2v1H16zM20 9h4v1H20zM3 10h4v1H3zM11 10h4v1H11zM16 10h1v1H16zM18 10h4v1H18zM23,10 h2v1H23zM2 11h1v1H2zM8 11h3v1H8zM12 11h1v1H12zM14 11h3v1H14zM18 11h1v1H18zM21 11h1v1H21zM24,11 h1v1H24zM0 12h2v1H0zM6 12h1v1H6zM8 12h1v1H8zM10 12h3v1H10zM16 12h3v1H16zM24,12 h1v1H24zM0 13h1v1H0zM4 13h1v1H4zM7 13h1v1H7zM11 13h1v1H11zM14 13h1v1H14zM16 13h2v1H16zM23 13h1v1H23zM0 14h1v1H0zM6 14h3v1H6zM11 14h1v1H11zM13 14h2v1H13zM18 14h1v1H18zM20 14h2v1H20zM23,14 h2v1H23zM0 15h1v1H0zM2 15h1v1H2zM5 15h1v1H5zM8 15h4v1H8zM13 15h1v1H13zM15 15h1v1H15zM18 15h1v1H18zM22 15h1v1H22zM24,15 h1v1H24zM0 16h1v1H0zM2 16h1v1H2zM5 16h3v1H5zM10 16h1v1H10zM12 16h1v1H12zM14 16h1v1H14zM16 16h5v1H16zM22 16h1v1H22zM8 17h1v1H8zM10 17h2v1H10zM14 17h1v1H14zM16 17h1v1H16zM20 17h1v1H20zM22 17h1v1H22zM0 18h7v1H0zM14 18h3v1H14zM18 18h1v1H18zM20 18h2v1H20zM24,18 h1v1H24zM0 19h1v1H0zM6 19h1v1H6zM8 19h1v1H8zM10 19h2v1H10zM14 19h1v1H14zM16 19h1v1H16zM20 19h1v1H20zM23,19 h2v1H23zM0 20h1v1H0zM2 20h3v1H2zM6 20h1v1H6zM9 20h3v1H9zM15 20h9v1H15zM0 21h1v1H0zM2 21h3v1H2zM6 21h1v1H6zM12 21h4v1H12zM18 21h2v1H18zM21 21h1v1H21zM24,21 h1v1H24zM0 22h1v1H0zM2 22h3v1H2zM6 22h1v1H6zM9 22h1v1H9zM13 22h1v1H13zM16 22h2v1H16zM22 22h1v1H22zM24,22 h1v1H24zM0 23h1v1H0zM6 23h1v1H6zM10 23h1v1H10zM12 23h2v1H12zM16 23h1v1H16zM18 23h3v1H18zM24,23 h1v1H24zM0 24h7v1H0zM12 24h2v1H12zM15 24h4v1H15zM21 24h1v1H21zM24,24 h1v1H24z"
fill="#000000"
/>
<image
height={7.8125}
preserveAspectRatio="none"
width={7.8125}
x={8.59375}
xlinkHref="http://127.0.0.1:3000/logo192.png"
y={8.59375}
/>
</svg>
</QRCodeSVG>
</QRCode>
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</span>
</Blueprint3.ResizeSensor>
</InnerReference>
</Reference>
<Blueprint3.Overlay
autoFocus={false}
backdropClassName="bp3-popover-backdrop"
backdropProps={Object {}}
canEscapeKeyClose={false}
canOutsideClickClose={false}
enforceFocus={false}
hasBackdrop={false}
isOpen={false}
lazy={true}
onClose={[Function]}
transitionDuration={100}
transitionName="bp3-popover"
usePortal={true}
/>
</span>
</Manager>
</Blueprint3.Popover>
</Blueprint3.Tooltip>
</div>
<div
style={
Object {
"marginBottom": "10px",
}
}
>
<Blueprint3.Text
className="bp3-text-muted"
ellipsize={false}
tagName="div"
>
<div
className="bp3-text-muted"
>
:
</div>
</Blueprint3.Text>
</div>
<Blueprint3.Tooltip
content=""
hoverCloseDelay={0}
hoverOpenDelay={100}
minimal={false}
position="left"
transitionDuration={100}
>
<Blueprint3.Popover
autoFocus={false}
boundary="scrollParent"
canEscapeKeyClose={false}
captureDismiss={false}
content=""
defaultIsOpen={false}
disabled={false}
enforceFocus={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={0}
hoverOpenDelay={100}
inheritDarkTheme={true}
interactionKind="hover-target"
lazy={true}
minimal={false}
modifiers={
Object {
"arrow": Object {
"enabled": true,
},
}
}
openOnTargetFocus={true}
popoverClassName="bp3-tooltip"
position="left"
targetTagName="span"
transitionDuration={100}
usePortal={true}
wrapperTagName="span"
>
<Manager>
<span
className="bp3-popover-wrapper"
>
<Reference
innerRef={[Function]}
>
<InnerReference
innerRef={[Function]}
setReferenceNode={[Function]}
>
<Blueprint3.ResizeSensor
onResize={[Function]}
>
<span
className="bp3-popover-target"
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Blueprint3.Button
className=""
icon="duplicate"
intent="primary"
key=".0"
onClick={[Function]}
style={
Object {
"borderRadius": "100px",
}
}
tabIndex={0}
>
<button
className="bp3-button bp3-intent-primary"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
style={
Object {
"borderRadius": "100px",
}
}
tabIndex={0}
type="button"
>
<Blueprint3.Icon
icon="duplicate"
key="leftIcon"
>
<span
className="bp3-icon bp3-icon-duplicate"
icon="duplicate"
>
<svg
data-icon="duplicate"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
duplicate
</desc>
<path
d="M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
<span
className="bp3-button-text"
key="text"
>
http://:3000/
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</span>
</Blueprint3.ResizeSensor>
</InnerReference>
</Reference>
<Blueprint3.Overlay
autoFocus={false}
backdropClassName="bp3-popover-backdrop"
backdropProps={Object {}}
canEscapeKeyClose={false}
canOutsideClickClose={false}
enforceFocus={false}
hasBackdrop={false}
isOpen={false}
lazy={true}
onClose={[Function]}
transitionDuration={100}
transitionName="bp3-popover"
usePortal={true}
/>
</span>
</Manager>
</Blueprint3.Popover>
</Blueprint3.Tooltip>
<Blueprint3.Dialog
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="makeStyles-bigQRCodeDialogRoot-116"
id="bp3-qr-code-dialog-root"
isOpen={false}
onClose={[Function]}
style={
Object {
"position": "relative",
"top": "0px",
}
}
transitionDuration={0}
usePortal={false}
>
<Blueprint3.Overlay
autoFocus={true}
backdropProps={Object {}}
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="bp3-overlay-scroll-container"
enforceFocus={true}
hasBackdrop={true}
id="bp3-qr-code-dialog-root"
isOpen={false}
lazy={true}
onClose={[Function]}
style={
Object {
"position": "relative",
"top": "0px",
}
}
transitionDuration={0}
transitionName="bp3-overlay"
usePortal={false}
/>
</Blueprint3.Dialog>
</ScanQRStep>
<Blueprint3.Button
onClick={[Function]}
>
<button
className="bp3-button"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<span
className="bp3-button-text"
key="text"
>
Connect Test Device
</span>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
<Row
style={
Object {
"display": "none",
}
}
>
<div
className="row"
style={
Object {
"display": "none",
}
}
>
<Blueprint3.Button
icon="chevron-left"
intent="danger"
onClick={[Function]}
style={
Object {
"borderRadius": "100px",
"marginTop": "10px",
}
}
text=""
>
<button
className="bp3-button bp3-intent-danger"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
style={
Object {
"borderRadius": "100px",
"marginTop": "10px",
}
}
type="button"
>
<Blueprint3.Icon
icon="chevron-left"
key="leftIcon"
>
<span
className="bp3-icon bp3-icon-chevron-left"
icon="chevron-left"
>
<svg
data-icon="chevron-left"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
chevron-left
</desc>
<path
d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</div>
</Row>
</div>
</Col>
</IntermediateStep>
</div>
</div>
</Col>
</div>
</Row>
<AllowConnectionForDeviceAlert
device={null}
isOpen={false}
onCancel={[Function]}
onConfirm={[Function]}
>
<Blueprint3.Alert
canEscapeKeyCancel={false}
canOutsideClickCancel={false}
cancelButtonText=""
className="class-allow-device-to-connect-alert"
confirmButtonText=""
icon="feed"
intent="danger"
isOpen={false}
onCancel={[Function]}
onConfirm={[Function]}
transitionDuration={0}
usePortal={false}
>
<Blueprint3.Dialog
canEscapeKeyClose={false}
canOutsideClickClose={false}
className="bp3-alert class-allow-device-to-connect-alert"
isOpen={false}
onCancel={[Function]}
onClose={[Function]}
onConfirm={[Function]}
transitionDuration={0}
usePortal={false}
>
<Blueprint3.Overlay
autoFocus={true}
backdropProps={Object {}}
canEscapeKeyClose={false}
canOutsideClickClose={false}
className="bp3-overlay-scroll-container"
enforceFocus={true}
hasBackdrop={true}
isOpen={false}
lazy={true}
onCancel={[Function]}
onClose={[Function]}
onConfirm={[Function]}
transitionDuration={0}
transitionName="bp3-overlay"
usePortal={false}
/>
</Blueprint3.Dialog>
</Blueprint3.Alert>
</AllowConnectionForDeviceAlert>
<Blueprint3.Dialog
autoFocus={true}
canOutsideClickClose={true}
isOpen={false}
usePortal={true}
>
<Blueprint3.Overlay
autoFocus={true}
backdropProps={Object {}}
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="bp3-overlay-scroll-container"
enforceFocus={true}
hasBackdrop={true}
isOpen={false}
lazy={true}
transitionDuration={300}
transitionName="bp3-overlay"
usePortal={true}
/>
</Blueprint3.Dialog>
<Blueprint3.Dialog
autoFocus={true}
canOutsideClickClose={true}
isOpen={true}
usePortal={true}
>
<Blueprint3.Overlay
autoFocus={true}
backdropProps={Object {}}
canEscapeKeyClose={true}
canOutsideClickClose={true}
className="bp3-overlay-scroll-container"
enforceFocus={true}
hasBackdrop={true}
isOpen={true}
lazy={true}
transitionDuration={300}
transitionName="bp3-overlay"
usePortal={true}
>
<Blueprint3.Portal
container={
<body
class="bp3-overlay-open"
>
<div
class="react-toast-notifications__container css-1frfeuj-ToastContainer"
/>
<div
class="bp3-portal"
>
<div
class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
>
<div
class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
/>
<div
class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
>
<div
class="bp3-dialog"
>
<div
class="container"
>
<div
style="padding: 10px;"
>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
style="height: 0px;"
>
<div
class="react-reveal"
style="opacity: 1;"
>
<h1
class="bp3-heading"
>
Hello
</h1>
</div>
</div>
</div>
<div
class="row"
>
<div
class="col-xs"
>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<span
class="bp3-icon bp3-icon-translate"
icon="translate"
>
<svg
data-icon="translate"
fill="#8A9BA8"
height="50"
viewBox="0 0 20 20"
width="50"
>
<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="row center-xs"
style="margin-top: 20px;"
>
<h5
class="bp3-heading"
>
Language
</h5>
</div>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
class="bp3-html-select"
>
<select
style="border-radius: 50px; width: 120px;"
>
<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
class="col-xs"
>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<span
class="bp3-icon bp3-icon-style"
icon="style"
>
<svg
data-icon="style"
fill="#8A9BA8"
height="50"
viewBox="0 0 20 20"
width="50"
>
<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="row center-xs"
style="margin-top: 20px;"
>
<h5
class="bp3-heading"
/>
</div>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
class="bp3-control-group bp3-fill"
style="width: 120px;"
>
<button
class="bp3-button bp3-active"
id="light-theme-toggle-btn"
style="border-top-left-radius: 50px; border-bottom-left-radius: 50px;"
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>
</button>
<button
class="bp3-button"
id="dark-theme-toggle-btn"
style="border-top-right-radius: 50px; border-bottom-right-radius: 50px;"
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>
</button>
</div>
</div>
</div>
</div>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<button
class="bp3-button bp3-minimal"
style="border-radius: 50px;"
type="button"
>
<span
class="bp3-icon bp3-icon-chevron-right"
icon="chevron-right"
>
<svg
data-icon="chevron-right"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
chevron-right
</desc>
<path
d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</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"
>
<div
class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
/>
<div
class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
>
<div
class="bp3-dialog"
>
<div
class="container"
>
<div
style="padding: 10px;"
>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
style="height: 0px;"
>
<div
class="react-reveal"
style="opacity: 1;"
>
<h1
class="bp3-heading"
>
Hello
</h1>
</div>
</div>
</div>
<div
class="row"
>
<div
class="col-xs"
>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<span
class="bp3-icon bp3-icon-translate"
icon="translate"
>
<svg
data-icon="translate"
fill="#8A9BA8"
height="50"
viewBox="0 0 20 20"
width="50"
>
<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="row center-xs"
style="margin-top: 20px;"
>
<h5
class="bp3-heading"
>
Language
</h5>
</div>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
class="bp3-html-select"
>
<select
style="border-radius: 50px; width: 120px;"
>
<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
class="col-xs"
>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<span
class="bp3-icon bp3-icon-style"
icon="style"
>
<svg
data-icon="style"
fill="#8A9BA8"
height="50"
viewBox="0 0 20 20"
width="50"
>
<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="row center-xs"
style="margin-top: 20px;"
>
<h5
class="bp3-heading"
/>
</div>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
class="bp3-control-group bp3-fill"
style="width: 120px;"
>
<button
class="bp3-button bp3-active"
id="light-theme-toggle-btn"
style="border-top-left-radius: 50px; border-bottom-left-radius: 50px;"
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>
</button>
<button
class="bp3-button"
id="dark-theme-toggle-btn"
style="border-top-right-radius: 50px; border-bottom-right-radius: 50px;"
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>
</button>
</div>
</div>
</div>
</div>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<button
class="bp3-button bp3-minimal"
style="border-radius: 50px;"
type="button"
>
<span
class="bp3-icon bp3-icon-chevron-right"
icon="chevron-right"
>
<svg
data-icon="chevron-right"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
chevron-right
</desc>
<path
d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
}
>
<TransitionGroup
appear={true}
childFactory={[Function]}
className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
component="div"
onKeyDown={[Function]}
>
<div
className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
onKeyDown={[Function]}
>
<CSSTransition
addEndListener={[Function]}
classNames="bp3-overlay"
in={true}
key=".$__backdrop"
onExited={[Function]}
timeout={300}
>
<Transition
addEndListener={[Function]}
appear={false}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={300}
unmountOnExit={false}
>
<div
className="bp3-overlay-backdrop"
onMouseDown={[Function]}
tabIndex={0}
/>
</Transition>
</CSSTransition>
<CSSTransition
addEndListener={[Function]}
classNames="bp3-overlay"
in={true}
key=".$.0"
onExited={[Function]}
timeout={300}
>
<Transition
addEndListener={[Function]}
appear={false}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={300}
unmountOnExit={false}
>
<div
className="bp3-dialog-container bp3-overlay-content"
tabIndex={0}
>
<div
className="bp3-dialog"
>
<Grid>
<div
className="container"
>
<div
style={
Object {
"padding": "10px",
}
}
>
<Row
center="xs"
style={
Object {
"marginTop": "10px",
}
}
>
<div
className="row center-xs"
style={
Object {
"marginTop": "10px",
}
}
>
<Fade
collapse={true}
duration={700}
opposite={true}
when={true}
>
<RevealBase
collapse={true}
fraction={0.2}
inEffect={
Object {
"count": 1,
"delay": 0,
"duration": 700,
"forever": undefined,
"make": [Function],
"reverse": undefined,
"style": Object {
"animationFillMode": "both",
},
}
}
opposite={true}
outEffect={
Object {
"count": 1,
"delay": 0,
"duration": 700,
"forever": undefined,
"make": [Function],
"reverse": undefined,
"style": Object {
"animationFillMode": "both",
},
}
}
refProp="ref"
when={true}
>
<div
style={
Object {
"height": NaN,
}
}
>
<div
className="react-reveal"
style={
Object {
"opacity": 1,
}
}
>
<Component>
<h1
className="bp3-heading"
>
Hello
</h1>
</Component>
</div>
</div>
</RevealBase>
</Fade>
</div>
</Row>
<Row>
<div
className="row"
>
<Col
xs={true}
>
<div
className="col-xs"
>
<Row
center="xs"
style={
Object {
"marginTop": "20px",
}
}
>
<div
className="row center-xs"
style={
Object {
"marginTop": "20px",
}
}
>
<Blueprint3.Icon
color="#8A9BA8"
icon="translate"
iconSize={50}
>
<span
className="bp3-icon bp3-icon-translate"
icon="translate"
>
<svg
data-icon="translate"
fill="#8A9BA8"
height={50}
viewBox="0 0 20 20"
width={50}
>
<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>
</Row>
<Row
center="xs"
style={
Object {
"marginTop": "20px",
}
}
>
<div
className="row center-xs"
style={
Object {
"marginTop": "20px",
}
}
>
<Component>
<h5
className="bp3-heading"
>
Language
</h5>
</Component>
</div>
</Row>
<Row
center="xs"
style={
Object {
"marginTop": "10px",
}
}
>
<div
className="row center-xs"
style={
Object {
"marginTop": "10px",
}
}
>
<LanguageSelector>
<HTMLSelect
onChange={[Function]}
options={
Array [
"English",
"Русский",
"Українська",
]
}
style={
Object {
"borderRadius": "50px",
"width": "120px",
}
}
>
<div
className="bp3-html-select"
>
<select
multiple={false}
onChange={[Function]}
style={
Object {
"borderRadius": "50px",
"width": "120px",
}
}
>
<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>
</LanguageSelector>
</div>
</Row>
</div>
</Col>
<Col
xs={true}
>
<div
className="col-xs"
>
<Row
center="xs"
style={
Object {
"marginTop": "20px",
}
}
>
<div
className="row center-xs"
style={
Object {
"marginTop": "20px",
}
}
>
<Blueprint3.Icon
color="#8A9BA8"
icon="style"
iconSize={50}
>
<span
className="bp3-icon bp3-icon-style"
icon="style"
>
<svg
data-icon="style"
fill="#8A9BA8"
height={50}
viewBox="0 0 20 20"
width={50}
>
<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>
</Row>
<Row
center="xs"
style={
Object {
"marginTop": "20px",
}
}
>
<div
className="row center-xs"
style={
Object {
"marginTop": "20px",
}
}
>
<Component>
<h5
className="bp3-heading"
/>
</Component>
</div>
</Row>
<Row
center="xs"
style={
Object {
"marginTop": "10px",
}
}
>
<div
className="row center-xs"
style={
Object {
"marginTop": "10px",
}
}
>
<ToggleThemeBtnGroup>
<Blueprint3.ControlGroup
fill={true}
style={
Object {
"width": "120px",
}
}
vertical={false}
>
<div
className="bp3-control-group bp3-fill"
style={
Object {
"width": "120px",
}
}
>
<Blueprint3.Button
active={true}
icon="flash"
id="light-theme-toggle-btn"
onClick={[Function]}
style={
Object {
"borderBottomLeftRadius": "50px",
"borderTopLeftRadius": "50px",
}
}
>
<button
className="bp3-button bp3-active"
id="light-theme-toggle-btn"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
style={
Object {
"borderBottomLeftRadius": "50px",
"borderTopLeftRadius": "50px",
}
}
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>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
<Blueprint3.Button
active={false}
icon="moon"
id="dark-theme-toggle-btn"
onClick={[Function]}
style={
Object {
"borderBottomRightRadius": "50px",
"borderTopRightRadius": "50px",
}
}
>
<button
className="bp3-button"
id="dark-theme-toggle-btn"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
style={
Object {
"borderBottomRightRadius": "50px",
"borderTopRightRadius": "50px",
}
}
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>
<Blueprint3.Icon
key="rightIcon"
/>
</button>
</Blueprint3.Button>
</div>
</Blueprint3.ControlGroup>
</ToggleThemeBtnGroup>
</div>
</Row>
</div>
</Col>
</div>
</Row>
<Row
center="xs"
style={
Object {
"marginTop": "20px",
}
}
>
<div
className="row center-xs"
style={
Object {
"marginTop": "20px",
}
}
>
<Blueprint3.Button
minimal={true}
onClick={[Function]}
rightIcon="chevron-right"
style={
Object {
"borderRadius": "50px",
}
}
>
<button
className="bp3-button bp3-minimal"
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
style={
Object {
"borderRadius": "50px",
}
}
type="button"
>
<Blueprint3.Icon
key="leftIcon"
/>
<Blueprint3.Icon
icon="chevron-right"
key="rightIcon"
>
<span
className="bp3-icon bp3-icon-chevron-right"
icon="chevron-right"
>
<svg
data-icon="chevron-right"
height={16}
viewBox="0 0 16 16"
width={16}
>
<desc>
chevron-right
</desc>
<path
d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
fillRule="evenodd"
key="0"
/>
</svg>
</span>
</Blueprint3.Icon>
</button>
</Blueprint3.Button>
</div>
</Row>
</div>
</div>
</Grid>
</div>
</div>
</Transition>
</CSSTransition>
</div>
</TransitionGroup>
</Portal>
</Blueprint3.Portal>
</Blueprint3.Overlay>
</Blueprint3.Dialog>
</ForwardRef>
</div>
<Portal
containerInfo={
<body
class="bp3-overlay-open"
>
<div
class="react-toast-notifications__container css-1frfeuj-ToastContainer"
/>
<div
class="bp3-portal"
>
<div
class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
>
<div
class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
/>
<div
class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
tabindex="0"
>
<div
class="bp3-dialog"
>
<div
class="container"
>
<div
style="padding: 10px;"
>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
style="height: 0px;"
>
<div
class="react-reveal"
style="opacity: 1;"
>
<h1
class="bp3-heading"
>
Hello
</h1>
</div>
</div>
</div>
<div
class="row"
>
<div
class="col-xs"
>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<span
class="bp3-icon bp3-icon-translate"
icon="translate"
>
<svg
data-icon="translate"
fill="#8A9BA8"
height="50"
viewBox="0 0 20 20"
width="50"
>
<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="row center-xs"
style="margin-top: 20px;"
>
<h5
class="bp3-heading"
>
Language
</h5>
</div>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
class="bp3-html-select"
>
<select
style="border-radius: 50px; width: 120px;"
>
<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
class="col-xs"
>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<span
class="bp3-icon bp3-icon-style"
icon="style"
>
<svg
data-icon="style"
fill="#8A9BA8"
height="50"
viewBox="0 0 20 20"
width="50"
>
<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="row center-xs"
style="margin-top: 20px;"
>
<h5
class="bp3-heading"
/>
</div>
<div
class="row center-xs"
style="margin-top: 10px;"
>
<div
class="bp3-control-group bp3-fill"
style="width: 120px;"
>
<button
class="bp3-button bp3-active"
id="light-theme-toggle-btn"
style="border-top-left-radius: 50px; border-bottom-left-radius: 50px;"
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>
</button>
<button
class="bp3-button"
id="dark-theme-toggle-btn"
style="border-top-right-radius: 50px; border-bottom-right-radius: 50px;"
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>
</button>
</div>
</div>
</div>
</div>
<div
class="row center-xs"
style="margin-top: 20px;"
>
<button
class="bp3-button bp3-minimal"
style="border-radius: 50px;"
type="button"
>
<span
class="bp3-icon bp3-icon-chevron-right"
icon="chevron-right"
>
<svg
data-icon="chevron-right"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
chevron-right
</desc>
<path
d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
fill-rule="evenodd"
/>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
}
>
<ToastContainer
hasToasts={false}
placement="top-center"
>
<EmotionCssPropInternal
__EMOTION_LABEL_PLEASE_DO_NOT_USE__="ToastContainer"
__EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
className="react-toast-notifications__container"
css={
Object {
"boxSizing": "border-box",
"left": "50%",
"maxHeight": "100%",
"overflowX": "hidden",
"overflowY": "auto",
"padding": 8,
"pointerEvents": "none",
"position": "fixed",
"top": 0,
"transform": "translateX(-50%)",
"zIndex": 1000,
}
}
>
<div
className="react-toast-notifications__container css-1frfeuj-ToastContainer"
>
<TransitionGroup
childFactory={[Function]}
component={null}
/>
</div>
</EmotionCssPropInternal>
</ToastContainer>
</Portal>
</ToastProvider>
</HomePage>
</Router>
</BrowserRouter>
</SettingsProvider>
</Suspense>
`;
Reference in New Issue View Git Blame Copy Permalink