From 44607ca41075762bdca82cc7bc6c02f916b0e5dd Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Sat, 13 Jun 2020 16:34:03 +0200
Subject: [PATCH] images: add support and pybricks docs buttons

---
 src/components/DocsButton.tsx      |   2 +-
 src/components/SupportButton.tsx   |   2 +-
 src/components/images/pybricks.svg | 159 ++++++++++++++++++++++++++++
 src/components/images/support.svg  | 164 +++++++++++++++++++++++++++++
 4 files changed, 325 insertions(+), 2 deletions(-)
 create mode 100644 src/components/images/pybricks.svg
 create mode 100644 src/components/images/support.svg

diff --git a/src/components/DocsButton.tsx b/src/components/DocsButton.tsx
index 52faf863..46afb705 100644
--- a/src/components/DocsButton.tsx
+++ b/src/components/DocsButton.tsx
@@ -8,7 +8,7 @@ import { Action, Dispatch } from '../actions';
 import { toggleDocs } from '../actions/app';
 import ActionButton, { ActionButtonProps } from './ActionButton';
 import { TooltipId } from './button-i18n';
-import docsIcon from './images/run.svg'; // FIXME: need proper icon
+import docsIcon from './images/pybricks.svg';
 
 type StateProps = undefined;
 type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
diff --git a/src/components/SupportButton.tsx b/src/components/SupportButton.tsx
index 5e997767..1886d89a 100644
--- a/src/components/SupportButton.tsx
+++ b/src/components/SupportButton.tsx
@@ -4,7 +4,7 @@
 import { connect } from 'react-redux';
 import LinkButton, { LinkButtonProps } from './LinkButton';
 import { TooltipId } from './button-i18n';
-import supportIcon from './images/stop.svg'; // FIXME: replace with correct icon
+import supportIcon from './images/support.svg';
 
 type StateProps = undefined;
 type DispatchProps = undefined;
