diff --git a/README.md b/README.md index d2e8c995..c60359ee 100644 --- a/README.md +++ b/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 diff --git a/docs/docs/contributions/translations.md b/docs/docs/contributions/translations.md index 99fdfb7a..432ce550 100644 --- a/docs/docs/contributions/translations.md +++ b/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`_ diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 637394d2..e52b7937 100644 --- a/docs/src/css/custom.css +++ b/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); } diff --git a/docs/src/theme/TOC/index.js b/docs/src/theme/TOC/index.js new file mode 100644 index 00000000..44643e28 --- /dev/null +++ b/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 ( +
+ + +
+ ) +} diff --git a/docs/src/theme/TOC/styles.module.css b/docs/src/theme/TOC/styles.module.css new file mode 100644 index 00000000..4b5d9f46 --- /dev/null +++ b/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; + } +} diff --git a/docs/src/theme/components/PremiumSupport/PremiumSupport.js b/docs/src/theme/components/PremiumSupport/PremiumSupport.js new file mode 100644 index 00000000..abd2df1d --- /dev/null +++ b/docs/src/theme/components/PremiumSupport/PremiumSupport.js @@ -0,0 +1,18 @@ +import React from 'react' +import './PremiumSupport.style.css' + +export const PremiumSupport = () => { + return ( +
+ We are TheWidlarzGroup + + Premium support → + +
+ ) +} diff --git a/docs/src/theme/components/PremiumSupport/PremiumSupport.style.css b/docs/src/theme/components/PremiumSupport/PremiumSupport.style.css new file mode 100644 index 00000000..88bc69b2 --- /dev/null +++ b/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; + } +}