feat: Better button for back to dataset button

fix #248
visualize-admin · Jan 20, 2022 · fb68550 · fb68550
1 parent 3d0fd6f
commit fb68550
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/app/configurator/components/select-dataset-step.tsx b/app/configurator/components/select-dataset-step.tsx
@@ -2,7 +2,7 @@ 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, Link, Text } from "theme-ui";
 import { useDebounce } from "use-debounce";
 import { DataSetHint } from "../../components/hint";
 import { useDataCubesQuery } from "../../graphql/query-hooks";
@@ -86,18 +86,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} />

diff --git a/app/themes/federal.ts b/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",