fix: make edit and delete comment button subtle (#3835)

packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx

@@ -24,8 +24,8 @@ export const ButtonShowReplies = (props: Props) => {
       data-cy="show-replies"
       icon={icon}
       onClick={setIsShowReplies}
-      sx={{ alignSelf: 'flex-start', border: 'none' }}
-      variant="outline"
+      sx={{ alignSelf: 'flex-start' }}
+      variant="subtle"
       small
     >
       {text} {creatorName && ` to ${creatorName}`}

packages/components/src/CommentItem/CommentItem.tsx

@@ -98,7 +98,7 @@ export const CommentItem = (props: IProps) => {
         )}
 
         {!_deleted && (
-          <Flex sx={{ gap: 2 }}>
+          <Flex sx={{ gap: 2, flexGrow: 1 }}>
             <Box data-cy="commentAvatar" data-testid="commentAvatar">
               <Avatar
                 src={creatorImage ?? defaultProfileImage}
@@ -118,9 +118,8 @@ export const CommentItem = (props: IProps) => {
             >
               <Flex
                 sx={{
-                  alignItems: 'stretch',
                   flexWrap: 'wrap',
-                  justifyContent: 'flex-start',
+                  justifyContent: 'space-between',
                   flexDirection: ['column', 'row'],
                   gap: 2,
                 }}
@@ -144,17 +143,15 @@ export const CommentItem = (props: IProps) => {
                 {isEditable && (
                   <Flex
                     sx={{
-                      flexGrow: 1,
+                      alignItems: 'flex-end',
                       gap: 2,
-                      justifyContent: ['flex-start', 'flex-end'],
-                      opacity: 0.5,
-                      ':hover': { opacity: 1 },
+                      paddingBottom: 2,
                     }}
                   >
                     <Button
                       type="button"
                       data-cy={`${item}: edit button`}
-                      variant="outline"
+                      variant="subtle"
                       small={true}
                       icon="edit"
                       onClick={() => onEditRequest(_id)}
@@ -164,7 +161,7 @@ export const CommentItem = (props: IProps) => {
                     <Button
                       type="button"
                       data-cy={`${item}: delete button`}
-                      variant={'outline'}
+                      variant="subtle"
                       small={true}
                       icon="delete"
                       onClick={() => setShowDeleteModal(true)}

packages/themes/src/common/button.ts

@@ -18,32 +18,32 @@ export const getButtons = (colors: ThemeWithName['colors']) => ({
   primary: {
     ...BASE_BUTTON,
     color: colors.black,
-    bg: colors.accent.base,
+    backgroundColor: colors.accent.base,
     '&:hover': {
-      bg: colors.accent.hover,
+      backgroundColor: colors.accent.hover,
     },
     '&[disabled]': {
       opacity: 0.5,
       cursor: 'not-allowed',
     },
     '&[disabled]:hover': {
-      bg: colors.accent.base,
+      backgroundColor: colors.accent.base,
     },
   },
   secondary: {
     ...BASE_BUTTON,
     border: '2px solid ' + colors.black,
     color: colors.black,
-    bg: colors.softblue,
+    backgroundColor: colors.softblue,
     '&:hover': {
-      bg: colors.white,
+      backgroundColor: colors.white,
       cursor: 'pointer',
     },
     '&[disabled]': {
       opacity: 0.5,
     },
     '&[disabled]:hover': {
-      bg: colors.softblue,
+      backgroundColor: colors.softblue,
     },
   },
   destructive: {
@@ -81,18 +81,17 @@ export const getButtons = (colors: ThemeWithName['colors']) => ({
   },
   subtle: {
     ...BASE_BUTTON,
-    borderColor: colors.softblue,
+    borderWidth: 0,
     color: colors.black,
-    bg: colors.softblue,
+    backgroundColor: 'transparent',
     '&:hover': {
-      bg: colors.offwhite,
-      borderColor: colors.offwhite,
+      backgroundColor: colors.softblue,
     },
     '&[disabled]': {
       opacity: 0.5,
     },
     '&[disabled]:hover': {
-      bg: colors.softblue,
+      backgroundColor: colors.softblue,
     },
   },
   breadcrumb: {

src/common/HideDiscussionContainer.tsx

@@ -48,6 +48,7 @@ export const HideDiscussionContainer = ({
           textAlign: 'center',
           display: 'block',
           marginBottom: viewComments ? 2 : 0,
+          '&:hover': { bg: '#ececec' },
         }}
         onClick={() => setViewComments((prev) => !prev)}
         backgroundColor={viewComments ? '#c2daf0' : '#e2edf7'}