From abe1401a6d58fd3a5f42ca3194d894bec822162a Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 5 Mar 2024 16:15:11 +0700 Subject: [PATCH 01/31] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20the=20st?= =?UTF-8?q?yle=20of=20project=20search=20bar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/SearchBar.tsx | 2 +- .../components/projects/ProjectSearchBar.tsx | 119 +++++++++--------- .../frontend/src/layouts/ProjectSearch.tsx | 66 +++++----- 3 files changed, 96 insertions(+), 91 deletions(-) diff --git a/packages/frontend/src/components/SearchBar.tsx b/packages/frontend/src/components/SearchBar.tsx index d597f2c1..4e37c20d 100644 --- a/packages/frontend/src/components/SearchBar.tsx +++ b/packages/frontend/src/components/SearchBar.tsx @@ -15,7 +15,7 @@ const SearchBar: React.ForwardRefRenderFunction< value={value} type="search" placeholder={placeholder} - appearance={'borderless'} + appearance="borderless" {...props} /> diff --git a/packages/frontend/src/components/projects/ProjectSearchBar.tsx b/packages/frontend/src/components/projects/ProjectSearchBar.tsx index 56249356..c2d986f2 100644 --- a/packages/frontend/src/components/projects/ProjectSearchBar.tsx +++ b/packages/frontend/src/components/projects/ProjectSearchBar.tsx @@ -3,17 +3,12 @@ import { useCombobox } from 'downshift'; import { Project } from 'gql-client'; import { useDebounce } from 'usehooks-ts'; -import { - List, - ListItem, - ListItemPrefix, - Card, - Typography, - Avatar, -} from '@material-tailwind/react'; - -import SearchBar from '../SearchBar'; -import { useGQLClient } from '../../context/GQLClientContext'; +import SearchBar from 'components/SearchBar'; +import { useGQLClient } from 'context/GQLClientContext'; +import { cn } from 'utils/classnames'; +import { InfoRoundFilledIcon } from 'components/shared/CustomIcon'; +import { Avatar } from 'components/shared/Avatar'; +import { getInitials } from 'utils/geInitials'; interface ProjectsSearchProps { onChange?: (data: Project) => void; @@ -67,59 +62,59 @@ const ProjectSearchBar = ({ onChange }: ProjectsSearchProps) => { return (
- - - {items.length ? ( - <> -
- - Suggestions - -
- {items.map((item, index) => ( - - - - -
- - {item.name} - - - {item.organization.name} - -
- - ))} - - ) : ( -
- - ^ No projects matching this name - + {items.length ? ( + <> +
+

+ Suggestions +

- )} - - + {items.map((item, index) => ( +
+ +
+

+ {item.name} +

+

+ {item.organization.name} +

+
+
+ ))} + + ) : ( +
+
+ +
+

+ No projects matching this name +

+
+ )} +
); }; diff --git a/packages/frontend/src/layouts/ProjectSearch.tsx b/packages/frontend/src/layouts/ProjectSearch.tsx index c471ab5d..a6a36199 100644 --- a/packages/frontend/src/layouts/ProjectSearch.tsx +++ b/packages/frontend/src/layouts/ProjectSearch.tsx @@ -4,12 +4,14 @@ import { User } from 'gql-client'; // 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 HorizontalLine from 'components/HorizontalLine'; +import ProjectSearchBar from 'components/projects/ProjectSearchBar'; +import { useGQLClient } from 'context/GQLClientContext'; import { NotificationBellIcon, PlusIcon } from 'components/shared/CustomIcon'; import { Button } from 'components/shared/Button'; +import { Avatar } from 'components/shared/Avatar'; +import { getInitials } from 'utils/geInitials'; +import { formatAddress } from '../utils/format'; const ProjectSearch = () => { const navigate = useNavigate(); @@ -32,10 +34,11 @@ const ProjectSearch = () => { }, []); return ( -
-
-
-
+
+ {/* Header */} +
+
+
{ navigate( @@ -44,30 +47,37 @@ const ProjectSearch = () => { }} />
- - - {user?.name ? ( - - ) : null} +
+ + + {user?.name && ( + + )} +
-
+ + {/* Content */} +
-
-
+ + ); }; From 33fbdf60ae4463f3ff5faf71065e4847b9555419 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 5 Mar 2024 16:15:37 +0700 Subject: [PATCH 02/31] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20som?= =?UTF-8?q?e=20icons=20needed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/shared/CustomIcon/MenuIcon.tsx | 27 +++++++++++++++++++ .../shared/CustomIcon/SearchIcon.tsx | 10 +++---- .../src/components/shared/CustomIcon/index.ts | 1 + 3 files changed, 33 insertions(+), 5 deletions(-) create mode 100644 packages/frontend/src/components/shared/CustomIcon/MenuIcon.tsx diff --git a/packages/frontend/src/components/shared/CustomIcon/MenuIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/MenuIcon.tsx new file mode 100644 index 00000000..4cdefc06 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/MenuIcon.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const MenuIcon = (props: CustomIconProps) => { + return ( + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx index 7688adcd..b72c059b 100644 --- a/packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx +++ b/packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx @@ -4,17 +4,17 @@ import { CustomIcon, CustomIconProps } from './CustomIcon'; export const SearchIcon = (props: CustomIconProps) => { return ( ); diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index 096761a5..6b58743e 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -48,6 +48,7 @@ export * from './UndoIcon'; export * from './LoaderIcon'; export * from './MinusCircleIcon'; export * from './CopyIcon'; +export * from './MenuIcon'; // Templates export * from './templates'; From aa4094669d7c822db8c72b012ce2c21470ac4e28 Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 5 Mar 2024 16:16:20 +0700 Subject: [PATCH 03/31] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20log?= =?UTF-8?q?o=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/Logo.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 packages/frontend/src/components/Logo.tsx diff --git a/packages/frontend/src/components/Logo.tsx b/packages/frontend/src/components/Logo.tsx new file mode 100644 index 00000000..1c4c7daf --- /dev/null +++ b/packages/frontend/src/components/Logo.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Heading } from './shared/Heading'; + +interface LogoProps { + orgSlug?: string; +} + +export const Logo = ({ orgSlug }: LogoProps) => { + return ( + +
+ Snowball Logo + Snowball +
+ + ); +}; From b5f50fe16fa672a038bdbd2161e170c5c5d2605a Mon Sep 17 00:00:00 2001 From: Wahyu Kurniawan Date: Tue, 5 Mar 2024 16:16:45 +0700 Subject: [PATCH 04/31] =?UTF-8?q?=F0=9F=8E=A8=20style:=20adjust=20layout?= =?UTF-8?q?=20for=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/shared/Sidebar/Sidebar.tsx | 18 +++------- .../frontend/src/pages/org-slug/index.tsx | 4 +-- .../frontend/src/pages/org-slug/layout.tsx | 33 +++++++++++++++++-- 3 files changed, 36 insertions(+), 19 deletions(-) diff --git a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx index c60ab4d3..b61b1fee 100644 --- a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx +++ b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from 'react'; -import { Link, NavLink, useNavigate, useParams } from 'react-router-dom'; +import { NavLink, useNavigate, useParams } from 'react-router-dom'; import { Organization } from 'gql-client'; import { Option } from '@material-tailwind/react'; @@ -16,7 +16,7 @@ import { SettingsSlidersIcon, } from 'components/shared/CustomIcon'; import { Tabs } from 'components/shared/Tabs'; -import { Heading } from 'components/shared/Heading'; +import { Logo } from 'components/Logo'; export const Sidebar = () => { const { orgSlug } = useParams(); @@ -43,18 +43,8 @@ export const Sidebar = () => { }, [disconnect, navigate]); return ( -