docs: highlight maintainer services

README.md

@@ -58,7 +58,7 @@ If you want to contribute read the [CONTRIBUTING.md](/CONTRIBUTING.md) guide.
 
 ## 🏢 Built with ♥️ and ⌨️ at TheWidlarzGroup
 
-Built at TheWidlarzGroup - the group of React Native Developers and Designers who has built this project for you.
+Built at [TheWidlarzGroup](https://www.thewidlarzgroup.com/?utm_source=rnemoji&utm_medium=readme) - the group of React Native Developers and Designers who has built this project for you.
 If you like it -> give it a star!
 
 E-mail if you have any questions or just want to talk <hello@thewidlarzgroup.com>

docs/docs/contributions/translations.md

@@ -5,6 +5,8 @@ title: Translations
 
 # Translations
 
+### How to Add Translations
+
 We highly encourage you to add new translations. Please follow the steps below:
 
 - Create language file in `/src/translation/` directory. _For example `en.ts`_

docs/src/css/custom.css

@@ -14,7 +14,7 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-color-primary-warning: #e63946;
-  --ifm-color-primary-black: #1f1e22;
+  --ifm-color-primary-black: #171717;
   --ifm-color-primary-white: #ffffff;
 
   --ifm-code-font-size: 95%;
@@ -23,15 +23,15 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #87ccef;
+  --ifm-color-primary-dark: #70add2;
+  --ifm-color-primary-darker: #5a8eb4;
+  --ifm-color-primary-darkest: #3f6585;
+  --ifm-color-primary-light: #a3dbf2;
+  --ifm-color-primary-lighter: #b9e4f6;
+  --ifm-color-primary-lightest: #cfeaeb;
   --ifm-color-primary-warning: #e63946;
-  --ifm-color-primary-black: #1f1e22;
+  --ifm-color-primary-black: #171717;
   --ifm-color-primary-white: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

docs/src/theme/TOC/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import clsx from 'clsx'
+import TOCItems from '@theme/TOCItems'
+import styles from './styles.module.css'
+import { PremiumSupport } from '../components/PremiumSupport/PremiumSupport'
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight'
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active'
+export default function TOC({ className, ...props }) {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+      <PremiumSupport />
+    </div>
+  )
+}

docs/src/theme/TOC/styles.module.css

@@ -0,0 +1,16 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}

docs/src/theme/components/PremiumSupport/PremiumSupport.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import './PremiumSupport.style.css'
+
+export const PremiumSupport = () => {
+  return (
+    <div className="premium-support__container">
+      <span className="premium-support__text">We are TheWidlarzGroup</span>
+      <a
+        target="_blank"
+        href="https://www.thewidlarzgroup.com/?utm_source=rnemoji&utm_medium=docs#Contact"
+        className="premium-support__link"
+        rel="noreferrer"
+      >
+        Premium support →
+      </a>
+    </div>
+  )
+}

docs/src/theme/components/PremiumSupport/PremiumSupport.style.css

@@ -0,0 +1,57 @@
+.premium-support__container {
+  display: none;
+  flex-direction: column;
+  text-align: center;
+  background-color: #171717;
+  padding: 1rem;
+  margin: 1rem;
+  gap: 1rem;
+  border-radius: 0.5rem;
+}
+
+.premium-support__text {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-weight: bold;
+  color: #fff;
+}
+
+.premium-support__link {
+  width: 90%;
+  border-radius: .25rem;
+  margin: 0 auto;
+  border: none;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  background-color: #f9d85b;
+  color: #171717;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  text-align: center;
+  display: inline-block;
+}
+
+.premium-support__link:hover {
+  transform: scale(1.05);
+  background-color: #fff;
+  color: #171717;
+  text-decoration: none;
+}
+
+html[data-theme="dark"] .premium-support__container {
+  background-color: #87ccef;
+}
+
+html[data-theme="dark"] .premium-support__text {
+  color: #171717;
+}
+
+html[data-theme="dark"] .premium-support__link {
+  background-color: #171717;
+  color: #fff;
+}
+
+@media (min-width: 1516px) {
+  .premium-support__container {
+    display: flex;
+  }
+}