From bc91e976950d4fd4e73e6f87df3bc024e48053d8 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 13:53:49 +0200 Subject: [PATCH 01/13] refactor: move sortable fields in table --- front/src/components/table/Table.tsx | 11 +++++++++++ .../table/table-header/TableHeader.tsx | 18 +++++++----------- .../__stories__/TableHeader.stories.tsx | 17 +++++++++++++++-- 3 files changed, 33 insertions(+), 13 deletions(-) diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index fd3eec506..edcaaeef9 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -10,6 +10,7 @@ import TableHeader from './table-header/TableHeader'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import styled from '@emotion/styled'; import { SortType } from './table-header/SortAndFilterBar'; +import { faCalendar } from '@fortawesome/pro-regular-svg-icons'; type OwnProps = { data: Array; @@ -75,12 +76,22 @@ function Table({ getCoreRowModel: getCoreRowModel(), }); + const sortsAvailable: Array = [ + { + id: 'created_at', + label: 'Created at', + order: 'asc', + icon: faCalendar, + }, + ]; + return ( diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx index 8253571bc..dca266985 100644 --- a/front/src/components/table/table-header/TableHeader.tsx +++ b/front/src/components/table/table-header/TableHeader.tsx @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import DropdownButton from './DropdownButton'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { faCalendar } from '@fortawesome/pro-regular-svg-icons'; import SortAndFilterBar, { SortType } from './SortAndFilterBar'; import { useEffect, useState } from 'react'; @@ -10,6 +9,7 @@ type OwnProps = { viewName: string; viewIcon?: IconProp; onSortsUpdate?: (sorts: Array) => void; + sortsAvailable: Array; }; const StyledContainer = styled.div` @@ -44,7 +44,12 @@ const StyledFilters = styled.div` margin-right: ${(props) => props.theme.spacing(2)}; `; -function TableHeader({ viewName, viewIcon, onSortsUpdate }: OwnProps) { +function TableHeader({ + viewName, + viewIcon, + onSortsUpdate, + sortsAvailable, +}: OwnProps) { const [sorts, setSorts] = useState([] as Array); const onSortItemSelect = (sortId: string) => { @@ -64,15 +69,6 @@ function TableHeader({ viewName, viewIcon, onSortsUpdate }: OwnProps) { onSortsUpdate && onSortsUpdate(sorts); }, [sorts, onSortsUpdate]); - const sortsAvailable: Array = [ - { - id: 'created_at', - label: 'Created at', - order: 'asc', - icon: faCalendar, - }, - ]; - return ( diff --git a/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx b/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx index fa7f336ac..2862c0734 100644 --- a/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx +++ b/front/src/components/table/table-header/__stories__/TableHeader.stories.tsx @@ -1,7 +1,8 @@ import TableHeader from '../TableHeader'; import { ThemeProvider } from '@emotion/react'; import { lightTheme } from '../../../../layout/styles/themes'; -import { faBuilding } from '@fortawesome/pro-regular-svg-icons'; +import { faBuilding, faCalendar } from '@fortawesome/pro-regular-svg-icons'; +import { SortType } from '../SortAndFilterBar'; const component = { title: 'TableHeader', @@ -11,9 +12,21 @@ const component = { export default component; export const RegularTableHeader = () => { + const sortsAvailable: Array = [ + { + id: 'created_at', + label: 'Created at', + order: 'asc', + icon: faCalendar, + }, + ]; return ( - + ); }; From 095a6886aed2180dd53edad0b34f6d0d026d26c0 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:00:14 +0200 Subject: [PATCH 02/13] refactor: move sortable fields in People --- front/src/components/table/Table.tsx | 14 +++----------- front/src/pages/people/People.tsx | 12 +++++++++++- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index edcaaeef9..c6c86287d 100644 --- a/front/src/components/table/Table.tsx +++ b/front/src/components/table/Table.tsx @@ -10,7 +10,6 @@ import TableHeader from './table-header/TableHeader'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import styled from '@emotion/styled'; import { SortType } from './table-header/SortAndFilterBar'; -import { faCalendar } from '@fortawesome/pro-regular-svg-icons'; type OwnProps = { data: Array; @@ -18,6 +17,7 @@ type OwnProps = { viewName: string; viewIcon?: IconProp; onSortsUpdate?: (sorts: Array) => void; + sortsAvailable?: Array; }; const StyledTable = styled.table` @@ -69,6 +69,7 @@ function Table({ viewName, viewIcon, onSortsUpdate, + sortsAvailable, }: OwnProps) { const table = useReactTable({ data, @@ -76,22 +77,13 @@ function Table({ getCoreRowModel: getCoreRowModel(), }); - const sortsAvailable: Array = [ - { - id: 'created_at', - label: 'Created at', - order: 'asc', - icon: faCalendar, - }, - ]; - return ( diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index b2bb656ed..72c701ff1 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -1,4 +1,4 @@ -import { faUser, faList } from '@fortawesome/pro-regular-svg-icons'; +import { faUser, faList, faCalendar } from '@fortawesome/pro-regular-svg-icons'; import WithTopBarContainer from '../../layout/containers/WithTopBarContainer'; import Table from '../../components/table/Table'; import styled from '@emotion/styled'; @@ -38,6 +38,15 @@ function People() { const { data } = usePeopleQuery(orderBy); + const sortsAvailable: Array = [ + { + id: 'created_at', + label: 'Created at', + order: 'asc', + icon: faCalendar, + }, + ]; + return ( @@ -48,6 +57,7 @@ function People() { viewName="All People" viewIcon={faList} onSortsUpdate={updateSorts} + sortsAvailable={sortsAvailable} /> } From be947bdc8f10e0f1b52674a04bec396195bed251 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:02:38 +0200 Subject: [PATCH 03/13] refactor: strongly type keys of sorts --- front/src/components/table/table-header/SortAndFilterBar.tsx | 4 ++-- front/src/pages/people/People.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/front/src/components/table/table-header/SortAndFilterBar.tsx b/front/src/components/table/table-header/SortAndFilterBar.tsx index df2e09ab4..1e028fc3d 100644 --- a/front/src/components/table/table-header/SortAndFilterBar.tsx +++ b/front/src/components/table/table-header/SortAndFilterBar.tsx @@ -8,10 +8,10 @@ type OwnProps = { onRemoveSort: (sortId: string) => void; }; -export type SortType = { +export type SortType = { label: string; order: 'asc' | 'desc'; - id: string; + id: SortIds; icon?: IconProp; }; diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 72c701ff1..0678495ee 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -3,7 +3,7 @@ import WithTopBarContainer from '../../layout/containers/WithTopBarContainer'; import Table from '../../components/table/Table'; import styled from '@emotion/styled'; import { peopleColumns } from './people-table'; -import { mapPerson } from '../../interfaces/person.interface'; +import { GraphqlPerson, mapPerson } from '../../interfaces/person.interface'; import { useState } from 'react'; import { SortType } from '../../components/table/table-header/SortAndFilterBar'; import { OrderBy, usePeopleQuery } from '../../services/people'; @@ -38,7 +38,7 @@ function People() { const { data } = usePeopleQuery(orderBy); - const sortsAvailable: Array = [ + const sortsAvailable: Array> = [ { id: 'created_at', label: 'Created at', From c7dc9cf83b5757c276d9a1a20a503b132ddd7f1a Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:14:40 +0200 Subject: [PATCH 04/13] bugfix: fix direction and zindex of dropdown --- front/src/components/table/table-header/DropdownButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/front/src/components/table/table-header/DropdownButton.tsx b/front/src/components/table/table-header/DropdownButton.tsx index 2c1b85d52..1ee49c484 100644 --- a/front/src/components/table/table-header/DropdownButton.tsx +++ b/front/src/components/table/table-header/DropdownButton.tsx @@ -15,6 +15,7 @@ const StyledDropdownButtonContainer = styled.div` display: flex; flex-direction: column; position: relative; + z-index: 1; `; type StyledDropdownButtonProps = { @@ -37,6 +38,7 @@ const StyledDropdownButton = styled.div` const StyledDropdown = styled.ul` display: flex; + flex-direction: column; position: absolute; top: 14px; right: 0; @@ -55,7 +57,6 @@ const StyledDropdownItem = styled.li` margin: 2px; background: ${(props) => props.theme.primaryBackground}; cursor: pointer; - width: 100%; border-radius: 4px; color: ${(props) => props.theme.text60}; From 2acd98370dd15f573345dca2e9dd47f2934d2160 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:46:39 +0200 Subject: [PATCH 05/13] bugfix: remove infinite renderloop of onSortUpdate --- .../table/table-header/TableHeader.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx index dca266985..0510a56aa 100644 --- a/front/src/components/table/table-header/TableHeader.tsx +++ b/front/src/components/table/table-header/TableHeader.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import DropdownButton from './DropdownButton'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import SortAndFilterBar, { SortType } from './SortAndFilterBar'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; type OwnProps = { viewName: string; @@ -53,21 +53,22 @@ function TableHeader({ const [sorts, setSorts] = useState([] as Array); const onSortItemSelect = (sortId: string) => { - setSorts([ + const newSorts = [ { label: 'Created at', order: 'asc', id: sortId, } as SortType, - ]); - }; - const onSortItemUnSelect = (sortId: string) => { - setSorts([]); + ]; + setSorts(newSorts); + onSortsUpdate && onSortsUpdate(newSorts); }; - useEffect(() => { - onSortsUpdate && onSortsUpdate(sorts); - }, [sorts, onSortsUpdate]); + const onSortItemUnSelect = (sortId: string) => { + const newSorts = [] as SortType[]; + setSorts(newSorts); + onSortsUpdate && onSortsUpdate(newSorts); + }; return ( From a5909bd6ffe7e71cf1582ad0175063546602c28f Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:49:40 +0200 Subject: [PATCH 06/13] feature: keep callbacks between two renders --- .../table/table-header/TableHeader.tsx | 40 +++++++++++-------- front/src/pages/people/People.tsx | 6 +-- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx index 0510a56aa..6df436aea 100644 --- a/front/src/components/table/table-header/TableHeader.tsx +++ b/front/src/components/table/table-header/TableHeader.tsx @@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import DropdownButton from './DropdownButton'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import SortAndFilterBar, { SortType } from './SortAndFilterBar'; -import { useState } from 'react'; +import { useCallback, useState } from 'react'; type OwnProps = { viewName: string; @@ -52,23 +52,29 @@ function TableHeader({ }: OwnProps) { const [sorts, setSorts] = useState([] as Array); - const onSortItemSelect = (sortId: string) => { - const newSorts = [ - { - label: 'Created at', - order: 'asc', - id: sortId, - } as SortType, - ]; - setSorts(newSorts); - onSortsUpdate && onSortsUpdate(newSorts); - }; + const onSortItemSelect = useCallback( + (sortId: string) => { + const newSorts = [ + { + label: 'Created at', + order: 'asc', + id: sortId, + } as SortType, + ]; + setSorts(newSorts); + onSortsUpdate && onSortsUpdate(newSorts); + }, + [onSortsUpdate], + ); - const onSortItemUnSelect = (sortId: string) => { - const newSorts = [] as SortType[]; - setSorts(newSorts); - onSortsUpdate && onSortsUpdate(newSorts); - }; + const onSortItemUnSelect = useCallback( + (sortId: string) => { + const newSorts = [] as SortType[]; + setSorts(newSorts); + onSortsUpdate && onSortsUpdate(newSorts); + }, + [onSortsUpdate], + ); return ( diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 0678495ee..b31ba1736 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -4,7 +4,7 @@ import Table from '../../components/table/Table'; import styled from '@emotion/styled'; import { peopleColumns } from './people-table'; import { GraphqlPerson, mapPerson } from '../../interfaces/person.interface'; -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import { SortType } from '../../components/table/table-header/SortAndFilterBar'; import { OrderBy, usePeopleQuery } from '../../services/people'; @@ -31,10 +31,10 @@ function People() { const [, setSorts] = useState([] as Array); const [orderBy, setOrderBy] = useState(defaultOrderBy); - const updateSorts = (sorts: Array) => { + const updateSorts = useCallback((sorts: Array) => { setSorts(sorts); setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy); - }; + }, []); const { data } = usePeopleQuery(orderBy); From 6e353f590c8005445de3ed26114c9b9fa29c37c9 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:56:20 +0200 Subject: [PATCH 07/13] feature: add email in sorts fields --- .../table/table-header/TableHeader.tsx | 2 +- front/src/pages/people/People.tsx | 31 +++++++++++++------ 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx index 6df436aea..8c3077df0 100644 --- a/front/src/components/table/table-header/TableHeader.tsx +++ b/front/src/components/table/table-header/TableHeader.tsx @@ -59,7 +59,7 @@ function TableHeader({ label: 'Created at', order: 'asc', id: sortId, - } as SortType, + } satisfies SortType, ]; setSorts(newSorts); onSortsUpdate && onSortsUpdate(newSorts); diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index b31ba1736..e5d136a85 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -1,4 +1,9 @@ -import { faUser, faList, faCalendar } from '@fortawesome/pro-regular-svg-icons'; +import { + faUser, + faList, + faCalendar, + faEnvelope, +} from '@fortawesome/pro-regular-svg-icons'; import WithTopBarContainer from '../../layout/containers/WithTopBarContainer'; import Table from '../../components/table/Table'; import styled from '@emotion/styled'; @@ -27,6 +32,21 @@ const reduceSortsToOrderBy = (sorts: Array): OrderBy[] => { return [mappedSorts]; }; +const sortsAvailable: Array> = [ + { + id: 'created_at', + label: 'Created at', + order: 'asc', + icon: faCalendar, + }, + { + id: 'email', + label: 'Email', + order: 'asc', + icon: faEnvelope, + }, +]; + function People() { const [, setSorts] = useState([] as Array); const [orderBy, setOrderBy] = useState(defaultOrderBy); @@ -38,15 +58,6 @@ function People() { const { data } = usePeopleQuery(orderBy); - const sortsAvailable: Array> = [ - { - id: 'created_at', - label: 'Created at', - order: 'asc', - icon: faCalendar, - }, - ]; - return ( From c3da5fa5f44bfa1828cc7ca4b41be554b6702bd0 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:56:44 +0200 Subject: [PATCH 08/13] feature: put react app in strict mode --- front/src/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/front/src/index.tsx b/front/src/index.tsx index ec84e70d6..b57549182 100644 --- a/front/src/index.tsx +++ b/front/src/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { StrictMode } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; @@ -14,7 +14,9 @@ const root = ReactDOM.createRoot( root.render( - + + + , ); From 99aa39f2bacc8bf880c554af303591677b7c95a2 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:57:57 +0200 Subject: [PATCH 09/13] refactor: keep type of sortsAvailable while having type assertion --- front/src/pages/people/People.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index e5d136a85..219c9efd6 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -32,7 +32,7 @@ const reduceSortsToOrderBy = (sorts: Array): OrderBy[] => { return [mappedSorts]; }; -const sortsAvailable: Array> = [ +const sortsAvailable = [ { id: 'created_at', label: 'Created at', @@ -45,7 +45,7 @@ const sortsAvailable: Array> = [ order: 'asc', icon: faEnvelope, }, -]; +] satisfies Array>; function People() { const [, setSorts] = useState([] as Array); From 19903219c3bc25a3b1bfa2d56636ed5759e8086b Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 14:59:53 +0200 Subject: [PATCH 10/13] refactor: move sorts in peolpe-table --- front/src/pages/people/People.tsx | 26 +++---------------------- front/src/pages/people/people-table.tsx | 18 ++++++++++++++++- 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 219c9efd6..f689bfc64 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -1,14 +1,9 @@ -import { - faUser, - faList, - faCalendar, - faEnvelope, -} from '@fortawesome/pro-regular-svg-icons'; +import { faUser, faList } from '@fortawesome/pro-regular-svg-icons'; import WithTopBarContainer from '../../layout/containers/WithTopBarContainer'; import Table from '../../components/table/Table'; import styled from '@emotion/styled'; -import { peopleColumns } from './people-table'; -import { GraphqlPerson, mapPerson } from '../../interfaces/person.interface'; +import { peopleColumns, sortsAvailable } from './people-table'; +import { mapPerson } from '../../interfaces/person.interface'; import { useCallback, useState } from 'react'; import { SortType } from '../../components/table/table-header/SortAndFilterBar'; import { OrderBy, usePeopleQuery } from '../../services/people'; @@ -32,21 +27,6 @@ const reduceSortsToOrderBy = (sorts: Array): OrderBy[] => { return [mappedSorts]; }; -const sortsAvailable = [ - { - id: 'created_at', - label: 'Created at', - order: 'asc', - icon: faCalendar, - }, - { - id: 'email', - label: 'Email', - order: 'asc', - icon: faEnvelope, - }, -] satisfies Array>; - function People() { const [, setSorts] = useState([] as Array); const [orderBy, setOrderBy] = useState(defaultOrderBy); diff --git a/front/src/pages/people/people-table.tsx b/front/src/pages/people/people-table.tsx index f96ef1cbe..b2264ed45 100644 --- a/front/src/pages/people/people-table.tsx +++ b/front/src/pages/people/people-table.tsx @@ -15,8 +15,24 @@ import Checkbox from '../../components/form/Checkbox'; import HorizontalyAlignedContainer from '../../layout/containers/HorizontalyAlignedContainer'; import CompanyChip from '../../components/chips/CompanyChip'; import PersonChip from '../../components/chips/PersonChip'; -import { Person } from '../../interfaces/person.interface'; +import { GraphqlPerson, Person } from '../../interfaces/person.interface'; import PipeChip from '../../components/chips/PipeChip'; +import { SortType } from '../../components/table/table-header/SortAndFilterBar'; + +export const sortsAvailable = [ + { + id: 'created_at', + label: 'Created at', + order: 'asc', + icon: faCalendar, + }, + { + id: 'email', + label: 'Email', + order: 'asc', + icon: faEnvelope, + }, +] satisfies Array>; const columnHelper = createColumnHelper(); export const peopleColumns = [ From bb8f61212bda59539c095c79bc2ad4de62886e30 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 15:01:13 +0200 Subject: [PATCH 11/13] feature: add all the sortable fields for people --- front/src/pages/people/people-table.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/front/src/pages/people/people-table.tsx b/front/src/pages/people/people-table.tsx index b2264ed45..1a3eaad59 100644 --- a/front/src/pages/people/people-table.tsx +++ b/front/src/pages/people/people-table.tsx @@ -20,18 +20,20 @@ import PipeChip from '../../components/chips/PipeChip'; import { SortType } from '../../components/table/table-header/SortAndFilterBar'; export const sortsAvailable = [ - { - id: 'created_at', - label: 'Created at', - order: 'asc', - icon: faCalendar, - }, { id: 'email', label: 'Email', order: 'asc', icon: faEnvelope, }, + { id: 'phone', label: 'Phone', order: 'asc', icon: faPhone }, + { + id: 'created_at', + label: 'Created at', + order: 'asc', + icon: faCalendar, + }, + { id: 'city', label: 'City', order: 'asc', icon: faMapPin }, ] satisfies Array>; const columnHelper = createColumnHelper(); From 4e3acf21d24d91ee30bfa99d25acaaedffa47355 Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 15:29:24 +0200 Subject: [PATCH 12/13] feature: set the right border radius for dropdown items --- .../table/table-header/DropdownButton.tsx | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/front/src/components/table/table-header/DropdownButton.tsx b/front/src/components/table/table-header/DropdownButton.tsx index 1ee49c484..900e473bf 100644 --- a/front/src/components/table/table-header/DropdownButton.tsx +++ b/front/src/components/table/table-header/DropdownButton.tsx @@ -37,17 +37,33 @@ const StyledDropdownButton = styled.div` `; const StyledDropdown = styled.ul` + --wraper-border: 1px; + --wraper-border-radius: 8px; + --outer-border-radius: calc(var(--wraper-border-radius) - 2px); + display: flex; flex-direction: column; position: absolute; top: 14px; right: 0; - border: 1px solid ${(props) => props.theme.primaryBorder}; + border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder}; box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09); - border-radius: 8px; + border-radius: var(--wraper-border-radius); padding: 0px; min-width: 160px; ${modalBackground} + li { + border-radius: 2px; + + &:first-child { + border-top-left-radius: var(--outer-border-radius); + border-top-right-radius: var(--outer-border-radius); + } + &:last-child { + border-bottom-left-radius: var(--outer-border-radius); + border-bottom-right-radius: var(--outer-border-radius); + } + } `; const StyledDropdownItem = styled.li` @@ -57,7 +73,6 @@ const StyledDropdownItem = styled.li` margin: 2px; background: ${(props) => props.theme.primaryBackground}; cursor: pointer; - border-radius: 4px; color: ${(props) => props.theme.text60}; &:hover { From 19385e00c0332ad2f189d41c8082a387164d8efa Mon Sep 17 00:00:00 2001 From: Sammy Teillet Date: Mon, 24 Apr 2023 15:39:17 +0200 Subject: [PATCH 13/13] feature: fix background color of dropdown item to be fully transparent --- front/src/components/table/table-header/DropdownButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/src/components/table/table-header/DropdownButton.tsx b/front/src/components/table/table-header/DropdownButton.tsx index 900e473bf..df7c1f952 100644 --- a/front/src/components/table/table-header/DropdownButton.tsx +++ b/front/src/components/table/table-header/DropdownButton.tsx @@ -71,12 +71,12 @@ const StyledDropdownItem = styled.li` padding: ${(props) => props.theme.spacing(2)} calc(${(props) => props.theme.spacing(2)} - 2px); margin: 2px; - background: ${(props) => props.theme.primaryBackground}; + background: rgba(0, 0, 0, 0); cursor: pointer; color: ${(props) => props.theme.text60}; &:hover { - filter: brightness(0.95); + background: rgba(0, 0, 0, 0.04); } `;