From c14f52c3ca85e172da2f7e0965241afde10c119a Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.ai>
Date: Thu, 27 Jan 2022 12:48:39 +0100
Subject: [PATCH] docs: finish v1 of the video content element.

---
 website/src/components/VideoContent.jsx | 24 +++++++++++++++++++-----
 website/src/css/custom.css              |  5 -----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/website/src/components/VideoContent.jsx b/website/src/components/VideoContent.jsx
index 889f9e3387..fa79262296 100644
--- a/website/src/components/VideoContent.jsx
+++ b/website/src/components/VideoContent.jsx
@@ -1,14 +1,28 @@
 import React from 'react';
 import Admonition from '@theme/Admonition';
 
-const Component = ({ videoUrls, children }) => {
+const icons = {
+    tip: (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="16"
+            viewBox="0 0 12 16"
+            ariaHidden="true"
+        >
+            <path
+                fillRule="evenodd"
+                d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"
+            />
+        </svg>
+    ),
+};
+
+const Component = ({ title = 'video content', videoUrls, children }) => {
     return (
         <article className="unleash-video-container">
-            <Admonition type="tip" title="Video content">
+            <Admonition icon={icons.tip} title={title} type="note">
                 {children}
-                Hey! Did you know that the content in this guide is also
-                available in video format? If that's more your speed, feel free
-                to check out one of these related videos 🍿📽
             </Admonition>
 
             <div className="videos">
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 7ff0a066d3..30206b7385 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -78,11 +78,6 @@ html[data-theme='dark'] .header-github-link:before {
     margin-bottom: 1em;
 }
 
-.unleash-video-container p {
-    background: var(--ifm-color-success-contrast-background);
-    border-radius: var(--border-radius);
-}
-
 .unleash-video-container > .videos {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));