docs: add digital ocean to home page and project readme and update colors of docs

README.md

@@ -11,7 +11,16 @@
 
 ## Demo
 
+<div style="display: flex; justify-content: space-between; width: 100%;>
+
 [![Edit ReactTooltip](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/still-monad-yfi4fn?fontsize=14&hidenavigation=1&theme=dark)
+<p>
+  <a href="https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge">
+    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg" width="201px">
+  </a>
+</p>
+</div>
+
 
 Documentation for V4 - [Github Page](https://reacttooltip.github.io/react-tooltip/).
 

docs/src/components/HomepageSponsored/index.tsx

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-unresolved */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable global-require */
+import React from 'react'
+import clsx from 'clsx'
+import styles from './styles.module.css'
+
+type FeatureItem = {
+  title: string
+  Svg: React.ComponentType<React.ComponentProps<'svg'>>
+  link: string
+}
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Digital Ocean',
+    Svg: require('@site/static/img/digital-ocean-powered-by.svg').default,
+    link: 'https://www.digitalocean.com/?refcode=0813b3be1161&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge',
+  },
+]
+
+function Feature({ title, Svg, link }: FeatureItem) {
+  return (
+    <div className={clsx('col col--12')}>
+      <div className="text--center">
+        <a href={link} title={title} target="_blank" rel="noreferrer">
+          <Svg className={styles.featureSvg} role="img" />
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default function HomepageSponsored(): JSX.Element {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <h3 className={styles.sponsoredTitle}>Sponsors</h3>
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

docs/src/components/HomepageSponsored/styles.module.css

@@ -0,0 +1,17 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}
+
+.sponsoredTitle {
+  font-size: xx-large;
+  display: flex;
+  justify-content: center;
+}

docs/src/css/custom.css

@@ -6,6 +6,17 @@
 
 /* You can override the default Infima variables here. */
 :root {
+  --ifm-color-primary: #004285;
+  --ifm-color-primary-dark: #003b78;
+  --ifm-color-primary-darker: #003871;
+  --ifm-color-primary-darkest: #002e5d;
+  --ifm-color-primary-light: #004992;
+  --ifm-color-primary-lighter: #004c99;
+  --ifm-color-primary-lightest: #0056ad;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+/* :root {
   --ifm-color-primary: #2e8555;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
@@ -15,10 +26,21 @@
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
+} */
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
+  --ifm-color-primary: #70b8ff;
+  --ifm-color-primary-dark: #4ba6ff;
+  --ifm-color-primary-darker: #399dff;
+  --ifm-color-primary-darkest: #0281ff;
+  --ifm-color-primary-light: #95caff;
+  --ifm-color-primary-lighter: #a7d3ff;
+  --ifm-color-primary-lightest: #deefff;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+/* [data-theme='dark'] {
   --ifm-color-primary: #25c2a0;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
@@ -27,7 +49,7 @@
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-}
+} */
 
 /** styling examples **/
 .example-container .example {

docs/src/pages/index.tsx

@@ -5,6 +5,7 @@ import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Layout from '@theme/Layout'
 import HomepageFeatures from '@site/src/components/HomepageFeatures'
+import HomepageSponsored from '@site/src/components/HomepageSponsored'
 
 import styles from './index.module.css'
 
@@ -39,6 +40,7 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <HomepageSponsored />
       </main>
     </Layout>
   )