feat: Add browsing description

app/configurator/components/select-dataset-step.tsx

@@ -2,14 +2,15 @@ import { Trans } from "@lingui/macro";
 import NextLink from "next/link";
 import { Router, useRouter } from "next/router";
 import React, { useMemo } from "react";
-import { Box, Link, Text } from "theme-ui";
+import { Box, Button, Text } from "theme-ui";
 import { useDebounce } from "use-debounce";
 import { DataSetHint } from "../../components/hint";
 import { useDataCubesQuery } from "../../graphql/query-hooks";
 import { useConfiguratorState, useLocale } from "../../src";
 import {
   BrowseStateProvider,
   buildURLFromBrowseState,
+  DataCubeAbout,
   DatasetResults,
   SearchDatasetBox,
   SearchFilters,
@@ -86,18 +87,18 @@ export const SelectDatasetStepContent = () => {
     >
       <PanelLeftWrapper
         raised={false}
-        sx={{ mt: "2.25rem", bg: "transparent" }}
+        sx={{ pt: "1.25rem", bg: "transparent" }}
       >
         {dataset ? (
           <>
             <Box px={4}>
               <NextLink passHref href={backLink}>
-                <Link variant="primary">
+                <Button variant="secondary">
                   ←{" "}
                   <Trans id="dataset-preview.back-to-results">
                     Back to the list
                   </Trans>
-                </Link>
+                </Button>
               </NextLink>
             </Box>
             <DataSetMetadata sx={{ mt: "3rem" }} dataSetIri={dataset} />
@@ -113,16 +114,44 @@ export const SelectDatasetStepContent = () => {
         }}
       >
         <Box sx={{ maxWidth: 900 }}>
-          <Text variant="heading1" sx={{ mb: 4 }}>
-            {dataset ? null : filters.length > 0 ? (
-              filters
-                .filter((f) => f.__typename !== "DataCubeAbout")
-                .map((f) => (f.__typename !== "DataCubeAbout" ? f.label : null))
-                .join(", ")
-            ) : (
-              <Trans id="browse.datasets.all-datasets">All datasets</Trans>
-            )}
-          </Text>
+          {dataset ? null : filters.length > 0 ? (
+            filters
+              .filter(
+                (f): f is Exclude<typeof f, DataCubeAbout> =>
+                  f.__typename !== "DataCubeAbout"
+              )
+              .map((f) => f.label)
+              .join(", ")
+          ) : (
+            <>
+              <Text
+                variant="heading1"
+                color="monochrome800"
+                mb={4}
+                sx={{ display: "block" }}
+              >
+                <Trans id="browse.datasets.all-datasets">All datasets</Trans>
+              </Text>
+              <Text
+                variant="paragraph1"
+                color="monochrome800"
+                sx={{
+                  mb: 4,
+                  maxWidth: 800,
+                  fontWeight: "light",
+                  display: "block",
+                }}
+              >
+                <Trans id="browse.datasets.description">
+                  Explore datasets provided by the LINDAS Linked Data Service by
+                  either filtering by categories or organisations or search
+                  directly for specific keywords. Click on a dataset to see more
+                  detailed information and start creating your own
+                  visualizations.
+                </Trans>
+              </Text>
+            </>
+          )}
           {dataset ? null : (
             <Box mb={4}>
               <SearchDatasetBox browseState={browseState} searchResult={data} />

app/locales/de/messages.po

@@ -45,10 +45,14 @@ msgstr "Kategorien"
 msgid "browse.dataset.create-visualization"
 msgstr "Visualisierung erstellen"
 
-#: app/configurator/components/select-dataset-step.tsx:123
+#: app/configurator/components/select-dataset-step.tsx:129
 msgid "browse.datasets.all-datasets"
 msgstr "Alle Datensätze"
 
+#: app/configurator/components/select-dataset-step.tsx:141
+msgid "browse.datasets.description"
+msgstr "Erkunden Sie die vom LINDAS Linked Data Service bereitgestellten Datensätze, indem Sie entweder nach Kategorien oder Organisationen filtern oder direkt nach bestimmten Stichworten suchen. Klicken Sie auf einen Datensatz, um detailliertere Informationen zu erhalten und Ihre eigenen Visualisierungen zu erstellen."
+
 #: app/pages/v/[chartId].tsx:122
 msgid "button.copy.visualization"
 msgstr "Diese Visualisierung kopieren"

app/locales/en/messages.po

@@ -45,10 +45,14 @@ msgstr "Categories"
 msgid "browse.dataset.create-visualization"
 msgstr "Create visualization"
 
-#: app/configurator/components/select-dataset-step.tsx:123
+#: app/configurator/components/select-dataset-step.tsx:129
 msgid "browse.datasets.all-datasets"
 msgstr "All Datasets"
 
+#: app/configurator/components/select-dataset-step.tsx:141
+msgid "browse.datasets.description"
+msgstr "Explore datasets provided by the LINDAS Linked Data Service by either filtering by categories or organisations or search directly for specific keywords. Click on a dataset to see more detailed information and start creating your own visualizations."
+
 #: app/pages/v/[chartId].tsx:122
 msgid "button.copy.visualization"
 msgstr "Copy This Visualization"

app/locales/fr/messages.po

@@ -45,10 +45,14 @@ msgstr "Catégories"
 msgid "browse.dataset.create-visualization"
 msgstr "Créer une visualisation"
 
-#: app/configurator/components/select-dataset-step.tsx:123
+#: app/configurator/components/select-dataset-step.tsx:129
 msgid "browse.datasets.all-datasets"
 msgstr "Tout les jeux de données"
 
+#: app/configurator/components/select-dataset-step.tsx:141
+msgid "browse.datasets.description"
+msgstr "Explorez les jeux de données liés fournis par LINDAS, en filtrant par catégories ou organisations, ou en recherchant par mots-clés. Cliquez sur un ensemble de données pour afficher des informations plus détaillées et commencer à créer vos propres visualisations. "
+
 #: app/pages/v/[chartId].tsx:122
 msgid "button.copy.visualization"
 msgstr "Copier cette visualisation"

app/locales/it/messages.po

@@ -45,10 +45,14 @@ msgstr "Categorie"
 msgid "browse.dataset.create-visualization"
 msgstr "Crea una visualizzazione"
 
-#: app/configurator/components/select-dataset-step.tsx:123
+#: app/configurator/components/select-dataset-step.tsx:129
 msgid "browse.datasets.all-datasets"
 msgstr "Tutti i set di dati"
 
+#: app/configurator/components/select-dataset-step.tsx:141
+msgid "browse.datasets.description"
+msgstr "Esplora i set di dati forniti dal LINDAS Linked Data Service filtrando per categorie o organizzazioni oppure cercando direttamente per parole chiave specifiche. Clicca su un set di dati per vedere informazioni più dettagliate e iniziare a creare le tue visualizzazioni."
+
 #: app/pages/v/[chartId].tsx:122
 msgid "button.copy.visualization"
 msgstr "Copia questa visualizzazione"

app/themes/federal.ts

@@ -50,6 +50,9 @@ export const theme: Theme = {
     secondaryActive: "#454545",
     secondaryDisabled: "#a6a6a6",
 
+    secondaryButton: "#d8e8ef",
+    secondaryButtonHover: "#CCDFE7",
+
     success: "#3c763d",
     successHover: "#3c763d",
     successActive: "#3c763d",
@@ -311,12 +314,13 @@ export const theme: Theme = {
     },
     secondary: {
       variant: "buttons.primary",
-      bg: "secondary",
+      bg: "secondaryButton",
+      color: "primary",
       ":hover": {
-        bg: "secondaryHover",
+        bg: "secondaryButtonHover",
       },
       ":active": {
-        bg: "secondaryHover",
+        bg: "secondaryButtonHover",
       },
       ":disabled": {
         cursor: "initial",