fix node logo on chrome and fix some console errors

Author: SaraVieira

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import track from '@codesandbox/common/lib/utils/analytics';
 
@@ -67,7 +67,7 @@ export default class Modal extends React.PureComponent {
                   ))}
                 {tab.types &&
                   tab.types.map(type => (
-                    <>
+                    <Fragment key={type.name}>
                       <Title>{type.name}</Title>
                       {type.templates.map(template => (
                         <Template
@@ -76,7 +76,7 @@ export default class Modal extends React.PureComponent {
                           selectTemplate={this.selectTemplate}
                         />
                       ))}
-                    </>
+                    </Fragment>
                   ))}
               </Templates>
             </Tab>

packages/common/src/components/logos/Gridsome.tsx

@@ -9,71 +9,60 @@ export default ({ width = 32, height = 32, className }) => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <defs>
-      <linearGradient 
-        id="gridsome_paint0_linear" 
-        x1="124" 
-        y1="-37" 
-        x2="-15.3949" 
-        y2="446.346" 
-        gradientUnits="userSpaceOnUse">
-        <stop 
-          stop-color="#00A672"
-        />
-        <stop 
-          offset="1" 
-          stop-color="#008B60"
-        />
+      <linearGradient
+        id="gridsome_paint0_linear"
+        x1="124"
+        y1="-37"
+        x2="-15.3949"
+        y2="446.346"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#00A672" />
+        <stop offset="1" stopColor="#008B60" />
       </linearGradient>
-      
-      <linearGradient 
+
+      <linearGradient
         id="gridsome_paint1_linear"
-        x1="263.861" 
+        x1="263.861"
         y1="445.388"
         x2="263.861"
         y2="251.498"
-        gradientUnits="userSpaceOnUse">
-        <stop 
-          stop-color="white" 
-          stop-opacity="0.95"
-        />
-        <stop 
-          offset="1"
-          stop-color="white"
-          stop-opacity="0.5"
-        />
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" stopOpacity="0.95" />
+        <stop offset="1" stopColor="white" stopOpacity="0.5" />
       </linearGradient>
     </defs>
 
-    <rect 
+    <rect
       width="512"
       height="512"
-      rx="256" 
+      rx="256"
       fill="url(#gridsome_paint0_linear)"
     />
-    
-    <path 
+
+    <path
       d="M320.368 257.735C320.368 240.765 334.25 227.008 351.375 227.008H396.563C413.688 227.008 428 240.765 428 257.735C428 274.705 413.688 288.462 396.563 288.462H351.375C334.25 288.462 320.368 274.705 320.368 257.735Z"
       fill="white"
     />
-    
-    <path 
+
+    <path
       d="M225.554 257.78C225.554 240.785 239.348 227.008 256.345 227.008C273.342 227.008 287.137 240.785 287.137 257.78C287.137 274.775 273.342 288.552 256.345 288.552C239.348 288.552 225.554 274.775 225.554 257.78Z"
       fill="white"
     />
-    
-    <path 
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M286.284 114.008C286.971 130.569 274.102 144.552 257.538 145.24C186.036 148.209 142.385 204.243 144.51 257.449C145.171 274.011 132.548 287.974 115.983 288.635C99.4189 289.296 84.8521 275.93 84.1907 259.367C80.7283 172.664 153.133 86.95 255.047 85.2667C271.611 84.5789 285.596 97.4468 286.284 114.008Z"
       fill="white"
     />
-    
-    <path 
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M84.0967 256.154C84.5034 360.913 170.483 430.138 257.415 427.999C360.033 424.337 434.165 335.203 428 255.637C426.57 239.112 411.913 226.303 395.354 227.097C378.795 227.892 366.016 241.957 366.81 258.513C369.13 306.869 324.536 366.092 255.938 367.993C201.449 369.333 146.897 326.551 144.508 259.968C143.87 275.404 131.701 288.008 115.983 288.635C99.4185 289.296 84.8518 275.93 84.1904 259.367C84.1476 258.296 84.1164 257.225 84.0967 256.154Z"
       fill="url(#gridsome_paint1_linear)"
     />
-
   </svg>
 );

