docs: api request descriptions (#1637)

* doc: api descriptions

* doc: management description

* doc: message validation

* doc: api descriptions

* doc: api descriptions

* doc: description

* doc: index images

* doc: design

* colors, colors and more colors

* margin

* fix comment

* doc: api descriptions

* doc: empty response

* doc: api descriptions

* fix comment

Co-authored-by: Livio Amstutz <livio.a@gmail.com>

docs/src/css/custom.css

@@ -6,7 +6,7 @@
  */
 
 /* You can override the default Infima variables here. */
-@import url('https://fonts.googleapis.com/css2?family=Montserrat');
+@import url('https://fonts.googleapis.com/css2?family=Lato');
 
 :root {
   --ifm-color-primary: #556cd1;
@@ -17,9 +17,19 @@
   --ifm-color-primary-lighter: #788ada;
   --ifm-color-primary-lightest: #9aa8e4;
   --ifm-code-font-size: 95%;
-  --ifm-font-family-base: 'Montserrat', sans-serif;
+  --ifm-font-family-base: 'Lato', sans-serif;
+  --ifm-hero-background-color: var(--ifm-color-primary);
+  --ifm-hero-text-color: var(--ifm-font-color-base-inverse);
+  --get-started: #FF2069;
+  --get-started-bg-hover: var(--ifm-hero-background-color);
 }
 
+:root[data-theme="dark"] {
+  --ifm-background-color: #141735;
+  --ifm-hero-background-color: #0F1022;
+  --ifm-hero-text-color: var(--ifm-font-color-base);
+  --get-started-bg: --ifm-font-color-base;
+}
 
 .docusaurus-highlight-code-line {
   background-color: rgb(72, 77, 91);
@@ -29,14 +39,14 @@
 }
 
 .get-started {
-  border: 1px solid;
-  background-color: var(--ifm-font-color-base-inverse);
-  color: var(--ifm-color-primary);
+  border: 2px solid var(--get-started);
+  background-color: var(--get-started);
+  color: var(--ifm-hero-text-color);
 }
 
 .get-started:hover {
-  background-color: var(--ifm-color-primary);
-  color: var(--ifm-font-color-base-inverse);
+  background-color: var(--get-started-bg-hover);
+  color: var(--ifm-hero-text-color);
 }
 
 .docs-link a {
@@ -46,4 +56,8 @@
 
 .docs-link a:hover {
   color: var(--ifm-color-primary);
+}
+
+.docs-link img {
+  margin: 40px;
 }

docs/src/pages/index.js

@@ -5,11 +5,13 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
+import ThemedImage from '@theme/ThemedImage';
 
 const features = [
   {
     title: 'Manuals',
-    imageUrl: 'img/zitadel-logo-solo-light.png',
+    darkImageUrl: 'img/index/Manual-dark.svg',
+    lightImageUrl: 'img/index/Manual-light.svg',
     link: 'docs/manuals/introduction',
     description: (
       <>
@@ -19,7 +21,8 @@ const features = [
   },
   {
     title: 'Quickstarts',
-    imageUrl: 'img/zitadel-logo-solo-light.png',
+    darkImageUrl: 'img/index/Quickstarts-dark.svg',
+    lightImageUrl: 'img/index/Quickstarts-light.svg',
     link: 'docs/quickstarts/introduction',
     description: (
       <>
@@ -29,7 +32,8 @@ const features = [
   },
   {
     title: 'Guides',
-    imageUrl: 'img/zitadel-logo-solo-light.png',
+    darkImageUrl: 'img/index/Guides-dark.svg',
+    lightImageUrl: 'img/index/Guides-light.svg',
     link: 'docs/guides/introduction',
     description: (
       <>
@@ -39,7 +43,8 @@ const features = [
   },
   {
     title: 'APIs',
-    imageUrl: 'img/zitadel-logo-solo-light.png',
+    darkImageUrl: 'img/index/APIs-dark.svg',
+    lightImageUrl: 'img/index/APIs-light.svg',
     link: '/docs/apis/introduction',
     description: (
       <>
@@ -49,7 +54,8 @@ const features = [
   },
   {
     title: 'Concepts',
-    imageUrl: 'img/zitadel-logo-solo-light.png',
+    darkImageUrl: 'img/index/Concepts-dark.svg',
+    lightImageUrl: 'img/index/Concepts-light.svg',
     link: 'docs/concepts/introduction',
     description: (
       <>
@@ -59,18 +65,26 @@ const features = [
   },
 ];
 
-function Feature({imageUrl, title, description, link}) {
-  const imgUrl = useBaseUrl(imageUrl);
+function Feature({darkImageUrl, lightImageUrl, title, description, link}) {
+  const darkImgUrl = useBaseUrl(darkImageUrl);
+  const lightImgUrl = useBaseUrl(lightImageUrl);
   return (
         <div className={clsx('col col--4 docs-link', styles.feature)}>
           <Link to={useBaseUrl(link)}>
-          {imgUrl && (
+          {darkImgUrl && lightImgUrl && (
               <div className="text--center">
-                <img className={styles.featureImage} src={imgUrl} alt={title} />
+                <ThemedImage
+                    className={styles.featureImage}
+                    alt={title}
+                    sources={{
+                      light: lightImgUrl,
+                      dark: darkImgUrl,
+                    }}
+                />
               </div>
           )}
-          <h3>{title}</h3>
-          <p>{description}</p>
+          <h3 className="text--center">{title}</h3>
+          <p className="text--center">{description}</p>
           </Link>
         </div>
   );
@@ -83,7 +97,7 @@ export default function Home() {
     <Layout
       title={`${siteConfig.title}`}
       description="This site bundles ZITADELs Documentations">
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <header className={clsx('hero', styles.heroBanner)}>
         <div className="container">
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>