feat(gatsby-admin): move to dropdown for plugin/theme actions (#25598)

* Remove all custom color treatment from Admin * Move plugin/theme actions to dropdown
gatsbyjs · Jul 13, 2020 · 9f84f11 · 9f84f11
1 parent 93fc812
commit 9f84f11
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 34 deletions.
diff --git a/packages/gatsby-admin/src/components/providers.tsx b/packages/gatsby-admin/src/components/providers.tsx
@@ -17,6 +17,7 @@ const theme = {
     "500": 500,
   },
   borders: {
+    none: `none`,
     default: `1px solid ${baseTheme.colors.whiteFade[20]}`,
     sixtywhite: `1px solid ${baseTheme.colors.whiteFade[40]}`,
     white: `1px solid ${baseTheme.colors.white}`,

diff --git a/packages/gatsby-admin/src/pages/index.tsx b/packages/gatsby-admin/src/pages/index.tsx
@@ -11,6 +11,10 @@ import {
   InputFieldControl,
   ButtonProps,
   InputFieldLabel,
+  DropdownMenu,
+  DropdownMenuButton,
+  DropdownMenuItem,
+  DropdownMenuItems,
 } from "gatsby-interface"
 
 const SecondaryButton: React.FC<ButtonProps> = props => (
@@ -85,7 +89,13 @@ const InstallInput: React.FC<{ for: string }> = props => {
   )
 }
 
-const DestroyButton: React.FC<{ name: string }> = ({ name }) => {
+const SectionHeading: React.FC<HeadingProps> = props => (
+  <Heading as="h1" sx={{ fontWeight: `500`, fontSize: 5 }} {...props} />
+)
+
+const PluginCard: React.FC<{
+  plugin: { name: string; description?: string }
+}> = ({ plugin }) => {
   const [, deleteGatsbyPlugin] = useMutation(`
     mutation destroyGatsbyPlugin($name: String!) {
       destroyNpmPackage(npmPackage: {
@@ -107,43 +117,48 @@ const DestroyButton: React.FC<{ name: string }> = ({ name }) => {
   `)
 
   return (
-    <SecondaryButton
-      onClick={(evt): void => {
-        evt.preventDefault()
-        if (window.confirm(`Are you sure you want to uninstall ${name}?`)) {
-          deleteGatsbyPlugin({ name })
-        }
-      }}
+    <Flex
+      flexDirection="column"
+      gap={6}
+      sx={{ backgroundColor: `ui.background`, padding: 5, borderRadius: 2 }}
     >
-      Uninstall
-    </SecondaryButton>
+      <Flex justifyContent="space-between">
+        <Heading as="h2" sx={{ fontWeight: `500`, fontSize: 3 }}>
+          {plugin.name}
+        </Heading>
+        <DropdownMenu>
+          <DropdownMenuButton
+            aria-label="Actions"
+            sx={{
+              border: `none`,
+              background: `transparent`,
+              color: `text.secondary`,
+            }}
+          >
+            ···
+          </DropdownMenuButton>
+          <DropdownMenuItems>
+            <DropdownMenuItem
+              onSelect={(): void => {
+                if (
+                  window.confirm(`Are you sure you want to uninstall ${name}?`)
+                ) {
+                  deleteGatsbyPlugin({ name })
+                }
+              }}
+            >
+              Uninstall
+            </DropdownMenuItem>
+          </DropdownMenuItems>
+        </DropdownMenu>
+      </Flex>
+      <Text sx={{ color: `text.secondary` }}>
+        {plugin.description || <em>No description.</em>}
+      </Text>
+    </Flex>
   )
 }
 
-const SectionHeading: React.FC<HeadingProps> = props => (
-  <Heading as="h1" sx={{ fontWeight: `500`, fontSize: 5 }} {...props} />
-)
-
-const PluginCard: React.FC<{
-  plugin: { name: string; description?: string }
-}> = ({ plugin }) => (
-  <Flex
-    flexDirection="column"
-    gap={6}
-    sx={{ backgroundColor: `ui.background`, padding: 5, borderRadius: 2 }}
-  >
-    <Heading as="h2" sx={{ fontWeight: `500`, fontSize: 3 }}>
-      {plugin.name}
-    </Heading>
-    <Text sx={{ color: `text.secondary` }}>
-      {plugin.description || <em>No description.</em>}
-    </Text>
-    <Flex justifyContent="flex-end" sx={{ width: `100%` }}>
-      <DestroyButton name={plugin.name} />
-    </Flex>
-  </Flex>
-)
-
 const Index: React.FC<{}> = () => {
   const [{ data, fetching, error }] = useQuery({
     query: `