feat: Update styling for graphql

Its-treason · Sep 12, 2024 · b44074c · b44074c
1 parent 15346c7
commit b44074c
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 43 deletions.
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLSchemaActions/index.js
@@ -1,10 +1,9 @@
-import React, { useEffect, useRef, forwardRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import useGraphqlSchema from './useGraphqlSchema';
 import { IconBook, IconDownload, IconLoader2, IconRefresh } from '@tabler/icons-react';
 import get from 'lodash/get';
 import { findEnvironmentInCollection } from 'utils/collections';
-import Dropdown from '../../Dropdown';
-import { Group } from '@mantine/core';
+import { Button, Group, Menu, rem } from '@mantine/core';
 
 const GraphQLSchemaActions = ({ item, collection, onSchemaLoad, toggleDocs }) => {
   const url = item.draft ? get(item, 'draft.request.url', '') : get(item, 'request.url', '');
@@ -24,46 +23,40 @@ const GraphQLSchemaActions = ({ item, collection, onSchemaLoad, toggleDocs }) =>
     }
   }, [schema]);
 
-  const schemaDropdownTippyRef = useRef();
-  const onSchemaDropdownCreate = (ref) => (schemaDropdownTippyRef.current = ref);
-
-  const MenuIcon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="dropdown-icon cursor-pointer flex hover:underline ml-2">
-        {isSchemaLoading && <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} />}
-        {!isSchemaLoading && schema && <IconRefresh size={18} strokeWidth={1.5} />}
-        {!isSchemaLoading && !schema && <IconDownload size={18} strokeWidth={1.5} />}
-        <span className="ml-1">Schema</span>
-      </div>
-    );
-  });
+  const schemaIcon = useMemo(() => {
+    if (isSchemaLoading) {
+      return <IconLoader2 className="animate-spin" style={{ width: rem(16), height: rem(16) }} />;
+    } else if (schema) {
+      return <IconRefresh style={{ width: rem(16), height: rem(16) }} />;
+    }
+    return <IconDownload style={{ width: rem(16), height: rem(16) }} />;
+  }, [isSchemaLoading, schema]);
 
   return (
-    <Group pl={'sm'}>
-      <div className="flex items-center cursor-pointer hover:underline" onClick={toggleDocs}>
-        <IconBook size={18} strokeWidth={1.5} />
-        <span className="ml-1">Docs</span>
-      </div>
-      <Dropdown onCreate={onSchemaDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
-        <div
-          className="dropdown-item"
-          onClick={(e) => {
-            schemaDropdownTippyRef.current.hide();
-            loadSchema('introspection');
-          }}
-        >
-          {schema && schemaSource === 'introspection' ? 'Refresh from Introspection' : 'Load from Introspection'}
-        </div>
-        <div
-          className="dropdown-item"
-          onClick={(e) => {
-            schemaDropdownTippyRef.current.hide();
-            loadSchema('file');
-          }}
-        >
-          Load from File
-        </div>
-      </Dropdown>
+    <Group>
+      <Button
+        size="compact-sm"
+        leftSection={<IconBook style={{ width: rem(16), height: rem(16) }} />}
+        variant="subtle"
+        onClick={toggleDocs}
+      >
+        GraphQL Docs
+      </Button>
+
+      <Menu shadow="md" width={220} position="bottom-start">
+        <Menu.Target>
+          <Button size="compact-sm" leftSection={schemaIcon} variant="subtle">
+            Schema
+          </Button>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item onClick={() => loadSchema('introspection')}>
+            {schema ? 'Refresh from Introspection' : 'Load from Introspection'}
+          </Menu.Item>
+          <Menu.Item onClick={() => loadSchema('file')}>Load from File</Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
     </Group>
   );
 };

diff --git a/packages/bruno-app/src/feature/main-view/components/panes/PaneWrapper.tsx b/packages/bruno-app/src/feature/main-view/components/panes/PaneWrapper.tsx
@@ -13,7 +13,7 @@ type PaneWrapperProps = {
 export const PaneWrapper: React.FC<PaneWrapperProps> = ({ aboveTabs, tabs, content, activeTab, onTabChange }) => {
   return (
     <Stack h={'100%'} gap={0}>
-      <Box h={rem(38)} px={'sm'} pt={'xs'}>
+      <Box h={rem(40)} px={'sm'} pt={'xs'}>
         {aboveTabs}
       </Box>
       <Tabs value={activeTab} onChange={onTabChange}>

diff --git a/packages/bruno-app/src/feature/main-view/index.ts b/packages/bruno-app/src/feature/main-view/index.ts
@@ -0,0 +1 @@
+export * from './components/MainView';
diff --git a/packages/bruno-app/src/pages/index.js b/packages/bruno-app/src/pages/index.js
@@ -2,7 +2,7 @@ import { useSelector } from 'react-redux';
 import { Sidebar } from 'src/feature/sidebar';
 import classes from './Main.module.scss';
 import { Homepage } from 'src/feature/homepage';
-import { MainView } from 'src/feature/main-view/components/MainView';
+import { MainView } from 'src/feature/main-view';
 
 export function Main() {
   const showHomePage = useSelector((state) => state.app.showHomePage);