Move trash icon to the top bar of right drawer (twentyhq#1014)

* Move trash icon to the top bar of right drawer Co-authored-by: Matheus <[email protected]> * Fix background Co-authored-by: Matheus <[email protected]> * Refactor the code Co-authored-by: Matheus <[email protected]> --------- Co-authored-by: Matheus <[email protected]>
AdityaPimpalkar · Aug 3, 2023 · 636d68b · 636d68b
1 parent a123779
commit 636d68b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/front/src/modules/activities/components/ActivityEditor.tsx b/front/src/modules/activities/components/ActivityEditor.tsx
@@ -21,7 +21,6 @@ import { debounce } from '~/utils/debounce';
 
 import { ActivityAssigneeEditableField } from '../editable-fields/components/ActivityAssigneeEditableField';
 import { ActivityRelationEditableField } from '../editable-fields/components/ActivityRelationEditableField';
-import { ActivityActionBar } from '../right-drawer/components/ActivityActionBar';
 import { CommentForDrawer } from '../types/CommentForDrawer';
 
 import { ActivityTitle } from './ActivityTitle';
@@ -59,14 +58,6 @@ const StyledTopContainer = styled.div`
   padding: 24px 24px 24px 48px;
 `;
 
-const StyledTopActionsContainer = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
-`;
-
 type OwnProps = {
   activity: Pick<
     Activity,
@@ -155,10 +146,7 @@ export function ActivityEditor({
     <StyledContainer>
       <StyledUpperPartContainer>
         <StyledTopContainer>
-          <StyledTopActionsContainer>
-            <ActivityTypeDropdown activity={activity} />
-            <ActivityActionBar activityId={activity?.id ?? ''} />
-          </StyledTopActionsContainer>
+          <ActivityTypeDropdown activity={activity} />
           <ActivityTitle
             title={title ?? ''}
             completed={!!completedAt}

diff --git a/front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx b/front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
@@ -6,14 +6,14 @@ import { useRecoilState } from 'recoil';
 import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries';
 import { GET_COMPANIES } from '@/companies/queries';
 import { GET_PEOPLE } from '@/people/queries';
-import { Button, ButtonVariant } from '@/ui/button/components/Button';
+import { IconButton } from '@/ui/button/components/IconButton';
 import { IconTrash } from '@/ui/icon';
 import { isRightDrawerOpenState } from '@/ui/right-drawer/states/isRightDrawerOpenState';
 import { useDeleteActivityMutation } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  cursor: pointer;
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
 `;
 
 type OwnProps = {
@@ -39,12 +39,11 @@ export function ActivityActionBar({ activityId }: OwnProps) {
 
   return (
     <StyledContainer>
-      <Button
+      <IconButton
         icon={
           <IconTrash size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
         }
         onClick={deleteActivity}
-        variant={ButtonVariant.Tertiary}
       />
     </StyledContainer>
   );

diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerTopBar.tsx
@@ -1,5 +1,8 @@
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
+import { ActivityActionBar } from '@/activities/right-drawer/components/ActivityActionBar';
+import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
@@ -15,19 +18,27 @@ const StyledRightDrawerTopBar = styled.div`
   font-size: ${({ theme }) => theme.font.size.md};
   gap: ${({ theme }) => theme.spacing(1)};
   height: 56px;
-  justify-content: flex-start;
+  justify-content: space-between;
   padding-left: ${({ theme }) => theme.spacing(2)};
 
   padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
+const TopBarWrapper = styled.div`
+  display: flex;
+`;
+
 export function RightDrawerTopBar() {
   const isMobile = useIsMobile();
+  const activityId = useRecoilValue(viewableActivityIdState);
 
   return (
     <StyledRightDrawerTopBar>
-      <RightDrawerTopBarCloseButton />
-      {!isMobile && <RightDrawerTopBarExpandButton />}
+      <TopBarWrapper>
+        <RightDrawerTopBarCloseButton />
+        {!isMobile && <RightDrawerTopBarExpandButton />}
+      </TopBarWrapper>
+      <ActivityActionBar activityId={activityId ?? ''} />
     </StyledRightDrawerTopBar>
   );
 }