Merge pull request #72 from layer5io/leecalcote/button/videosicon

Feature: videos icon

Author: leecalcote

ui/src/components/ExtensionComponent/RecentDesigns.js

@@ -76,6 +76,9 @@ export default function RecentDesignsCard({ isDarkTheme }) {
     const myDesignsURL = `https://cloud.layer5.io/catalog/content/my-designs/${name}-${design.id}?source=%257B%2522type%2522%253A%2522my-designs%2522%257D`;
     window.ddClient.host.openExternal(myDesignsURL);
   };
+  const RecentsTooltipTitle = (
+    <Typography variant="body2">Designs in this list are those owned by you, available in your currently selected Organization and Workspace. Learn more about Spaces at https://docs.layer5.io/cloud/spaces/</Typography>
+  );
 
   return (
     <SectionCard
@@ -90,7 +93,7 @@ export default function RecentDesignsCard({ isDarkTheme }) {
           "row", }}
           alignSelf="flex-start">
           <CustomTooltip 
-            title="Designs in this list are those owned by you, available in your currently selected Organization and Workspace. Learn more about Spaces at https://docs.layer5.io/cloud/spaces/">
+            title={RecentsTooltipTitle}>
             <div>
               <InfoCircleIcon height={24} width={24} />
             </div>

ui/src/img/SVGs/videosIcon.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+const VideosIcon = ({ width = 32, height = 32 }) => (
+  <svg
+    width={width}
+    height={height}
+    version="1.1"
+    viewBox="0 0 32 32"
+    xml:space="preserve" 
+    fill="#fff"
+    xmlns="http://www.w3.org/2000/svg"
+    enable-background="new 0 0 32 32"
+  >
+    <title>Videos</title>
+    
+    <path d="M16 0C7.164 0 0 7.164 0 16s7.164 16 16 16 16-7.164 16-16S24.836 0 16 0zm-6 24V8l16.008 8L10 24z" fill="#00b39f" class="fill-4e4e50" 
+    />
+  </svg>
+);
+
+export default VideosIcon;