diff --git a/src/components/images/pybricks.svg b/src/components/images/pybricks.svg
new file mode 100644
index 00000000..cf3ffcc2
--- /dev/null
+++ b/src/components/images/pybricks.svg
@@ -0,0 +1,159 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="50"
+   height="50"
+   viewBox="0 0 26.458333 26.458334"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="pybricks.svg"
+   inkscape:export-filename="button.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2">
+    <linearGradient
+       id="light-circle-fill"
+       osb:paint="solid"
+       gradientTransform="matrix(0.07840972,0,0,0.07840972,-20.351522,498.54009)">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop5207" />
+    </linearGradient>
+    <linearGradient
+       id="icon-contents"
+       osb:paint="solid"
+       gradientTransform="matrix(0.78378378,0,0,0.78378378,-217.21909,-864.32335)">
+      <stop
+         style="stop-color:#3880b7;stop-opacity:1;"
+         offset="0"
+         id="stop5179" />
+    </linearGradient>
+    <linearGradient
+       id="light-circle-edge"
+       osb:paint="solid"
+       gradientTransform="matrix(0.04571075,0,0,0.26284445,-63.602396,-483.67016)">
+      <stop
+         style="stop-color:#b7b7b7;stop-opacity:1;"
+         offset="0"
+         id="stop5173" />
+    </linearGradient>
+    <linearGradient
+       id="dark-back"
+       osb:paint="solid"
+       gradientTransform="translate(1195.9167,-717.54999)">
+      <stop
+         style="stop-color:#333333;stop-opacity:1;"
+         offset="0"
+         id="stop1439" />
+    </linearGradient>
+    <linearGradient
+       id="dark-front"
+       osb:paint="solid"
+       gradientTransform="translate(4643.556,-4.2349475e-6)">
+      <stop
+         style="stop-color:#d4d4d4;stop-opacity:1;"
+         offset="0"
+         id="stop1389" />
+    </linearGradient>
+    <linearGradient
+       id="light-front"
+       osb:paint="solid"
+       gradientTransform="translate(-313.01005,-269.76128)">
+      <stop
+         style="stop-color:#4e4e4e;stop-opacity:1;"
+         offset="0"
+         id="stop1184" />
+    </linearGradient>
+    <linearGradient
+       id="light-back"
+       osb:paint="solid"
+       gradientTransform="translate(-78.252472)">
+      <stop
+         style="stop-color:#eeeeee;stop-opacity:1;"
+         offset="0"
+         id="stop1172" />
+    </linearGradient>
+    <linearGradient
+       id="light-circle-fill-7"
+       osb:paint="solid"
+       gradientTransform="matrix(1.4086066e-4,-8.1325943e-5,8.8105753e-5,1.5260364e-4,-260.60913,1176.7064)">
+      <stop
+         style="stop-color:#0088ce;stop-opacity:1;"
+         offset="0"
+         id="stop5207-5" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="16"
+     inkscape:cx="20.226169"
+     inkscape:cy="25.148514"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1853"
+     inkscape:window-height="1145"
+     inkscape:window-x="67"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     units="px"
+     inkscape:measure-start="0,0"
+     inkscape:measure-end="0,0"
+     inkscape:snap-global="false"
+     showguides="true"
+     inkscape:pagecheckerboard="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-270.54165)">
+    <path
+       style="fill:#fcfcfc;fill-opacity:1;stroke:none;stroke-width:0.18514594;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 1.9233968,276.12994 C 0.85786585,276.12994 0,276.98649 0,278.05127 v 0.0165 8.17314 2.39882 c 0,1.0648 0.85786585,1.92133 1.9233968,1.92133 h 3.3755047 c 1.065531,0 1.923397,-0.85653 1.923397,-1.92133 v -0.47646 H 19.236035 v 0.47646 c 0,1.0648 0.857866,1.92133 1.923397,1.92133 h 3.375504 c 1.065533,0 1.923397,-0.85653 1.923397,-1.92133 v -2.39882 -8.17314 -0.0165 c 0,-1.06478 -0.857864,-1.92133 -1.923397,-1.92133 h -3.375504 c -5.48261,0.0358 -11.132273,0.0125 -15.8605305,0 z m 0.4960938,2.41226 H 24.063647 v 4.66534 1.66812 3.28352 h -2.397786 v -2.39159 h -2.069124 v -0.89193 H 18.85363 v 0.89193 h -1.663981 v -0.89193 h -0.740007 v 0.89193 h -1.663981 v -0.89193 h -0.740006 v 0.89193 h -1.663981 v -0.89193 h -0.743108 v 0.89193 H 9.9745848 v -0.89193 H 9.2335451 v 0.89193 h -1.663981 v -0.89193 H 6.8864015 v 0.89193 H 4.817277 v 2.39159 H 2.4194906 v -2.39159 -0.89193 z"
+       id="rect1407"
+       inkscape:connector-curvature="0" />
+    <ellipse
+       ry="1.7064419"
+       rx="1.7076348"
+       cy="281.03445"
+       cx="8.4499493"
+       id="path1477"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.18514594;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <ellipse
+       ry="1.7064419"
+       rx="1.7076348"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.18514594;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="circle1489"
+       cx="18.032797"
+       cy="281.03445" />
+  </g>
+</svg>
diff --git a/src/components/images/support.svg b/src/components/images/support.svg
new file mode 100644
index 00000000..76ce8d29
--- /dev/null
+++ b/src/components/images/support.svg
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="50"
+   height="50"
+   viewBox="0 0 26.458333 26.458334"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="support.svg"
+   inkscape:export-filename="button.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2">
+    <linearGradient
+       id="light-circle-fill"
+       osb:paint="solid"
+       gradientTransform="matrix(0.52916667,0,0,0.52916667,-5.9127106,167.15004)">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop5207" />
+    </linearGradient>
+    <linearGradient
+       id="icon-contents"
+       osb:paint="solid"
+       gradientTransform="matrix(0.78378378,0,0,0.78378378,-217.21909,-864.32335)">
+      <stop
+         style="stop-color:#3880b7;stop-opacity:1;"
+         offset="0"
+         id="stop5179" />
+    </linearGradient>
+    <linearGradient
+       id="light-circle-edge"
+       osb:paint="solid"
+       gradientTransform="matrix(0.04571075,0,0,0.26284445,-63.602396,-483.67016)">
+      <stop
+         style="stop-color:#b7b7b7;stop-opacity:1;"
+         offset="0"
+         id="stop5173" />
+    </linearGradient>
+    <linearGradient
+       id="dark-back"
+       osb:paint="solid"
+       gradientTransform="translate(1195.9167,-717.54999)">
+      <stop
+         style="stop-color:#333333;stop-opacity:1;"
+         offset="0"
+         id="stop1439" />
+    </linearGradient>
+    <linearGradient
+       id="dark-front"
+       osb:paint="solid"
+       gradientTransform="translate(4643.556,-4.2349475e-6)">
+      <stop
+         style="stop-color:#d4d4d4;stop-opacity:1;"
+         offset="0"
+         id="stop1389" />
+    </linearGradient>
+    <linearGradient
+       id="light-front"
+       osb:paint="solid"
+       gradientTransform="translate(-313.01005,-269.76128)">
+      <stop
+         style="stop-color:#4e4e4e;stop-opacity:1;"
+         offset="0"
+         id="stop1184" />
+    </linearGradient>
+    <linearGradient
+       id="light-back"
+       osb:paint="solid"
+       gradientTransform="translate(-78.252472)">
+      <stop
+         style="stop-color:#eeeeee;stop-opacity:1;"
+         offset="0"
+         id="stop1172" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="28.310142"
+     inkscape:cy="27.553772"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1853"
+     inkscape:window-height="1145"
+     inkscape:window-x="67"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     units="px"
+     inkscape:measure-start="0,0"
+     inkscape:measure-end="0,0"
+     inkscape:snap-global="false"
+     showguides="false"
+     inkscape:pagecheckerboard="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-270.54165)">
+    <path
+       sodipodi:nodetypes="sssscccsssssssssccccssss"
+       inkscape:connector-curvature="0"
+       id="path1050"
+       d="m 4.4548275,276.14161 c -1.959619,0 -3.56980798,1.61019 -3.56980798,3.56981 v 5.49225 c 0,1.95962 1.61018898,3.56981 3.56980798,3.56981 h 3.803465 l -0.829924,6.47299 10.2329705,-6.47299 h 4.090626 c 1.959619,0 3.570841,-1.61019 3.570841,-3.56981 v -5.49225 c 0,-1.95962 -1.611222,-3.56981 -3.570841,-3.56981 z m 0,2.11667 H 21.751965 c 0.823598,0 1.453141,0.62954 1.453141,1.45314 v 5.49225 c 0,0.8236 -0.629543,1.45314 -1.453141,1.45314 H 17.32068 l -7.4076185,4.79415 0.5884805,-4.79415 H 4.4548275 c -0.823598,0 -1.453141,-0.62954 -1.453141,-1.45314 v -5.49225 c 0,-0.8236 0.629543,-1.45314 1.453141,-1.45314 z"
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.11666679;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <rect
+       ry="0"
+       rx="0"
+       y="281.07489"
+       x="7.8086252"
+       height="2.1166668"
+       width="2.1166668"
+       id="rect1052"
+       style="fill:#fcfcfc;fill-opacity:1;stroke:none;stroke-width:2.11666679;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       style="fill:#fcfcfc;fill-opacity:1;stroke:none;stroke-width:2.11666679;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1054"
+       width="2.1166668"
+       height="2.1166668"
+       x="11.901399"
+       y="281.07489"
+       rx="0"
+       ry="0" />
+    <rect
+       ry="0"
+       rx="0"
+       y="281.07489"
+       x="15.994172"
+       height="2.1166668"
+       width="2.1166668"
+       id="rect1056"
+       style="fill:#fcfcfc;fill-opacity:1;stroke:none;stroke-width:2.11666679;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>