From 1e3540863a728bbaa33c2f4eb369b0eb2c1e72c8 Mon Sep 17 00:00:00 2001
From: Felix Malfait <felix.malfait@gmail.com>
Date: Thu, 20 Apr 2023 22:57:55 +0200
Subject: [PATCH] Improve styling

---
 docs/docusaurus.config.js |  6 +++---
 docs/src/css/custom.css   | 43 ++++++++++++++++++++++++++-------------
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
index c0b6c833b..6a5aabb70 100644
--- a/docs/docusaurus.config.js
+++ b/docs/docusaurus.config.js
@@ -51,10 +51,10 @@ const config = {
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
       navbar: {
-        title: 'Twenty',
+        /*title: 'Twenty',*/
         logo: {
-          alt: 'Twenty Logo',
-          src: 'img/logo.svg',
+          alt: 'Twenty',
+          src: 'https://twenty.com/wp-content/uploads/2023/03/Screenshot-2023-03-07-at-22.21.44-2.png',
         },
         items: [
           {
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 44ef91ab6..87d523c24 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -6,26 +9,27 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-global-radius: 8px;
+  --ifm-code-font-size: var(14px);
+  --ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
+  --ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
+  --ifm-font-size-base: var(14px);
+  --ifm-base-spacing: 16px;
+  --ifm-line-height-base: var(--twenty-body-regular-line-height);
+  --ifm-font-weight-base: var(--twenty-body-regular-font-weight);
+  --ifm-color-primary: #11181c;
   --ifm-code-font-size: 95%;
+  --docsearch-key-gradient: none !important;
+  --docsearch-key-shadow: 0 0 0 0.5px var(--docsearch-muted-color) !important;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-toc-padding-vertical: 0.5rem;
+  --ifm-breadcrumb-border-radius: 8px;
+  --ifm-navbar-link-color: #687076;
 }
 
 /* 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: #fff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
@@ -40,3 +44,14 @@ html {
   font-size: 16px;
 }
 
+.DocSearch-Button {
+  border-radius: 8px !important;
+}
+
+.navbar__items--right svg > path {
+  fill: #687076 !important;
+}
+
+.DocSearch-Button-Placeholder {
+  padding: 0 100px 0 6px !important;
+}
\ No newline at end of file