Merge pull request #116 from snowball-tools/ericlewis/search-bar

feat: prettier search area

packages/frontend/src/components/SearchBar.tsx

@@ -1,33 +1,23 @@
 import React, { forwardRef, RefAttributes } from 'react';
 
-import { Input, InputProps } from '@material-tailwind/react';
+import { SearchIcon } from './shared/CustomIcon';
+import { Input, InputProps } from './shared/Input';
 
 const SearchBar: React.ForwardRefRenderFunction<
   HTMLInputElement,
   InputProps & RefAttributes<HTMLInputElement>
-> = ({ value, onChange, placeholder = 'Search', ...props }, ref) => {
+> = ({ value, onChange, placeholder = 'Search', ...props }) => {
   return (
-    <div className="relative flex w-full gap-2">
+    <div className="relative flex w-full">
       <Input
+        leftIcon={<SearchIcon />}
         onChange={onChange}
         value={value}
         type="search"
         placeholder={placeholder}
-        containerProps={{
-          className: 'min-w-[288px]',
-        }}
-        className="!border-t-blue-gray-300 pl-9 placeholder:text-blue-gray-300 focus:!border-blue-gray-300"
-        labelProps={{
-          className: 'before:content-none after:content-none',
-        }}
-        // TODO: Debug issue: https://github.com/creativetimofficial/material-tailwind/issues/427
-        crossOrigin={undefined}
+        appearance={'borderless'}
         {...props}
-        inputRef={ref}
       />
-      <div className="!absolute left-3 top-[13px]">
-        <i>^</i>
-      </div>
     </div>
   );
 };

packages/frontend/src/components/Sidebar.tsx

@@ -42,7 +42,7 @@ const Sidebar = () => {
   }, [disconnect, navigate]);
 
   return (
-    <div className="flex flex-col h-full p-4 pt-5">
+    <div className="flex flex-col h-full p-4 pt-10">
       <div className="grow">
         <Link to={`/${orgSlug}`}>
           <div className="flex items-center space-x-3 mb-10 ml-2">

packages/frontend/src/components/shared/CustomIcon/NotificationBellIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const NotificationBellIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        id="Icon"
+        d="M13.3333 15.4166C12.7722 16.8882 11.4909 17.9166 9.99997 17.9166C8.50903 17.9166 7.22769 16.8882 6.66664 15.4166M4.80461 15.4166H15.1953C16.1978 15.4166 16.9735 14.5379 16.8491 13.5432L16.0885 7.45809C15.7047 4.38751 13.0944 2.08325 9.99997 2.08325C6.90549 2.08325 4.29527 4.38751 3.91145 7.45809L3.15081 13.5432C3.02647 14.5379 3.80211 15.4166 4.80461 15.4166Z"
+        stroke="currentColor"
+      />
+    </CustomIcon>
+  );
+};

packages/frontend/src/components/shared/CustomIcon/index.ts

@@ -21,3 +21,4 @@ export * from './GitIcon';
 export * from './EllipseIcon';
 export * from './EllipsesIcon';
 export * from './SnowballIcon';
+export * from './NotificationBellIcon';

packages/frontend/src/components/shared/Input/Input.theme.ts

@@ -19,10 +19,10 @@ export const inputTheme = tv(
         'block',
         'w-full',
         'h-full',
-        'rounded-lg',
-        'text-elements-mid-em',
         'shadow-sm',
         'border',
+        'rounded-lg',
+        'text-elements-mid-em',
         'border-border-interactive',
         'disabled:shadow-none',
         'disabled:border-none',
@@ -71,6 +71,15 @@ export const inputTheme = tv(
           helperIcon: ['h-4 w-4'],
         },
       },
+      appearance: {
+        borderless: {
+          input: [
+            'border-none', // Remove the border
+            'shadow-none', // Optional: remove shadow if desired
+            // Add any additional styles necessary for the borderless appearance
+          ],
+        },
+      },
     },
     defaultVariants: {
       size: 'md',

packages/frontend/src/components/shared/Input/Input.tsx

@@ -24,12 +24,17 @@ export const Input = ({
   helperText,
   size,
   state,
+  appearance,
   ...props
 }: InputProps) => {
-  const styleProps = (({ size = 'md', state }) => ({
-    size,
-    state,
-  }))({ size, state });
+  const styleProps = useMemo(
+    () => ({
+      size: size || 'md',
+      state: state || 'default',
+      appearance, // Pass appearance to inputTheme
+    }),
+    [size, state, appearance],
+  );
 
   const {
     container: containerCls,

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -2,12 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { User } from 'gql-client';
 
-import { IconButton, Tooltip, Typography } from '@material-tailwind/react';
+// import { Tooltip } from '@material-tailwind/react';
 
 import HorizontalLine from '../components/HorizontalLine';
 import ProjectSearchBar from '../components/projects/ProjectSearchBar';
 import { useGQLClient } from '../context/GQLClientContext';
 import { formatAddress } from '../utils/format';
+import { NotificationBellIcon, PlusIcon } from 'components/shared/CustomIcon';
+import { Button } from 'components/shared/Button';
 
 const ProjectSearch = () => {
   const navigate = useNavigate();
@@ -26,8 +28,8 @@ const ProjectSearch = () => {
   return (
     <div>
       <div className="sticky top-0 bg-white z-30">
-        <div className="flex p-5">
-          <div className="grow mr-2">
+        <div className="flex pl-3 pr-8 pt-3 pb-3 items-center">
+          <div className="grow">
             <ProjectSearchBar
               onChange={(project) => {
                 navigate(
@@ -36,23 +38,15 @@ const ProjectSearch = () => {
               }}
             />
           </div>
-          <IconButton
-            color="blue"
-            className="rounded-full mr-2"
-            placeholder={''}
-          >
-            <Typography variant="h5" placeholder={''}>
-              +
-            </Typography>
-          </IconButton>
-          <div className="mr-2 flex items-center">
-            <Typography placeholder={''}>^</Typography>
-          </div>
-          <div className="px-2 py-1 bg-blue-gray-50 rounded-lg flex items-center">
-            {user?.name && (
-              <Tooltip content={user.name}>{formatAddress(user.name)}</Tooltip>
-            )}
-          </div>
+          <Button variant={'secondary'} iconOnly>
+            <PlusIcon />
+          </Button>
+          <Button variant={'ghost'} iconOnly>
+            <NotificationBellIcon />
+          </Button>
+          {user?.name ? (
+            <Button variant={'tertiary'}>{formatAddress(user.name)}</Button>
+          ) : null}
         </div>
         <HorizontalLine />
       </div>