packages/common/src/components/logos/Node.tsx

@@ -1,95 +1,5 @@
 import * as React from 'react';
 
-export default ({ width = 32, height = 32, className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 259.58 260.47"
-    style={{ transform: 'scale(2, 2)' }}
-  >
-    <defs>
-      <clipPath id="a" transform="translate(55 55.1)">
-        <path
-          fill="none"
-          d="M71.61 4.24L15.44 36.67A6.78 6.78 0 0 0 12 42.54v64.89a6.78 6.78 0 0 0 3.39 5.87l56.18 32.45a6.8 6.8 0 0 0 6.79 0l56.17-32.45a6.79 6.79 0 0 0 3.39-5.87V42.54a6.78 6.78 0 0 0-3.4-5.87L78.4 4.24a6.83 6.83 0 0 0-6.8 0"
-        />
-      </clipPath>
-      <linearGradient
-        id="b"
-        x1="-245.73"
-        x2="-244.14"
-        y1="504.44"
-        y2="504.44"
-        gradientTransform="matrix(-50.8 103.5 103.5 50.8 -64583.4 -167)"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.3" stopColor="#3e863d" />
-        <stop offset="0.5" stopColor="#55934f" />
-        <stop offset="0.8" stopColor="#5aad45" />
-      </linearGradient>
-      <clipPath id="c" transform="translate(55 55.1)">
-        <path
-          fill="none"
-          d="M13.44 111.55a6.8 6.8 0 0 0 2 1.75l48.19 27.83 8 4.61a6.81 6.81 0 0 0 3.91.89 6.94 6.94 0 0 0 1.33-.24l59.27-108.47a6.72 6.72 0 0 0-1.58-1.25L97.78 15.42 78.34 4.24a7.09 7.09 0 0 0-1.76-.71z"
-        />
-      </clipPath>
-      <linearGradient
-        id="d"
-        x1="-247.4"
-        x2="-246.37"
-        y1="501.46"
-        y2="501.46"
-        gradientTransform="rotate(-36.5 113113.8 -110864.6) scale(177.1)"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.57" stopColor="#3e863d" />
-        <stop offset="0.72" stopColor="#619857" />
-        <stop offset="1" stopColor="#76ac64" />
-      </linearGradient>
-      <clipPath id="e" transform="translate(55 55.1)">
-        <path
-          fill="none"
-          d="M74.33 3.38a6.85 6.85 0 0 0-2.71.87l-56 32.33 60.4 110a6.74 6.74 0 0 0 2.41-.83l56.17-32.45a6.81 6.81 0 0 0 3.28-4.63L76.29 3.49a7.05 7.05 0 0 0-1.37-.14h-.56"
-        />
-      </clipPath>
-      <linearGradient
-        id="f"
-        x1="-245.84"
-        x2="-244.9"
-        y1="501.11"
-        y2="501.11"
-        gradientTransform="matrix(129.9 0 0 -129.9 31948.1 65164.3)"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.16" stopColor="#6bbf47" />
-        <stop offset="0.38" stopColor="#79b461" />
-        <stop offset="0.47" stopColor="#75ac64" />
-        <stop offset="0.7" stopColor="#659e5a" />
-        <stop offset="0.9" stopColor="#3e863d" />
-      </linearGradient>
-    </defs>
-    <g clipPath="url(#a)">
-      <path
-        fill="url(#b)"
-        d="M194.72 31.16L36.44-46.42l-81.16 165.56 158.28 77.59z"
-        transform="translate(55 55.1)"
-      />
-    </g>
-    <g clipPath="url(#c)">
-      <path
-        fill="url(#d)"
-        d="M-55 54.11L56.76 205.38 204.58 96.17 92.8-55.09z"
-        transform="translate(55 55.1)"
-      />
-    </g>
-    <g clipPath="url(#e)">
-      <path
-        fill="url(#f)"
-        d="M15.6 3.35v143.24h122.24V3.35H15.6z"
-        transform="translate(55 55.1)"
-      />
-    </g>
-  </svg>
-);
+import node from './node.png';
+
+export default props => <img alt="node" src={node} {...props} />;