src/components/layout/__snapshots__/CredentialsLayout.stories.storyshot
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots User/CredentialsLayout Change Password 1`] = `
Array [
<div
className="ui container"
style={
Object {
"display": "flex",
"flexDirection": "column",
"minHeight": "100vh",
}
}
>
<nav
className="ui secondary menu"
>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
>
<div
aria-expanded={false}
className="ui top right pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
style={
Object {
"display": "inline-block",
"height": "40xp",
"marginRight": "10px",
"verticalAlign": "middle",
"width": "40px",
}
}
>
<svg
seed="user-1"
viewBox="-40 0 1060 1120"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M833.15,369a58.35,58.35,0,0,0-35.89-54.16,58.56,58.56,0,0,0,25.82-48.77c0-27.77-19-51-44.47-56.88a59.13,59.13,0,0,0,7.51-28.9C786.12,148.1,760.55,122,729,122a55.89,55.89,0,0,0-24.2,5.49,58.35,58.35,0,0,0,.67-8.92c0-32.21-25.57-58.33-57.12-58.33a56.49,56.49,0,0,0-43.76,20.86c-1.61-30.74-26.53-55.17-57-55.17A56.9,56.9,0,0,0,497.6,56a56.93,56.93,0,0,0-50-30.07c-30.5,0-55.42,24.43-57,55.17a56.53,56.53,0,0,0-43.77-20.86c-31.53,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-11.51,10.31,545.36,10.93,534.18.55,28.2-3.57,50-28.11,50-57.87a58.87,58.87,0,0,0-14.61-39A58.4,58.4,0,0,0,833.15,369ZM270.81,513.54c-.93-.52-1.89-1-2.85-1.41C268.93,511.56,270.81,513.54,270.81,513.54Z"
fill="#FEDC58"
/>
<path
d="M470,505.43a51,51,0,0,1-85.38-36.67,51.1,51.1,0,0,1-63.44-66.59,51.18,51.18,0,0,1-32.54-87.48,51.32,51.32,0,0,1-1.26-93.62A51.42,51.42,0,0,1,327,136.89h.16a51.55,51.55,0,0,1,50-63.89,53,53,0,0,1,5.66.31,56.13,56.13,0,0,0-36-13.09c-31.54,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-5.61,5,123.81,7.75,256.66,8A51.14,51.14,0,0,1,470,505.43Z"
fill="#EDBF2E"
/>
<path
d="M741.2,386l-35,78.16,39.47,58.61c12.24-.91,18.61-2,17.31-3.17,28.2-3.57,50-28.11,50-57.87a60.75,60.75,0,0,0-.8-9.7C792.18,391.39,741.2,386,741.2,386Z"
fill="#EDBF2E"
/>
<path
d="M833.15,369a58.35,58.35,0,0,0-35.89-54.16,58.56,58.56,0,0,0,25.82-48.77c0-27.77-19-51-44.47-56.88a59.13,59.13,0,0,0,7.51-28.9C786.12,148.1,760.55,122,729,122a55.89,55.89,0,0,0-24.2,5.49,58.35,58.35,0,0,0,.67-8.92c0-32.21-25.57-58.33-57.12-58.33a56.49,56.49,0,0,0-43.76,20.86c-1.61-30.74-26.53-55.17-57-55.17A56.9,56.9,0,0,0,497.6,56a56.93,56.93,0,0,0-50-30.07c-30.5,0-55.42,24.43-57,55.17a56.53,56.53,0,0,0-43.77-20.86c-31.53,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-11.51,10.31,545.36,10.93,534.18.55,28.2-3.57,50-28.11,50-57.87a58.87,58.87,0,0,0-14.61-39A58.4,58.4,0,0,0,833.15,369Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M233.25,495C239.168,329.068 351.68,233.25 499,233.25C646.32,233.25 766.75,346.746 766.75,494.066C766.768,504.077 757.643,676.267 760.561,720.218C767.462,824.156 911.469,848.664 959.478,846.601C983.952,845.547 1002.67,866.735 1005.14,887.918C1007.65,909.451 993.383,930.981 951.307,929.164C764.522,921.101 711.947,816.61 700.846,823.351C675.489,838.731 756.698,912.706 809.101,930.901C870.832,952.34 804.307,1016.61 732.282,994.42C630.025,962.93 570.47,832.435 540.674,867.647C522.173,889.51 588.95,963.9 613.008,980.54C659.672,1012.81 606.157,1067.14 542.546,1028.63C444.848,969.51 441.595,876.876 417.22,883.656C393.533,890.235 402.013,912.001 322.956,967.61C243.903,1023.23 145.768,1035.81 127.011,1005.2C108.255,974.58 153.509,950.43 192.073,936.176C230.633,921.922 297.117,897.772 296.4,866.197C295.679,834.622 261.534,859.306 261.534,859.306C180.189,934.685 -48.726,938.58 -24.565,868.222C-12.404,832.814 12.457,834.289 47.113,835.764C81.308,837.218 125.041,838.676 175.502,804.689C214.699,778.293 233.39,709.516 234.6,637.523C235.063,609.971 230.808,563.466 233.25,495Z"
fill="#9E55A1"
/>
<path
d="M93.223,837.942C93.223,837.942 164.984,815.38 176.782,807.434C258.919,752.122 233.698,570.283 232.311,506.052C232.268,504.04 232.247,502.021 232.25,500C232.25,352.68 351.68,233.25 499,233.25C564.366,233.25 624.241,256.762 670.614,295.778C666.976,296.884 662.537,297.109 657.186,296.28C594.447,286.557 522.565,269.906 406.78,343.45C290.995,416.994 317.087,570.339 268.191,713.318C219.375,856.063 93.223,837.942 93.223,837.942Z"
fill="#893E97"
/>
<g
fill="#893E97"
transform="translate(0 -70)"
>
<path
d="M195.985,959.764C194.683,949.693 200.359,938.306 211.077,931.447C216.869,927.739 223.213,925.943 229.157,925.943C236.396,925.943 243.041,928.61 247.353,933.73C232.703,944.085 215.105,952.764 195.985,959.764Z"
/>
<path
d="M148.274,956.968C138.723,956.968 130.837,952.118 129.79,945.039C128.59,936.914 136.864,928.922 148.274,927.201C149.746,926.981 151.201,926.872 152.623,926.872C162.174,926.872 170.056,931.726 171.103,938.806C172.303,946.935 164.029,954.918 152.619,956.639C151.147,956.86 149.692,956.968 148.274,956.968Z"
/>
<path
d="M76.501,981.468C76.489,981.393 76.476,981.318 76.468,981.243C75.264,973.114 83.542,965.131 94.948,963.406C96.42,963.185 97.875,963.076 99.293,963.076C108.849,963.076 116.73,967.931 117.777,975.006C117.947,976.147 117.93,977.285 117.74,978.401C103.692,980.206 89.808,981.231 76.501,981.468Z"
/>
<path
d="M37.376,963.893C35.69,963.893 33.967,963.751 32.228,963.464C18.364,961.147 8.624,950.139 10.466,938.876C12.074,929.031 22.009,922.247 33.745,922.247C35.431,922.247 37.154,922.389 38.898,922.681C52.757,924.993 62.502,936.006 60.659,947.264C59.047,957.11 49.113,963.893 37.376,963.893Z"
/>
<path
d="M172.558,1084.48C172.336,1083.9 172.142,1083.31 171.977,1082.7C169.034,1071.68 177.641,1059.74 191.204,1056.04C193.941,1055.3 196.67,1054.94 199.308,1054.94C209.741,1054.94 218.74,1060.5 221.094,1069.29C221.845,1072.1 221.845,1074.96 221.206,1077.74C203.455,1082.23 186.855,1084.47 172.558,1084.48Z"
/>
<path
d="M464.581,1015.21C454.04,998.76 446.661,983.472 440.577,971.493C440.903,971.214 441.241,970.939 441.595,970.68C444.642,968.426 448.249,967.356 452.008,967.356C459.498,967.356 467.594,971.605 473.118,979.235C481.404,990.697 480.736,1005.45 471.622,1012.19C469.503,1013.76 467.108,1014.75 464.581,1015.21Z"
/>
<path
d="M536.976,1054.38C531.35,1054.38 525.278,1052.41 519.943,1048.43C508.64,1040 504.913,1025.71 511.62,1016.53C515.161,1011.69 520.9,1009.23 527.194,1009.23C532.825,1009.23 538.897,1011.19 544.232,1015.18C555.535,1023.61 559.258,1037.89 552.551,1047.07C549.009,1051.92 543.271,1054.38 536.976,1054.38Z"
/>
<path
d="M579.634,1104.61C568.215,1103.53 555.593,1099.53 542.546,1091.63C539.536,1089.81 536.605,1087.96 533.769,1086.07C534.227,1085.11 534.775,1084.18 535.418,1083.29C538.959,1078.45 544.702,1075.99 550.992,1075.99C556.623,1075.99 562.691,1077.95 568.03,1081.94C575.978,1087.87 580.174,1096.69 579.634,1104.61Z"
/>
<path
d="M614.661,974.493C602.117,961.726 590.945,949.935 581.048,941.03C581.559,939.806 582.21,938.635 583.014,937.535C586.551,932.689 592.293,930.231 598.584,930.231C604.215,930.231 610.283,932.197 615.621,936.18C626.925,944.614 630.647,958.893 623.94,968.076C621.632,971.239 618.383,973.385 614.661,974.493Z"
/>
<path
d="M676.409,990.985C671.062,990.985 664.594,988.705 658.695,984.301C648.27,976.522 643.583,965.068 648.225,958.714C650.24,955.955 653.682,954.61 657.784,954.61C663.135,954.61 669.603,956.893 675.502,961.293C685.931,969.072 690.614,980.531 685.972,986.885C683.957,989.643 680.514,990.985 676.409,990.985Z"
/>
<path
d="M707.474,1047.58C693.17,1040.63 679.814,1031.96 667.348,1022.44C667.715,1021.63 668.164,1020.85 668.704,1020.11C671.536,1016.24 676.219,1014.3 681.504,1014.3C686.838,1014.3 692.791,1016.27 698.08,1020.22C708.175,1027.75 712.186,1039.73 707.474,1047.58Z"
/>
<path
d="M760.396,1047.68C757.036,1047.68 753.475,1047.07 749.938,1045.77C737.633,1041.27 730.307,1030.24 733.572,1021.12C735.897,1014.63 742.975,1010.86 751.302,1010.86C754.662,1010.86 758.224,1011.47 761.761,1012.77C774.061,1017.27 781.391,1028.31 778.126,1037.42C775.797,1043.91 768.723,1047.68 760.396,1047.68Z"
/>
<path
d="M779.676,930.235C775.686,930.235 771.419,929.497 767.173,927.943C752.988,922.755 744.406,910.422 747.996,900.397C750.511,893.372 758.335,889.347 767.668,889.347C771.658,889.347 775.925,890.081 780.175,891.635C794.351,896.822 802.934,909.156 799.343,919.185C796.829,926.205 789.009,930.235 779.676,930.235Z"
/>
<path
d="M856.251,977.876C839.824,973.356 825.058,968.051 811.772,962.297C811.912,961.901 812.069,961.51 812.246,961.122C814.847,955.46 821.121,952.364 828.426,952.364C832.466,952.364 836.819,953.31 841.044,955.297C851.42,960.168 857.571,969.685 856.251,977.876Z"
/>
<path
d="M908.122,953.364C907.314,953.364 906.498,953.331 905.673,953.268C892.627,952.276 882.634,943.635 883.355,933.964C884.031,924.914 893.867,918.168 905.834,918.168C906.642,918.168 907.458,918.201 908.283,918.264C921.33,919.255 931.322,927.897 930.605,937.564C929.929,946.618 920.089,953.364 908.122,953.364Z"
/>
<path
d="M956.188,992.272C954.605,992.272 952.977,992.239 951.307,992.164C944.345,991.864 937.547,991.426 930.951,990.868C930.675,989.614 930.576,988.322 930.675,987.014C931.347,977.96 941.183,971.218 953.15,971.218C953.958,971.218 954.774,971.247 955.599,971.31C968.134,972.264 977.851,980.28 977.954,989.476C971.857,991.268 964.635,992.272 956.188,992.272Z"
/>
<path
d="M264.498,1039.8C258.966,1039.8 254.147,1037.74 251.463,1033.65C246.331,1025.85 250.948,1013.63 261.777,1006.35C266.946,1002.88 272.598,1001.16 277.648,1001.16C283.18,1001.16 287.995,1003.22 290.678,1007.3C295.811,1015.1 291.194,1027.33 280.364,1034.61C275.199,1038.08 269.548,1039.8 264.498,1039.8Z"
/>
<path
d="M330.458,1025.25C325.755,1017.44 330.397,1005.51 341.036,998.364C346.201,994.889 351.849,993.168 356.903,993.168C360.613,993.168 364.006,994.097 366.644,995.943C357.509,1004.37 345.806,1014.09 330.458,1025.25Z"
/>
<path
d="M366.578,974.689C364.245,974.689 362.01,974.122 360.015,972.926C352.043,968.151 350.959,955.11 357.595,943.805C362.571,935.326 370.473,930.231 377.477,930.231C379.815,930.231 382.049,930.797 384.04,931.993C392.012,936.768 393.096,949.81 386.464,961.114C381.488,969.593 373.582,974.689 366.578,974.689Z"
/>
</g>
<path
d="M233.25,495C239.168,329.068 351.68,233.25 499,233.25C646.32,233.25 766.75,346.746 766.75,494.066C766.768,504.077 757.643,676.267 760.561,720.218C767.462,824.156 911.469,848.664 959.478,846.601C983.952,845.547 1002.67,866.735 1005.14,887.918C1007.65,909.451 993.383,930.981 951.307,929.164C764.522,921.101 711.947,816.61 700.846,823.351C675.489,838.731 756.698,912.706 809.101,930.901C870.832,952.34 804.307,1016.61 732.282,994.42C630.025,962.93 570.47,832.435 540.674,867.647C522.173,889.51 588.95,963.9 613.008,980.54C659.672,1012.81 606.157,1067.14 542.546,1028.63C444.848,969.51 441.595,876.876 417.22,883.656C393.533,890.235 402.013,912.001 322.956,967.61C243.903,1023.23 145.768,1035.81 127.011,1005.2C108.255,974.58 153.509,950.43 192.073,936.176C230.633,921.922 297.117,897.772 296.4,866.197C295.679,834.622 261.534,859.306 261.534,859.306C180.189,934.685 -48.726,938.58 -24.565,868.222C-12.404,832.814 12.457,834.289 47.113,835.764C81.308,837.218 125.041,838.676 175.502,804.689C214.699,778.293 233.39,709.516 234.6,637.523C235.063,609.971 230.808,563.466 233.25,495Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M296.49,572.61V559.68a49.6,49.6,0,0,1,1.94-25.32,46,46,0,0,1,3.51-7.65C305.29,518,314.29,511,323.29,508c14-4,31-2,42,9,14,15,12,37,12.45,55.62"
fill="none"
stroke="#592d3d"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M623.31,573c-2.34-26.62,1.66-63.62,36.13-67.17a45,45,0,0,1,8.12,0A43.68,43.68,0,0,1,690,514.41c18,15,14,39,13.95,58.63"
fill="none"
stroke="#592d3d"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="#592d3d"
/>
<path
d="M495,643c-16.95-1-31.73,6.75-36.65,18.22a56.86,56.86,0,0,0,65.14,12.53A55.39,55.39,0,0,0,530,670.2C529.08,656.09,514.06,644.18,495,643Z"
fill="#f28195"
/>
<path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="6px"
/>
<path
d="M478.12,632.46c.45-.11.63-.16.92-.21l.75-.14c.49-.09,1-.14,1.46-.18a21.54,21.54,0,0,1,2.89-.1,25,25,0,0,1,5.79.81,21.4,21.4,0,0,1,10.35,6.1,20.18,20.18,0,0,1,5.08,10.16A17.27,17.27,0,0,1,504,659.25c-2.07-2.93-3.66-5.56-5.32-7.76a28.41,28.41,0,0,0-2.45-3,14.06,14.06,0,0,0-2.7-2.16,15.48,15.48,0,0,0-6.11-2.09A29.5,29.5,0,0,0,484,644c-.59,0-1.18,0-1.76.05l-.85.06-.39,0c-.1,0-.3,0-.23,0Z"
fill="#592d3d"
/>
<path
d="M558.42,406.88c-12.87,24-60,37.45-63.83,31.42-4.3-6.73,37.85-55.32,13.9-106.14"
fill="#893E97"
/>
<path
d="M500.15,221.81C369,221.81,247.79,328.25,226,457c0,0,201.33,15.23,274.66-66.75-4.65,22.65-17.72,39.87-15.51,43.33,3.08,4.84,40.92-5.92,51.25-25.22l-3.66-5.48C582.65,421,680.23,443.46,746,375.26,702.52,285,604.61,221.81,500.15,221.81Z"
fill="#FEDC58"
/>
<path
d="M331.52,454.81a51.09,51.09,0,0,1-10.35-52.64,51.12,51.12,0,0,1-47.23-58.35c-24.09,33.69-41,72.3-48,113.18A671.08,671.08,0,0,0,331.52,454.81Z"
fill="#EDBF2E"
/>
<path
d="M739.66,389.6C665,447,579.07,424.7,533.51,405.69c-10.14,17.94-45.26,27.89-48.15,23.36-2-3.08,8.82-17.65,13.78-37.16-74.28,80.27-259.85,72-259.85,72"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M280.92,140.17a53.59,53.59,0,0,0-20.26,5A45.83,45.83,0,0,0,245,157a18.94,18.94,0,0,0-1.53,1.92c-.48.66-1,1.28-1.46,2a43.23,43.23,0,0,0-2.56,4.23,52.32,52.32,0,0,0-3.9,9.18,62.77,62.77,0,0,0-2.29,20.8A36.91,36.91,0,0,1,229.42,173l.53-2.86.29-1.44c.11-.47.27-.93.41-1.4.28-.94.56-1.88.87-2.81s.76-1.8,1.14-2.71a43.25,43.25,0,0,1,2.76-5.21c.51-.85,1.14-1.61,1.7-2.42a24.27,24.27,0,0,1,1.82-2.33,39.88,39.88,0,0,1,19.58-12.56A34.18,34.18,0,0,1,280.92,140.17Z"
fill="#ffffff"
/>
<path
d="M358.88,77.15a62.84,62.84,0,0,0-18,2,52.26,52.26,0,0,0-15.47,7.06A51.64,51.64,0,0,0,313.09,98c-.84,1.18-1.8,2.31-2.53,3.58l-1.21,1.88c-.43.62-.71,1.3-1.09,2a73.25,73.25,0,0,0-4.1,8.38,28.54,28.54,0,0,1,.39-9.7c.17-.8.27-1.63.52-2.42l.74-2.36a31.32,31.32,0,0,1,1.91-4.61A39,39,0,0,1,321,79.59,39.38,39.38,0,0,1,339.89,73,32.35,32.35,0,0,1,358.88,77.15Z"
fill="#ffffff"
/>
<path
d="M603.1,452.29a320.74,320.74,0,0,1,33.51-6.66L634,446a150.31,150.31,0,0,1,39.75-.48l-2.66-.36c3.28.45,6.54,1,9.82,1.41l-2.66-.35a222.52,222.52,0,0,1,29.48,6.1c5,1.4,11.11-1.72,12.3-7a10.19,10.19,0,0,0-7-12.3,239.34,239.34,0,0,0-34.58-6.78l2.65.36a142.93,142.93,0,0,0-33.43-1.95,236.67,236.67,0,0,0-33.1,4.54c-5.61,1.14-11.19,2.44-16.76,3.81-5.08,1.25-8.61,7.26-7,12.3a10.21,10.21,0,0,0,12.3,7Z"
fill="#592d3d"
/>
<path
d="M261.26,502.22l14.13-1.48,33.67-3.52L350,492.93l35.18-3.69c5.72-.59,11.44-1.17,17.16-1.79l.24,0c2.73-.28,5.07-.92,7.07-2.93a10,10,0,0,0,0-14.14c-1.83-1.69-4.48-3.2-7.07-2.93l-14.13,1.48-33.67,3.53-41,4.29-35.18,3.68c-5.72.6-11.44,1.18-17.16,1.8l-.24,0c-2.73.29-5.07.93-7.07,2.93a10,10,0,0,0,0,14.15c1.83,1.68,4.48,3.2,7.07,2.92Z"
fill="#592d3d"
/>
<g
style={
Object {
"transformOrigin": "center",
}
}
transform="scale(0)"
>
<path
d="M765.63,495.43s.3-2.94.8-8.24C759.75,345.82,643,233.25,500,233.25c-147.32,0-266.75,119.43-266.75,266.75,0,7.28.31,14.49.89,21.63,12.11-39.32,161.32-77.95,298.44-133.08C631.75,452.24,765.63,495.43,765.63,495.43Z"
opacity={0.15}
/>
<path
d="M747.94,163.66l0,0C684.65,74.76,266,93.83,204.16,155.69c-66.94,66.94,29.18,351,29.18,351,0-41.1,160.33-82.31,303.37-139.83,99.17,63.69,228.92,108.54,228.92,108.54S793.59,209.32,747.94,163.66Z"
fill="#FFFFFF"
/>
<path
d="M610.06,159.09c-36.6-4-184.31-1.44-322.45,25.65A481,481,0,0,0,235,197.59c-4.25,1.37-8.49,2.76-12.62,4.33s-8.24,3.18-12.18,5a112.44,112.44,0,0,0-11.34,5.93c-3.54,2.16-10.85,8.81-13.51,11.39l-7.3-15.56a69.81,69.81,0,0,1,12.33-9.59,116.58,116.58,0,0,1,13-6.93,217.66,217.66,0,0,1,26.74-10.11,460.64,460.64,0,0,1,54.55-12.9c18.3-3.27,36.69-5.71,55.1-7.7s35.8-7.94,54.26-8.88C494.59,148.61,592.19,154.62,610.06,159.09Z"
fill="#E2E2E2"
/>
<path
d="M188.17,320.14c3.47-1.42,6.8-2.75,10.2-4.07s6.78-2.61,10.18-3.87c6.79-2.57,13.62-5,20.45-7.36q20.52-7.09,41.26-13.47c6.91-2.14,13.82-4.25,20.78-6.22l10.42-3c3.47-1,6.94-2,10.44-2.93l20.94-5.59,21-5.25C382,261.7,484.59,232.18,513.37,230c-7,1.8-168.2,54.82-176.74,57.39L316,293.56q-20.57,6.22-41,12.91c-6.83,2.16-13.6,4.47-20.38,6.76s-13.54,4.65-20.3,7l-10.1,3.61q-5.07,1.77-10.08,3.64l-10,3.71c-3.32,1.23-6.69,2.52-9.9,3.78Z"
fill="#E2E2E2"
/>
<path
d="M711.7,270.48c-39.92,36.15-102.55,67-169.48,94.19l16.51,15.78h0S659.21,340.49,711.7,270.48Z"
fill="#E2E2E2"
/>
<path
d="M214.45,457.18a24.45,24.45,0,0,1,.66-5.43,27,27,0,0,1,1.75-4.9,36.8,36.8,0,0,1,5.26-8,72.69,72.69,0,0,1,13-11.7,206,206,0,0,1,28.63-16.72c19.57-9.69,39.67-17.6,59.8-25.27s40.4-14.82,60.64-22S424.76,349,445,341.87c40.42-14.25,79.8-31.3,119.21-47.95,9.86-4.14,93.82-54.66,102.72-60.67-8.32,6.8-67.53,50.51-99.82,67.22-39.1,18-78.43,35.84-118.64,50.95-20.13,7.5-40.29,14.87-60.43,22.25s-40.27,14.71-60.19,22.46c-10,3.88-19.86,7.85-29.66,12s-19.51,8.46-28.95,13.15A195.93,195.93,0,0,0,242.3,437a64.46,64.46,0,0,0-10.93,9.68c-3,3.49-7.94,11.25-7.92,14.53Z"
fill="#E2E2E2"
/>
<path
d="M747.94,163.66l0,0C684.65,74.76,266,93.83,204.16,155.69c-66.94,66.94,29.18,351,29.18,351,0-41.1,160.33-82.31,303.37-139.83,99.17,63.69,228.92,108.54,228.92,108.54S793.59,209.32,747.94,163.66Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M534.47,361.33c16.1-6.69,32.19-13.37,48.12-20.36l6-2.61,5.95-2.67,6-2.66,5.91-2.76,5.92-2.73c2-.91,3.92-1.88,5.88-2.81,3.91-1.89,7.83-3.75,11.69-5.74q23.34-11.6,45.56-25.15a427.09,427.09,0,0,0,43-29.7c-1.44,1.66-2.86,3.34-4.34,5s-2.9,3.33-4.49,4.84c-3.12,3.11-6.22,6.29-9.55,9.17-1.64,1.49-3.31,2.92-5,4.39s-3.41,2.8-5.12,4.21-3.45,2.76-5.2,4.11l-5.32,4A448.92,448.92,0,0,1,634.62,328c-3.84,2.18-7.74,4.23-11.63,6.29s-7.8,4.1-11.74,6.08l-5.9,3-6,2.87c-4,1.91-7.92,3.84-11.93,5.64q-24,11.06-48.52,20.65Z"
fill="#592d3d"
/>
<path
d="M769.08,431.09c-1.42-.23-2.71-.46-4-.72s-2.63-.53-3.94-.82c-2.62-.55-5.2-1.21-7.79-1.86q-7.74-2-15.34-4.43a315.52,315.52,0,0,1-29.83-11.2A306.66,306.66,0,0,1,679.61,398a208.59,208.59,0,0,1-26.43-17.56c2.42,1.09,4.82,2.19,7.19,3.35s4.7,2.34,7.12,3.39c4.77,2.18,9.47,4.49,14.28,6.55q14.25,6.56,28.91,12l7.33,2.71L725.4,411c4.94,1.65,9.9,3.22,14.89,4.67s10,2.83,15,4.13l3.77.91c1.26.32,2.52.62,3.78.89,2.5.57,5.08,1.14,7.49,1.59Z"
fill="#592d3d"
/>
<path
d="M615.36,160c-36.49-4.61-73.12-6.62-109.74-7.18s-73.25.43-109.73,3.15c-18.24,1.33-36.45,3.08-54.58,5.35s-36.18,5-54.06,8.36a484.87,484.87,0,0,0-52.83,12.84,211.12,211.12,0,0,0-25,9.44A113.77,113.77,0,0,0,197.84,198a56.05,56.05,0,0,0-9.85,7.45L179.5,197a67.76,67.76,0,0,1,12-9.28,115.9,115.9,0,0,1,12.81-6.8,226.14,226.14,0,0,1,26.49-10A457.87,457.87,0,0,1,285.08,158c36.5-6.53,73.31-10.19,110.17-12.17a1068.52,1068.52,0,0,1,110.62-.17c9.2.53,18.4,1.16,27.59,1.94s18.35,1.78,27.49,2.93A542.75,542.75,0,0,1,615.36,160Z"
fill="#592d3d"
/>
<path
d="M210.05,449.36a24.5,24.5,0,0,1,.64-5.37,26.93,26.93,0,0,1,1.71-4.87,36.36,36.36,0,0,1,5.18-8,71.43,71.43,0,0,1,12.89-11.68,202.41,202.41,0,0,1,28.39-16.69c19.41-9.65,39.35-17.52,59.32-25.14s40.08-14.74,60.17-21.86,40.21-14,60.25-21.15c40.11-14.17,80-28.92,119.07-45.49q14.67-6.18,29.14-12.83t28.69-13.79q14.22-7.17,28-15.08t27.08-16.87c-8.25,6.75-16.94,13-25.81,18.91s-18,11.55-27.24,16.89S598.9,276.71,589.4,281.6s-19.15,9.51-28.82,14c-38.79,18-78.6,33.46-118.5,48.49-20,7.46-40,14.78-59.95,22.12s-39.95,14.62-59.72,22.33c-9.87,3.85-19.7,7.81-29.41,11.95s-19.35,8.41-28.71,13.08a191.39,191.39,0,0,0-26.63,15.63,63.16,63.16,0,0,0-10.78,9.64c-3,3.47-4.85,7.2-4.83,10.48Z"
fill="#592d3d"
/>
<path
d="M184.48,311.25C198,305.7,211.57,300.86,225.22,296s27.38-9.26,41.18-13.53c27.6-8.52,55.41-16.36,83.45-23.23S406,246,434.45,240.93L445.09,239l5.33-1,5.34-.85L477.15,234c7.13-1.1,14.3-1.92,21.46-2.74s14.33-1.6,21.5-2.31q-10.54,2.44-21.09,4.73c-7,1.55-14.09,2.94-21.08,4.63-14,3.22-28.07,6.22-42,9.66q-42,9.66-83.48,21.17l-20.73,5.79L311.07,281c-13.74,4.12-27.44,8.36-41.07,12.81-6.84,2.15-13.63,4.46-20.42,6.74s-13.57,4.62-20.35,6.94c-13.48,4.75-27,9.69-40.19,14.83Z"
fill="#592d3d"
/>
</g>
<circle
cx="382.91"
cy="594.66"
fill="#ffffff"
opacity={0.2}
r="33.84"
/>
<path
d="M375.87,631l43.31-41.74a147.47,147.47,0,0,0-7.57-12.9l-45.87,44.21C367.64,621.9,373.72,630.08,375.87,631Z"
fill="#ffffff"
opacity={0.4}
/>
<circle
cx="382.91"
cy="594.66"
fill="none"
r="33.84"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M378,580.47c1.22,3.83-3.5,6.78-7,7.37-3.54,0-5.9-2.36-7.08-5.31-.59-2.95,0-5.9,2.36-7.67,2.95-1.18,7.08-2.36,9.7.67A6.85,6.85,0,0,1,378,580.47Z"
fill="#ffffff"
/>
<path
d="M384.32,578.21a2.29,2.29,0,0,1-4.49.19c0-1.77.59-2.36,2.27-2.42a2.22,2.22,0,0,1,2.22,2.22Z"
fill="#ffffff"
/>
<circle
cx="615.2"
cy="594.66"
fill="#ffffff"
opacity={0.2}
r="33.84"
/>
<path
d="M610.12,628.11l38.54-38.54c-.21-1.37-5.91-8.1-6.29-9.44l-41.72,41.74C602,622.24,608.75,627.91,610.12,628.11Z"
fill="#ffffff"
opacity={0.4}
/>
<circle
cx="615.2"
cy="594.66"
fill="none"
r="33.84"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M607.36,579.91c1,3.25-3,5.75-6,6.25-3,0-5-2-6-4.5-.5-2.5,0-5,2-6.5,2.5-1,6-2,8.23.57A5.85,5.85,0,0,1,607.36,579.91Z"
fill="#ffffff"
/>
<path
d="M612.7,578a1.94,1.94,0,0,1-3.8.16c0-1.5.5-2,1.92-2A1.88,1.88,0,0,1,612.7,578Z"
fill="#ffffff"
/>
<path
d="M416.74,594.66q83.68-30,164.63,0"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M615.2,634.5A39.9,39.9,0,0,1,575.6,599c-50-17.65-101.46-17.64-153.1,0a39.81,39.81,0,0,1-50.92,33.84,38,38,0,0,0,54.51-29.91c49.22-16.86,98.28-16.88,145.93,0a38,38,0,0,0,54.51,30A40,40,0,0,1,615.2,634.5Z"
opacity={0.15}
/>
</g>
</svg>
</div>
Jack
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-disabled={true}
className="disabled item"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="user icon"
onClick={[Function]}
/>
<span
className="text"
>
user.guest
</span>
</div>
<div
className="divider"
/>
<a
className="item"
href="/change_password"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="exchange icon"
onClick={[Function]}
/>
<span
className="text"
>
user.change_password
</span>
</a>
<a
className="item"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="log out icon"
onClick={[Function]}
/>
<span
className="text"
>
user.logout
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<main
style={
Object {
"flex": "1 0 auto",
}
}
>
<div
className="ui container"
>
<img
alt="octoboard logo"
className="ui image"
src="/images/octoboard.svg"
style={
Object {
"margin": "30px auto 30px",
"width": "300px",
}
}
/>
</div>
<div
className="ui container"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="twelve wide column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
<div
className="ui active transition visible inverted dimmer"
onClick={[Function]}
>
<div
className="content"
>
<div
className="ui inverted text loader"
>
list.loading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="four wide column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
create.title
</h3>
<form
className="ui loading form createMatch"
onSubmit={[Function]}
>
<div
className="field"
>
<label>
create.game_type
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
Pictionary
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Pictionary
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/picture-match/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
PictureMatch
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/splendid/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Splendid
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/scrambled/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Scrambled
</span>
</div>
</div>
</div>
</div>
<div
className="field"
>
<label>
create.max_players
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
2
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
2
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
3
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
4
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
5
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
6
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
7
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
8
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
9
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
10
</span>
</div>
</div>
</div>
</div>
<div
className="required field"
>
<label>
create.match_name
</label>
<div
className="ui fluid input"
>
<input
aria-describedby={null}
onChange={[Function]}
placeholder="create.enter_your_own..."
required={true}
type="text"
value=""
/>
</div>
</div>
<div
className="nameProposalPrompt"
>
create.or_use
:
<button
className="nameProposalButton"
onClick={[Function]}
>
en test
</button>
<i
aria-hidden="true"
className="sync link icon"
onClick={[Function]}
/>
</div>
<div
className="field"
>
<div
className="ui checked toggle checkbox"
onChange={[Function]}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
>
<input
aria-describedby={null}
checked={true}
className="hidden"
readOnly={true}
tabIndex={0}
type="checkbox"
/>
<label>
create.private.true
</label>
</div>
</div>
<button
className="ui orange fluid disabled button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
type="submit"
>
create.button
</button>
</form>
</div>
</div>
</div>
</div>
<div
className="fresnel-container fresnel-lessThan-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
create.title
</h3>
<form
className="ui loading form createMatch"
onSubmit={[Function]}
>
<div
className="field"
>
<label>
create.game_type
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
Pictionary
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Pictionary
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/picture-match/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
PictureMatch
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/splendid/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Splendid
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/scrambled/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Scrambled
</span>
</div>
</div>
</div>
</div>
<div
className="field"
>
<label>
create.max_players
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
2
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
2
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
3
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
4
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
5
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
6
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
7
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
8
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
9
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
10
</span>
</div>
</div>
</div>
</div>
<div
className="required field"
>
<label>
create.match_name
</label>
<div
className="ui fluid input"
>
<input
aria-describedby={null}
onChange={[Function]}
placeholder="create.enter_your_own..."
required={true}
type="text"
value=""
/>
</div>
</div>
<div
className="nameProposalPrompt"
>
create.or_use
:
<button
className="nameProposalButton"
onClick={[Function]}
>
en test
</button>
<i
aria-hidden="true"
className="sync link icon"
onClick={[Function]}
/>
</div>
<div
className="field"
>
<div
className="ui checked toggle checkbox"
onChange={[Function]}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
>
<input
aria-describedby={null}
checked={true}
className="hidden"
readOnly={true}
tabIndex={0}
type="checkbox"
/>
<label>
create.private.true
</label>
</div>
</div>
<button
className="ui orange fluid disabled button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
type="submit"
>
create.button
</button>
</form>
</div>
</div>
</div>
</div>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
<div
className="ui active transition visible inverted dimmer"
onClick={[Function]}
>
<div
className="content"
>
<div
className="ui inverted text loader"
>
list.loading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer
className="ui secondary stackable menu"
style={Object {}}
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<a
href="https://github.com/mavend/octoboard"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
<i
aria-hidden="true"
className="github icon"
onClick={[Function]}
/>
footer.github
</a>
</div>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
footer.graphics
:
<a
href="https://icons8.com"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
Icons8
</a>
</div>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<i
aria-hidden="true"
className="language large icon"
onClick={[Function]}
style={
Object {
"marginRight": "8px",
}
}
/>
<div
aria-expanded={false}
className="ui pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
English
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
English
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
polski
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>,
<div
className="ui page modals dimmer transition visible active"
>
<div
className="ui modal transition visible active"
style={Object {}}
>
<i
aria-hidden="true"
className="close icon"
onClick={[Function]}
/>
<div
className="header"
>
change_password.title
</div>
<div
className="image content"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-tablet ui medium image"
suppressHydrationWarning={false}
>
<img
src="/images/hugo-upgrade.png"
/>
</div>
<div
className="description"
style={
Object {
"flex": "1 0 auto",
}
}
>
<div
className="ui header"
>
change_password.prompt
</div>
<form
className="ui form"
onSubmit={[Function]}
>
<div
className="ui error message"
/>
<div
className="ui success message"
/>
<div
className="field"
>
<label>
form.password
</label>
<div
className="ui input"
>
<input
aria-describedby={null}
autoComplete="current-password"
autoFocus={true}
name="form.password"
onChange={[Function]}
placeholder="form.password"
type="password"
/>
</div>
</div>
<div
className="field"
>
<label>
form.new_password
</label>
<div
className="ui input"
>
<input
aria-describedby={null}
autoComplete="new-password"
name="form.new_password"
onChange={[Function]}
placeholder="form.new_password"
type="password"
value="Whatever"
/>
</div>
</div>
<div
className="fields"
>
<div
className="field"
>
<button
aria-describedby={null}
className="ui green button"
onClick={[Function]}
>
actions.change_password
</button>
</div>
</div>
</form>
</div>
</div>
<div
className="ui basic secondary segment"
style={
Object {
"marginTop": 0,
}
}
>
<footer
className="ui secondary stackable menu"
style={Object {}}
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<a
href="https://github.com/mavend/octoboard"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
<i
aria-hidden="true"
className="github icon"
onClick={[Function]}
/>
footer.github
</a>
</div>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
footer.graphics
:
<a
href="https://icons8.com"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
Icons8
</a>
</div>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<i
aria-hidden="true"
className="language large icon"
onClick={[Function]}
style={
Object {
"marginRight": "8px",
}
}
/>
<div
aria-expanded={false}
className="ui pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
English
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
English
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
polski
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>,
]
`;
exports[`Storyshots User/CredentialsLayout Guest 1`] = `
Array [
<div
className="ui container"
style={
Object {
"display": "flex",
"flexDirection": "column",
"minHeight": "100vh",
}
}
>
<nav
className="ui secondary menu"
>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
>
<div
aria-expanded={false}
className="ui top right pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
style={
Object {
"display": "inline-block",
"height": "40xp",
"marginRight": "10px",
"verticalAlign": "middle",
"width": "40px",
}
}
>
<svg
seed="user-1"
viewBox="-40 0 1060 1120"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M833.15,369a58.35,58.35,0,0,0-35.89-54.16,58.56,58.56,0,0,0,25.82-48.77c0-27.77-19-51-44.47-56.88a59.13,59.13,0,0,0,7.51-28.9C786.12,148.1,760.55,122,729,122a55.89,55.89,0,0,0-24.2,5.49,58.35,58.35,0,0,0,.67-8.92c0-32.21-25.57-58.33-57.12-58.33a56.49,56.49,0,0,0-43.76,20.86c-1.61-30.74-26.53-55.17-57-55.17A56.9,56.9,0,0,0,497.6,56a56.93,56.93,0,0,0-50-30.07c-30.5,0-55.42,24.43-57,55.17a56.53,56.53,0,0,0-43.77-20.86c-31.53,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-11.51,10.31,545.36,10.93,534.18.55,28.2-3.57,50-28.11,50-57.87a58.87,58.87,0,0,0-14.61-39A58.4,58.4,0,0,0,833.15,369ZM270.81,513.54c-.93-.52-1.89-1-2.85-1.41C268.93,511.56,270.81,513.54,270.81,513.54Z"
fill="#FEDC58"
/>
<path
d="M470,505.43a51,51,0,0,1-85.38-36.67,51.1,51.1,0,0,1-63.44-66.59,51.18,51.18,0,0,1-32.54-87.48,51.32,51.32,0,0,1-1.26-93.62A51.42,51.42,0,0,1,327,136.89h.16a51.55,51.55,0,0,1,50-63.89,53,53,0,0,1,5.66.31,56.13,56.13,0,0,0-36-13.09c-31.54,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-5.61,5,123.81,7.75,256.66,8A51.14,51.14,0,0,1,470,505.43Z"
fill="#EDBF2E"
/>
<path
d="M741.2,386l-35,78.16,39.47,58.61c12.24-.91,18.61-2,17.31-3.17,28.2-3.57,50-28.11,50-57.87a60.75,60.75,0,0,0-.8-9.7C792.18,391.39,741.2,386,741.2,386Z"
fill="#EDBF2E"
/>
<path
d="M833.15,369a58.35,58.35,0,0,0-35.89-54.16,58.56,58.56,0,0,0,25.82-48.77c0-27.77-19-51-44.47-56.88a59.13,59.13,0,0,0,7.51-28.9C786.12,148.1,760.55,122,729,122a55.89,55.89,0,0,0-24.2,5.49,58.35,58.35,0,0,0,.67-8.92c0-32.21-25.57-58.33-57.12-58.33a56.49,56.49,0,0,0-43.76,20.86c-1.61-30.74-26.53-55.17-57-55.17A56.9,56.9,0,0,0,497.6,56a56.93,56.93,0,0,0-50-30.07c-30.5,0-55.42,24.43-57,55.17a56.53,56.53,0,0,0-43.77-20.86c-31.53,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-11.51,10.31,545.36,10.93,534.18.55,28.2-3.57,50-28.11,50-57.87a58.87,58.87,0,0,0-14.61-39A58.4,58.4,0,0,0,833.15,369Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M233.25,495C239.168,329.068 351.68,233.25 499,233.25C646.32,233.25 766.75,346.746 766.75,494.066C766.768,504.077 757.643,676.267 760.561,720.218C767.462,824.156 911.469,848.664 959.478,846.601C983.952,845.547 1002.67,866.735 1005.14,887.918C1007.65,909.451 993.383,930.981 951.307,929.164C764.522,921.101 711.947,816.61 700.846,823.351C675.489,838.731 756.698,912.706 809.101,930.901C870.832,952.34 804.307,1016.61 732.282,994.42C630.025,962.93 570.47,832.435 540.674,867.647C522.173,889.51 588.95,963.9 613.008,980.54C659.672,1012.81 606.157,1067.14 542.546,1028.63C444.848,969.51 441.595,876.876 417.22,883.656C393.533,890.235 402.013,912.001 322.956,967.61C243.903,1023.23 145.768,1035.81 127.011,1005.2C108.255,974.58 153.509,950.43 192.073,936.176C230.633,921.922 297.117,897.772 296.4,866.197C295.679,834.622 261.534,859.306 261.534,859.306C180.189,934.685 -48.726,938.58 -24.565,868.222C-12.404,832.814 12.457,834.289 47.113,835.764C81.308,837.218 125.041,838.676 175.502,804.689C214.699,778.293 233.39,709.516 234.6,637.523C235.063,609.971 230.808,563.466 233.25,495Z"
fill="#9E55A1"
/>
<path
d="M93.223,837.942C93.223,837.942 164.984,815.38 176.782,807.434C258.919,752.122 233.698,570.283 232.311,506.052C232.268,504.04 232.247,502.021 232.25,500C232.25,352.68 351.68,233.25 499,233.25C564.366,233.25 624.241,256.762 670.614,295.778C666.976,296.884 662.537,297.109 657.186,296.28C594.447,286.557 522.565,269.906 406.78,343.45C290.995,416.994 317.087,570.339 268.191,713.318C219.375,856.063 93.223,837.942 93.223,837.942Z"
fill="#893E97"
/>
<g
fill="#893E97"
transform="translate(0 -70)"
>
<path
d="M195.985,959.764C194.683,949.693 200.359,938.306 211.077,931.447C216.869,927.739 223.213,925.943 229.157,925.943C236.396,925.943 243.041,928.61 247.353,933.73C232.703,944.085 215.105,952.764 195.985,959.764Z"
/>
<path
d="M148.274,956.968C138.723,956.968 130.837,952.118 129.79,945.039C128.59,936.914 136.864,928.922 148.274,927.201C149.746,926.981 151.201,926.872 152.623,926.872C162.174,926.872 170.056,931.726 171.103,938.806C172.303,946.935 164.029,954.918 152.619,956.639C151.147,956.86 149.692,956.968 148.274,956.968Z"
/>
<path
d="M76.501,981.468C76.489,981.393 76.476,981.318 76.468,981.243C75.264,973.114 83.542,965.131 94.948,963.406C96.42,963.185 97.875,963.076 99.293,963.076C108.849,963.076 116.73,967.931 117.777,975.006C117.947,976.147 117.93,977.285 117.74,978.401C103.692,980.206 89.808,981.231 76.501,981.468Z"
/>
<path
d="M37.376,963.893C35.69,963.893 33.967,963.751 32.228,963.464C18.364,961.147 8.624,950.139 10.466,938.876C12.074,929.031 22.009,922.247 33.745,922.247C35.431,922.247 37.154,922.389 38.898,922.681C52.757,924.993 62.502,936.006 60.659,947.264C59.047,957.11 49.113,963.893 37.376,963.893Z"
/>
<path
d="M172.558,1084.48C172.336,1083.9 172.142,1083.31 171.977,1082.7C169.034,1071.68 177.641,1059.74 191.204,1056.04C193.941,1055.3 196.67,1054.94 199.308,1054.94C209.741,1054.94 218.74,1060.5 221.094,1069.29C221.845,1072.1 221.845,1074.96 221.206,1077.74C203.455,1082.23 186.855,1084.47 172.558,1084.48Z"
/>
<path
d="M464.581,1015.21C454.04,998.76 446.661,983.472 440.577,971.493C440.903,971.214 441.241,970.939 441.595,970.68C444.642,968.426 448.249,967.356 452.008,967.356C459.498,967.356 467.594,971.605 473.118,979.235C481.404,990.697 480.736,1005.45 471.622,1012.19C469.503,1013.76 467.108,1014.75 464.581,1015.21Z"
/>
<path
d="M536.976,1054.38C531.35,1054.38 525.278,1052.41 519.943,1048.43C508.64,1040 504.913,1025.71 511.62,1016.53C515.161,1011.69 520.9,1009.23 527.194,1009.23C532.825,1009.23 538.897,1011.19 544.232,1015.18C555.535,1023.61 559.258,1037.89 552.551,1047.07C549.009,1051.92 543.271,1054.38 536.976,1054.38Z"
/>
<path
d="M579.634,1104.61C568.215,1103.53 555.593,1099.53 542.546,1091.63C539.536,1089.81 536.605,1087.96 533.769,1086.07C534.227,1085.11 534.775,1084.18 535.418,1083.29C538.959,1078.45 544.702,1075.99 550.992,1075.99C556.623,1075.99 562.691,1077.95 568.03,1081.94C575.978,1087.87 580.174,1096.69 579.634,1104.61Z"
/>
<path
d="M614.661,974.493C602.117,961.726 590.945,949.935 581.048,941.03C581.559,939.806 582.21,938.635 583.014,937.535C586.551,932.689 592.293,930.231 598.584,930.231C604.215,930.231 610.283,932.197 615.621,936.18C626.925,944.614 630.647,958.893 623.94,968.076C621.632,971.239 618.383,973.385 614.661,974.493Z"
/>
<path
d="M676.409,990.985C671.062,990.985 664.594,988.705 658.695,984.301C648.27,976.522 643.583,965.068 648.225,958.714C650.24,955.955 653.682,954.61 657.784,954.61C663.135,954.61 669.603,956.893 675.502,961.293C685.931,969.072 690.614,980.531 685.972,986.885C683.957,989.643 680.514,990.985 676.409,990.985Z"
/>
<path
d="M707.474,1047.58C693.17,1040.63 679.814,1031.96 667.348,1022.44C667.715,1021.63 668.164,1020.85 668.704,1020.11C671.536,1016.24 676.219,1014.3 681.504,1014.3C686.838,1014.3 692.791,1016.27 698.08,1020.22C708.175,1027.75 712.186,1039.73 707.474,1047.58Z"
/>
<path
d="M760.396,1047.68C757.036,1047.68 753.475,1047.07 749.938,1045.77C737.633,1041.27 730.307,1030.24 733.572,1021.12C735.897,1014.63 742.975,1010.86 751.302,1010.86C754.662,1010.86 758.224,1011.47 761.761,1012.77C774.061,1017.27 781.391,1028.31 778.126,1037.42C775.797,1043.91 768.723,1047.68 760.396,1047.68Z"
/>
<path
d="M779.676,930.235C775.686,930.235 771.419,929.497 767.173,927.943C752.988,922.755 744.406,910.422 747.996,900.397C750.511,893.372 758.335,889.347 767.668,889.347C771.658,889.347 775.925,890.081 780.175,891.635C794.351,896.822 802.934,909.156 799.343,919.185C796.829,926.205 789.009,930.235 779.676,930.235Z"
/>
<path
d="M856.251,977.876C839.824,973.356 825.058,968.051 811.772,962.297C811.912,961.901 812.069,961.51 812.246,961.122C814.847,955.46 821.121,952.364 828.426,952.364C832.466,952.364 836.819,953.31 841.044,955.297C851.42,960.168 857.571,969.685 856.251,977.876Z"
/>
<path
d="M908.122,953.364C907.314,953.364 906.498,953.331 905.673,953.268C892.627,952.276 882.634,943.635 883.355,933.964C884.031,924.914 893.867,918.168 905.834,918.168C906.642,918.168 907.458,918.201 908.283,918.264C921.33,919.255 931.322,927.897 930.605,937.564C929.929,946.618 920.089,953.364 908.122,953.364Z"
/>
<path
d="M956.188,992.272C954.605,992.272 952.977,992.239 951.307,992.164C944.345,991.864 937.547,991.426 930.951,990.868C930.675,989.614 930.576,988.322 930.675,987.014C931.347,977.96 941.183,971.218 953.15,971.218C953.958,971.218 954.774,971.247 955.599,971.31C968.134,972.264 977.851,980.28 977.954,989.476C971.857,991.268 964.635,992.272 956.188,992.272Z"
/>
<path
d="M264.498,1039.8C258.966,1039.8 254.147,1037.74 251.463,1033.65C246.331,1025.85 250.948,1013.63 261.777,1006.35C266.946,1002.88 272.598,1001.16 277.648,1001.16C283.18,1001.16 287.995,1003.22 290.678,1007.3C295.811,1015.1 291.194,1027.33 280.364,1034.61C275.199,1038.08 269.548,1039.8 264.498,1039.8Z"
/>
<path
d="M330.458,1025.25C325.755,1017.44 330.397,1005.51 341.036,998.364C346.201,994.889 351.849,993.168 356.903,993.168C360.613,993.168 364.006,994.097 366.644,995.943C357.509,1004.37 345.806,1014.09 330.458,1025.25Z"
/>
<path
d="M366.578,974.689C364.245,974.689 362.01,974.122 360.015,972.926C352.043,968.151 350.959,955.11 357.595,943.805C362.571,935.326 370.473,930.231 377.477,930.231C379.815,930.231 382.049,930.797 384.04,931.993C392.012,936.768 393.096,949.81 386.464,961.114C381.488,969.593 373.582,974.689 366.578,974.689Z"
/>
</g>
<path
d="M233.25,495C239.168,329.068 351.68,233.25 499,233.25C646.32,233.25 766.75,346.746 766.75,494.066C766.768,504.077 757.643,676.267 760.561,720.218C767.462,824.156 911.469,848.664 959.478,846.601C983.952,845.547 1002.67,866.735 1005.14,887.918C1007.65,909.451 993.383,930.981 951.307,929.164C764.522,921.101 711.947,816.61 700.846,823.351C675.489,838.731 756.698,912.706 809.101,930.901C870.832,952.34 804.307,1016.61 732.282,994.42C630.025,962.93 570.47,832.435 540.674,867.647C522.173,889.51 588.95,963.9 613.008,980.54C659.672,1012.81 606.157,1067.14 542.546,1028.63C444.848,969.51 441.595,876.876 417.22,883.656C393.533,890.235 402.013,912.001 322.956,967.61C243.903,1023.23 145.768,1035.81 127.011,1005.2C108.255,974.58 153.509,950.43 192.073,936.176C230.633,921.922 297.117,897.772 296.4,866.197C295.679,834.622 261.534,859.306 261.534,859.306C180.189,934.685 -48.726,938.58 -24.565,868.222C-12.404,832.814 12.457,834.289 47.113,835.764C81.308,837.218 125.041,838.676 175.502,804.689C214.699,778.293 233.39,709.516 234.6,637.523C235.063,609.971 230.808,563.466 233.25,495Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M296.49,572.61V559.68a49.6,49.6,0,0,1,1.94-25.32,46,46,0,0,1,3.51-7.65C305.29,518,314.29,511,323.29,508c14-4,31-2,42,9,14,15,12,37,12.45,55.62"
fill="none"
stroke="#592d3d"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M623.31,573c-2.34-26.62,1.66-63.62,36.13-67.17a45,45,0,0,1,8.12,0A43.68,43.68,0,0,1,690,514.41c18,15,14,39,13.95,58.63"
fill="none"
stroke="#592d3d"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="#592d3d"
/>
<path
d="M495,643c-16.95-1-31.73,6.75-36.65,18.22a56.86,56.86,0,0,0,65.14,12.53A55.39,55.39,0,0,0,530,670.2C529.08,656.09,514.06,644.18,495,643Z"
fill="#f28195"
/>
<path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="6px"
/>
<path
d="M478.12,632.46c.45-.11.63-.16.92-.21l.75-.14c.49-.09,1-.14,1.46-.18a21.54,21.54,0,0,1,2.89-.1,25,25,0,0,1,5.79.81,21.4,21.4,0,0,1,10.35,6.1,20.18,20.18,0,0,1,5.08,10.16A17.27,17.27,0,0,1,504,659.25c-2.07-2.93-3.66-5.56-5.32-7.76a28.41,28.41,0,0,0-2.45-3,14.06,14.06,0,0,0-2.7-2.16,15.48,15.48,0,0,0-6.11-2.09A29.5,29.5,0,0,0,484,644c-.59,0-1.18,0-1.76.05l-.85.06-.39,0c-.1,0-.3,0-.23,0Z"
fill="#592d3d"
/>
<path
d="M558.42,406.88c-12.87,24-60,37.45-63.83,31.42-4.3-6.73,37.85-55.32,13.9-106.14"
fill="#893E97"
/>
<path
d="M500.15,221.81C369,221.81,247.79,328.25,226,457c0,0,201.33,15.23,274.66-66.75-4.65,22.65-17.72,39.87-15.51,43.33,3.08,4.84,40.92-5.92,51.25-25.22l-3.66-5.48C582.65,421,680.23,443.46,746,375.26,702.52,285,604.61,221.81,500.15,221.81Z"
fill="#FEDC58"
/>
<path
d="M331.52,454.81a51.09,51.09,0,0,1-10.35-52.64,51.12,51.12,0,0,1-47.23-58.35c-24.09,33.69-41,72.3-48,113.18A671.08,671.08,0,0,0,331.52,454.81Z"
fill="#EDBF2E"
/>
<path
d="M739.66,389.6C665,447,579.07,424.7,533.51,405.69c-10.14,17.94-45.26,27.89-48.15,23.36-2-3.08,8.82-17.65,13.78-37.16-74.28,80.27-259.85,72-259.85,72"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M280.92,140.17a53.59,53.59,0,0,0-20.26,5A45.83,45.83,0,0,0,245,157a18.94,18.94,0,0,0-1.53,1.92c-.48.66-1,1.28-1.46,2a43.23,43.23,0,0,0-2.56,4.23,52.32,52.32,0,0,0-3.9,9.18,62.77,62.77,0,0,0-2.29,20.8A36.91,36.91,0,0,1,229.42,173l.53-2.86.29-1.44c.11-.47.27-.93.41-1.4.28-.94.56-1.88.87-2.81s.76-1.8,1.14-2.71a43.25,43.25,0,0,1,2.76-5.21c.51-.85,1.14-1.61,1.7-2.42a24.27,24.27,0,0,1,1.82-2.33,39.88,39.88,0,0,1,19.58-12.56A34.18,34.18,0,0,1,280.92,140.17Z"
fill="#ffffff"
/>
<path
d="M358.88,77.15a62.84,62.84,0,0,0-18,2,52.26,52.26,0,0,0-15.47,7.06A51.64,51.64,0,0,0,313.09,98c-.84,1.18-1.8,2.31-2.53,3.58l-1.21,1.88c-.43.62-.71,1.3-1.09,2a73.25,73.25,0,0,0-4.1,8.38,28.54,28.54,0,0,1,.39-9.7c.17-.8.27-1.63.52-2.42l.74-2.36a31.32,31.32,0,0,1,1.91-4.61A39,39,0,0,1,321,79.59,39.38,39.38,0,0,1,339.89,73,32.35,32.35,0,0,1,358.88,77.15Z"
fill="#ffffff"
/>
<path
d="M603.1,452.29a320.74,320.74,0,0,1,33.51-6.66L634,446a150.31,150.31,0,0,1,39.75-.48l-2.66-.36c3.28.45,6.54,1,9.82,1.41l-2.66-.35a222.52,222.52,0,0,1,29.48,6.1c5,1.4,11.11-1.72,12.3-7a10.19,10.19,0,0,0-7-12.3,239.34,239.34,0,0,0-34.58-6.78l2.65.36a142.93,142.93,0,0,0-33.43-1.95,236.67,236.67,0,0,0-33.1,4.54c-5.61,1.14-11.19,2.44-16.76,3.81-5.08,1.25-8.61,7.26-7,12.3a10.21,10.21,0,0,0,12.3,7Z"
fill="#592d3d"
/>
<path
d="M261.26,502.22l14.13-1.48,33.67-3.52L350,492.93l35.18-3.69c5.72-.59,11.44-1.17,17.16-1.79l.24,0c2.73-.28,5.07-.92,7.07-2.93a10,10,0,0,0,0-14.14c-1.83-1.69-4.48-3.2-7.07-2.93l-14.13,1.48-33.67,3.53-41,4.29-35.18,3.68c-5.72.6-11.44,1.18-17.16,1.8l-.24,0c-2.73.29-5.07.93-7.07,2.93a10,10,0,0,0,0,14.15c1.83,1.68,4.48,3.2,7.07,2.92Z"
fill="#592d3d"
/>
<g
style={
Object {
"transformOrigin": "center",
}
}
transform="scale(0)"
>
<path
d="M765.63,495.43s.3-2.94.8-8.24C759.75,345.82,643,233.25,500,233.25c-147.32,0-266.75,119.43-266.75,266.75,0,7.28.31,14.49.89,21.63,12.11-39.32,161.32-77.95,298.44-133.08C631.75,452.24,765.63,495.43,765.63,495.43Z"
opacity={0.15}
/>
<path
d="M747.94,163.66l0,0C684.65,74.76,266,93.83,204.16,155.69c-66.94,66.94,29.18,351,29.18,351,0-41.1,160.33-82.31,303.37-139.83,99.17,63.69,228.92,108.54,228.92,108.54S793.59,209.32,747.94,163.66Z"
fill="#FFFFFF"
/>
<path
d="M610.06,159.09c-36.6-4-184.31-1.44-322.45,25.65A481,481,0,0,0,235,197.59c-4.25,1.37-8.49,2.76-12.62,4.33s-8.24,3.18-12.18,5a112.44,112.44,0,0,0-11.34,5.93c-3.54,2.16-10.85,8.81-13.51,11.39l-7.3-15.56a69.81,69.81,0,0,1,12.33-9.59,116.58,116.58,0,0,1,13-6.93,217.66,217.66,0,0,1,26.74-10.11,460.64,460.64,0,0,1,54.55-12.9c18.3-3.27,36.69-5.71,55.1-7.7s35.8-7.94,54.26-8.88C494.59,148.61,592.19,154.62,610.06,159.09Z"
fill="#E2E2E2"
/>
<path
d="M188.17,320.14c3.47-1.42,6.8-2.75,10.2-4.07s6.78-2.61,10.18-3.87c6.79-2.57,13.62-5,20.45-7.36q20.52-7.09,41.26-13.47c6.91-2.14,13.82-4.25,20.78-6.22l10.42-3c3.47-1,6.94-2,10.44-2.93l20.94-5.59,21-5.25C382,261.7,484.59,232.18,513.37,230c-7,1.8-168.2,54.82-176.74,57.39L316,293.56q-20.57,6.22-41,12.91c-6.83,2.16-13.6,4.47-20.38,6.76s-13.54,4.65-20.3,7l-10.1,3.61q-5.07,1.77-10.08,3.64l-10,3.71c-3.32,1.23-6.69,2.52-9.9,3.78Z"
fill="#E2E2E2"
/>
<path
d="M711.7,270.48c-39.92,36.15-102.55,67-169.48,94.19l16.51,15.78h0S659.21,340.49,711.7,270.48Z"
fill="#E2E2E2"
/>
<path
d="M214.45,457.18a24.45,24.45,0,0,1,.66-5.43,27,27,0,0,1,1.75-4.9,36.8,36.8,0,0,1,5.26-8,72.69,72.69,0,0,1,13-11.7,206,206,0,0,1,28.63-16.72c19.57-9.69,39.67-17.6,59.8-25.27s40.4-14.82,60.64-22S424.76,349,445,341.87c40.42-14.25,79.8-31.3,119.21-47.95,9.86-4.14,93.82-54.66,102.72-60.67-8.32,6.8-67.53,50.51-99.82,67.22-39.1,18-78.43,35.84-118.64,50.95-20.13,7.5-40.29,14.87-60.43,22.25s-40.27,14.71-60.19,22.46c-10,3.88-19.86,7.85-29.66,12s-19.51,8.46-28.95,13.15A195.93,195.93,0,0,0,242.3,437a64.46,64.46,0,0,0-10.93,9.68c-3,3.49-7.94,11.25-7.92,14.53Z"
fill="#E2E2E2"
/>
<path
d="M747.94,163.66l0,0C684.65,74.76,266,93.83,204.16,155.69c-66.94,66.94,29.18,351,29.18,351,0-41.1,160.33-82.31,303.37-139.83,99.17,63.69,228.92,108.54,228.92,108.54S793.59,209.32,747.94,163.66Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M534.47,361.33c16.1-6.69,32.19-13.37,48.12-20.36l6-2.61,5.95-2.67,6-2.66,5.91-2.76,5.92-2.73c2-.91,3.92-1.88,5.88-2.81,3.91-1.89,7.83-3.75,11.69-5.74q23.34-11.6,45.56-25.15a427.09,427.09,0,0,0,43-29.7c-1.44,1.66-2.86,3.34-4.34,5s-2.9,3.33-4.49,4.84c-3.12,3.11-6.22,6.29-9.55,9.17-1.64,1.49-3.31,2.92-5,4.39s-3.41,2.8-5.12,4.21-3.45,2.76-5.2,4.11l-5.32,4A448.92,448.92,0,0,1,634.62,328c-3.84,2.18-7.74,4.23-11.63,6.29s-7.8,4.1-11.74,6.08l-5.9,3-6,2.87c-4,1.91-7.92,3.84-11.93,5.64q-24,11.06-48.52,20.65Z"
fill="#592d3d"
/>
<path
d="M769.08,431.09c-1.42-.23-2.71-.46-4-.72s-2.63-.53-3.94-.82c-2.62-.55-5.2-1.21-7.79-1.86q-7.74-2-15.34-4.43a315.52,315.52,0,0,1-29.83-11.2A306.66,306.66,0,0,1,679.61,398a208.59,208.59,0,0,1-26.43-17.56c2.42,1.09,4.82,2.19,7.19,3.35s4.7,2.34,7.12,3.39c4.77,2.18,9.47,4.49,14.28,6.55q14.25,6.56,28.91,12l7.33,2.71L725.4,411c4.94,1.65,9.9,3.22,14.89,4.67s10,2.83,15,4.13l3.77.91c1.26.32,2.52.62,3.78.89,2.5.57,5.08,1.14,7.49,1.59Z"
fill="#592d3d"
/>
<path
d="M615.36,160c-36.49-4.61-73.12-6.62-109.74-7.18s-73.25.43-109.73,3.15c-18.24,1.33-36.45,3.08-54.58,5.35s-36.18,5-54.06,8.36a484.87,484.87,0,0,0-52.83,12.84,211.12,211.12,0,0,0-25,9.44A113.77,113.77,0,0,0,197.84,198a56.05,56.05,0,0,0-9.85,7.45L179.5,197a67.76,67.76,0,0,1,12-9.28,115.9,115.9,0,0,1,12.81-6.8,226.14,226.14,0,0,1,26.49-10A457.87,457.87,0,0,1,285.08,158c36.5-6.53,73.31-10.19,110.17-12.17a1068.52,1068.52,0,0,1,110.62-.17c9.2.53,18.4,1.16,27.59,1.94s18.35,1.78,27.49,2.93A542.75,542.75,0,0,1,615.36,160Z"
fill="#592d3d"
/>
<path
d="M210.05,449.36a24.5,24.5,0,0,1,.64-5.37,26.93,26.93,0,0,1,1.71-4.87,36.36,36.36,0,0,1,5.18-8,71.43,71.43,0,0,1,12.89-11.68,202.41,202.41,0,0,1,28.39-16.69c19.41-9.65,39.35-17.52,59.32-25.14s40.08-14.74,60.17-21.86,40.21-14,60.25-21.15c40.11-14.17,80-28.92,119.07-45.49q14.67-6.18,29.14-12.83t28.69-13.79q14.22-7.17,28-15.08t27.08-16.87c-8.25,6.75-16.94,13-25.81,18.91s-18,11.55-27.24,16.89S598.9,276.71,589.4,281.6s-19.15,9.51-28.82,14c-38.79,18-78.6,33.46-118.5,48.49-20,7.46-40,14.78-59.95,22.12s-39.95,14.62-59.72,22.33c-9.87,3.85-19.7,7.81-29.41,11.95s-19.35,8.41-28.71,13.08a191.39,191.39,0,0,0-26.63,15.63,63.16,63.16,0,0,0-10.78,9.64c-3,3.47-4.85,7.2-4.83,10.48Z"
fill="#592d3d"
/>
<path
d="M184.48,311.25C198,305.7,211.57,300.86,225.22,296s27.38-9.26,41.18-13.53c27.6-8.52,55.41-16.36,83.45-23.23S406,246,434.45,240.93L445.09,239l5.33-1,5.34-.85L477.15,234c7.13-1.1,14.3-1.92,21.46-2.74s14.33-1.6,21.5-2.31q-10.54,2.44-21.09,4.73c-7,1.55-14.09,2.94-21.08,4.63-14,3.22-28.07,6.22-42,9.66q-42,9.66-83.48,21.17l-20.73,5.79L311.07,281c-13.74,4.12-27.44,8.36-41.07,12.81-6.84,2.15-13.63,4.46-20.42,6.74s-13.57,4.62-20.35,6.94c-13.48,4.75-27,9.69-40.19,14.83Z"
fill="#592d3d"
/>
</g>
<circle
cx="382.91"
cy="594.66"
fill="#ffffff"
opacity={0.2}
r="33.84"
/>
<path
d="M375.87,631l43.31-41.74a147.47,147.47,0,0,0-7.57-12.9l-45.87,44.21C367.64,621.9,373.72,630.08,375.87,631Z"
fill="#ffffff"
opacity={0.4}
/>
<circle
cx="382.91"
cy="594.66"
fill="none"
r="33.84"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M378,580.47c1.22,3.83-3.5,6.78-7,7.37-3.54,0-5.9-2.36-7.08-5.31-.59-2.95,0-5.9,2.36-7.67,2.95-1.18,7.08-2.36,9.7.67A6.85,6.85,0,0,1,378,580.47Z"
fill="#ffffff"
/>
<path
d="M384.32,578.21a2.29,2.29,0,0,1-4.49.19c0-1.77.59-2.36,2.27-2.42a2.22,2.22,0,0,1,2.22,2.22Z"
fill="#ffffff"
/>
<circle
cx="615.2"
cy="594.66"
fill="#ffffff"
opacity={0.2}
r="33.84"
/>
<path
d="M610.12,628.11l38.54-38.54c-.21-1.37-5.91-8.1-6.29-9.44l-41.72,41.74C602,622.24,608.75,627.91,610.12,628.11Z"
fill="#ffffff"
opacity={0.4}
/>
<circle
cx="615.2"
cy="594.66"
fill="none"
r="33.84"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M607.36,579.91c1,3.25-3,5.75-6,6.25-3,0-5-2-6-4.5-.5-2.5,0-5,2-6.5,2.5-1,6-2,8.23.57A5.85,5.85,0,0,1,607.36,579.91Z"
fill="#ffffff"
/>
<path
d="M612.7,578a1.94,1.94,0,0,1-3.8.16c0-1.5.5-2,1.92-2A1.88,1.88,0,0,1,612.7,578Z"
fill="#ffffff"
/>
<path
d="M416.74,594.66q83.68-30,164.63,0"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M615.2,634.5A39.9,39.9,0,0,1,575.6,599c-50-17.65-101.46-17.64-153.1,0a39.81,39.81,0,0,1-50.92,33.84,38,38,0,0,0,54.51-29.91c49.22-16.86,98.28-16.88,145.93,0a38,38,0,0,0,54.51,30A40,40,0,0,1,615.2,634.5Z"
opacity={0.15}
/>
</g>
</svg>
</div>
Jack
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-disabled={true}
className="disabled item"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="user icon"
onClick={[Function]}
/>
<span
className="text"
>
user.guest
</span>
</div>
<div
className="divider"
/>
<a
className="item"
href="/change_password"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="exchange icon"
onClick={[Function]}
/>
<span
className="text"
>
user.change_password
</span>
</a>
<a
className="item"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="log out icon"
onClick={[Function]}
/>
<span
className="text"
>
user.logout
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<main
style={
Object {
"flex": "1 0 auto",
}
}
>
<div
className="ui container"
>
<img
alt="octoboard logo"
className="ui image"
src="/images/octoboard.svg"
style={
Object {
"margin": "30px auto 30px",
"width": "300px",
}
}
/>
</div>
<div
className="ui container"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="twelve wide column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
<div
className="ui active transition visible inverted dimmer"
onClick={[Function]}
>
<div
className="content"
>
<div
className="ui inverted text loader"
>
list.loading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="four wide column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
create.title
</h3>
<form
className="ui loading form createMatch"
onSubmit={[Function]}
>
<div
className="field"
>
<label>
create.game_type
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
Pictionary
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Pictionary
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/picture-match/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
PictureMatch
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/splendid/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Splendid
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/scrambled/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Scrambled
</span>
</div>
</div>
</div>
</div>
<div
className="field"
>
<label>
create.max_players
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
2
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
2
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
3
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
4
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
5
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
6
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
7
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
8
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
9
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
10
</span>
</div>
</div>
</div>
</div>
<div
className="required field"
>
<label>
create.match_name
</label>
<div
className="ui fluid input"
>
<input
aria-describedby={null}
onChange={[Function]}
placeholder="create.enter_your_own..."
required={true}
type="text"
value=""
/>
</div>
</div>
<div
className="nameProposalPrompt"
>
create.or_use
:
<button
className="nameProposalButton"
onClick={[Function]}
>
en test
</button>
<i
aria-hidden="true"
className="sync link icon"
onClick={[Function]}
/>
</div>
<div
className="field"
>
<div
className="ui checked toggle checkbox"
onChange={[Function]}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
>
<input
aria-describedby={null}
checked={true}
className="hidden"
readOnly={true}
tabIndex={0}
type="checkbox"
/>
<label>
create.private.true
</label>
</div>
</div>
<button
className="ui orange fluid disabled button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
type="submit"
>
create.button
</button>
</form>
</div>
</div>
</div>
</div>
<div
className="fresnel-container fresnel-lessThan-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
create.title
</h3>
<form
className="ui loading form createMatch"
onSubmit={[Function]}
>
<div
className="field"
>
<label>
create.game_type
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
Pictionary
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Pictionary
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/picture-match/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
PictureMatch
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/splendid/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Splendid
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/scrambled/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Scrambled
</span>
</div>
</div>
</div>
</div>
<div
className="field"
>
<label>
create.max_players
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
2
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
2
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
3
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
4
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
5
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
6
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
7
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
8
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
9
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
10
</span>
</div>
</div>
</div>
</div>
<div
className="required field"
>
<label>
create.match_name
</label>
<div
className="ui fluid input"
>
<input
aria-describedby={null}
onChange={[Function]}
placeholder="create.enter_your_own..."
required={true}
type="text"
value=""
/>
</div>
</div>
<div
className="nameProposalPrompt"
>
create.or_use
:
<button
className="nameProposalButton"
onClick={[Function]}
>
en test
</button>
<i
aria-hidden="true"
className="sync link icon"
onClick={[Function]}
/>
</div>
<div
className="field"
>
<div
className="ui checked toggle checkbox"
onChange={[Function]}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
>
<input
aria-describedby={null}
checked={true}
className="hidden"
readOnly={true}
tabIndex={0}
type="checkbox"
/>
<label>
create.private.true
</label>
</div>
</div>
<button
className="ui orange fluid disabled button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
type="submit"
>
create.button
</button>
</form>
</div>
</div>
</div>
</div>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
<div
className="ui active transition visible inverted dimmer"
onClick={[Function]}
>
<div
className="content"
>
<div
className="ui inverted text loader"
>
list.loading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer
className="ui secondary stackable menu"
style={Object {}}
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<a
href="https://github.com/mavend/octoboard"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
<i
aria-hidden="true"
className="github icon"
onClick={[Function]}
/>
footer.github
</a>
</div>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
footer.graphics
:
<a
href="https://icons8.com"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
Icons8
</a>
</div>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<i
aria-hidden="true"
className="language large icon"
onClick={[Function]}
style={
Object {
"marginRight": "8px",
}
}
/>
<div
aria-expanded={false}
className="ui pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
English
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
English
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
polski
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>,
<div
className="ui page modals dimmer transition visible active"
>
<div
className="ui modal transition visible active"
style={Object {}}
>
<div
className="header"
>
guest.title
</div>
<div
className="image content"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-tablet ui medium image"
suppressHydrationWarning={false}
>
<img
src="/images/hugo-upgrade.png"
/>
</div>
<div
className="description"
style={
Object {
"flex": "1 0 auto",
}
}
>
<div
className="ui header"
>
guest.prompt
</div>
<form
className="ui form"
onSubmit={[Function]}
>
<div
className="ui error message"
/>
<div
className="field"
>
<label>
form.nickname
</label>
<div
className="ui input"
>
<input
aria-describedby={null}
autoFocus={true}
maxLength="24"
name="form.nickname"
onChange={[Function]}
placeholder="form.nickname"
type="text"
value="Whatever"
/>
</div>
</div>
<div
className="fields"
>
<div
className="field"
>
<button
aria-describedby={null}
className="ui green button"
onClick={[Function]}
>
actions.guest_login
</button>
</div>
</div>
</form>
<div
className="ui divider"
/>
<div
className="fresnel-container fresnel-greaterThanOrEqual-tablet "
suppressHydrationWarning={false}
>
<a
className="ui button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="user secret icon"
onClick={[Function]}
/>
<span>
actions.guest_login
</span>
</a>
<a
className="ui button"
href="/login"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
<span>
actions.login
</span>
</a>
<a
className="ui button"
href="/register"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="signup icon"
onClick={[Function]}
/>
<span>
actions.register
</span>
</a>
<button
className="ui button"
onClick={[Function]}
>
<i
aria-hidden="true"
className="google icon"
onClick={[Function]}
/>
<span>
Google
</span>
</button>
</div>
<div
className="fresnel-container fresnel-lessThan-tablet "
suppressHydrationWarning={false}
>
<div
className="ui fluid vertical buttons"
>
<a
className="ui button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="user secret icon"
onClick={[Function]}
/>
<span>
actions.guest_login
</span>
</a>
<a
className="ui button"
href="/login"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
<span>
actions.login
</span>
</a>
<a
className="ui button"
href="/register"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="signup icon"
onClick={[Function]}
/>
<span>
actions.register
</span>
</a>
<button
className="ui button"
onClick={[Function]}
>
<i
aria-hidden="true"
className="google icon"
onClick={[Function]}
/>
<span>
Google
</span>
</button>
</div>
</div>
</div>
</div>
<div
className="ui basic secondary segment"
style={
Object {
"marginTop": 0,
}
}
>
<footer
className="ui secondary stackable menu"
style={Object {}}
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<a
href="https://github.com/mavend/octoboard"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
<i
aria-hidden="true"
className="github icon"
onClick={[Function]}
/>
footer.github
</a>
</div>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
footer.graphics
:
<a
href="https://icons8.com"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
Icons8
</a>
</div>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<i
aria-hidden="true"
className="language large icon"
onClick={[Function]}
style={
Object {
"marginRight": "8px",
}
}
/>
<div
aria-expanded={false}
className="ui pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
English
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
English
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
polski
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>,
]
`;
exports[`Storyshots User/CredentialsLayout Login 1`] = `
Array [
<div
className="ui container"
style={
Object {
"display": "flex",
"flexDirection": "column",
"minHeight": "100vh",
}
}
>
<nav
className="ui secondary menu"
>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
>
<div
aria-expanded={false}
className="ui top right pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
style={
Object {
"display": "inline-block",
"height": "40xp",
"marginRight": "10px",
"verticalAlign": "middle",
"width": "40px",
}
}
>
<svg
seed="user-1"
viewBox="-40 0 1060 1120"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M833.15,369a58.35,58.35,0,0,0-35.89-54.16,58.56,58.56,0,0,0,25.82-48.77c0-27.77-19-51-44.47-56.88a59.13,59.13,0,0,0,7.51-28.9C786.12,148.1,760.55,122,729,122a55.89,55.89,0,0,0-24.2,5.49,58.35,58.35,0,0,0,.67-8.92c0-32.21-25.57-58.33-57.12-58.33a56.49,56.49,0,0,0-43.76,20.86c-1.61-30.74-26.53-55.17-57-55.17A56.9,56.9,0,0,0,497.6,56a56.93,56.93,0,0,0-50-30.07c-30.5,0-55.42,24.43-57,55.17a56.53,56.53,0,0,0-43.77-20.86c-31.53,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-11.51,10.31,545.36,10.93,534.18.55,28.2-3.57,50-28.11,50-57.87a58.87,58.87,0,0,0-14.61-39A58.4,58.4,0,0,0,833.15,369ZM270.81,513.54c-.93-.52-1.89-1-2.85-1.41C268.93,511.56,270.81,513.54,270.81,513.54Z"
fill="#FEDC58"
/>
<path
d="M470,505.43a51,51,0,0,1-85.38-36.67,51.1,51.1,0,0,1-63.44-66.59,51.18,51.18,0,0,1-32.54-87.48,51.32,51.32,0,0,1-1.26-93.62A51.42,51.42,0,0,1,327,136.89h.16a51.55,51.55,0,0,1,50-63.89,53,53,0,0,1,5.66.31,56.13,56.13,0,0,0-36-13.09c-31.54,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-5.61,5,123.81,7.75,256.66,8A51.14,51.14,0,0,1,470,505.43Z"
fill="#EDBF2E"
/>
<path
d="M741.2,386l-35,78.16,39.47,58.61c12.24-.91,18.61-2,17.31-3.17,28.2-3.57,50-28.11,50-57.87a60.75,60.75,0,0,0-.8-9.7C792.18,391.39,741.2,386,741.2,386Z"
fill="#EDBF2E"
/>
<path
d="M833.15,369a58.35,58.35,0,0,0-35.89-54.16,58.56,58.56,0,0,0,25.82-48.77c0-27.77-19-51-44.47-56.88a59.13,59.13,0,0,0,7.51-28.9C786.12,148.1,760.55,122,729,122a55.89,55.89,0,0,0-24.2,5.49,58.35,58.35,0,0,0,.67-8.92c0-32.21-25.57-58.33-57.12-58.33a56.49,56.49,0,0,0-43.76,20.86c-1.61-30.74-26.53-55.17-57-55.17A56.9,56.9,0,0,0,497.6,56a56.93,56.93,0,0,0-50-30.07c-30.5,0-55.42,24.43-57,55.17a56.53,56.53,0,0,0-43.77-20.86c-31.53,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-11.51,10.31,545.36,10.93,534.18.55,28.2-3.57,50-28.11,50-57.87a58.87,58.87,0,0,0-14.61-39A58.4,58.4,0,0,0,833.15,369Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M233.25,495C239.168,329.068 351.68,233.25 499,233.25C646.32,233.25 766.75,346.746 766.75,494.066C766.768,504.077 757.643,676.267 760.561,720.218C767.462,824.156 911.469,848.664 959.478,846.601C983.952,845.547 1002.67,866.735 1005.14,887.918C1007.65,909.451 993.383,930.981 951.307,929.164C764.522,921.101 711.947,816.61 700.846,823.351C675.489,838.731 756.698,912.706 809.101,930.901C870.832,952.34 804.307,1016.61 732.282,994.42C630.025,962.93 570.47,832.435 540.674,867.647C522.173,889.51 588.95,963.9 613.008,980.54C659.672,1012.81 606.157,1067.14 542.546,1028.63C444.848,969.51 441.595,876.876 417.22,883.656C393.533,890.235 402.013,912.001 322.956,967.61C243.903,1023.23 145.768,1035.81 127.011,1005.2C108.255,974.58 153.509,950.43 192.073,936.176C230.633,921.922 297.117,897.772 296.4,866.197C295.679,834.622 261.534,859.306 261.534,859.306C180.189,934.685 -48.726,938.58 -24.565,868.222C-12.404,832.814 12.457,834.289 47.113,835.764C81.308,837.218 125.041,838.676 175.502,804.689C214.699,778.293 233.39,709.516 234.6,637.523C235.063,609.971 230.808,563.466 233.25,495Z"
fill="#9E55A1"
/>
<path
d="M93.223,837.942C93.223,837.942 164.984,815.38 176.782,807.434C258.919,752.122 233.698,570.283 232.311,506.052C232.268,504.04 232.247,502.021 232.25,500C232.25,352.68 351.68,233.25 499,233.25C564.366,233.25 624.241,256.762 670.614,295.778C666.976,296.884 662.537,297.109 657.186,296.28C594.447,286.557 522.565,269.906 406.78,343.45C290.995,416.994 317.087,570.339 268.191,713.318C219.375,856.063 93.223,837.942 93.223,837.942Z"
fill="#893E97"
/>
<g
fill="#893E97"
transform="translate(0 -70)"
>
<path
d="M195.985,959.764C194.683,949.693 200.359,938.306 211.077,931.447C216.869,927.739 223.213,925.943 229.157,925.943C236.396,925.943 243.041,928.61 247.353,933.73C232.703,944.085 215.105,952.764 195.985,959.764Z"
/>
<path
d="M148.274,956.968C138.723,956.968 130.837,952.118 129.79,945.039C128.59,936.914 136.864,928.922 148.274,927.201C149.746,926.981 151.201,926.872 152.623,926.872C162.174,926.872 170.056,931.726 171.103,938.806C172.303,946.935 164.029,954.918 152.619,956.639C151.147,956.86 149.692,956.968 148.274,956.968Z"
/>
<path
d="M76.501,981.468C76.489,981.393 76.476,981.318 76.468,981.243C75.264,973.114 83.542,965.131 94.948,963.406C96.42,963.185 97.875,963.076 99.293,963.076C108.849,963.076 116.73,967.931 117.777,975.006C117.947,976.147 117.93,977.285 117.74,978.401C103.692,980.206 89.808,981.231 76.501,981.468Z"
/>
<path
d="M37.376,963.893C35.69,963.893 33.967,963.751 32.228,963.464C18.364,961.147 8.624,950.139 10.466,938.876C12.074,929.031 22.009,922.247 33.745,922.247C35.431,922.247 37.154,922.389 38.898,922.681C52.757,924.993 62.502,936.006 60.659,947.264C59.047,957.11 49.113,963.893 37.376,963.893Z"
/>
<path
d="M172.558,1084.48C172.336,1083.9 172.142,1083.31 171.977,1082.7C169.034,1071.68 177.641,1059.74 191.204,1056.04C193.941,1055.3 196.67,1054.94 199.308,1054.94C209.741,1054.94 218.74,1060.5 221.094,1069.29C221.845,1072.1 221.845,1074.96 221.206,1077.74C203.455,1082.23 186.855,1084.47 172.558,1084.48Z"
/>
<path
d="M464.581,1015.21C454.04,998.76 446.661,983.472 440.577,971.493C440.903,971.214 441.241,970.939 441.595,970.68C444.642,968.426 448.249,967.356 452.008,967.356C459.498,967.356 467.594,971.605 473.118,979.235C481.404,990.697 480.736,1005.45 471.622,1012.19C469.503,1013.76 467.108,1014.75 464.581,1015.21Z"
/>
<path
d="M536.976,1054.38C531.35,1054.38 525.278,1052.41 519.943,1048.43C508.64,1040 504.913,1025.71 511.62,1016.53C515.161,1011.69 520.9,1009.23 527.194,1009.23C532.825,1009.23 538.897,1011.19 544.232,1015.18C555.535,1023.61 559.258,1037.89 552.551,1047.07C549.009,1051.92 543.271,1054.38 536.976,1054.38Z"
/>
<path
d="M579.634,1104.61C568.215,1103.53 555.593,1099.53 542.546,1091.63C539.536,1089.81 536.605,1087.96 533.769,1086.07C534.227,1085.11 534.775,1084.18 535.418,1083.29C538.959,1078.45 544.702,1075.99 550.992,1075.99C556.623,1075.99 562.691,1077.95 568.03,1081.94C575.978,1087.87 580.174,1096.69 579.634,1104.61Z"
/>
<path
d="M614.661,974.493C602.117,961.726 590.945,949.935 581.048,941.03C581.559,939.806 582.21,938.635 583.014,937.535C586.551,932.689 592.293,930.231 598.584,930.231C604.215,930.231 610.283,932.197 615.621,936.18C626.925,944.614 630.647,958.893 623.94,968.076C621.632,971.239 618.383,973.385 614.661,974.493Z"
/>
<path
d="M676.409,990.985C671.062,990.985 664.594,988.705 658.695,984.301C648.27,976.522 643.583,965.068 648.225,958.714C650.24,955.955 653.682,954.61 657.784,954.61C663.135,954.61 669.603,956.893 675.502,961.293C685.931,969.072 690.614,980.531 685.972,986.885C683.957,989.643 680.514,990.985 676.409,990.985Z"
/>
<path
d="M707.474,1047.58C693.17,1040.63 679.814,1031.96 667.348,1022.44C667.715,1021.63 668.164,1020.85 668.704,1020.11C671.536,1016.24 676.219,1014.3 681.504,1014.3C686.838,1014.3 692.791,1016.27 698.08,1020.22C708.175,1027.75 712.186,1039.73 707.474,1047.58Z"
/>
<path
d="M760.396,1047.68C757.036,1047.68 753.475,1047.07 749.938,1045.77C737.633,1041.27 730.307,1030.24 733.572,1021.12C735.897,1014.63 742.975,1010.86 751.302,1010.86C754.662,1010.86 758.224,1011.47 761.761,1012.77C774.061,1017.27 781.391,1028.31 778.126,1037.42C775.797,1043.91 768.723,1047.68 760.396,1047.68Z"
/>
<path
d="M779.676,930.235C775.686,930.235 771.419,929.497 767.173,927.943C752.988,922.755 744.406,910.422 747.996,900.397C750.511,893.372 758.335,889.347 767.668,889.347C771.658,889.347 775.925,890.081 780.175,891.635C794.351,896.822 802.934,909.156 799.343,919.185C796.829,926.205 789.009,930.235 779.676,930.235Z"
/>
<path
d="M856.251,977.876C839.824,973.356 825.058,968.051 811.772,962.297C811.912,961.901 812.069,961.51 812.246,961.122C814.847,955.46 821.121,952.364 828.426,952.364C832.466,952.364 836.819,953.31 841.044,955.297C851.42,960.168 857.571,969.685 856.251,977.876Z"
/>
<path
d="M908.122,953.364C907.314,953.364 906.498,953.331 905.673,953.268C892.627,952.276 882.634,943.635 883.355,933.964C884.031,924.914 893.867,918.168 905.834,918.168C906.642,918.168 907.458,918.201 908.283,918.264C921.33,919.255 931.322,927.897 930.605,937.564C929.929,946.618 920.089,953.364 908.122,953.364Z"
/>
<path
d="M956.188,992.272C954.605,992.272 952.977,992.239 951.307,992.164C944.345,991.864 937.547,991.426 930.951,990.868C930.675,989.614 930.576,988.322 930.675,987.014C931.347,977.96 941.183,971.218 953.15,971.218C953.958,971.218 954.774,971.247 955.599,971.31C968.134,972.264 977.851,980.28 977.954,989.476C971.857,991.268 964.635,992.272 956.188,992.272Z"
/>
<path
d="M264.498,1039.8C258.966,1039.8 254.147,1037.74 251.463,1033.65C246.331,1025.85 250.948,1013.63 261.777,1006.35C266.946,1002.88 272.598,1001.16 277.648,1001.16C283.18,1001.16 287.995,1003.22 290.678,1007.3C295.811,1015.1 291.194,1027.33 280.364,1034.61C275.199,1038.08 269.548,1039.8 264.498,1039.8Z"
/>
<path
d="M330.458,1025.25C325.755,1017.44 330.397,1005.51 341.036,998.364C346.201,994.889 351.849,993.168 356.903,993.168C360.613,993.168 364.006,994.097 366.644,995.943C357.509,1004.37 345.806,1014.09 330.458,1025.25Z"
/>
<path
d="M366.578,974.689C364.245,974.689 362.01,974.122 360.015,972.926C352.043,968.151 350.959,955.11 357.595,943.805C362.571,935.326 370.473,930.231 377.477,930.231C379.815,930.231 382.049,930.797 384.04,931.993C392.012,936.768 393.096,949.81 386.464,961.114C381.488,969.593 373.582,974.689 366.578,974.689Z"
/>
</g>
<path
d="M233.25,495C239.168,329.068 351.68,233.25 499,233.25C646.32,233.25 766.75,346.746 766.75,494.066C766.768,504.077 757.643,676.267 760.561,720.218C767.462,824.156 911.469,848.664 959.478,846.601C983.952,845.547 1002.67,866.735 1005.14,887.918C1007.65,909.451 993.383,930.981 951.307,929.164C764.522,921.101 711.947,816.61 700.846,823.351C675.489,838.731 756.698,912.706 809.101,930.901C870.832,952.34 804.307,1016.61 732.282,994.42C630.025,962.93 570.47,832.435 540.674,867.647C522.173,889.51 588.95,963.9 613.008,980.54C659.672,1012.81 606.157,1067.14 542.546,1028.63C444.848,969.51 441.595,876.876 417.22,883.656C393.533,890.235 402.013,912.001 322.956,967.61C243.903,1023.23 145.768,1035.81 127.011,1005.2C108.255,974.58 153.509,950.43 192.073,936.176C230.633,921.922 297.117,897.772 296.4,866.197C295.679,834.622 261.534,859.306 261.534,859.306C180.189,934.685 -48.726,938.58 -24.565,868.222C-12.404,832.814 12.457,834.289 47.113,835.764C81.308,837.218 125.041,838.676 175.502,804.689C214.699,778.293 233.39,709.516 234.6,637.523C235.063,609.971 230.808,563.466 233.25,495Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M296.49,572.61V559.68a49.6,49.6,0,0,1,1.94-25.32,46,46,0,0,1,3.51-7.65C305.29,518,314.29,511,323.29,508c14-4,31-2,42,9,14,15,12,37,12.45,55.62"
fill="none"
stroke="#592d3d"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M623.31,573c-2.34-26.62,1.66-63.62,36.13-67.17a45,45,0,0,1,8.12,0A43.68,43.68,0,0,1,690,514.41c18,15,14,39,13.95,58.63"
fill="none"
stroke="#592d3d"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="#592d3d"
/>
<path
d="M495,643c-16.95-1-31.73,6.75-36.65,18.22a56.86,56.86,0,0,0,65.14,12.53A55.39,55.39,0,0,0,530,670.2C529.08,656.09,514.06,644.18,495,643Z"
fill="#f28195"
/>
<path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="6px"
/>
<path
d="M478.12,632.46c.45-.11.63-.16.92-.21l.75-.14c.49-.09,1-.14,1.46-.18a21.54,21.54,0,0,1,2.89-.1,25,25,0,0,1,5.79.81,21.4,21.4,0,0,1,10.35,6.1,20.18,20.18,0,0,1,5.08,10.16A17.27,17.27,0,0,1,504,659.25c-2.07-2.93-3.66-5.56-5.32-7.76a28.41,28.41,0,0,0-2.45-3,14.06,14.06,0,0,0-2.7-2.16,15.48,15.48,0,0,0-6.11-2.09A29.5,29.5,0,0,0,484,644c-.59,0-1.18,0-1.76.05l-.85.06-.39,0c-.1,0-.3,0-.23,0Z"
fill="#592d3d"
/>
<path
d="M558.42,406.88c-12.87,24-60,37.45-63.83,31.42-4.3-6.73,37.85-55.32,13.9-106.14"
fill="#893E97"
/>
<path
d="M500.15,221.81C369,221.81,247.79,328.25,226,457c0,0,201.33,15.23,274.66-66.75-4.65,22.65-17.72,39.87-15.51,43.33,3.08,4.84,40.92-5.92,51.25-25.22l-3.66-5.48C582.65,421,680.23,443.46,746,375.26,702.52,285,604.61,221.81,500.15,221.81Z"
fill="#FEDC58"
/>
<path
d="M331.52,454.81a51.09,51.09,0,0,1-10.35-52.64,51.12,51.12,0,0,1-47.23-58.35c-24.09,33.69-41,72.3-48,113.18A671.08,671.08,0,0,0,331.52,454.81Z"
fill="#EDBF2E"
/>
<path
d="M739.66,389.6C665,447,579.07,424.7,533.51,405.69c-10.14,17.94-45.26,27.89-48.15,23.36-2-3.08,8.82-17.65,13.78-37.16-74.28,80.27-259.85,72-259.85,72"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M280.92,140.17a53.59,53.59,0,0,0-20.26,5A45.83,45.83,0,0,0,245,157a18.94,18.94,0,0,0-1.53,1.92c-.48.66-1,1.28-1.46,2a43.23,43.23,0,0,0-2.56,4.23,52.32,52.32,0,0,0-3.9,9.18,62.77,62.77,0,0,0-2.29,20.8A36.91,36.91,0,0,1,229.42,173l.53-2.86.29-1.44c.11-.47.27-.93.41-1.4.28-.94.56-1.88.87-2.81s.76-1.8,1.14-2.71a43.25,43.25,0,0,1,2.76-5.21c.51-.85,1.14-1.61,1.7-2.42a24.27,24.27,0,0,1,1.82-2.33,39.88,39.88,0,0,1,19.58-12.56A34.18,34.18,0,0,1,280.92,140.17Z"
fill="#ffffff"
/>
<path
d="M358.88,77.15a62.84,62.84,0,0,0-18,2,52.26,52.26,0,0,0-15.47,7.06A51.64,51.64,0,0,0,313.09,98c-.84,1.18-1.8,2.31-2.53,3.58l-1.21,1.88c-.43.62-.71,1.3-1.09,2a73.25,73.25,0,0,0-4.1,8.38,28.54,28.54,0,0,1,.39-9.7c.17-.8.27-1.63.52-2.42l.74-2.36a31.32,31.32,0,0,1,1.91-4.61A39,39,0,0,1,321,79.59,39.38,39.38,0,0,1,339.89,73,32.35,32.35,0,0,1,358.88,77.15Z"
fill="#ffffff"
/>
<path
d="M603.1,452.29a320.74,320.74,0,0,1,33.51-6.66L634,446a150.31,150.31,0,0,1,39.75-.48l-2.66-.36c3.28.45,6.54,1,9.82,1.41l-2.66-.35a222.52,222.52,0,0,1,29.48,6.1c5,1.4,11.11-1.72,12.3-7a10.19,10.19,0,0,0-7-12.3,239.34,239.34,0,0,0-34.58-6.78l2.65.36a142.93,142.93,0,0,0-33.43-1.95,236.67,236.67,0,0,0-33.1,4.54c-5.61,1.14-11.19,2.44-16.76,3.81-5.08,1.25-8.61,7.26-7,12.3a10.21,10.21,0,0,0,12.3,7Z"
fill="#592d3d"
/>
<path
d="M261.26,502.22l14.13-1.48,33.67-3.52L350,492.93l35.18-3.69c5.72-.59,11.44-1.17,17.16-1.79l.24,0c2.73-.28,5.07-.92,7.07-2.93a10,10,0,0,0,0-14.14c-1.83-1.69-4.48-3.2-7.07-2.93l-14.13,1.48-33.67,3.53-41,4.29-35.18,3.68c-5.72.6-11.44,1.18-17.16,1.8l-.24,0c-2.73.29-5.07.93-7.07,2.93a10,10,0,0,0,0,14.15c1.83,1.68,4.48,3.2,7.07,2.92Z"
fill="#592d3d"
/>
<g
style={
Object {
"transformOrigin": "center",
}
}
transform="scale(0)"
>
<path
d="M765.63,495.43s.3-2.94.8-8.24C759.75,345.82,643,233.25,500,233.25c-147.32,0-266.75,119.43-266.75,266.75,0,7.28.31,14.49.89,21.63,12.11-39.32,161.32-77.95,298.44-133.08C631.75,452.24,765.63,495.43,765.63,495.43Z"
opacity={0.15}
/>
<path
d="M747.94,163.66l0,0C684.65,74.76,266,93.83,204.16,155.69c-66.94,66.94,29.18,351,29.18,351,0-41.1,160.33-82.31,303.37-139.83,99.17,63.69,228.92,108.54,228.92,108.54S793.59,209.32,747.94,163.66Z"
fill="#FFFFFF"
/>
<path
d="M610.06,159.09c-36.6-4-184.31-1.44-322.45,25.65A481,481,0,0,0,235,197.59c-4.25,1.37-8.49,2.76-12.62,4.33s-8.24,3.18-12.18,5a112.44,112.44,0,0,0-11.34,5.93c-3.54,2.16-10.85,8.81-13.51,11.39l-7.3-15.56a69.81,69.81,0,0,1,12.33-9.59,116.58,116.58,0,0,1,13-6.93,217.66,217.66,0,0,1,26.74-10.11,460.64,460.64,0,0,1,54.55-12.9c18.3-3.27,36.69-5.71,55.1-7.7s35.8-7.94,54.26-8.88C494.59,148.61,592.19,154.62,610.06,159.09Z"
fill="#E2E2E2"
/>
<path
d="M188.17,320.14c3.47-1.42,6.8-2.75,10.2-4.07s6.78-2.61,10.18-3.87c6.79-2.57,13.62-5,20.45-7.36q20.52-7.09,41.26-13.47c6.91-2.14,13.82-4.25,20.78-6.22l10.42-3c3.47-1,6.94-2,10.44-2.93l20.94-5.59,21-5.25C382,261.7,484.59,232.18,513.37,230c-7,1.8-168.2,54.82-176.74,57.39L316,293.56q-20.57,6.22-41,12.91c-6.83,2.16-13.6,4.47-20.38,6.76s-13.54,4.65-20.3,7l-10.1,3.61q-5.07,1.77-10.08,3.64l-10,3.71c-3.32,1.23-6.69,2.52-9.9,3.78Z"
fill="#E2E2E2"
/>
<path
d="M711.7,270.48c-39.92,36.15-102.55,67-169.48,94.19l16.51,15.78h0S659.21,340.49,711.7,270.48Z"
fill="#E2E2E2"
/>
<path
d="M214.45,457.18a24.45,24.45,0,0,1,.66-5.43,27,27,0,0,1,1.75-4.9,36.8,36.8,0,0,1,5.26-8,72.69,72.69,0,0,1,13-11.7,206,206,0,0,1,28.63-16.72c19.57-9.69,39.67-17.6,59.8-25.27s40.4-14.82,60.64-22S424.76,349,445,341.87c40.42-14.25,79.8-31.3,119.21-47.95,9.86-4.14,93.82-54.66,102.72-60.67-8.32,6.8-67.53,50.51-99.82,67.22-39.1,18-78.43,35.84-118.64,50.95-20.13,7.5-40.29,14.87-60.43,22.25s-40.27,14.71-60.19,22.46c-10,3.88-19.86,7.85-29.66,12s-19.51,8.46-28.95,13.15A195.93,195.93,0,0,0,242.3,437a64.46,64.46,0,0,0-10.93,9.68c-3,3.49-7.94,11.25-7.92,14.53Z"
fill="#E2E2E2"
/>
<path
d="M747.94,163.66l0,0C684.65,74.76,266,93.83,204.16,155.69c-66.94,66.94,29.18,351,29.18,351,0-41.1,160.33-82.31,303.37-139.83,99.17,63.69,228.92,108.54,228.92,108.54S793.59,209.32,747.94,163.66Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M534.47,361.33c16.1-6.69,32.19-13.37,48.12-20.36l6-2.61,5.95-2.67,6-2.66,5.91-2.76,5.92-2.73c2-.91,3.92-1.88,5.88-2.81,3.91-1.89,7.83-3.75,11.69-5.74q23.34-11.6,45.56-25.15a427.09,427.09,0,0,0,43-29.7c-1.44,1.66-2.86,3.34-4.34,5s-2.9,3.33-4.49,4.84c-3.12,3.11-6.22,6.29-9.55,9.17-1.64,1.49-3.31,2.92-5,4.39s-3.41,2.8-5.12,4.21-3.45,2.76-5.2,4.11l-5.32,4A448.92,448.92,0,0,1,634.62,328c-3.84,2.18-7.74,4.23-11.63,6.29s-7.8,4.1-11.74,6.08l-5.9,3-6,2.87c-4,1.91-7.92,3.84-11.93,5.64q-24,11.06-48.52,20.65Z"
fill="#592d3d"
/>
<path
d="M769.08,431.09c-1.42-.23-2.71-.46-4-.72s-2.63-.53-3.94-.82c-2.62-.55-5.2-1.21-7.79-1.86q-7.74-2-15.34-4.43a315.52,315.52,0,0,1-29.83-11.2A306.66,306.66,0,0,1,679.61,398a208.59,208.59,0,0,1-26.43-17.56c2.42,1.09,4.82,2.19,7.19,3.35s4.7,2.34,7.12,3.39c4.77,2.18,9.47,4.49,14.28,6.55q14.25,6.56,28.91,12l7.33,2.71L725.4,411c4.94,1.65,9.9,3.22,14.89,4.67s10,2.83,15,4.13l3.77.91c1.26.32,2.52.62,3.78.89,2.5.57,5.08,1.14,7.49,1.59Z"
fill="#592d3d"
/>
<path
d="M615.36,160c-36.49-4.61-73.12-6.62-109.74-7.18s-73.25.43-109.73,3.15c-18.24,1.33-36.45,3.08-54.58,5.35s-36.18,5-54.06,8.36a484.87,484.87,0,0,0-52.83,12.84,211.12,211.12,0,0,0-25,9.44A113.77,113.77,0,0,0,197.84,198a56.05,56.05,0,0,0-9.85,7.45L179.5,197a67.76,67.76,0,0,1,12-9.28,115.9,115.9,0,0,1,12.81-6.8,226.14,226.14,0,0,1,26.49-10A457.87,457.87,0,0,1,285.08,158c36.5-6.53,73.31-10.19,110.17-12.17a1068.52,1068.52,0,0,1,110.62-.17c9.2.53,18.4,1.16,27.59,1.94s18.35,1.78,27.49,2.93A542.75,542.75,0,0,1,615.36,160Z"
fill="#592d3d"
/>
<path
d="M210.05,449.36a24.5,24.5,0,0,1,.64-5.37,26.93,26.93,0,0,1,1.71-4.87,36.36,36.36,0,0,1,5.18-8,71.43,71.43,0,0,1,12.89-11.68,202.41,202.41,0,0,1,28.39-16.69c19.41-9.65,39.35-17.52,59.32-25.14s40.08-14.74,60.17-21.86,40.21-14,60.25-21.15c40.11-14.17,80-28.92,119.07-45.49q14.67-6.18,29.14-12.83t28.69-13.79q14.22-7.17,28-15.08t27.08-16.87c-8.25,6.75-16.94,13-25.81,18.91s-18,11.55-27.24,16.89S598.9,276.71,589.4,281.6s-19.15,9.51-28.82,14c-38.79,18-78.6,33.46-118.5,48.49-20,7.46-40,14.78-59.95,22.12s-39.95,14.62-59.72,22.33c-9.87,3.85-19.7,7.81-29.41,11.95s-19.35,8.41-28.71,13.08a191.39,191.39,0,0,0-26.63,15.63,63.16,63.16,0,0,0-10.78,9.64c-3,3.47-4.85,7.2-4.83,10.48Z"
fill="#592d3d"
/>
<path
d="M184.48,311.25C198,305.7,211.57,300.86,225.22,296s27.38-9.26,41.18-13.53c27.6-8.52,55.41-16.36,83.45-23.23S406,246,434.45,240.93L445.09,239l5.33-1,5.34-.85L477.15,234c7.13-1.1,14.3-1.92,21.46-2.74s14.33-1.6,21.5-2.31q-10.54,2.44-21.09,4.73c-7,1.55-14.09,2.94-21.08,4.63-14,3.22-28.07,6.22-42,9.66q-42,9.66-83.48,21.17l-20.73,5.79L311.07,281c-13.74,4.12-27.44,8.36-41.07,12.81-6.84,2.15-13.63,4.46-20.42,6.74s-13.57,4.62-20.35,6.94c-13.48,4.75-27,9.69-40.19,14.83Z"
fill="#592d3d"
/>
</g>
<circle
cx="382.91"
cy="594.66"
fill="#ffffff"
opacity={0.2}
r="33.84"
/>
<path
d="M375.87,631l43.31-41.74a147.47,147.47,0,0,0-7.57-12.9l-45.87,44.21C367.64,621.9,373.72,630.08,375.87,631Z"
fill="#ffffff"
opacity={0.4}
/>
<circle
cx="382.91"
cy="594.66"
fill="none"
r="33.84"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M378,580.47c1.22,3.83-3.5,6.78-7,7.37-3.54,0-5.9-2.36-7.08-5.31-.59-2.95,0-5.9,2.36-7.67,2.95-1.18,7.08-2.36,9.7.67A6.85,6.85,0,0,1,378,580.47Z"
fill="#ffffff"
/>
<path
d="M384.32,578.21a2.29,2.29,0,0,1-4.49.19c0-1.77.59-2.36,2.27-2.42a2.22,2.22,0,0,1,2.22,2.22Z"
fill="#ffffff"
/>
<circle
cx="615.2"
cy="594.66"
fill="#ffffff"
opacity={0.2}
r="33.84"
/>
<path
d="M610.12,628.11l38.54-38.54c-.21-1.37-5.91-8.1-6.29-9.44l-41.72,41.74C602,622.24,608.75,627.91,610.12,628.11Z"
fill="#ffffff"
opacity={0.4}
/>
<circle
cx="615.2"
cy="594.66"
fill="none"
r="33.84"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M607.36,579.91c1,3.25-3,5.75-6,6.25-3,0-5-2-6-4.5-.5-2.5,0-5,2-6.5,2.5-1,6-2,8.23.57A5.85,5.85,0,0,1,607.36,579.91Z"
fill="#ffffff"
/>
<path
d="M612.7,578a1.94,1.94,0,0,1-3.8.16c0-1.5.5-2,1.92-2A1.88,1.88,0,0,1,612.7,578Z"
fill="#ffffff"
/>
<path
d="M416.74,594.66q83.68-30,164.63,0"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M615.2,634.5A39.9,39.9,0,0,1,575.6,599c-50-17.65-101.46-17.64-153.1,0a39.81,39.81,0,0,1-50.92,33.84,38,38,0,0,0,54.51-29.91c49.22-16.86,98.28-16.88,145.93,0a38,38,0,0,0,54.51,30A40,40,0,0,1,615.2,634.5Z"
opacity={0.15}
/>
</g>
</svg>
</div>
Jack
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-disabled={true}
className="disabled item"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="user icon"
onClick={[Function]}
/>
<span
className="text"
>
user.guest
</span>
</div>
<div
className="divider"
/>
<a
className="item"
href="/change_password"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="exchange icon"
onClick={[Function]}
/>
<span
className="text"
>
user.change_password
</span>
</a>
<a
className="item"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="log out icon"
onClick={[Function]}
/>
<span
className="text"
>
user.logout
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<main
style={
Object {
"flex": "1 0 auto",
}
}
>
<div
className="ui container"
>
<img
alt="octoboard logo"
className="ui image"
src="/images/octoboard.svg"
style={
Object {
"margin": "30px auto 30px",
"width": "300px",
}
}
/>
</div>
<div
className="ui container"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="twelve wide column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
<div
className="ui active transition visible inverted dimmer"
onClick={[Function]}
>
<div
className="content"
>
<div
className="ui inverted text loader"
>
list.loading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="four wide column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
create.title
</h3>
<form
className="ui loading form createMatch"
onSubmit={[Function]}
>
<div
className="field"
>
<label>
create.game_type
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
Pictionary
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Pictionary
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/picture-match/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
PictureMatch
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/splendid/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Splendid
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/scrambled/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Scrambled
</span>
</div>
</div>
</div>
</div>
<div
className="field"
>
<label>
create.max_players
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
2
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
2
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
3
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
4
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
5
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
6
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
7
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
8
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
9
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
10
</span>
</div>
</div>
</div>
</div>
<div
className="required field"
>
<label>
create.match_name
</label>
<div
className="ui fluid input"
>
<input
aria-describedby={null}
onChange={[Function]}
placeholder="create.enter_your_own..."
required={true}
type="text"
value=""
/>
</div>
</div>
<div
className="nameProposalPrompt"
>
create.or_use
:
<button
className="nameProposalButton"
onClick={[Function]}
>
en test
</button>
<i
aria-hidden="true"
className="sync link icon"
onClick={[Function]}
/>
</div>
<div
className="field"
>
<div
className="ui checked toggle checkbox"
onChange={[Function]}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
>
<input
aria-describedby={null}
checked={true}
className="hidden"
readOnly={true}
tabIndex={0}
type="checkbox"
/>
<label>
create.private.true
</label>
</div>
</div>
<button
className="ui orange fluid disabled button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
type="submit"
>
create.button
</button>
</form>
</div>
</div>
</div>
</div>
<div
className="fresnel-container fresnel-lessThan-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
create.title
</h3>
<form
className="ui loading form createMatch"
onSubmit={[Function]}
>
<div
className="field"
>
<label>
create.game_type
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
Pictionary
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Pictionary
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/picture-match/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
PictureMatch
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/splendid/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Splendid
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/scrambled/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Scrambled
</span>
</div>
</div>
</div>
</div>
<div
className="field"
>
<label>
create.max_players
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
2
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
2
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
3
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
4
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
5
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
6
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
7
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
8
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
9
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
10
</span>
</div>
</div>
</div>
</div>
<div
className="required field"
>
<label>
create.match_name
</label>
<div
className="ui fluid input"
>
<input
aria-describedby={null}
onChange={[Function]}
placeholder="create.enter_your_own..."
required={true}
type="text"
value=""
/>
</div>
</div>
<div
className="nameProposalPrompt"
>
create.or_use
:
<button
className="nameProposalButton"
onClick={[Function]}
>
en test
</button>
<i
aria-hidden="true"
className="sync link icon"
onClick={[Function]}
/>
</div>
<div
className="field"
>
<div
className="ui checked toggle checkbox"
onChange={[Function]}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
>
<input
aria-describedby={null}
checked={true}
className="hidden"
readOnly={true}
tabIndex={0}
type="checkbox"
/>
<label>
create.private.true
</label>
</div>
</div>
<button
className="ui orange fluid disabled button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
type="submit"
>
create.button
</button>
</form>
</div>
</div>
</div>
</div>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
<div
className="ui active transition visible inverted dimmer"
onClick={[Function]}
>
<div
className="content"
>
<div
className="ui inverted text loader"
>
list.loading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer
className="ui secondary stackable menu"
style={Object {}}
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<a
href="https://github.com/mavend/octoboard"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
<i
aria-hidden="true"
className="github icon"
onClick={[Function]}
/>
footer.github
</a>
</div>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
footer.graphics
:
<a
href="https://icons8.com"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
Icons8
</a>
</div>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<i
aria-hidden="true"
className="language large icon"
onClick={[Function]}
style={
Object {
"marginRight": "8px",
}
}
/>
<div
aria-expanded={false}
className="ui pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
English
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
English
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
polski
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>,
<div
className="ui page modals dimmer transition visible active"
>
<div
className="ui modal transition visible active"
style={Object {}}
>
<div
className="header"
>
login.title
</div>
<div
className="image content"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-tablet ui medium image"
suppressHydrationWarning={false}
>
<img
src="/images/hugo-upgrade.png"
/>
</div>
<div
className="description"
style={
Object {
"flex": "1 0 auto",
}
}
>
<div
className="ui header"
>
login.prompt
</div>
<form
className="ui form"
onSubmit={[Function]}
>
<div
className="ui error message"
/>
<div
className="field"
>
<label>
form.email
</label>
<div
className="ui input"
>
<input
aria-describedby={null}
autoComplete="username"
autoFocus={true}
maxLength="24"
name="form.email"
onChange={[Function]}
placeholder="form.email"
type="email"
value="qwe@qwe.qwe"
/>
</div>
</div>
<div
className="field"
>
<label>
form.password
</label>
<div
className="ui input"
>
<input
aria-describedby={null}
autoComplete="current-password"
name="form.password"
onChange={[Function]}
placeholder="form.password"
type="password"
value="Whatever"
/>
</div>
</div>
<div
className="fields"
>
<div
className="field"
>
<button
aria-describedby={null}
className="ui green button"
onClick={[Function]}
>
actions.login
</button>
</div>
</div>
</form>
<div
className="ui divider"
/>
<div
className="fresnel-container fresnel-greaterThanOrEqual-tablet "
suppressHydrationWarning={false}
>
<a
className="ui button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="user secret icon"
onClick={[Function]}
/>
<span>
actions.guest_login
</span>
</a>
<a
className="ui button"
href="/login"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
<span>
actions.login
</span>
</a>
<a
className="ui button"
href="/register"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="signup icon"
onClick={[Function]}
/>
<span>
actions.register
</span>
</a>
<button
className="ui button"
onClick={[Function]}
>
<i
aria-hidden="true"
className="google icon"
onClick={[Function]}
/>
<span>
Google
</span>
</button>
</div>
<div
className="fresnel-container fresnel-lessThan-tablet "
suppressHydrationWarning={false}
>
<div
className="ui fluid vertical buttons"
>
<a
className="ui button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="user secret icon"
onClick={[Function]}
/>
<span>
actions.guest_login
</span>
</a>
<a
className="ui button"
href="/login"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
<span>
actions.login
</span>
</a>
<a
className="ui button"
href="/register"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="signup icon"
onClick={[Function]}
/>
<span>
actions.register
</span>
</a>
<button
className="ui button"
onClick={[Function]}
>
<i
aria-hidden="true"
className="google icon"
onClick={[Function]}
/>
<span>
Google
</span>
</button>
</div>
</div>
</div>
</div>
<div
className="ui basic secondary segment"
style={
Object {
"marginTop": 0,
}
}
>
<footer
className="ui secondary stackable menu"
style={Object {}}
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<a
href="https://github.com/mavend/octoboard"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
<i
aria-hidden="true"
className="github icon"
onClick={[Function]}
/>
footer.github
</a>
</div>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
footer.graphics
:
<a
href="https://icons8.com"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
Icons8
</a>
</div>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<i
aria-hidden="true"
className="language large icon"
onClick={[Function]}
style={
Object {
"marginRight": "8px",
}
}
/>
<div
aria-expanded={false}
className="ui pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
English
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
English
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
polski
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>,
]
`;
exports[`Storyshots User/CredentialsLayout Register 1`] = `
Array [
<div
className="ui container"
style={
Object {
"display": "flex",
"flexDirection": "column",
"minHeight": "100vh",
}
}
>
<nav
className="ui secondary menu"
>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
>
<div
aria-expanded={false}
className="ui top right pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
style={
Object {
"display": "inline-block",
"height": "40xp",
"marginRight": "10px",
"verticalAlign": "middle",
"width": "40px",
}
}
>
<svg
seed="user-1"
viewBox="-40 0 1060 1120"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M833.15,369a58.35,58.35,0,0,0-35.89-54.16,58.56,58.56,0,0,0,25.82-48.77c0-27.77-19-51-44.47-56.88a59.13,59.13,0,0,0,7.51-28.9C786.12,148.1,760.55,122,729,122a55.89,55.89,0,0,0-24.2,5.49,58.35,58.35,0,0,0,.67-8.92c0-32.21-25.57-58.33-57.12-58.33a56.49,56.49,0,0,0-43.76,20.86c-1.61-30.74-26.53-55.17-57-55.17A56.9,56.9,0,0,0,497.6,56a56.93,56.93,0,0,0-50-30.07c-30.5,0-55.42,24.43-57,55.17a56.53,56.53,0,0,0-43.77-20.86c-31.53,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-11.51,10.31,545.36,10.93,534.18.55,28.2-3.57,50-28.11,50-57.87a58.87,58.87,0,0,0-14.61-39A58.4,58.4,0,0,0,833.15,369ZM270.81,513.54c-.93-.52-1.89-1-2.85-1.41C268.93,511.56,270.81,513.54,270.81,513.54Z"
fill="#FEDC58"
/>
<path
d="M470,505.43a51,51,0,0,1-85.38-36.67,51.1,51.1,0,0,1-63.44-66.59,51.18,51.18,0,0,1-32.54-87.48,51.32,51.32,0,0,1-1.26-93.62A51.42,51.42,0,0,1,327,136.89h.16a51.55,51.55,0,0,1,50-63.89,53,53,0,0,1,5.66.31,56.13,56.13,0,0,0-36-13.09c-31.54,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-5.61,5,123.81,7.75,256.66,8A51.14,51.14,0,0,1,470,505.43Z"
fill="#EDBF2E"
/>
<path
d="M741.2,386l-35,78.16,39.47,58.61c12.24-.91,18.61-2,17.31-3.17,28.2-3.57,50-28.11,50-57.87a60.75,60.75,0,0,0-.8-9.7C792.18,391.39,741.2,386,741.2,386Z"
fill="#EDBF2E"
/>
<path
d="M833.15,369a58.35,58.35,0,0,0-35.89-54.16,58.56,58.56,0,0,0,25.82-48.77c0-27.77-19-51-44.47-56.88a59.13,59.13,0,0,0,7.51-28.9C786.12,148.1,760.55,122,729,122a55.89,55.89,0,0,0-24.2,5.49,58.35,58.35,0,0,0,.67-8.92c0-32.21-25.57-58.33-57.12-58.33a56.49,56.49,0,0,0-43.76,20.86c-1.61-30.74-26.53-55.17-57-55.17A56.9,56.9,0,0,0,497.6,56a56.93,56.93,0,0,0-50-30.07c-30.5,0-55.42,24.43-57,55.17a56.53,56.53,0,0,0-43.77-20.86c-31.53,0-57.11,26.11-57.11,58.33a59.65,59.65,0,0,0,.66,8.92A55.76,55.76,0,0,0,266.21,122c-31.54,0-57.12,26.12-57.12,58.33a59,59,0,0,0,7.51,28.9c-25.45,5.88-44.46,29.11-44.46,56.88A58.56,58.56,0,0,0,198,314.86a58.83,58.83,0,0,0-1.13,107.85,58.81,58.81,0,0,0-14.6,39c0,28.51,20.05,52.25,46.54,57.33-11.51,10.31,545.36,10.93,534.18.55,28.2-3.57,50-28.11,50-57.87a58.87,58.87,0,0,0-14.61-39A58.4,58.4,0,0,0,833.15,369Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M233.25,495C239.168,329.068 351.68,233.25 499,233.25C646.32,233.25 766.75,346.746 766.75,494.066C766.768,504.077 757.643,676.267 760.561,720.218C767.462,824.156 911.469,848.664 959.478,846.601C983.952,845.547 1002.67,866.735 1005.14,887.918C1007.65,909.451 993.383,930.981 951.307,929.164C764.522,921.101 711.947,816.61 700.846,823.351C675.489,838.731 756.698,912.706 809.101,930.901C870.832,952.34 804.307,1016.61 732.282,994.42C630.025,962.93 570.47,832.435 540.674,867.647C522.173,889.51 588.95,963.9 613.008,980.54C659.672,1012.81 606.157,1067.14 542.546,1028.63C444.848,969.51 441.595,876.876 417.22,883.656C393.533,890.235 402.013,912.001 322.956,967.61C243.903,1023.23 145.768,1035.81 127.011,1005.2C108.255,974.58 153.509,950.43 192.073,936.176C230.633,921.922 297.117,897.772 296.4,866.197C295.679,834.622 261.534,859.306 261.534,859.306C180.189,934.685 -48.726,938.58 -24.565,868.222C-12.404,832.814 12.457,834.289 47.113,835.764C81.308,837.218 125.041,838.676 175.502,804.689C214.699,778.293 233.39,709.516 234.6,637.523C235.063,609.971 230.808,563.466 233.25,495Z"
fill="#9E55A1"
/>
<path
d="M93.223,837.942C93.223,837.942 164.984,815.38 176.782,807.434C258.919,752.122 233.698,570.283 232.311,506.052C232.268,504.04 232.247,502.021 232.25,500C232.25,352.68 351.68,233.25 499,233.25C564.366,233.25 624.241,256.762 670.614,295.778C666.976,296.884 662.537,297.109 657.186,296.28C594.447,286.557 522.565,269.906 406.78,343.45C290.995,416.994 317.087,570.339 268.191,713.318C219.375,856.063 93.223,837.942 93.223,837.942Z"
fill="#893E97"
/>
<g
fill="#893E97"
transform="translate(0 -70)"
>
<path
d="M195.985,959.764C194.683,949.693 200.359,938.306 211.077,931.447C216.869,927.739 223.213,925.943 229.157,925.943C236.396,925.943 243.041,928.61 247.353,933.73C232.703,944.085 215.105,952.764 195.985,959.764Z"
/>
<path
d="M148.274,956.968C138.723,956.968 130.837,952.118 129.79,945.039C128.59,936.914 136.864,928.922 148.274,927.201C149.746,926.981 151.201,926.872 152.623,926.872C162.174,926.872 170.056,931.726 171.103,938.806C172.303,946.935 164.029,954.918 152.619,956.639C151.147,956.86 149.692,956.968 148.274,956.968Z"
/>
<path
d="M76.501,981.468C76.489,981.393 76.476,981.318 76.468,981.243C75.264,973.114 83.542,965.131 94.948,963.406C96.42,963.185 97.875,963.076 99.293,963.076C108.849,963.076 116.73,967.931 117.777,975.006C117.947,976.147 117.93,977.285 117.74,978.401C103.692,980.206 89.808,981.231 76.501,981.468Z"
/>
<path
d="M37.376,963.893C35.69,963.893 33.967,963.751 32.228,963.464C18.364,961.147 8.624,950.139 10.466,938.876C12.074,929.031 22.009,922.247 33.745,922.247C35.431,922.247 37.154,922.389 38.898,922.681C52.757,924.993 62.502,936.006 60.659,947.264C59.047,957.11 49.113,963.893 37.376,963.893Z"
/>
<path
d="M172.558,1084.48C172.336,1083.9 172.142,1083.31 171.977,1082.7C169.034,1071.68 177.641,1059.74 191.204,1056.04C193.941,1055.3 196.67,1054.94 199.308,1054.94C209.741,1054.94 218.74,1060.5 221.094,1069.29C221.845,1072.1 221.845,1074.96 221.206,1077.74C203.455,1082.23 186.855,1084.47 172.558,1084.48Z"
/>
<path
d="M464.581,1015.21C454.04,998.76 446.661,983.472 440.577,971.493C440.903,971.214 441.241,970.939 441.595,970.68C444.642,968.426 448.249,967.356 452.008,967.356C459.498,967.356 467.594,971.605 473.118,979.235C481.404,990.697 480.736,1005.45 471.622,1012.19C469.503,1013.76 467.108,1014.75 464.581,1015.21Z"
/>
<path
d="M536.976,1054.38C531.35,1054.38 525.278,1052.41 519.943,1048.43C508.64,1040 504.913,1025.71 511.62,1016.53C515.161,1011.69 520.9,1009.23 527.194,1009.23C532.825,1009.23 538.897,1011.19 544.232,1015.18C555.535,1023.61 559.258,1037.89 552.551,1047.07C549.009,1051.92 543.271,1054.38 536.976,1054.38Z"
/>
<path
d="M579.634,1104.61C568.215,1103.53 555.593,1099.53 542.546,1091.63C539.536,1089.81 536.605,1087.96 533.769,1086.07C534.227,1085.11 534.775,1084.18 535.418,1083.29C538.959,1078.45 544.702,1075.99 550.992,1075.99C556.623,1075.99 562.691,1077.95 568.03,1081.94C575.978,1087.87 580.174,1096.69 579.634,1104.61Z"
/>
<path
d="M614.661,974.493C602.117,961.726 590.945,949.935 581.048,941.03C581.559,939.806 582.21,938.635 583.014,937.535C586.551,932.689 592.293,930.231 598.584,930.231C604.215,930.231 610.283,932.197 615.621,936.18C626.925,944.614 630.647,958.893 623.94,968.076C621.632,971.239 618.383,973.385 614.661,974.493Z"
/>
<path
d="M676.409,990.985C671.062,990.985 664.594,988.705 658.695,984.301C648.27,976.522 643.583,965.068 648.225,958.714C650.24,955.955 653.682,954.61 657.784,954.61C663.135,954.61 669.603,956.893 675.502,961.293C685.931,969.072 690.614,980.531 685.972,986.885C683.957,989.643 680.514,990.985 676.409,990.985Z"
/>
<path
d="M707.474,1047.58C693.17,1040.63 679.814,1031.96 667.348,1022.44C667.715,1021.63 668.164,1020.85 668.704,1020.11C671.536,1016.24 676.219,1014.3 681.504,1014.3C686.838,1014.3 692.791,1016.27 698.08,1020.22C708.175,1027.75 712.186,1039.73 707.474,1047.58Z"
/>
<path
d="M760.396,1047.68C757.036,1047.68 753.475,1047.07 749.938,1045.77C737.633,1041.27 730.307,1030.24 733.572,1021.12C735.897,1014.63 742.975,1010.86 751.302,1010.86C754.662,1010.86 758.224,1011.47 761.761,1012.77C774.061,1017.27 781.391,1028.31 778.126,1037.42C775.797,1043.91 768.723,1047.68 760.396,1047.68Z"
/>
<path
d="M779.676,930.235C775.686,930.235 771.419,929.497 767.173,927.943C752.988,922.755 744.406,910.422 747.996,900.397C750.511,893.372 758.335,889.347 767.668,889.347C771.658,889.347 775.925,890.081 780.175,891.635C794.351,896.822 802.934,909.156 799.343,919.185C796.829,926.205 789.009,930.235 779.676,930.235Z"
/>
<path
d="M856.251,977.876C839.824,973.356 825.058,968.051 811.772,962.297C811.912,961.901 812.069,961.51 812.246,961.122C814.847,955.46 821.121,952.364 828.426,952.364C832.466,952.364 836.819,953.31 841.044,955.297C851.42,960.168 857.571,969.685 856.251,977.876Z"
/>
<path
d="M908.122,953.364C907.314,953.364 906.498,953.331 905.673,953.268C892.627,952.276 882.634,943.635 883.355,933.964C884.031,924.914 893.867,918.168 905.834,918.168C906.642,918.168 907.458,918.201 908.283,918.264C921.33,919.255 931.322,927.897 930.605,937.564C929.929,946.618 920.089,953.364 908.122,953.364Z"
/>
<path
d="M956.188,992.272C954.605,992.272 952.977,992.239 951.307,992.164C944.345,991.864 937.547,991.426 930.951,990.868C930.675,989.614 930.576,988.322 930.675,987.014C931.347,977.96 941.183,971.218 953.15,971.218C953.958,971.218 954.774,971.247 955.599,971.31C968.134,972.264 977.851,980.28 977.954,989.476C971.857,991.268 964.635,992.272 956.188,992.272Z"
/>
<path
d="M264.498,1039.8C258.966,1039.8 254.147,1037.74 251.463,1033.65C246.331,1025.85 250.948,1013.63 261.777,1006.35C266.946,1002.88 272.598,1001.16 277.648,1001.16C283.18,1001.16 287.995,1003.22 290.678,1007.3C295.811,1015.1 291.194,1027.33 280.364,1034.61C275.199,1038.08 269.548,1039.8 264.498,1039.8Z"
/>
<path
d="M330.458,1025.25C325.755,1017.44 330.397,1005.51 341.036,998.364C346.201,994.889 351.849,993.168 356.903,993.168C360.613,993.168 364.006,994.097 366.644,995.943C357.509,1004.37 345.806,1014.09 330.458,1025.25Z"
/>
<path
d="M366.578,974.689C364.245,974.689 362.01,974.122 360.015,972.926C352.043,968.151 350.959,955.11 357.595,943.805C362.571,935.326 370.473,930.231 377.477,930.231C379.815,930.231 382.049,930.797 384.04,931.993C392.012,936.768 393.096,949.81 386.464,961.114C381.488,969.593 373.582,974.689 366.578,974.689Z"
/>
</g>
<path
d="M233.25,495C239.168,329.068 351.68,233.25 499,233.25C646.32,233.25 766.75,346.746 766.75,494.066C766.768,504.077 757.643,676.267 760.561,720.218C767.462,824.156 911.469,848.664 959.478,846.601C983.952,845.547 1002.67,866.735 1005.14,887.918C1007.65,909.451 993.383,930.981 951.307,929.164C764.522,921.101 711.947,816.61 700.846,823.351C675.489,838.731 756.698,912.706 809.101,930.901C870.832,952.34 804.307,1016.61 732.282,994.42C630.025,962.93 570.47,832.435 540.674,867.647C522.173,889.51 588.95,963.9 613.008,980.54C659.672,1012.81 606.157,1067.14 542.546,1028.63C444.848,969.51 441.595,876.876 417.22,883.656C393.533,890.235 402.013,912.001 322.956,967.61C243.903,1023.23 145.768,1035.81 127.011,1005.2C108.255,974.58 153.509,950.43 192.073,936.176C230.633,921.922 297.117,897.772 296.4,866.197C295.679,834.622 261.534,859.306 261.534,859.306C180.189,934.685 -48.726,938.58 -24.565,868.222C-12.404,832.814 12.457,834.289 47.113,835.764C81.308,837.218 125.041,838.676 175.502,804.689C214.699,778.293 233.39,709.516 234.6,637.523C235.063,609.971 230.808,563.466 233.25,495Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M296.49,572.61V559.68a49.6,49.6,0,0,1,1.94-25.32,46,46,0,0,1,3.51-7.65C305.29,518,314.29,511,323.29,508c14-4,31-2,42,9,14,15,12,37,12.45,55.62"
fill="none"
stroke="#592d3d"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M623.31,573c-2.34-26.62,1.66-63.62,36.13-67.17a45,45,0,0,1,8.12,0A43.68,43.68,0,0,1,690,514.41c18,15,14,39,13.95,58.63"
fill="none"
stroke="#592d3d"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="#592d3d"
/>
<path
d="M495,643c-16.95-1-31.73,6.75-36.65,18.22a56.86,56.86,0,0,0,65.14,12.53A55.39,55.39,0,0,0,530,670.2C529.08,656.09,514.06,644.18,495,643Z"
fill="#f28195"
/>
<path
d="M443.14,621.86c0-18.9,113.72-16.06,113.72,0a56.86,56.86,0,0,1-113.72,0Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="6px"
/>
<path
d="M478.12,632.46c.45-.11.63-.16.92-.21l.75-.14c.49-.09,1-.14,1.46-.18a21.54,21.54,0,0,1,2.89-.1,25,25,0,0,1,5.79.81,21.4,21.4,0,0,1,10.35,6.1,20.18,20.18,0,0,1,5.08,10.16A17.27,17.27,0,0,1,504,659.25c-2.07-2.93-3.66-5.56-5.32-7.76a28.41,28.41,0,0,0-2.45-3,14.06,14.06,0,0,0-2.7-2.16,15.48,15.48,0,0,0-6.11-2.09A29.5,29.5,0,0,0,484,644c-.59,0-1.18,0-1.76.05l-.85.06-.39,0c-.1,0-.3,0-.23,0Z"
fill="#592d3d"
/>
<path
d="M558.42,406.88c-12.87,24-60,37.45-63.83,31.42-4.3-6.73,37.85-55.32,13.9-106.14"
fill="#893E97"
/>
<path
d="M500.15,221.81C369,221.81,247.79,328.25,226,457c0,0,201.33,15.23,274.66-66.75-4.65,22.65-17.72,39.87-15.51,43.33,3.08,4.84,40.92-5.92,51.25-25.22l-3.66-5.48C582.65,421,680.23,443.46,746,375.26,702.52,285,604.61,221.81,500.15,221.81Z"
fill="#FEDC58"
/>
<path
d="M331.52,454.81a51.09,51.09,0,0,1-10.35-52.64,51.12,51.12,0,0,1-47.23-58.35c-24.09,33.69-41,72.3-48,113.18A671.08,671.08,0,0,0,331.52,454.81Z"
fill="#EDBF2E"
/>
<path
d="M739.66,389.6C665,447,579.07,424.7,533.51,405.69c-10.14,17.94-45.26,27.89-48.15,23.36-2-3.08,8.82-17.65,13.78-37.16-74.28,80.27-259.85,72-259.85,72"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M280.92,140.17a53.59,53.59,0,0,0-20.26,5A45.83,45.83,0,0,0,245,157a18.94,18.94,0,0,0-1.53,1.92c-.48.66-1,1.28-1.46,2a43.23,43.23,0,0,0-2.56,4.23,52.32,52.32,0,0,0-3.9,9.18,62.77,62.77,0,0,0-2.29,20.8A36.91,36.91,0,0,1,229.42,173l.53-2.86.29-1.44c.11-.47.27-.93.41-1.4.28-.94.56-1.88.87-2.81s.76-1.8,1.14-2.71a43.25,43.25,0,0,1,2.76-5.21c.51-.85,1.14-1.61,1.7-2.42a24.27,24.27,0,0,1,1.82-2.33,39.88,39.88,0,0,1,19.58-12.56A34.18,34.18,0,0,1,280.92,140.17Z"
fill="#ffffff"
/>
<path
d="M358.88,77.15a62.84,62.84,0,0,0-18,2,52.26,52.26,0,0,0-15.47,7.06A51.64,51.64,0,0,0,313.09,98c-.84,1.18-1.8,2.31-2.53,3.58l-1.21,1.88c-.43.62-.71,1.3-1.09,2a73.25,73.25,0,0,0-4.1,8.38,28.54,28.54,0,0,1,.39-9.7c.17-.8.27-1.63.52-2.42l.74-2.36a31.32,31.32,0,0,1,1.91-4.61A39,39,0,0,1,321,79.59,39.38,39.38,0,0,1,339.89,73,32.35,32.35,0,0,1,358.88,77.15Z"
fill="#ffffff"
/>
<path
d="M603.1,452.29a320.74,320.74,0,0,1,33.51-6.66L634,446a150.31,150.31,0,0,1,39.75-.48l-2.66-.36c3.28.45,6.54,1,9.82,1.41l-2.66-.35a222.52,222.52,0,0,1,29.48,6.1c5,1.4,11.11-1.72,12.3-7a10.19,10.19,0,0,0-7-12.3,239.34,239.34,0,0,0-34.58-6.78l2.65.36a142.93,142.93,0,0,0-33.43-1.95,236.67,236.67,0,0,0-33.1,4.54c-5.61,1.14-11.19,2.44-16.76,3.81-5.08,1.25-8.61,7.26-7,12.3a10.21,10.21,0,0,0,12.3,7Z"
fill="#592d3d"
/>
<path
d="M261.26,502.22l14.13-1.48,33.67-3.52L350,492.93l35.18-3.69c5.72-.59,11.44-1.17,17.16-1.79l.24,0c2.73-.28,5.07-.92,7.07-2.93a10,10,0,0,0,0-14.14c-1.83-1.69-4.48-3.2-7.07-2.93l-14.13,1.48-33.67,3.53-41,4.29-35.18,3.68c-5.72.6-11.44,1.18-17.16,1.8l-.24,0c-2.73.29-5.07.93-7.07,2.93a10,10,0,0,0,0,14.15c1.83,1.68,4.48,3.2,7.07,2.92Z"
fill="#592d3d"
/>
<g
style={
Object {
"transformOrigin": "center",
}
}
transform="scale(0)"
>
<path
d="M765.63,495.43s.3-2.94.8-8.24C759.75,345.82,643,233.25,500,233.25c-147.32,0-266.75,119.43-266.75,266.75,0,7.28.31,14.49.89,21.63,12.11-39.32,161.32-77.95,298.44-133.08C631.75,452.24,765.63,495.43,765.63,495.43Z"
opacity={0.15}
/>
<path
d="M747.94,163.66l0,0C684.65,74.76,266,93.83,204.16,155.69c-66.94,66.94,29.18,351,29.18,351,0-41.1,160.33-82.31,303.37-139.83,99.17,63.69,228.92,108.54,228.92,108.54S793.59,209.32,747.94,163.66Z"
fill="#FFFFFF"
/>
<path
d="M610.06,159.09c-36.6-4-184.31-1.44-322.45,25.65A481,481,0,0,0,235,197.59c-4.25,1.37-8.49,2.76-12.62,4.33s-8.24,3.18-12.18,5a112.44,112.44,0,0,0-11.34,5.93c-3.54,2.16-10.85,8.81-13.51,11.39l-7.3-15.56a69.81,69.81,0,0,1,12.33-9.59,116.58,116.58,0,0,1,13-6.93,217.66,217.66,0,0,1,26.74-10.11,460.64,460.64,0,0,1,54.55-12.9c18.3-3.27,36.69-5.71,55.1-7.7s35.8-7.94,54.26-8.88C494.59,148.61,592.19,154.62,610.06,159.09Z"
fill="#E2E2E2"
/>
<path
d="M188.17,320.14c3.47-1.42,6.8-2.75,10.2-4.07s6.78-2.61,10.18-3.87c6.79-2.57,13.62-5,20.45-7.36q20.52-7.09,41.26-13.47c6.91-2.14,13.82-4.25,20.78-6.22l10.42-3c3.47-1,6.94-2,10.44-2.93l20.94-5.59,21-5.25C382,261.7,484.59,232.18,513.37,230c-7,1.8-168.2,54.82-176.74,57.39L316,293.56q-20.57,6.22-41,12.91c-6.83,2.16-13.6,4.47-20.38,6.76s-13.54,4.65-20.3,7l-10.1,3.61q-5.07,1.77-10.08,3.64l-10,3.71c-3.32,1.23-6.69,2.52-9.9,3.78Z"
fill="#E2E2E2"
/>
<path
d="M711.7,270.48c-39.92,36.15-102.55,67-169.48,94.19l16.51,15.78h0S659.21,340.49,711.7,270.48Z"
fill="#E2E2E2"
/>
<path
d="M214.45,457.18a24.45,24.45,0,0,1,.66-5.43,27,27,0,0,1,1.75-4.9,36.8,36.8,0,0,1,5.26-8,72.69,72.69,0,0,1,13-11.7,206,206,0,0,1,28.63-16.72c19.57-9.69,39.67-17.6,59.8-25.27s40.4-14.82,60.64-22S424.76,349,445,341.87c40.42-14.25,79.8-31.3,119.21-47.95,9.86-4.14,93.82-54.66,102.72-60.67-8.32,6.8-67.53,50.51-99.82,67.22-39.1,18-78.43,35.84-118.64,50.95-20.13,7.5-40.29,14.87-60.43,22.25s-40.27,14.71-60.19,22.46c-10,3.88-19.86,7.85-29.66,12s-19.51,8.46-28.95,13.15A195.93,195.93,0,0,0,242.3,437a64.46,64.46,0,0,0-10.93,9.68c-3,3.49-7.94,11.25-7.92,14.53Z"
fill="#E2E2E2"
/>
<path
d="M747.94,163.66l0,0C684.65,74.76,266,93.83,204.16,155.69c-66.94,66.94,29.18,351,29.18,351,0-41.1,160.33-82.31,303.37-139.83,99.17,63.69,228.92,108.54,228.92,108.54S793.59,209.32,747.94,163.66Z"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M534.47,361.33c16.1-6.69,32.19-13.37,48.12-20.36l6-2.61,5.95-2.67,6-2.66,5.91-2.76,5.92-2.73c2-.91,3.92-1.88,5.88-2.81,3.91-1.89,7.83-3.75,11.69-5.74q23.34-11.6,45.56-25.15a427.09,427.09,0,0,0,43-29.7c-1.44,1.66-2.86,3.34-4.34,5s-2.9,3.33-4.49,4.84c-3.12,3.11-6.22,6.29-9.55,9.17-1.64,1.49-3.31,2.92-5,4.39s-3.41,2.8-5.12,4.21-3.45,2.76-5.2,4.11l-5.32,4A448.92,448.92,0,0,1,634.62,328c-3.84,2.18-7.74,4.23-11.63,6.29s-7.8,4.1-11.74,6.08l-5.9,3-6,2.87c-4,1.91-7.92,3.84-11.93,5.64q-24,11.06-48.52,20.65Z"
fill="#592d3d"
/>
<path
d="M769.08,431.09c-1.42-.23-2.71-.46-4-.72s-2.63-.53-3.94-.82c-2.62-.55-5.2-1.21-7.79-1.86q-7.74-2-15.34-4.43a315.52,315.52,0,0,1-29.83-11.2A306.66,306.66,0,0,1,679.61,398a208.59,208.59,0,0,1-26.43-17.56c2.42,1.09,4.82,2.19,7.19,3.35s4.7,2.34,7.12,3.39c4.77,2.18,9.47,4.49,14.28,6.55q14.25,6.56,28.91,12l7.33,2.71L725.4,411c4.94,1.65,9.9,3.22,14.89,4.67s10,2.83,15,4.13l3.77.91c1.26.32,2.52.62,3.78.89,2.5.57,5.08,1.14,7.49,1.59Z"
fill="#592d3d"
/>
<path
d="M615.36,160c-36.49-4.61-73.12-6.62-109.74-7.18s-73.25.43-109.73,3.15c-18.24,1.33-36.45,3.08-54.58,5.35s-36.18,5-54.06,8.36a484.87,484.87,0,0,0-52.83,12.84,211.12,211.12,0,0,0-25,9.44A113.77,113.77,0,0,0,197.84,198a56.05,56.05,0,0,0-9.85,7.45L179.5,197a67.76,67.76,0,0,1,12-9.28,115.9,115.9,0,0,1,12.81-6.8,226.14,226.14,0,0,1,26.49-10A457.87,457.87,0,0,1,285.08,158c36.5-6.53,73.31-10.19,110.17-12.17a1068.52,1068.52,0,0,1,110.62-.17c9.2.53,18.4,1.16,27.59,1.94s18.35,1.78,27.49,2.93A542.75,542.75,0,0,1,615.36,160Z"
fill="#592d3d"
/>
<path
d="M210.05,449.36a24.5,24.5,0,0,1,.64-5.37,26.93,26.93,0,0,1,1.71-4.87,36.36,36.36,0,0,1,5.18-8,71.43,71.43,0,0,1,12.89-11.68,202.41,202.41,0,0,1,28.39-16.69c19.41-9.65,39.35-17.52,59.32-25.14s40.08-14.74,60.17-21.86,40.21-14,60.25-21.15c40.11-14.17,80-28.92,119.07-45.49q14.67-6.18,29.14-12.83t28.69-13.79q14.22-7.17,28-15.08t27.08-16.87c-8.25,6.75-16.94,13-25.81,18.91s-18,11.55-27.24,16.89S598.9,276.71,589.4,281.6s-19.15,9.51-28.82,14c-38.79,18-78.6,33.46-118.5,48.49-20,7.46-40,14.78-59.95,22.12s-39.95,14.62-59.72,22.33c-9.87,3.85-19.7,7.81-29.41,11.95s-19.35,8.41-28.71,13.08a191.39,191.39,0,0,0-26.63,15.63,63.16,63.16,0,0,0-10.78,9.64c-3,3.47-4.85,7.2-4.83,10.48Z"
fill="#592d3d"
/>
<path
d="M184.48,311.25C198,305.7,211.57,300.86,225.22,296s27.38-9.26,41.18-13.53c27.6-8.52,55.41-16.36,83.45-23.23S406,246,434.45,240.93L445.09,239l5.33-1,5.34-.85L477.15,234c7.13-1.1,14.3-1.92,21.46-2.74s14.33-1.6,21.5-2.31q-10.54,2.44-21.09,4.73c-7,1.55-14.09,2.94-21.08,4.63-14,3.22-28.07,6.22-42,9.66q-42,9.66-83.48,21.17l-20.73,5.79L311.07,281c-13.74,4.12-27.44,8.36-41.07,12.81-6.84,2.15-13.63,4.46-20.42,6.74s-13.57,4.62-20.35,6.94c-13.48,4.75-27,9.69-40.19,14.83Z"
fill="#592d3d"
/>
</g>
<circle
cx="382.91"
cy="594.66"
fill="#ffffff"
opacity={0.2}
r="33.84"
/>
<path
d="M375.87,631l43.31-41.74a147.47,147.47,0,0,0-7.57-12.9l-45.87,44.21C367.64,621.9,373.72,630.08,375.87,631Z"
fill="#ffffff"
opacity={0.4}
/>
<circle
cx="382.91"
cy="594.66"
fill="none"
r="33.84"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M378,580.47c1.22,3.83-3.5,6.78-7,7.37-3.54,0-5.9-2.36-7.08-5.31-.59-2.95,0-5.9,2.36-7.67,2.95-1.18,7.08-2.36,9.7.67A6.85,6.85,0,0,1,378,580.47Z"
fill="#ffffff"
/>
<path
d="M384.32,578.21a2.29,2.29,0,0,1-4.49.19c0-1.77.59-2.36,2.27-2.42a2.22,2.22,0,0,1,2.22,2.22Z"
fill="#ffffff"
/>
<circle
cx="615.2"
cy="594.66"
fill="#ffffff"
opacity={0.2}
r="33.84"
/>
<path
d="M610.12,628.11l38.54-38.54c-.21-1.37-5.91-8.1-6.29-9.44l-41.72,41.74C602,622.24,608.75,627.91,610.12,628.11Z"
fill="#ffffff"
opacity={0.4}
/>
<circle
cx="615.2"
cy="594.66"
fill="none"
r="33.84"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M607.36,579.91c1,3.25-3,5.75-6,6.25-3,0-5-2-6-4.5-.5-2.5,0-5,2-6.5,2.5-1,6-2,8.23.57A5.85,5.85,0,0,1,607.36,579.91Z"
fill="#ffffff"
/>
<path
d="M612.7,578a1.94,1.94,0,0,1-3.8.16c0-1.5.5-2,1.92-2A1.88,1.88,0,0,1,612.7,578Z"
fill="#ffffff"
/>
<path
d="M416.74,594.66q83.68-30,164.63,0"
fill="none"
stroke="#592d3d"
strokeMiterlimit={10}
strokeWidth="12px"
/>
<path
d="M615.2,634.5A39.9,39.9,0,0,1,575.6,599c-50-17.65-101.46-17.64-153.1,0a39.81,39.81,0,0,1-50.92,33.84,38,38,0,0,0,54.51-29.91c49.22-16.86,98.28-16.88,145.93,0a38,38,0,0,0,54.51,30A40,40,0,0,1,615.2,634.5Z"
opacity={0.15}
/>
</g>
</svg>
</div>
Jack
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-disabled={true}
className="disabled item"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="user icon"
onClick={[Function]}
/>
<span
className="text"
>
user.guest
</span>
</div>
<div
className="divider"
/>
<a
className="item"
href="/change_password"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="exchange icon"
onClick={[Function]}
/>
<span
className="text"
>
user.change_password
</span>
</a>
<a
className="item"
onClick={[Function]}
role="option"
>
<i
aria-hidden="true"
className="log out icon"
onClick={[Function]}
/>
<span
className="text"
>
user.logout
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
<main
style={
Object {
"flex": "1 0 auto",
}
}
>
<div
className="ui container"
>
<img
alt="octoboard logo"
className="ui image"
src="/images/octoboard.svg"
style={
Object {
"margin": "30px auto 30px",
"width": "300px",
}
}
/>
</div>
<div
className="ui container"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="twelve wide column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
<div
className="ui active transition visible inverted dimmer"
onClick={[Function]}
>
<div
className="content"
>
<div
className="ui inverted text loader"
>
list.loading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
className="four wide column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
create.title
</h3>
<form
className="ui loading form createMatch"
onSubmit={[Function]}
>
<div
className="field"
>
<label>
create.game_type
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
Pictionary
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Pictionary
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/picture-match/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
PictureMatch
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/splendid/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Splendid
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/scrambled/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Scrambled
</span>
</div>
</div>
</div>
</div>
<div
className="field"
>
<label>
create.max_players
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
2
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
2
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
3
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
4
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
5
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
6
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
7
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
8
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
9
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
10
</span>
</div>
</div>
</div>
</div>
<div
className="required field"
>
<label>
create.match_name
</label>
<div
className="ui fluid input"
>
<input
aria-describedby={null}
onChange={[Function]}
placeholder="create.enter_your_own..."
required={true}
type="text"
value=""
/>
</div>
</div>
<div
className="nameProposalPrompt"
>
create.or_use
:
<button
className="nameProposalButton"
onClick={[Function]}
>
en test
</button>
<i
aria-hidden="true"
className="sync link icon"
onClick={[Function]}
/>
</div>
<div
className="field"
>
<div
className="ui checked toggle checkbox"
onChange={[Function]}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
>
<input
aria-describedby={null}
checked={true}
className="hidden"
readOnly={true}
tabIndex={0}
type="checkbox"
/>
<label>
create.private.true
</label>
</div>
</div>
<button
className="ui orange fluid disabled button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
type="submit"
>
create.button
</button>
</form>
</div>
</div>
</div>
</div>
<div
className="fresnel-container fresnel-lessThan-computer ui grid"
suppressHydrationWarning={false}
>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-yellow octopus-bottom-right octopus-cw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
create.title
</h3>
<form
className="ui loading form createMatch"
onSubmit={[Function]}
>
<div
className="field"
>
<label>
create.game_type
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
Pictionary
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/kalambury/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Pictionary
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/picture-match/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
PictureMatch
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/splendid/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Splendid
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<img
className="ui avatar image"
src="/images/games/scrambled/icon.png"
/>
<i
aria-hidden="true"
className="grey info circle fitted icon right floated"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
/>
<span
className="text"
>
Scrambled
</span>
</div>
</div>
</div>
</div>
<div
className="field"
>
<label>
create.max_players
</label>
<div
aria-describedby={null}
aria-expanded={false}
className="ui fluid selection dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
2
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
2
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
3
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
4
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
5
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
6
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
7
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
8
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
9
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
10
</span>
</div>
</div>
</div>
</div>
<div
className="required field"
>
<label>
create.match_name
</label>
<div
className="ui fluid input"
>
<input
aria-describedby={null}
onChange={[Function]}
placeholder="create.enter_your_own..."
required={true}
type="text"
value=""
/>
</div>
</div>
<div
className="nameProposalPrompt"
>
create.or_use
:
<button
className="nameProposalButton"
onClick={[Function]}
>
en test
</button>
<i
aria-hidden="true"
className="sync link icon"
onClick={[Function]}
/>
</div>
<div
className="field"
>
<div
className="ui checked toggle checkbox"
onChange={[Function]}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
>
<input
aria-describedby={null}
checked={true}
className="hidden"
readOnly={true}
tabIndex={0}
type="checkbox"
/>
<label>
create.private.true
</label>
</div>
</div>
<button
className="ui orange fluid disabled button"
disabled={true}
onClick={[Function]}
tabIndex={-1}
type="submit"
>
create.button
</button>
</form>
</div>
</div>
</div>
</div>
<div
className="row"
>
<div
className="column"
>
<div
className="octopus-badge octopus-red octopus-bottom-left octopus-ccw"
>
<div
className="ui segment"
>
<h3
className="ui center aligned header"
>
list.title
</h3>
<form
className="filterBox"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
onSubmit={[Function]}
>
<div
className="ui fluid input"
>
<input
onChange={[Function]}
onFocus={[Function]}
placeholder="filter.search..."
type="text"
value=""
/>
</div>
<div
className="filterStatus"
>
<span
className="statusLabel"
>
filter.all_games
</span>
<i
aria-hidden="true"
className="grey search icon"
onClick={[Function]}
style={
Object {
"marginLeft": 4,
}
}
/>
</div>
</form>
<div>
<h4
className="ui grey center aligned header"
>
list.empty
</h4>
<img
className="ui medium image"
src="/images/hugo-out.png"
style={
Object {
"margin": "0 auto",
}
}
/>
<div
className="ui active transition visible inverted dimmer"
onClick={[Function]}
>
<div
className="content"
>
<div
className="ui inverted text loader"
>
list.loading
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer
className="ui secondary stackable menu"
style={Object {}}
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<a
href="https://github.com/mavend/octoboard"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
<i
aria-hidden="true"
className="github icon"
onClick={[Function]}
/>
footer.github
</a>
</div>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
footer.graphics
:
<a
href="https://icons8.com"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
Icons8
</a>
</div>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<i
aria-hidden="true"
className="language large icon"
onClick={[Function]}
style={
Object {
"marginRight": "8px",
}
}
/>
<div
aria-expanded={false}
className="ui pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
English
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
English
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
polski
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>,
<div
className="ui page modals dimmer transition visible active"
>
<div
className="ui modal transition visible active"
style={Object {}}
>
<div
className="header"
>
register.title
</div>
<div
className="image content"
>
<div
className="fresnel-container fresnel-greaterThanOrEqual-tablet ui medium image"
suppressHydrationWarning={false}
>
<img
src="/images/hugo-upgrade.png"
/>
</div>
<div
className="description"
style={
Object {
"flex": "1 0 auto",
}
}
>
<div
className="ui header"
>
register.prompt
</div>
<form
className="ui form"
onSubmit={[Function]}
>
<div
className="ui error message"
/>
<div
className="field"
>
<label>
form.nickname
</label>
<div
className="ui input"
>
<input
aria-describedby={null}
autoFocus={true}
name="form.nickname"
onChange={[Function]}
placeholder="form.nickname"
type="text"
value="Whatever"
/>
</div>
</div>
<div
className="field"
>
<label>
form.email
</label>
<div
className="ui input"
>
<input
aria-describedby={null}
autoComplete="username"
maxLength="24"
name="form.email"
onChange={[Function]}
placeholder="form.email"
type="email"
value="qwe@qwe.qwe"
/>
</div>
</div>
<div
className="field"
>
<label>
form.password
</label>
<div
className="ui input"
>
<input
aria-describedby={null}
autoComplete="new-password"
name="form.password"
onChange={[Function]}
placeholder="form.password"
type="password"
value="Whatever"
/>
</div>
</div>
<div
className="fields"
>
<div
className="field"
>
<button
aria-describedby={null}
className="ui green button"
onClick={[Function]}
>
actions.register
</button>
</div>
</div>
</form>
<div
className="ui divider"
/>
<div
className="fresnel-container fresnel-greaterThanOrEqual-tablet "
suppressHydrationWarning={false}
>
<a
className="ui button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="user secret icon"
onClick={[Function]}
/>
<span>
actions.guest_login
</span>
</a>
<a
className="ui button"
href="/login"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
<span>
actions.login
</span>
</a>
<a
className="ui button"
href="/register"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="signup icon"
onClick={[Function]}
/>
<span>
actions.register
</span>
</a>
<button
className="ui button"
onClick={[Function]}
>
<i
aria-hidden="true"
className="google icon"
onClick={[Function]}
/>
<span>
Google
</span>
</button>
</div>
<div
className="fresnel-container fresnel-lessThan-tablet "
suppressHydrationWarning={false}
>
<div
className="ui fluid vertical buttons"
>
<a
className="ui button"
href="/login/guest"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="user secret icon"
onClick={[Function]}
/>
<span>
actions.guest_login
</span>
</a>
<a
className="ui button"
href="/login"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="sign-in icon"
onClick={[Function]}
/>
<span>
actions.login
</span>
</a>
<a
className="ui button"
href="/register"
onClick={[Function]}
role="button"
>
<i
aria-hidden="true"
className="signup icon"
onClick={[Function]}
/>
<span>
actions.register
</span>
</a>
<button
className="ui button"
onClick={[Function]}
>
<i
aria-hidden="true"
className="google icon"
onClick={[Function]}
/>
<span>
Google
</span>
</button>
</div>
</div>
</div>
</div>
<div
className="ui basic secondary segment"
style={
Object {
"marginTop": 0,
}
}
>
<footer
className="ui secondary stackable menu"
style={Object {}}
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<a
href="https://github.com/mavend/octoboard"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
<i
aria-hidden="true"
className="github icon"
onClick={[Function]}
/>
footer.github
</a>
</div>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
footer.graphics
:
<a
href="https://icons8.com"
rel="noopener noreferrer"
style={
Object {
"color": "#aaa",
"textDecoration": "underline dashed #ddd",
}
}
target="_blank"
>
Icons8
</a>
</div>
<div
className="right menu"
>
<div
className="item"
onClick={[Function]}
style={
Object {
"color": "#aaa",
}
}
>
<i
aria-hidden="true"
className="language large icon"
onClick={[Function]}
style={
Object {
"marginRight": "8px",
}
}
/>
<div
aria-expanded={false}
className="ui pointing dropdown"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseDown={[Function]}
role="listbox"
tabIndex={0}
>
<div
aria-atomic={true}
aria-live="polite"
className="divider text"
role="alert"
>
English
</div>
<i
aria-hidden="true"
className="dropdown icon"
onClick={[Function]}
/>
<div
className="menu transition"
>
<div
aria-checked={true}
aria-selected={true}
className="active selected item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
English
</span>
</div>
<div
aria-checked={false}
aria-selected={false}
className="item"
onClick={[Function]}
role="option"
style={
Object {
"pointerEvents": "all",
}
}
>
<span
className="text"
>
polski
</span>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>,
]
`;