From 2fb552b550a2e64abc978e43499738b926cad328 Mon Sep 17 00:00:00 2001
From: Prisma <goncalves@prisma.io>
Date: Mon, 1 Apr 2024 15:41:44 +0100
Subject: [PATCH] fix some issues from recent feedback

---
 src/components/GettingStarted/index.tsx    |  3 ++
 src/components/shortcodes/techSwitcher.tsx | 18 ++++-----
 src/css/custom.css                         | 47 +++++++++++++++++++++-
 3 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/components/GettingStarted/index.tsx b/src/components/GettingStarted/index.tsx
index 85e0aa105f..3ec09da8e3 100644
--- a/src/components/GettingStarted/index.tsx
+++ b/src/components/GettingStarted/index.tsx
@@ -52,6 +52,9 @@ export const BorderBoxWrapper = styled.div<{ border: boolean }>`
   padding: 24px 24px 32px 24px;
   border-radius: 8px;
   background: var(--main-bgd-color);
+  a {
+    text-decoration: underline;
+  }
   > * {
     font-family: Inter;
     text-align: left;
diff --git a/src/components/shortcodes/techSwitcher.tsx b/src/components/shortcodes/techSwitcher.tsx
index 0cd63a0ce8..5fd301c324 100644
--- a/src/components/shortcodes/techSwitcher.tsx
+++ b/src/components/shortcodes/techSwitcher.tsx
@@ -18,15 +18,15 @@ interface TechItem {
 }
 
 const icons = {
-  node: `/docs/img/technologies/nodejs.svg`, //<JS />,
-  typescript: `/docs/img/technologies/typescript.svg`, //<Typescript />,
-  mysql: `/docs/img/technologies/mysql.svg`, //<MySQL />,
-  postgresql: `/docs/img/technologies/postgresql.svg`, //<PostgreSQL />,
-  sqlite: `/docs/img/technologies/sqlite.svg`, //<SQLite />,
-  mongodb: `/docs/img/technologies/mongodb.svg`, //<MongoDB />,
-  sqlserver: `/docs/img/technologies/sqlserver.svg`, //<SQLServer />,
-  planetscale: `/docs/img/technologies/planetscale.svg`, //<PlanetScale />,
-  cockroachdb: `/docs/img/technologies/cockroachdb.svg`, //<CockroachDB />,
+  node: `/img/technologies/nodejs.svg`, //<JS />,
+  typescript: `/img/technologies/typescript.svg`, //<Typescript />,
+  mysql: `/img/technologies/mysql.svg`, //<MySQL />,
+  postgresql: `/img/technologies/postgresql.svg`, //<PostgreSQL />,
+  sqlite: `/img/technologies/sqlite.svg`, //<SQLite />,
+  mongodb: `/img/technologies/mongodb.svg`, //<MongoDB />,
+  sqlserver: `/img/technologies/sqlserver.svg`, //<SQLServer />,
+  planetscale: `/img/technologies/planetscale.svg`, //<PlanetScale />,
+  cockroachdb: `/img/technologies/cockroachdb.svg`, //<CockroachDB />,
 }
 
 const technologyTypes = {
diff --git a/src/css/custom.css b/src/css/custom.css
index 83e34b3951..0fcfa4a48a 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -804,7 +804,7 @@ footer > .container {
 
 .teal-btn {
   padding: 6px 12px;
-  border-radius: 4px;
+  border-radius: 6px;
   font-family: Barlow;
   font-size: 14px;
   font-weight: 700;
@@ -829,6 +829,19 @@ footer > .container {
   width: fit-content;
   max-width: 100%;
 }
+
+.tabs-container:has(.theme-code-block) {
+  width: 100%;
+}
+
+.children_src-theme-TabItem-styles-module:has(.theme-code-block) {
+  width: 100%;
+}
+
+.tabs-container .theme-code-block pre {
+  padding: 0 !important;
+}
+
 :root[data-theme='light'] .tabs-container > div {
   border-color: #E2E8F0;
 }
@@ -989,6 +1002,38 @@ footer > .container {
     margin-left: unset;
   }
 }
+
+.mantine-Modal-header .mantine-Text-root {
+  -webkit-tap-highlight-color: transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: inherit;
+  text-decoration: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-weight: 700;
+  font-size: 1.375rem !important;
+  line-height: 1.4;
+  margin: 0px;
+}
+
+.mantine-Modal-header .mantine-Image-image {
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+  width: revert !important;
+  height: revert !important;
+}
+
+.mantine-Modal-body >div:last-child .mantine-Text-root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  -webkit-tap-highlight-color: transparent;
+  color: rgb(134, 142, 150);
+  font-size: 0.75rem !important;
+  line-height: 1.55;
+  text-decoration: none;
+  font-weight: 500;
+}
+
 .mantine-Image-image {
   width: 40px !important;
   height: 40px !important;