implement stateful reject button for dsa

coralproject · Nov 8, 2023 · bc7759e · bc7759e
1 parent d2fae9a
commit bc7759e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
@@ -376,10 +376,12 @@ const ModerateCard: FunctionComponent<Props> = ({
               {({ toggleVisibility, visible }) => {
                 return (
                   <RejectButton
+                    toggle={dsaFeaturesEnabled}
+                    open={showModerationReason}
                     onClick={
                       dsaFeaturesEnabled
                         ? () => {
-                            setShowModerationReason(true);// toggleVisibility();
+                            setShowModerationReason(!showModerationReason);// toggleVisibility();
                           }
                         : onReject
                     }

diff --git a/client/src/core/client/admin/components/ModerateCard/RejectButton.css b/client/src/core/client/admin/components/ModerateCard/RejectButton.css
@@ -6,16 +6,19 @@ $moderateCardButtonOutlineRejectColor: var(--palette-error-500);
   border-radius: var(--round-corners);
   width: 65px;
   height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  position: relative;
   color: $moderateCardButtonOutlineRejectColor;
   &:not(:disabled):active {
     background-color: $moderateCardButtonOutlineRejectColor;
     color: var(--palette-text-000);
   }
 }
 
+.open {
+  background-color: var(--palette-error-400);
+  color: var(--palette-text-000);
+}
+
 .readOnly {
   background-color: transparent;
   border-color: $colors-grey-300);
@@ -42,6 +45,18 @@ $moderateCardButtonOutlineRejectColor: var(--palette-error-500);
   border-color: $moderateCardButtonOutlineRejectColor;
 }
 
-.icon {
+.xIcon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
   color: inherit;
 }
+
+.arrowIcon {
+  position: absolute;
+  left: 75%;
+  top: 25%;
+  transform: translate(-50%, 25%);
+  width: 8px;
+}
diff --git a/client/src/core/client/admin/components/ModerateCard/RejectButton.tsx b/client/src/core/client/admin/components/ModerateCard/RejectButton.tsx
@@ -3,12 +3,19 @@ import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { RemoveIcon, SvgIcon } from "coral-ui/components/icons";
+import {
+  ArrowsDownIcon,
+  ArrowsUpIcon,
+  RemoveIcon,
+  SvgIcon,
+} from "coral-ui/components/icons";
 import { BaseButton } from "coral-ui/components/v2";
 
 import styles from "./RejectButton.css";
 
 interface Props extends Omit<PropTypesOf<typeof BaseButton>, "ref"> {
+  toggle?: boolean;
+  open?: boolean;
   invert?: boolean;
   readOnly?: boolean;
 }
@@ -17,18 +24,28 @@ const RejectButton: FunctionComponent<Props> = ({
   invert,
   readOnly,
   className,
+  open = false,
+  toggle = false,
   ...rest
 }) => (
   <Localized id="moderate-comment-rejectButton" attrs={{ "aria-label": true }}>
     <BaseButton
       {...rest}
       className={cn(className, styles.root, {
+        [styles.open]: toggle && open,
         [styles.invert]: invert,
         [styles.readOnly]: readOnly,
       })}
       aria-label="Reject"
     >
-      <SvgIcon size="lg" className={styles.icon} Icon={RemoveIcon} />
+      <SvgIcon size="lg" className={styles.xIcon} Icon={RemoveIcon} />
+      {toggle && (
+        <SvgIcon
+          size="xxs"
+          className={styles.arrowIcon}
+          Icon={open ? ArrowsUpIcon : ArrowsDownIcon}
+        />
+      )}
     </BaseButton>
   </Localized>
 );