From 13dab6fd64785aa44115540aae73772b76b145ca Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 23 Jun 2020 09:26:35 +0200
Subject: [PATCH] core: move error page MicDrop out as separate svg file

---
 .../core/src/layout/ErrorPage/MicDrop.jsx     | 131 +-----------------
 .../core/src/layout/ErrorPage/mic-drop.svg    | 126 +++++++++++++++++
 2 files changed, 128 insertions(+), 129 deletions(-)
 create mode 100644 packages/core/src/layout/ErrorPage/mic-drop.svg

diff --git a/packages/core/src/layout/ErrorPage/MicDrop.jsx b/packages/core/src/layout/ErrorPage/MicDrop.jsx
index 4c4098f486..ca0a0ae0a6 100644
--- a/packages/core/src/layout/ErrorPage/MicDrop.jsx
+++ b/packages/core/src/layout/ErrorPage/MicDrop.jsx
@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { makeStyles } from '@material-ui/core';
+import MicDropSvgUrl from './mic-drop.svg';
 
 const useStyles = makeStyles({
   micDrop: {
@@ -28,133 +29,5 @@ const useStyles = makeStyles({
 
 export const MicDrop = () => {
   const classes = useStyles();
-  return (
-    <svg
-      className={classes.micDrop}
-      width="765"
-      height="549"
-      viewBox="0 0 765 549"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M233.254 18.1123C287.613 12.9406 348.953 -19.7941 390.737 17.9035C433.262 56.2682 419.83 127.396 420.495 187.038C421.173 247.834 429.724 312.626 394.555 360.272C356.272 412.137 294.782 444.433 233.254 440.709C174.088 437.128 130.793 387.084 89.1619 341.79C47.9247 296.924 -2.50454 250.018 0.0966297 187.038C2.64988 125.217 53.6362 80.0377 101.402 45.4309C139.977 17.4827 186.903 22.5221 233.254 18.1123Z"
-        fill="#9BF0E1"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M513.385 20.4439C566.693 14.8938 613.809 62.3867 650.746 106.814C683.285 145.952 687.847 201.929 705.832 251.918C725.902 307.696 777.756 358.692 762.097 416.298C746.456 473.841 682.485 490.291 634.414 514.658C595.842 534.21 555.492 539.703 513.385 542.369C468.505 545.211 418.55 561.006 382.241 530.624C345.943 500.251 351.456 437.745 332.509 391.022C309.653 334.66 245.906 289.233 260.017 229.218C273.979 169.835 349.469 169.535 393.023 133.647C436.218 98.0537 460.413 25.959 513.385 20.4439Z"
-        fill="#69DDC7"
-      />
-      <path
-        d="M584.384 331.262L618.437 362.37C620.096 363.886 622.677 363.738 624.152 362.042L625.747 360.209C627.216 358.521 627.014 355.956 625.299 354.519L590.183 325.076C589.459 324.469 588.534 324.093 587.606 324.266C584.444 324.854 583.314 327.325 583.371 329.355C583.392 330.105 583.83 330.756 584.384 331.262Z"
-        fill="black"
-        stroke="black"
-      />
-      <circle
-        cx="630.54"
-        cy="366.006"
-        r="11.6617"
-        transform="rotate(131.021 630.54 366.006)"
-        fill="#616161"
-      />
-      <rect
-        x="639.69"
-        y="357.103"
-        width="25.4436"
-        height="3.18045"
-        rx="1.59023"
-        transform="rotate(131.021 639.69 357.103)"
-        fill="#282828"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M331.081 60.2902C334.528 72.9923 339.02 101.544 334.436 106.022H305.436C305.433 105.971 305.43 105.92 305.427 105.868C294.679 104.679 286.319 95.5658 286.319 84.5V63.5C286.319 51.6259 295.945 42 307.819 42H309.819C320.602 42 329.531 49.9385 331.081 60.2902Z"
-        fill="#181818"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M297.581 80.4901C292.973 75.0814 289.854 68.4529 290.376 61.0255C291.877 39.625 321.667 44.3328 327.462 55.1339C333.257 65.9351 332.568 93.333 325.079 95.2635C322.092 96.0333 315.73 94.1475 309.254 90.2443L313.319 119H289.319L297.581 80.4901Z"
-        fill="#EDB795"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M304.069 76.8748C305.175 88.7528 304.732 102.317 301.436 105.537H272.436C270.82 77.4635 286.436 88.3349 286.436 61.9028C287.41 60.9515 288.33 60.01 289.24 59.1981L289.208 58.4207C294.229 48.1402 300.6 43 308.32 43C319.9 43 323.555 48.3883 326.668 52.9631C324.34 60.9482 315.309 62.1322 307.285 67.1095C306.339 66.341 305.133 65.8804 303.819 65.8804C300.781 65.8804 298.319 68.3428 298.319 71.3804C298.319 74.418 300.781 76.8804 303.819 76.8804C303.903 76.8804 303.986 76.8785 304.069 76.8748Z"
-        fill="#181818"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M250.727 300.088C274.716 306.798 295.413 310.153 312.818 310.153C330.224 310.153 346.39 304.986 361.319 294.653C337.843 287.766 318.51 284.323 303.319 284.323C288.128 284.323 270.597 289.578 250.727 300.088Z"
-        fill="#C52B86"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M333.586 319.824C333.354 319.477 333.159 319.098 333.004 318.689C329.797 310.208 278.436 218.726 273.319 202H331.145C335.035 214.717 352.546 294.52 355.01 310.442C362.785 335.557 378.794 416.895 380.838 422.53C382.988 428.458 370.891 434.633 367.668 427.346C362.539 415.75 350.317 383.665 344.876 364.074C339.775 345.708 335.621 329.184 333.586 319.824Z"
-        fill="#E7B291"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M286.276 330.994C262.794 336.928 176.903 347.658 171.009 349.341C164.945 351.072 159.629 338.574 167.124 335.867C179.049 331.559 211.908 321.606 231.831 317.544C247.855 314.277 262.478 311.611 272.295 310.05C271.464 282.473 267.662 216.294 270.154 202H321.319C318.929 215.707 298.729 315.718 294.975 325.729C293.783 329.302 290.228 330.882 286.276 330.994Z"
-        fill="#EDB795"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M167.668 332.539C164.532 331.956 162.235 331.793 160.774 332.05C158.998 332.363 156.459 333.116 153.156 334.309C153.52 336.369 156.784 354.884 162.951 389.854C167.977 390.456 170.406 389.168 170.238 385.991C170.07 382.814 169.959 380.17 169.902 378.059L176.859 350.213C176.993 349.677 176.667 349.134 176.132 349C176.123 348.998 176.113 348.996 176.104 348.994L171.786 348.044C169.935 345.402 168.851 343.181 168.534 341.381C168.276 339.919 168.51 337.795 169.237 335.01L169.237 335.01C169.516 333.941 168.876 332.849 167.807 332.57C167.761 332.558 167.714 332.548 167.668 332.539Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M363.997 426.402C362.878 429.388 362.319 431.623 362.319 433.106C362.319 434.909 362.619 437.54 363.22 441C365.312 441 384.113 441 419.622 441C421.088 436.155 420.242 433.539 417.084 433.152C413.926 432.766 411.303 432.417 409.214 432.106L382.999 420.419C382.494 420.194 381.903 420.421 381.678 420.925C381.674 420.934 381.671 420.942 381.667 420.951L379.982 425.039C377.059 426.403 374.683 427.085 372.856 427.085C371.371 427.085 369.32 426.485 366.703 425.286L366.703 425.285C365.699 424.825 364.512 425.266 364.052 426.27C364.032 426.313 364.014 426.357 363.997 426.402Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M270.319 202C292.866 195.549 314.199 195.549 334.319 202C341.319 233.937 358.328 246.613 361.319 295.579C327.319 312.473 285.319 283.53 250.319 300.005C240.319 276.961 254.319 221.464 270.319 202Z"
-        fill="#F038A5"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M367.319 162.311L406.802 156.925C414.7 152.532 421.966 149.558 428.599 148.003C430.466 147.948 433.436 148.627 429.012 152.315C424.588 156.003 420.099 160.083 420.887 162.051C421.675 164.02 425.79 163.287 426.471 166.315C426.926 168.333 420.248 168.661 406.44 167.299L374.403 180L367.319 162.311ZM243.288 171.45L265.186 171.532C241.175 225.566 228.655 253.857 227.627 256.406C225.313 262.14 230.209 270.874 232.303 275.567C225.483 278.619 226.21 267.317 217.607 271.319C209.754 274.973 203.78 281.592 194.708 275.994C193.592 275.306 192.37 272.715 195.323 270.69C202.681 265.645 213.284 256.815 214.717 253.908C216.67 249.945 226.194 222.459 243.288 171.45Z"
-        fill="#EDB795"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M303.268 102L320.413 103.142C324.635 141.343 347.635 165.473 399.13 157.304L405.971 206.499C357.841 212.719 315.632 193.45 306.981 141.278C304.742 127.773 302.973 113.718 303.268 102Z"
-        fill="#EEEEEE"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M294.809 97.0159L320.786 102.965C320.786 147.644 335.019 176.15 342.319 209H272.162C271.174 220.351 270.567 232.018 270.251 244H217.72C229.624 180.664 254.749 131.664 293.094 97H294.796L294.809 97.0159Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M283.231 145.259C281.423 173.101 282.486 194.347 286.421 209H272.162C274.12 186.514 277.575 165.267 283.231 145.259V145.259Z"
-        fill="#EEEEEE"
-      />
-      <path
-        d="M420 184C438.174 208.939 473.047 287.772 467.144 403.592C469.74 373.957 481.656 315.366 508.548 318.087C535.441 320.808 531.505 401.163 526.176 441C532.052 385.292 552.334 355.087 573.5 351"
-        stroke="#F9F9F9"
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeDasharray="10 15"
-      />
-    </svg>
-  );
+  return <img src={MicDropSvgUrl} className={classes.micDrop} alt="" />;
 };
diff --git a/packages/core/src/layout/ErrorPage/mic-drop.svg b/packages/core/src/layout/ErrorPage/mic-drop.svg
new file mode 100644
index 0000000000..adc027b551
--- /dev/null
+++ b/packages/core/src/layout/ErrorPage/mic-drop.svg
@@ -0,0 +1,126 @@
+<svg
+  width="765"
+  height="549"
+  viewBox="0 0 765 549"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M233.254 18.1123C287.613 12.9406 348.953 -19.7941 390.737 17.9035C433.262 56.2682 419.83 127.396 420.495 187.038C421.173 247.834 429.724 312.626 394.555 360.272C356.272 412.137 294.782 444.433 233.254 440.709C174.088 437.128 130.793 387.084 89.1619 341.79C47.9247 296.924 -2.50454 250.018 0.0966297 187.038C2.64988 125.217 53.6362 80.0377 101.402 45.4309C139.977 17.4827 186.903 22.5221 233.254 18.1123Z"
+    fill="#9BF0E1"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M513.385 20.4439C566.693 14.8938 613.809 62.3867 650.746 106.814C683.285 145.952 687.847 201.929 705.832 251.918C725.902 307.696 777.756 358.692 762.097 416.298C746.456 473.841 682.485 490.291 634.414 514.658C595.842 534.21 555.492 539.703 513.385 542.369C468.505 545.211 418.55 561.006 382.241 530.624C345.943 500.251 351.456 437.745 332.509 391.022C309.653 334.66 245.906 289.233 260.017 229.218C273.979 169.835 349.469 169.535 393.023 133.647C436.218 98.0537 460.413 25.959 513.385 20.4439Z"
+    fill="#69DDC7"
+  />
+  <path
+    d="M584.384 331.262L618.437 362.37C620.096 363.886 622.677 363.738 624.152 362.042L625.747 360.209C627.216 358.521 627.014 355.956 625.299 354.519L590.183 325.076C589.459 324.469 588.534 324.093 587.606 324.266C584.444 324.854 583.314 327.325 583.371 329.355C583.392 330.105 583.83 330.756 584.384 331.262Z"
+    fill="black"
+    stroke="black"
+  />
+  <circle
+    cx="630.54"
+    cy="366.006"
+    r="11.6617"
+    transform="rotate(131.021 630.54 366.006)"
+    fill="#616161"
+  />
+  <rect
+    x="639.69"
+    y="357.103"
+    width="25.4436"
+    height="3.18045"
+    rx="1.59023"
+    transform="rotate(131.021 639.69 357.103)"
+    fill="#282828"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M331.081 60.2902C334.528 72.9923 339.02 101.544 334.436 106.022H305.436C305.433 105.971 305.43 105.92 305.427 105.868C294.679 104.679 286.319 95.5658 286.319 84.5V63.5C286.319 51.6259 295.945 42 307.819 42H309.819C320.602 42 329.531 49.9385 331.081 60.2902Z"
+    fill="#181818"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M297.581 80.4901C292.973 75.0814 289.854 68.4529 290.376 61.0255C291.877 39.625 321.667 44.3328 327.462 55.1339C333.257 65.9351 332.568 93.333 325.079 95.2635C322.092 96.0333 315.73 94.1475 309.254 90.2443L313.319 119H289.319L297.581 80.4901Z"
+    fill="#EDB795"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M304.069 76.8748C305.175 88.7528 304.732 102.317 301.436 105.537H272.436C270.82 77.4635 286.436 88.3349 286.436 61.9028C287.41 60.9515 288.33 60.01 289.24 59.1981L289.208 58.4207C294.229 48.1402 300.6 43 308.32 43C319.9 43 323.555 48.3883 326.668 52.9631C324.34 60.9482 315.309 62.1322 307.285 67.1095C306.339 66.341 305.133 65.8804 303.819 65.8804C300.781 65.8804 298.319 68.3428 298.319 71.3804C298.319 74.418 300.781 76.8804 303.819 76.8804C303.903 76.8804 303.986 76.8785 304.069 76.8748Z"
+    fill="#181818"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M250.727 300.088C274.716 306.798 295.413 310.153 312.818 310.153C330.224 310.153 346.39 304.986 361.319 294.653C337.843 287.766 318.51 284.323 303.319 284.323C288.128 284.323 270.597 289.578 250.727 300.088Z"
+    fill="#C52B86"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M333.586 319.824C333.354 319.477 333.159 319.098 333.004 318.689C329.797 310.208 278.436 218.726 273.319 202H331.145C335.035 214.717 352.546 294.52 355.01 310.442C362.785 335.557 378.794 416.895 380.838 422.53C382.988 428.458 370.891 434.633 367.668 427.346C362.539 415.75 350.317 383.665 344.876 364.074C339.775 345.708 335.621 329.184 333.586 319.824Z"
+    fill="#E7B291"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M286.276 330.994C262.794 336.928 176.903 347.658 171.009 349.341C164.945 351.072 159.629 338.574 167.124 335.867C179.049 331.559 211.908 321.606 231.831 317.544C247.855 314.277 262.478 311.611 272.295 310.05C271.464 282.473 267.662 216.294 270.154 202H321.319C318.929 215.707 298.729 315.718 294.975 325.729C293.783 329.302 290.228 330.882 286.276 330.994Z"
+    fill="#EDB795"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M167.668 332.539C164.532 331.956 162.235 331.793 160.774 332.05C158.998 332.363 156.459 333.116 153.156 334.309C153.52 336.369 156.784 354.884 162.951 389.854C167.977 390.456 170.406 389.168 170.238 385.991C170.07 382.814 169.959 380.17 169.902 378.059L176.859 350.213C176.993 349.677 176.667 349.134 176.132 349C176.123 348.998 176.113 348.996 176.104 348.994L171.786 348.044C169.935 345.402 168.851 343.181 168.534 341.381C168.276 339.919 168.51 337.795 169.237 335.01L169.237 335.01C169.516 333.941 168.876 332.849 167.807 332.57C167.761 332.558 167.714 332.548 167.668 332.539Z"
+    fill="white"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M363.997 426.402C362.878 429.388 362.319 431.623 362.319 433.106C362.319 434.909 362.619 437.54 363.22 441C365.312 441 384.113 441 419.622 441C421.088 436.155 420.242 433.539 417.084 433.152C413.926 432.766 411.303 432.417 409.214 432.106L382.999 420.419C382.494 420.194 381.903 420.421 381.678 420.925C381.674 420.934 381.671 420.942 381.667 420.951L379.982 425.039C377.059 426.403 374.683 427.085 372.856 427.085C371.371 427.085 369.32 426.485 366.703 425.286L366.703 425.285C365.699 424.825 364.512 425.266 364.052 426.27C364.032 426.313 364.014 426.357 363.997 426.402Z"
+    fill="white"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M270.319 202C292.866 195.549 314.199 195.549 334.319 202C341.319 233.937 358.328 246.613 361.319 295.579C327.319 312.473 285.319 283.53 250.319 300.005C240.319 276.961 254.319 221.464 270.319 202Z"
+    fill="#F038A5"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M367.319 162.311L406.802 156.925C414.7 152.532 421.966 149.558 428.599 148.003C430.466 147.948 433.436 148.627 429.012 152.315C424.588 156.003 420.099 160.083 420.887 162.051C421.675 164.02 425.79 163.287 426.471 166.315C426.926 168.333 420.248 168.661 406.44 167.299L374.403 180L367.319 162.311ZM243.288 171.45L265.186 171.532C241.175 225.566 228.655 253.857 227.627 256.406C225.313 262.14 230.209 270.874 232.303 275.567C225.483 278.619 226.21 267.317 217.607 271.319C209.754 274.973 203.78 281.592 194.708 275.994C193.592 275.306 192.37 272.715 195.323 270.69C202.681 265.645 213.284 256.815 214.717 253.908C216.67 249.945 226.194 222.459 243.288 171.45Z"
+    fill="#EDB795"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M303.268 102L320.413 103.142C324.635 141.343 347.635 165.473 399.13 157.304L405.971 206.499C357.841 212.719 315.632 193.45 306.981 141.278C304.742 127.773 302.973 113.718 303.268 102Z"
+    fill="#EEEEEE"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M294.809 97.0159L320.786 102.965C320.786 147.644 335.019 176.15 342.319 209H272.162C271.174 220.351 270.567 232.018 270.251 244H217.72C229.624 180.664 254.749 131.664 293.094 97H294.796L294.809 97.0159Z"
+    fill="white"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M283.231 145.259C281.423 173.101 282.486 194.347 286.421 209H272.162C274.12 186.514 277.575 165.267 283.231 145.259V145.259Z"
+    fill="#EEEEEE"
+  />
+  <path
+    d="M420 184C438.174 208.939 473.047 287.772 467.144 403.592C469.74 373.957 481.656 315.366 508.548 318.087C535.441 320.808 531.505 401.163 526.176 441C532.052 385.292 552.334 355.087 573.5 351"
+    stroke="#F9F9F9"
+    strokeWidth="4"
+    strokeLinecap="round"
+    strokeDasharray="10 15"
+  />
+</svg>