code block

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:
 

apps/docs/content/postgresql/overview.mdx

@@ -61,15 +61,15 @@ 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'],
       },
     },
     {
       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'],

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);
 }