feat(gatsby-admin): new navbar design (#26159)

* feat(gatsby-admin): new navbar design * Update yarn.lock * graphiql
gatsbyjs · Jul 31, 2020 · 1c5d8e9 · 1c5d8e9
1 parent c1110b3
commit 1c5d8e9
Show file tree

Hide file tree

Showing 6 changed files with 214 additions and 23 deletions.
diff --git a/packages/gatsby-admin/package.json b/packages/gatsby-admin/package.json
@@ -17,6 +17,7 @@
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.28.0",
     "csstype": "^2.6.10",
+    "feedback-fish": "^0.1.12",
     "formik": "^2.1.4",
     "gatsby": "^2.24.14",
     "gatsby-interface": "0.0.183",

diff --git a/packages/gatsby-admin/src/components/navbar.tsx b/packages/gatsby-admin/src/components/navbar.tsx
@@ -1,7 +1,18 @@
 /** @jsx jsx */
 import { jsx, Flex } from "strict-ui"
-import { Text, BaseAnchor } from "gatsby-interface"
+import { Text, Button, AnchorButton } from "gatsby-interface"
 import { useQuery } from "urql"
+import { FeedbackForm } from "feedback-fish"
+import externalLinkIcon from "../external-link.svg"
+import graphqlIcon from "../graphql.svg"
+
+function SendFeedbackButton(props): JSX.Element {
+  return (
+    <Button variant="GHOST" size="S" {...props}>
+      Send feedback
+    </Button>
+  )
+}
 
 function Navbar(): JSX.Element {
   const [{ data }] = useQuery({
@@ -24,31 +35,34 @@ function Navbar(): JSX.Element {
         paddingY: 5,
       }}
     >
-      <Flex gap={5} alignItems="center">
-        <Text>Gatsby Admin</Text>
-        {data && data.npmPackageJson && (
-          <div
-            sx={{
-              width: `1px`,
-              height: `16px`,
-              backgroundColor: `blackFade.50`,
-            }}
-          />
-        )}
+      <Flex gap={5} alignItems="baseline">
+        <Text sx={{ textTransform: `uppercase`, fontSize: 0 }}>
+          Gatsby Admin
+        </Text>
         {data && data.npmPackageJson && (
-          <Text sx={{ fontWeight: `bold`, color: `text.primary` }}>
+          <Text sx={{ fontWeight: `bold`, color: `text.primary`, fontSize: 3 }}>
             {data.npmPackageJson.value.replace(/^"|"$/g, ``)}
           </Text>
         )}
       </Flex>
-      <Flex alignItems="center">
-        <BaseAnchor
-          href={`/`}
+      <Flex alignItems="baseline" gap={3}>
+        <FeedbackForm
+          projectId="9502a819990b03"
+          triggerComponent={SendFeedbackButton}
+        />
+        <AnchorButton
+          size="S"
+          href="/___graphql"
           target="_blank"
-          sx={{ color: `grey.60`, textDecoration: `none` }}
+          variant="SECONDARY"
         >
-          Visit site
-        </BaseAnchor>
+          GraphiQL&nbsp;
+          <img src={graphqlIcon} />
+        </AnchorButton>
+        <AnchorButton size="S" href="/" target="_blank">
+          View localhost&nbsp;
+          <img src={externalLinkIcon} />
+        </AnchorButton>
       </Flex>
     </Flex>
   )

diff --git a/packages/gatsby-admin/src/components/providers.tsx b/packages/gatsby-admin/src/components/providers.tsx
@@ -43,6 +43,7 @@ const theme = {
     "16px": `16px`,
     "15em": `15em`,
     "20em": `20em`,
+    "24px": `24px`,
     "1.5em": `1.5em`,
     initial: `initial`,
   },

diff --git a/packages/gatsby-admin/src/external-link.svg b/packages/gatsby-admin/src/external-link.svg
diff --git a/packages/gatsby-admin/src/graphql.svg b/packages/gatsby-admin/src/graphql.svg