admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Icon refactoring (#287)

Browse Source 
* Refactor icons

* Fix additional icons
This commit is contained in:
Félix Malfait
2023-06-14 07:55:54 +02:00
committed by GitHub
parent 7e73f013d1
commit 830b76cd9a
34 changed files with 194 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/modules/settings/components/SettingsNavbar.tsx
View File

@ -1,7 +1,12 @@
import { TbColorSwatch, TbLogout, TbSettings, TbUser } from 'react-icons/tb';
import { useMatch, useResolvedPath } from 'react-router-dom';
import { removeTokens } from '@/auth/services/AuthService';
import {
IconColorSwatch,
IconLogout,
IconSettings,
IconUser,
} from '@/ui/icons/index';
import NavBackButton from '@/ui/layout/navbar//NavBackButton';
import NavItem from '@/ui/layout/navbar/NavItem';
import NavItemsContainer from '@/ui/layout/navbar/NavItemsContainer';
@ -16,7 +21,7 @@ export function SettingsNavbar() {
<NavItem
label="Profile"
to="/settings/profile"
icon={<TbUser size={16} />}
icon={<IconUser size={16} />}
active={
!!useMatch({
path: useResolvedPath('/people').pathname,
@ -27,7 +32,7 @@ export function SettingsNavbar() {
<NavItem
label="Experience"
to="/settings/profile/experience"
icon={<TbColorSwatch size={16} />}
icon={<IconColorSwatch size={16} />}
soon={true}
active={
!!useMatch({
@ -40,7 +45,7 @@ export function SettingsNavbar() {
<NavItem
label="General"
to="/settings/workspace"
icon={<TbSettings size={16} />}
icon={<IconSettings size={16} />}
soon={true}
active={
!!useMatch({
@ -53,7 +58,7 @@ export function SettingsNavbar() {
<NavItem
label="Logout"
onClick={removeTokens}
icon={<TbLogout size={16} />}
icon={<IconLogout size={16} />}
danger={true}
/>
</NavItemsContainer>

3
front/src/modules/ui/components/board/BoardNewButton.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { IconPlus } from '@tabler/icons-react';
import { IconPlus } from '@/ui/icons/index';
const StyledButton = styled.button`
display: flex;

4
front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx
View File

@ -1,11 +1,11 @@
import { ChangeEvent, ComponentType, useEffect, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaPlus } from 'react-icons/fa';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { SearchConfigType } from '@/search/interfaces/interface';
import { useSearch } from '@/search/services/search';
import { IconPlus } from '@/ui/icons/index';
import { textInputStyle } from '@/ui/layout/styles/themes';
import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState';
import { AnyEntity } from '@/utils/interfaces/generic.interface';
@ -252,7 +252,7 @@ export function EditableRelation<
onClick={handleCreateNewRelationButtonClick}
>
<StyledCreateButtonIcon>
<FaPlus />
<IconPlus />
</StyledCreateButtonIcon>
<StyledCreateButtonText>Create new</StyledCreateButtonText>
</EditableRelationCreateButton>

4
front/src/modules/ui/components/inputs/AutosizeTextInput.tsx
View File

@ -1,11 +1,11 @@
import { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
import { HiArrowSmRight } from 'react-icons/hi';
import TextareaAutosize from 'react-textarea-autosize';
import styled from '@emotion/styled';
import { IconButton } from '@/ui/components/buttons/IconButton';
import { IconArrowRight } from '@/ui/icons/index';
const MAX_ROWS = 5;
@ -132,7 +132,7 @@ export function AutosizeTextInput({
<StyledBottomRightIconButton>
<IconButton
onClick={handleOnClickSendButton}
icon={<HiArrowSmRight size={15} />}
icon={<IconArrowRight size={15} />}
disabled={isSendButtonDisabled}
/>
</StyledBottomRightIconButton>

2
front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import styled from '@emotion/styled';
import { IconCheck } from '@tabler/icons-react';
import { IconCheck } from '@/ui/icons/index';
import { hoverBackground } from '@/ui/layout/styles/themes';
import { DropdownMenuButton } from './DropdownMenuButton';

2
front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx
View File

@ -1,8 +1,8 @@
import React, { useState } from 'react';
import styled from '@emotion/styled';
import type { Meta, StoryObj } from '@storybook/react';
import { IconPlus } from '@tabler/icons-react';
import { IconPlus } from '@/ui/icons/index';
import { Avatar } from '@/users/components/Avatar';
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';

4
front/src/modules/ui/components/table/action-bar/TableActionBarButtonOpenComments.tsx
View File

@ -1,4 +1,4 @@
import { FaRegComment } from 'react-icons/fa';
import { IconComment } from '@/ui/icons/index';
import { EntityTableActionBarButton } from './EntityTableActionBarButton';
@ -10,7 +10,7 @@ export function TableActionBarButtonToggleComments({ onClick }: OwnProps) {
return (
<EntityTableActionBarButton
label="Comment"
icon={<FaRegComment size={16} />}
icon={<IconComment size={16} />}
onClick={onClick}
/>
);

5
front/src/modules/ui/components/table/table-header/DropdownButton.tsx
View File

@ -1,7 +1,8 @@
import { ReactNode, useRef } from 'react';
import { FaAngleDown } from 'react-icons/fa';
import styled from '@emotion/styled';
import { IconChevronDown } from '@/ui/icons/index';
import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
import {
overlayBackground,
@ -196,7 +197,7 @@ const StyleAngleDownContainer = styled.div`
function DropdownTopOptionAngleDown() {
return (
<StyleAngleDownContainer>
<FaAngleDown />
<IconChevronDown />
</StyleAngleDownContainer>
);
}

10
front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
View File

@ -1,4 +1,3 @@
import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
import styled from '@emotion/styled';
import {
@ -6,6 +5,7 @@ import {
SelectedFilterType,
} from '@/filters-and-sorts/interfaces/filters/interface';
import { SelectedSortType } from '@/filters-and-sorts/interfaces/sorts/interface';
import { IconArrowNarrowDown, IconArrowNarrowUp } from '@/ui/icons/index';
import SortOrFilterChip from './SortOrFilterChip';
@ -74,7 +74,13 @@ function SortAndFilterBar<SortField, TData extends FilterableFieldsType>({
key={sort.key}
labelValue={sort.label}
id={sort.key}
icon={sort.order === 'desc' ? <FaArrowDown /> : <FaArrowUp />}
icon={
sort.order === 'desc' ? (
<IconArrowNarrowDown />
) : (
<IconArrowNarrowUp />
)
}
onRemove={() => onRemoveSort(sort.key)}
/>
);

5
front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx
View File

@ -1,7 +1,8 @@
import { ReactNode } from 'react';
import { TbX } from 'react-icons/tb';
import styled from '@emotion/styled';
import { IconX } from '@/ui/icons/index';
type OwnProps = {
id: string;
labelKey?: string;
@ -55,7 +56,7 @@ function SortOrFilterChip({
{labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
{labelValue}
<StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
<TbX />
<IconX />
</StyledDelete>
</StyledChip>
);

6
front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx
View File

@ -1,9 +1,9 @@
import React from 'react';
import { FaList } from 'react-icons/fa';
import { ApolloProvider } from '@apollo/client';
import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { IconList } from '@/ui/icons/index';
import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
import { mockedClient } from '~/testing/mockedClient';
@ -25,7 +25,7 @@ export const Empty: Story = {
<FullHeightStorybookLayout>
<TableHeader
viewName="ViewName"
viewIcon={<FaList />}
viewIcon={<IconList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
/>
@ -40,7 +40,7 @@ export const WithSortsAndFilters: Story = {
<FullHeightStorybookLayout>
<TableHeader
viewName="ViewName"
viewIcon={<FaList />}
viewIcon={<IconList />}
availableSorts={availableSorts}
availableFilters={availableFilters}
/>

1
front/src/modules/ui/icons/components/IconComment.tsx
View File

@ -1 +0,0 @@
export { IconMessageCircle as IconComment } from '@tabler/icons-react';

1
front/src/modules/ui/icons/components/IconSidebarLeftCollapse.tsx
View File

@ -1 +0,0 @@
export { TbLayoutSidebarLeftCollapse as IconSidebarLeftCollapse } from 'react-icons/tb';

1
front/src/modules/ui/icons/components/IconSidebarRightCollapse.tsx
View File

@ -1 +0,0 @@
export { TbLayoutSidebarRightCollapse as IconSidebarRightCollapse } from 'react-icons/tb';

30
front/src/modules/ui/icons/index.ts
View File

@ -1,6 +1,28 @@
export { IconAddressBook } from './components/IconAddressBook';
export { IconComment } from './components/IconComment';
export { IconSidebarLeftCollapse } from './components/IconSidebarLeftCollapse';
export { IconSidebarRightCollapse } from './components/IconSidebarRightCollapse';
export { IconAward } from '@tabler/icons-react';
export { IconBuilding } from '@tabler/icons-react';
export { IconMessageCircle as IconComment } from '@tabler/icons-react';
export { IconCheck } from '@tabler/icons-react';
export { IconTrash } from '@tabler/icons-react';
export { IconLayoutSidebarRightCollapse } from '@tabler/icons-react';
export { IconLayoutSidebarLeftCollapse } from '@tabler/icons-react';
export { IconUser } from '@tabler/icons-react';
export { IconList } from '@tabler/icons-react';
export { IconInbox } from '@tabler/icons-react';
export { IconSearch } from '@tabler/icons-react';
export { IconSettings } from '@tabler/icons-react';
export { IconLogout } from '@tabler/icons-react';
export { IconColorSwatch } from '@tabler/icons-react';
export { IconX } from '@tabler/icons-react';
export { IconChevronLeft } from '@tabler/icons-react';
export { IconPlus } from '@tabler/icons-react';
export { IconLink } from '@tabler/icons-react';
export { IconSum } from '@tabler/icons-react';
export { IconCalendar } from '@tabler/icons-react';
export { IconMapPin } from '@tabler/icons-react';
export { IconMail } from '@tabler/icons-react';
export { IconPhone } from '@tabler/icons-react';
export { IconTarget } from '@tabler/icons-react';
export { IconChevronDown } from '@tabler/icons-react';
export { IconArrowNarrowDown } from '@tabler/icons-react';
export { IconArrowNarrowUp } from '@tabler/icons-react';
export { IconArrowRight } from '@tabler/icons-react';

5
front/src/modules/ui/layout/navbar/NavBackButton.tsx
View File

@ -1,7 +1,8 @@
import { TbChevronLeft } from 'react-icons/tb';
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { IconChevronLeft } from '@/ui/icons/index';
import NavCollapseButton from './NavCollapseButton';
type OwnProps = {
@ -38,7 +39,7 @@ export default function NavBackButton({ title }: OwnProps) {
<IconAndButtonContainer
onClick={() => navigate('/', { replace: true })}
>
<TbChevronLeft strokeWidth={3} />
<IconChevronLeft strokeWidth={3} />
<span>{title}</span>
</IconAndButtonContainer>
<NavCollapseButton hideOnDesktop={true} />

9
front/src/modules/ui/layout/navbar/NavCollapseButton.tsx
View File

@ -1,7 +1,10 @@
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { IconSidebarLeftCollapse, IconSidebarRightCollapse } from '@/ui/icons';
import {
IconLayoutSidebarLeftCollapse,
IconLayoutSidebarRightCollapse,
} from '@/ui/icons';
import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
import { MOBILE_VIEWPORT } from '../styles/themes';
@ -50,7 +53,7 @@ export default function NavCollapseButton({
onClick={() => setIsNavOpen(!isNavOpen)}
hideOnDesktop={hideOnDesktop}
>
<IconSidebarLeftCollapse size={16} />
<IconLayoutSidebarLeftCollapse size={16} />
</CollapseButton>
)}
{!isNavOpen && (
@ -58,7 +61,7 @@ export default function NavCollapseButton({
onClick={() => setIsNavOpen(!isNavOpen)}
hideOnDesktop={hideOnDesktop}
>
<IconSidebarRightCollapse size={16} />
<IconLayoutSidebarRightCollapse size={16} />
</CollapseButton>
)}
</>

3
front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx
View File

@ -1,7 +1,8 @@
import styled from '@emotion/styled';
import { IconPlus } from '@tabler/icons-react';
import { useRecoilState } from 'recoil';
import { IconPlus } from '@/ui/icons/index';
import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
const StyledButton = styled.button`

5
front/src/modules/ui/layout/top-bar/TopBar.tsx
View File

@ -1,7 +1,8 @@
import { ReactNode } from 'react';
import { TbPlus } from 'react-icons/tb';
import styled from '@emotion/styled';
import { IconPlus } from '@/ui/icons/index';
import NavCollapseButton from '../navbar/NavCollapseButton';
export const TOP_BAR_MIN_HEIGHT = '40px';
@ -59,7 +60,7 @@ export function TopBar({ title, icon, onAddButtonClick }: OwnProps) {
data-testid="add-button"
onClick={onAddButtonClick}
>
<TbPlus size={16} />
<IconPlus size={16} />
</AddButtonContainer>
)}
</TopBarContainer>