From 3f0371bf0447fdce914e790b6a9728b77b884243 Mon Sep 17 00:00:00 2001
From: Petra Vankova <petravankova.pv@gmail.com>
Date: Tue, 4 Mar 2025 12:25:46 +0100
Subject: [PATCH] code block + postgresql links

---
 .../postgresql/how-to/export-import-data.mdx  | 23 ++++--------
 apps/docs/content/postgresql/overview.mdx     |  4 +-
 .../TabbedCodeBlock/styles.module.css         | 37 ++++++++++++++++---
 3 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/apps/docs/content/postgresql/how-to/export-import-data.mdx b/apps/docs/content/postgresql/how-to/export-import-data.mdx
index 6986f27f..f8ddd71f 100644
--- a/apps/docs/content/postgresql/how-to/export-import-data.mdx
+++ b/apps/docs/content/postgresql/how-to/export-import-data.mdx
@@ -3,25 +3,18 @@ title: Export or import PostgreSQL data
 description: Learn how to export or import postgresql data on Zerops.
 ---
 
-## Use Adminer to export or import data
+## Use Adminer or phpMyAdmin to export or import data
+* [Adminer ↗](https://www.adminer.org) - an open source full-featured database management tool written in PHP
+* [phpMyAdmin ↗](https://www.phpmyadmin.net) - a free software tool written in PHP, intended to handle the administration of PostgreSQL over the Web
 
-[Adminer ↗](https://www.adminer.org) is an open source full-featured database management tool written in PHP.
-
-1. [Install Adminer to Zerops](/postgresql/how-to/manage#how-to-install-adminer-to-zerops)
-2. Use Adminer standard export or import functions
-
-## Use phpMyAdmin to export or import data
-
-[phpMyAdmin ↗](https://www.phpmyadmin.net) is a free software tool written in PHP, intended to handle the administration of PostgreSQL over the Web.
-
-1. [Install phpMyAdmin to Zerops](/postgresql/how-to/manage#how-to-install-phpmyadmin-to-zerops)
-2. Use phpMyAdmin standard export or import functions
+1. [Install the tools to Zerops](/postgresql/how-to/manage#installing-management-tools)
+2. Use their standard export or import functions
 
 ## Use a database management tool on your workstation to export or import data
 
 Do you already use a database management tool that supports PostgreSQL on your workstation? Connect it securely to PostgreSQL from your local workspace via Zerops VPN.
 
-Zerops VPN client is included into zCLI, the Zerops command-line tool. To start the VPN connection, read [how to connect to PostgreSQL remotely](/postgresql/how-to/connect#connect-to-postgresql-in-zerops-remotely).
+Zerops VPN client is included into zCLI, the Zerops command-line tool. To start the VPN connection, read [how to connect to PostgreSQL remotely](/postgresql/how-to/connect#connect-remotely).
 :::caution
 Do not use SSL/TLS protocols when connecting to PostgreSQL over VPN. Zerops PostgreSQL is not configured to support these protocols. The security is assured by the VPN.
 :::
@@ -32,9 +25,9 @@ Once the connection to PostgreSQL is established, use the standard export or imp
 
 If you are using the [psql ↗](https://www.postgresql.org/docs/current/app-psql.html) command-line client to manage your PostgreSQL on your local workspace, you can connect it securely to PostgreSQL via Zerops VPN.
 
-Zerops VPN client is included into zCLI, the Zerops command-line tool. To start the VPN connection, read [how to connect to PostgreSQL remotely](/postgresql/how-to/connect#connect-to-postgresql-in-zerops-remotely).
+Zerops VPN client is included into zCLI, the Zerops command-line tool. To start the VPN connection, read [how to connect to PostgreSQL remotely](/postgresql/how-to/connect#connect-remotely).
 
-Once the VPN session is established, you have the secured connection to the project's private network in Zerops. You can access all project services locally by using their hostname. The only difference is that no [environment variables](/postgresql/how-to/connect#use-postgresql-environment-variables) are available when connected through VPN. To connect to PostgreSQL in Zerops you have to copy the [access details](/postgresql/how-to/connect#connect-to-postgresql-in-zerops-remotely) manually from Zerops GUI.
+Once the VPN session is established, you have the secured connection to the project's private network in Zerops. You can access all project services locally by using their hostname. The only difference is that no [environment variables](/postgresql/how-to/connect#method-2-environment-variables-recommended) are available when connected through VPN. To connect to PostgreSQL in Zerops you have to copy the [access details](/postgresql/how-to/connect#connection-details) manually from Zerops GUI.
 
 Use [psql ↗](https://www.postgresql.org/docs/current/app-psql.html) command to connect to PostgreSQL in Zerops:
 
diff --git a/apps/docs/content/postgresql/overview.mdx b/apps/docs/content/postgresql/overview.mdx
index 8fd11b5d..a0e21daf 100644
--- a/apps/docs/content/postgresql/overview.mdx
+++ b/apps/docs/content/postgresql/overview.mdx
@@ -61,7 +61,7 @@ import LargeCard from '@site/src/components/LargeCard';
     },
     {
       type: 'link',
-      href: '/postgresql/how-to/connect#connect-to-postgresql-from-runtime-services-of-the-same-project',
+      href: '/postgresql/how-to/connect#connect-from-services-in-the-same-project',
       label: 'Connect from the same project',
       customProps: {
         icon: Icons['link'],
@@ -69,7 +69,7 @@ import LargeCard from '@site/src/components/LargeCard';
     },
     {
       type: 'link',
-      href: '/postgresql/how-to/connect#connect-to-postgresql-in-zerops-remotely',
+      href: '/postgresql/how-to/connect#connect-remotely',
       label: 'Connect remotely',
       customProps: {
         icon: Icons['globe-europe'],
diff --git a/apps/docs/src/components/TabbedCodeBlock/styles.module.css b/apps/docs/src/components/TabbedCodeBlock/styles.module.css
index 5a83b962..85c69de6 100644
--- a/apps/docs/src/components/TabbedCodeBlock/styles.module.css
+++ b/apps/docs/src/components/TabbedCodeBlock/styles.module.css
@@ -1,10 +1,28 @@
 /* styles.module.css */
+:root {
+  --tab-button-bg: var(--ifm-color-emphasis-200);
+  --tab-button-hover-bg: var(--ifm-color-emphasis-300);
+  --tab-button-active-bg: var(--ifm-color-emphasis-100);
+  --tab-button-color: var(--ifm-color-emphasis-900);
+  --tab-button-hover-color: var(--ifm-color-emphasis-900);
+  --tab-button-active-color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] {
+  --tab-button-bg: var(--ifm-color-emphasis-100);
+  --tab-button-hover-bg: var(--docs-bg-subtle-pressed);
+  --tab-button-active-bg: var(--ifm-color-emphasis-200);
+  --tab-button-color: var(--ifm-color-emphasis-900);
+  --tab-button-hover-color: var(--ifm-color-emphasis-900);
+  --tab-button-active-color: var(--ifm-color-primary);
+}
+
 .tabbedCodeContainer {
   border-radius: 8px;
 }
 
 .tabsHeader {
-  display: flex;
+  display: inline-flex;
   background-color: var(--ifm-color-emphasis-200);
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
@@ -21,18 +39,25 @@
   border: none;
   cursor: pointer;
   transition: background-color 0.2s, color 0.2s;
-  color: var(--ifm-color-emphasis-700);
+  color: var(--tab-button-color);
+  background-color: var(--tab-button-bg);
   white-space: nowrap;
 }
 
 .tabButton:hover {
-  background-color: var(--ifm-color-emphasis-300);
-  color: var(--ifm-color-emphasis-900);
+  background-color: var(--tab-button-hover-bg);
+  color: var(--tab-button-hover-color);
 }
 
 .activeTab {
-  color: var(--ifm-color-primary);
-  background-color: var(--ifm-color-emphasis-100);
+  color: var(--tab-button-active-color);
+  background-color: var(--tab-button-active-bg);
+  border-bottom: 2px solid var(--ifm-color-primary);
+}
+
+.activeTab:hover {
+  color: var(--tab-button-active-color);
+  background-color: var(--tab-button-active-bg);
   border-bottom: 2px solid var(--ifm-color-primary);
 }
 
