fix: GitHub logo for dark theme + brand light GitLab logo (fix #299)

Also removed link to external assets, and let us versioned them within docs versions.

docs/akamai/overview.mdx

@@ -15,6 +15,8 @@ import CloudBanner from '@site/src/components/CloudBanner/CloudBanner.jsx';
 import CommonProvisionProcess from "../common/partials/common/_provision-process.mdx";
 import KnownLimitations from "../common/known-limitations.mdx";
 import AkamaiLogo from '../img/akamai/logo.svg';
+import GitHubLogo from '../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../common/components/GitLabLogo.jsx'
 
 <div class="cloud_logo">
   <AkamaiLogo width="200px" alt="Akamai Logo" />
@@ -36,7 +38,7 @@ The Akamai provisioning process will:
 <CommonProvisionProcess firstitem="Create a Kubernetes management cluster in the Akamai cloud."/>
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
-  <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+  <TabItem attributes={{ className: styles.github }} value="github" label={ <GitHubLogo /> }>
 
     ![Installation Diagram](../img/akamai/github/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/akamai/github/installation-diagram-dark.svg#dark-mode)
 
@@ -45,7 +47,7 @@ The Akamai provisioning process will:
 
   </TabItem>
   <!-- markdownlint-disable MD049 -->
-  {/*<TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <div className="git-tab"> <img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" /> <span>GitLab</span></div> }>
+  {/*<TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <GitLabLogo /> }>
 
     ![Installation Diagram](../img/akamai/gitlab/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/akamai/gitlab/installation-diagram-dark.svg#dark-mode)
 

docs/akamai/quick-start/install/cli.mdx

@@ -20,6 +20,8 @@ import styles from "../../../stylesheets/tabs.module.css";
 import GitHubHandoffScreen from "../../../img/akamai/github/handoff-screen.png";
 import GitLabHandoffScreen from "../../../img/akamai/gitlab/handoff-screen.png";
 import CLI from "../../../common/partials/common/_cli.mdx";
+import GitHubLogo from '../../../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../../../common/components/GitLabLogo.jsx'
 
 export const TabLabel = ({ imgSrc, label, alt }) => (
   <div className="git-tab">
@@ -34,7 +36,7 @@ export const TabLabel = ({ imgSrc, label, alt }) => (
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
 
-    <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+    <TabItem attributes={{ className: styles.github }} value="github" label={ <GitHubLogo /> }>
     <GitHubPrerequisites />
     <GitHubClusterCreateCmd />
     <CommonTerminalOutput cloud="Akamai"  minutes="10" handoffScreen={GitHubHandoffScreen} />

docs/aws/overview.mdx

@@ -15,6 +15,8 @@ import KnownLimitations from "../common/known-limitations.mdx";
 import GitHubOverview from '../aws/partials/github/_overview.mdx';
 import GitLabOverview from '../aws/partials/gitlab/_overview.mdx';
 import AWSLogo from '../img/aws/logo.svg';
+import GitHubLogo from '../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../common/components/GitLabLogo.jsx'
 
 <div class="cloud_logo">
   <AWSLogo width="200px" alt="AWS Logo" />
@@ -26,15 +28,15 @@ The AWS provisioning process will:
 <CommonProvisionProcess firstitem="Create a Kubernetes management cluster in the AWS cloud."/>
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
-  <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+  <TabItem attributes={{ className: styles.github }} value="github" label={ <GitHubLogo /> }>
 
     ![Installation Diagram](../img/aws/github/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/aws/github/installation-diagram-dark.svg#dark-mode)
 
     ## Applications
     <GitHubOverview />
 
   </TabItem>
-  <TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <div className="git-tab"> <img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" /> <span>GitLab</span></div> }>
+  <TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <GitLabLogo /> }>
 
     ![Installation Diagram](../img/aws/gitlab/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/aws/gitlab/installation-diagram-dark.svg#dark-mode)
 

docs/aws/quick-start/install/cli.mdx

@@ -20,6 +20,8 @@ import styles from "../../../stylesheets/tabs.module.css";
 import GitHubHandoffScreen from "../../../img/aws/github/handoff-screen.png";
 import GitLabHandoffScreen from "../../../img/aws/gitlab/handoff-screen.png";
 import CLI from "../../../common/partials/common/_cli.mdx";
+import GitHubLogo from '../../../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../../../common/components/GitLabLogo.jsx'
 
 export const TabLabel = ({ imgSrc, label, alt }) => (
   <div className="git-tab">
@@ -33,19 +35,17 @@ export const TabLabel = ({ imgSrc, label, alt }) => (
 <AwsCloudPrerequisites />
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
-
-    <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+  <TabItem attributes={{ className: styles.github }} value="github" label={ <GitHubLogo /> }>
     <GitHubPrerequisites />
     <GitHubClusterCreateCmd />
     <CommonTerminalOutput cloud="Aws"  minutes="10" handoffScreen={GitHubHandoffScreen} />
   </TabItem>
 
-      <TabItem attributes={{ className: styles.gitlab }} value="gitlab" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" /><span>GitLab</span></div> }>
+  <TabItem attributes={{ className: styles.gitlab }} value="gitlab" label={ <GitLabLogo /> }>
     <GitLabPrerequisites />
     <GitLabClusterCreateCmd />
     <CommonTerminalOutput cloud="Aws"  minutes="10" handoffScreen={GitLabHandoffScreen} />
   </TabItem>
-
 </Tabs>
 
 <CommonRootCredentialsCmd cloud="aws" />

docs/civo/overview.mdx

@@ -15,6 +15,8 @@ import CloudBanner from '@site/src/components/CloudBanner/CloudBanner.jsx';
 import CommonProvisionProcess from "../common/partials/common/_provision-process.mdx";
 import KnownLimitations from "../common/known-limitations.mdx";
 import CivoLogo from '../img/civo/logo.svg';
+import GitHubLogo from '../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../common/components/GitLabLogo.jsx'
 
 <div class="cloud_logo">
   <CivoLogo width="200px" alt="Civo Logo" />
@@ -26,15 +28,15 @@ The Civo provisioning process will:
 <CommonProvisionProcess firstitem="Create a Kubernetes management cluster in the Civo cloud."/>
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
-  <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+  <TabItem attributes={{ className: styles.github }} value="github" label={ <GitHubLogo /> }>
 
     ![Installation Diagram](../img/civo/github/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/civo/github/installation-diagram-dark.svg#dark-mode)
 
     ## Applications
     <GitHubOverview />
 
   </TabItem>
-  <TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <div className="git-tab"> <img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" /> <span>GitLab</span></div> }>
+  <TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <GitLabLogo /> }>
 
     ![Installation Diagram](../img/civo/gitlab/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/civo/gitlab/installation-diagram-dark.svg#dark-mode)
 

docs/civo/quick-start/install/cli.mdx

@@ -20,6 +20,8 @@ import styles from "../../../stylesheets/tabs.module.css";
 import GitHubHandoffScreen from "../../../img/civo/github/handoff-screen.png";
 import GitLabHandoffScreen from "../../../img/civo/gitlab/handoff-screen.png";
 import CLI from "../../../common/partials/common/_cli.mdx";
+import GitHubLogo from '../../../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../../../common/components/GitLabLogo.jsx'
 
 export const TabLabel = ({ imgSrc, label, alt }) => (
   <div className="git-tab">
@@ -34,13 +36,13 @@ export const TabLabel = ({ imgSrc, label, alt }) => (
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
 
-    <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+    <TabItem attributes={{ className: styles.github }} value="github" label={ <GitHubLogo /> }>
     <GitHubPrerequisites />
     <GitHubClusterCreateCmd />
     <CommonTerminalOutput cloud="Civo"  minutes="10" handoffScreen={GitHubHandoffScreen} />
   </TabItem>
 
-      <TabItem attributes={{ className: styles.gitlab }} value="gitlab" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" /><span>GitLab</span></div> }>
+      <TabItem attributes={{ className: styles.gitlab }} value="gitlab" label={ <GitLabLogo /> }>
     <GitLabPrerequisites />
     <GitLabClusterCreateCmd />
     <CommonTerminalOutput cloud="Civo"  minutes="10" handoffScreen={GitLabHandoffScreen} />

docs/common/components/GitHubLogo.jsx

@@ -0,0 +1,17 @@
+import { useColorMode } from '@docusaurus/theme-common';
+import GitHubDark from '../../img/common/github/github-dark.svg';
+import GitHubLight from '../../img/common/github/github-light.svg';
+
+export const GitHubLogo = () => {
+    if (useColorMode().colorMode === 'dark') {
+        return (
+            <GitHubDark width="80px" alt="GitHub logo" />
+        )
+    } else {
+        return (
+            <GitHubLight width="80px" alt="GitHub logo" />
+        )
+    }
+}
+
+export default GitHubLogo;

docs/common/components/GitLabLogo.jsx

@@ -0,0 +1,17 @@
+import { useColorMode } from '@docusaurus/theme-common';
+import GitLabDark from '../../img/common/gitlab/gitlab-dark.svg';
+import GitLabLight from '../../img/common/gitlab/gitlab-light.svg';
+
+export const GitLabLogo = () => {
+    if (useColorMode().colorMode === 'dark') {
+        return (
+            <GitLabDark width="80px" alt="GitLab logo" />
+        )
+    } else {
+        return (
+            <GitLabLight width="80px" alt="GitLab logo" />
+        )
+    }
+}
+
+export default GitLabLogo;

docs/common/git-auth.mdx

@@ -8,29 +8,21 @@ import TabItem from "@theme/TabItem";
 import styles from "../stylesheets/tabs.module.css";
 import GitHubTokens from '../common/partials/github/_tokens.mdx';
 import GitLabTokens from '../common/partials/gitlab/_tokens.mdx';
+import GitHubLogo from '../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../common/components/GitLabLogo.jsx'
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
     <TabItem
       attributes={{className: styles.github}}
       value="github"
-      label={
-        <div className="git-tab">
-          <img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" />
-          <span>GitHub</span>
-        </div>
-      }
+      label={ <GitHubLogo /> }
     >
       <GitHubTokens />
     </TabItem>
     <TabItem
       value="gitlab"
       attributes={{className: styles.gitlab}}
-      label={
-        <div className="git-tab">
-          <img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" />
-          <span>GitLab</span>
-        </div>
-      }
+      label={ <GitLabLogo /> }
     >
       <GitLabTokens name="GitHub" />
     </TabItem>

docs/common/repositories.mdx

@@ -10,29 +10,21 @@ import TabItem from "@theme/TabItem";
 import styles from "../stylesheets/tabs.module.css";
 import GitHubRepositories from './partials/github/_repositories.mdx';
 import GitLabRepositories from './partials/gitlab/_repositories.mdx';
+import GitHubLogo from './components/GitHubLogo.jsx'
+import GitLabLogo from './components/GitLabLogo.jsx'
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
     <TabItem
       attributes={{className: styles.github}}
       value="github"
-      label={
-        <div className="git-tab">
-          <img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" />
-          <span>GitHub</span>
-        </div>
-      }
+      label={ <GitHubLogo /> }
     >
       <GitHubRepositories />
     </TabItem>
     <TabItem
       value="gitlab"
       attributes={{className: styles.gitlab}}
-      label={
-        <div className="git-tab">
-          <img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" />
-          <span>GitLab</span>
-        </div>
-      }
+      label={ <GitLabLogo /> }
     >
       <GitLabRepositories />
     </TabItem>

docs/common/users.mdx

@@ -3,6 +3,8 @@ import TabItem from "@theme/TabItem";
 import styles from "../stylesheets/tabs.module.css";
 import GitHubUserCreation from './partials/github/_user-creation.mdx';
 import GitLabUserCreation from './partials/gitlab/_user-creation.mdx';
+import GitHubLogo from './components/GitHubLogo.jsx'
+import GitLabLogo from './components/GitLabLogo.jsx'
 
 ## User Access
 
@@ -20,24 +22,14 @@ The kubefirst platform has two types of user access: administrators and develope
     <TabItem
       attributes={{className: styles.github}}
       value="github"
-      label={
-        <div className="git-tab">
-          <img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" />
-          <span>GitHub</span>
-        </div>
-      }
+      label={ <GitHubLogo /> }
     >
       <GitHubUserCreation cloud={props.cloud} />
     </TabItem>
     <TabItem
       value="gitlab"
       attributes={{className: styles.gitlab}}
-      label={
-        <div className="git-tab">
-          <img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" />
-          <span>GitLab</span>
-        </div>
-      }
+      label={ <GitLabLogo /> }
     >
       <GitLabUserCreation cloud={props.cloud} />
     </TabItem>

docs/do/overview.mdx

@@ -16,6 +16,8 @@ import CloudBanner from '@site/src/components/CloudBanner/CloudBanner.jsx';
 import CommonProvisionProcess from "../common/partials/common/_provision-process.mdx";
 import KnownLimitations from "../common/known-limitations.mdx";
 import DOLogo from '../img/do/logo.svg';
+import GitHubLogo from '../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../common/components/GitLabLogo.jsx'
 
 <div class="cloud_logo">
   <DOLogo width="200px" alt="DigitalOcean Logo" />
@@ -27,15 +29,15 @@ The DigitalOcean provisioning process will:
 <CommonProvisionProcess firstitem="Create a Kubernetes management cluster in the DigitalOcean cloud."/>
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
-  <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+  <TabItem attributes={{ className: styles.github }} value="github" label={ <GitHubLogo /> }>
 
     ![Installation Diagram](../img/do/github/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/do/github/installation-diagram-dark.svg#dark-mode)
 
     ## Applications
     <GitHubOverview />
 
   </TabItem>
-  <TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <div className="git-tab"> <img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" /> <span>GitLab</span></div> }>
+  <TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <GitLabLogo /> }>
 
     ![Installation Diagram](../img/do/gitlab/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/do/gitlab/installation-diagram-dark.svg#dark-mode)
 

docs/do/quick-start/install/cli.mdx

@@ -21,6 +21,8 @@ import GitHubHandoffScreen from "../../../img/do/github/handoff-screen.png";
 import GitLabHandoffScreen from "../../../img/do/gitlab/handoff-screen.png";
 import CLI from "../../../common/partials/common/_cli.mdx";
 import SpaceRegion from "../../partials/common/_space-region.mdx";
+import GitHubLogo from '../../../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../../../common/components/GitLabLogo.jsx'
 
 export const TabLabel = ({ imgSrc, label, alt }) => (
   <div className="git-tab">
@@ -35,14 +37,14 @@ export const TabLabel = ({ imgSrc, label, alt }) => (
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
 
-    <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+    <TabItem attributes={{ className: styles.github }} value="github" label={<GitHubLogo /> }>
     <GitHubPrerequisites />
     <GitHubClusterCreateCmd />
     <SpaceRegion />
     <CommonTerminalOutput cloud="Do"  minutes="10" handoffScreen={GitHubHandoffScreen} />
   </TabItem>
 
-      <TabItem attributes={{ className: styles.gitlab }} value="gitlab" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" /><span>GitLab</span></div> }>
+      <TabItem attributes={{ className: styles.gitlab }} value="gitlab" label={ <GitLabLogo /> }>
     <GitLabPrerequisites />
     <GitLabClusterCreateCmd />
     <SpaceRegion />

docs/gcp/overview.mdx

@@ -14,6 +14,8 @@ import GitLabOverview from '../gcp/partials/gitlab/_overview.mdx';
 import CommonProvisionProcess from "../common/partials/common/_provision-process.mdx";
 import KnownLimitations from "../common/known-limitations.mdx";
 import GCPLogo from '../img/gcp/logo.svg';
+import GitHubLogo from '../common/components/GitHubLogo.jsx'
+import GitLabLogo from '../common/components/GitLabLogo.jsx'
 
 <div class="cloud_logo">
   <GCPLogo width="200px" alt="Google Cloud Logo" />
@@ -31,15 +33,15 @@ The Google Cloud provisioning process will:
 <CommonProvisionProcess firstitem="Create a Kubernetes management cluster in Google Cloud."/>
 
 <Tabs groupId="git_provider" defaultValue="github" queryString>
-  <TabItem attributes={{ className: styles.github }} value="github" label={ <div className="git-tab"><img src="https://assets.kubefirst.com/console/github.svg" alt="GitHub logo" /><span>GitHub</span></div> }>
+  <TabItem attributes={{ className: styles.github }} value="github" label={ <GitHubLogo /> }>
 
     ![Installation Diagram](../img/gcp/github/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/gcp/github/installation-diagram-dark.svg#dark-mode)
 
     ## Applications
     <GitHubOverview />
 
   </TabItem>
-  <TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <div className="git-tab"> <img src="https://assets.kubefirst.com/console/gitlab.svg" alt="GitLab logo" /> <span>GitLab</span></div> }>
+  <TabItem value="gitlab" attributes={{ className: styles.gitlab }} label={ <GitLabLogo /> }>
 
     ![Installation Diagram](../img/gcp/gitlab/installation-diagram-light.svg#light-mode)![Installation Diagram](../img/gcp/gitlab/installation-diagram-dark.svg#dark-mode)