Merge pull request #818 from visualize-admin/feat/new-ui-1

feat: New UI (search + dataset preview)
visualize-admin · Nov 4, 2022 · 4a756f7 · 4a756f7 · vercel · Nov 4, 2022
2 parents 094f5f0 + f159b4d
commit 4a756f7
Show file tree

Hide file tree

Showing 19 changed files with 466 additions and 401 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
     with scientific notation
 - Dataset Preview:
   - Added a "Run SPARQL query" button
+- UI:
+  - Introduced new UI for search & dataset preview pages
 
 ## [3.11.0] - 2022-10-26
 

diff --git a/app/components/form.tsx b/app/components/form.tsx
@@ -554,7 +554,7 @@ export const SearchField = ({
         placeholder={placeholder}
         autoComplete="off"
         inputRef={inputRef}
-        sx={{ width: "100%", input: { borderRadius: 2 } }}
+        sx={{ width: "100%", minHeight: 40, input: { borderRadius: 2 } }}
         endAdornment={
           onReset && search && search !== "" ? (
             <ButtonBase

diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -151,8 +151,8 @@ export const Logo = () => {
           role="figure"
           aria-labelledby="logo"
           sx={{
+            width: "calc(20rem - 16px)",
             display: ["none", "block"],
-            pr: 6,
             borderRightWidth: "1px",
             borderRightStyle: "solid",
             borderRightColor: "grey.300",

diff --git a/app/components/layout.tsx b/app/components/layout.tsx
@@ -11,7 +11,7 @@ export const AppLayout = ({ children }: { children?: ReactNode }) => (
       <Flex
         component="main"
         role="main"
-        sx={{ flex: 1, flexDirection: "column", backgroundColor: "muted.main" }}
+        sx={{ flex: 1, flexDirection: "column" }}
       >
         {children}
       </Flex>