Refactor buttons (#1257)

* Refactor buttons

* Complete components creation

* Complete refactoring

* fix lint

* Complete button work

front/src/modules/activities/components/ActivityCreateButton.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 
-import { Button, ButtonVariant } from '@/ui/button/components/Button';
+import { Button } from '@/ui/button/components/Button';
 import { ButtonGroup } from '@/ui/button/components/ButtonGroup';
 import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icon/index';
 
@@ -17,7 +17,7 @@ export function ActivityCreateButton({
 }: ActivityCreateButtonProps) {
   const theme = useTheme();
   return (
-    <ButtonGroup variant={ButtonVariant.Secondary}>
+    <ButtonGroup variant={'secondary'}>
       <Button
         icon={<IconNotes size={theme.icon.size.sm} />}
         title="Note"

front/src/modules/activities/notes/components/Notes.tsx

@@ -6,11 +6,7 @@ import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateAct
 import { NoteList } from '@/activities/notes/components/NoteList';
 import { useNotes } from '@/activities/notes/hooks/useNotes';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
-import {
-  Button,
-  ButtonSize,
-  ButtonVariant,
-} from '@/ui/button/components/Button';
+import { Button } from '@/ui/button/components/Button';
 import { ActivityType } from '~/generated/graphql';
 
 const StyledTaskGroupEmptyContainer = styled.div`
@@ -64,7 +60,7 @@ export function Notes({ entity }: { entity: ActivityTargetableEntity }) {
         <Button
           icon={<IconNotes size={theme.icon.size.sm} />}
           title="New note"
-          variant={ButtonVariant.Secondary}
+          variant="secondary"
           onClick={() => openCreateActivity(ActivityType.Note, [entity])}
         />
       </StyledTaskGroupEmptyContainer>
@@ -79,8 +75,8 @@ export function Notes({ entity }: { entity: ActivityTargetableEntity }) {
         button={
           <Button
             icon={<IconNotes size={theme.icon.size.md} />}
-            size={ButtonSize.Small}
-            variant={ButtonVariant.Secondary}
+            size="small"
+            variant="secondary"
             title="Add note"
             onClick={() => openCreateActivity(ActivityType.Note, [entity])}
           ></Button>

front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx

@@ -1,28 +1,20 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { GET_ACTIVITIES } from '@/activities/graphql/queries/getActivities';
 import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/graphql/queries/getActivitiesByTarget';
 import { GET_COMPANIES } from '@/companies/graphql/queries/getCompanies';
 import { GET_PEOPLE } from '@/people/graphql/queries/getPeople';
-import { IconButton } from '@/ui/button/components/IconButton';
+import { LightIconButton } from '@/ui/button/components/LightIconButton';
 import { IconTrash } from '@/ui/icon';
 import { isRightDrawerOpenState } from '@/ui/right-drawer/states/isRightDrawerOpenState';
 import { useDeleteActivityMutation } from '~/generated/graphql';
 
-const StyledContainer = styled.div`
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-`;
-
 type OwnProps = {
   activityId: string;
 };
 
 export function ActivityActionBar({ activityId }: OwnProps) {
-  const theme = useTheme();
   const [deleteActivityMutation] = useDeleteActivityMutation();
   const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
 
@@ -40,13 +32,11 @@ export function ActivityActionBar({ activityId }: OwnProps) {
   }
 
   return (
-    <StyledContainer>
-      <IconButton
-        icon={
-          <IconTrash size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
-        }
-        onClick={deleteActivity}
-      />
-    </StyledContainer>
+    <LightIconButton
+      icon={<IconTrash />}
+      onClick={deleteActivity}
+      accent="tertiary"
+      size="medium"
+    />
   );
 }

front/src/modules/activities/tasks/components/AddTaskButton.tsx

@@ -2,11 +2,7 @@ import { useTheme } from '@emotion/react';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
-import {
-  Button,
-  ButtonSize,
-  ButtonVariant,
-} from '@/ui/button/components/Button';
+import { Button } from '@/ui/button/components/Button';
 import { IconPlus } from '@/ui/icon';
 import { ActivityType } from '~/generated/graphql';
 
@@ -25,8 +21,8 @@ export function AddTaskButton({
   return (
     <Button
       icon={<IconPlus size={theme.icon.size.md} />}
-      size={ButtonSize.Small}
-      variant={ButtonVariant.Secondary}
+      size="small"
+      variant="secondary"
       title="Add task"
       onClick={() => openCreateActivity(ActivityType.Task, [entity])}
     ></Button>

front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -5,7 +5,7 @@ import { IconCheckbox } from '@tabler/icons-react';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
-import { Button, ButtonVariant } from '@/ui/button/components/Button';
+import { Button } from '@/ui/button/components/Button';
 import { ActivityType } from '~/generated/graphql';
 
 import { AddTaskButton } from './AddTaskButton';
@@ -69,7 +69,7 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {
         <Button
           icon={<IconCheckbox size={theme.icon.size.sm} />}
           title="New task"
-          variant={ButtonVariant.Secondary}
+          variant={'secondary'}
           onClick={() =>
             openCreateActivity(ActivityType.Task, entity ? [entity] : undefined)
           }