From 14c867aca87c62dcb4ab3b6b985dc54a19e9f5f4 Mon Sep 17 00:00:00 2001
From: Marcus Haddon <haddon.marcus@gmail.com>
Date: Mon, 13 Nov 2023 11:45:29 -0800
Subject: [PATCH] address comments

---
 .../components/ModerateCard/ModerateCard.tsx  |  7 ++++---
 .../components/ModerateCard/RejectButton.css  |  1 -
 .../ModerationReason/DetailedExplanation.css  | 15 +++++++++++++
 .../ModerationReason/DetailedExplanation.tsx  | 16 ++++++++------
 .../ModerationReason/ModerationReason.css     | 21 -------------------
 .../ModerationReason/ModerationReason.tsx     |  5 ++---
 .../ModerationReason/OptionAction.tsx         |  0
 .../components/ModerationReason/Reasons.tsx   | 12 +++++------
 .../IllegalContentReportViewContainer.tsx     |  9 +-------
 9 files changed, 38 insertions(+), 48 deletions(-)
 create mode 100644 client/src/core/client/admin/components/ModerationReason/DetailedExplanation.css
 delete mode 100644 client/src/core/client/admin/components/ModerationReason/OptionAction.tsx

diff --git a/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
index f1379eebe5..860508e3a3 100644
--- a/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
+++ b/client/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
@@ -33,15 +33,16 @@ import {
 } from "coral-ui/components/v2";
 import { StarRating } from "coral-ui/components/v3";
 
+import { RejectCommentReasonInput } from "coral-stream/__generated__/RejectCommentMutation.graphql";
+
 import { CommentContent, InReplyTo, UsernameButton } from "../Comment";
+import ModerationReason from "../ModerationReason/ModerationReason";
 import ApproveButton from "./ApproveButton";
 import CommentAuthorContainer from "./CommentAuthorContainer";
 import FeatureButton from "./FeatureButton";
 import MarkersContainer from "./MarkersContainer";
 import RejectButton from "./RejectButton";
 
-import { RejectCommentReasonInput } from "coral-stream/__generated__/RejectCommentMutation.graphql";
-import ModerationReason from "../ModerationReason/ModerationReason";
 import styles from "./ModerateCard.css";
 
 interface Props {
@@ -349,7 +350,7 @@ const ModerateCard: FunctionComponent<Props> = ({
               <div className={styles.decision}>DECISION</div>
             </Localized>
           )}
-          <Flex itemGutter style={{ position: "relative" }}>
+          <Flex itemGutter>
             <Popover
               id={`reject-reason-${id}`}
               modifiers={{
diff --git a/client/src/core/client/admin/components/ModerateCard/RejectButton.css b/client/src/core/client/admin/components/ModerateCard/RejectButton.css
index 53420263ea..8eac232e71 100644
--- a/client/src/core/client/admin/components/ModerateCard/RejectButton.css
+++ b/client/src/core/client/admin/components/ModerateCard/RejectButton.css
@@ -58,5 +58,4 @@ $moderateCardButtonOutlineRejectColor: var(--palette-error-500);
   left: 75%;
   top: 25%;
   transform: translate(-50%, 25%);
-  width: 8px;
 }
diff --git a/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.css b/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.css
new file mode 100644
index 0000000000..c47aa37007
--- /dev/null
+++ b/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.css
@@ -0,0 +1,15 @@
+.detailedExplanation {
+  margin-bottom: var(--spacing-3);
+}
+
+.explanationLabel {
+  margin-bottom: var(--spacing-2);
+}
+
+.changeReason {
+  margin-bottom: var(--spacing-3);
+}
+
+.detailedExplanation > textarea {
+  resize: none;
+}
diff --git a/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx b/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx
index 41414bb6dc..6b0db0c4e2 100644
--- a/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx
+++ b/client/src/core/client/admin/components/ModerationReason/DetailedExplanation.tsx
@@ -4,11 +4,13 @@ import React, { FunctionComponent } from "react";
 
 import { GQLREJECTION_REASON_CODE } from "coral-framework/schema";
 import { Label, RadioButton } from "coral-ui/components/v2";
+import { TextArea } from "coral-ui/components/v3";
 import { Button } from "coral-ui/components/v3/Button/Button";
 
-import { TextArea } from "coral-ui/components/v3";
 import { unsnake } from "./formatting";
-import styles from "./ModerationReason.css";
+
+import styles from "./DetailedExplanation.css";
+import commonStyles from "./ModerationReason.css";
 
 export interface Props {
   onChange: (value: string) => void;
@@ -17,7 +19,7 @@ export interface Props {
   onBack: () => void;
 }
 
-const DetailedExplantion: FunctionComponent<Props> = ({
+const DetailedExplanation: FunctionComponent<Props> = ({
   code,
   value,
   onChange,
@@ -40,7 +42,7 @@ const DetailedExplantion: FunctionComponent<Props> = ({
 
       <Localized id="common-moderationReason-changeReason">
         <Button
-          className={cn(styles.optionAction, styles.changeReason)}
+          className={cn(commonStyles.optionAction, styles.changeReason)}
           variant="none"
           onClick={onBack}
         >
@@ -49,7 +51,9 @@ const DetailedExplantion: FunctionComponent<Props> = ({
       </Localized>
 
       <Localized id="common-moderationReason-detailedExplanation">
-        <Label className={cn(styles.sectionLabel, styles.explanationLabel)}>
+        <Label
+          className={cn(commonStyles.sectionLabel, styles.explanationLabel)}
+        >
           Explanation
         </Label>
       </Localized>
@@ -70,4 +74,4 @@ const DetailedExplantion: FunctionComponent<Props> = ({
   );
 };
 
-export default DetailedExplantion;
+export default DetailedExplanation;
diff --git a/client/src/core/client/admin/components/ModerationReason/ModerationReason.css b/client/src/core/client/admin/components/ModerationReason/ModerationReason.css
index 1044c30da4..dd7fcf2967 100644
--- a/client/src/core/client/admin/components/ModerationReason/ModerationReason.css
+++ b/client/src/core/client/admin/components/ModerationReason/ModerationReason.css
@@ -3,11 +3,6 @@
   padding: var(--spacing-3);
 }
 
-.innerWrapper {
-  width: 190px;
-  flex-direction: column;
-}
-
 .sectionLabel {
   display: block;
   font-family: var(--font-family-primary);
@@ -27,22 +22,6 @@
   margin-top: var(--spacing-1);
 }
 
-.detailedExplanation {
-  margin-bottom: var(--spacing-3);
-}
-
-.explanationLabel {
-  margin-bottom: var(--spacing-2);
-}
-
-.changeReason {
-  margin-bottom: var(--spacing-3);
-}
-
-.detailedExplanation > textarea {
-  resize: none;
-}
-
 .cancelButton {
   width: 109px;
   align-self: flex-start;
diff --git a/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx b/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx
index 9f7d74e8cd..d1ed600b98 100644
--- a/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx
+++ b/client/src/core/client/admin/components/ModerationReason/ModerationReason.tsx
@@ -1,12 +1,11 @@
+import { Localized } from "@fluent/react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
+import { GQLREJECTION_REASON_CODE } from "coral-framework/schema";
 import { Box, Button, Flex } from "coral-ui/components/v2";
 
 import { RejectCommentReasonInput } from "coral-stream/__generated__/RejectCommentMutation.graphql";
 
-import { Localized } from "@fluent/react/compat";
-import { GQLREJECTION_REASON_CODE } from "coral-framework/schema";
-
 import DetailedExplantion from "./DetailedExplanation";
 import Reasons from "./Reasons";
 
diff --git a/client/src/core/client/admin/components/ModerationReason/OptionAction.tsx b/client/src/core/client/admin/components/ModerationReason/OptionAction.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/client/src/core/client/admin/components/ModerationReason/Reasons.tsx b/client/src/core/client/admin/components/ModerationReason/Reasons.tsx
index 6b0256e586..54e4cbea7d 100644
--- a/client/src/core/client/admin/components/ModerationReason/Reasons.tsx
+++ b/client/src/core/client/admin/components/ModerationReason/Reasons.tsx
@@ -7,7 +7,7 @@ import { Button } from "coral-ui/components/v3";
 
 import { unsnake } from "./formatting";
 
-import styles from "./ModerationReason.css";
+import commonStyles from "./ModerationReason.css";
 
 export interface Props {
   onCode: (code: GQLREJECTION_REASON_CODE) => void;
@@ -15,13 +15,13 @@ export interface Props {
   onAddExplanation: () => void;
 }
 
-const AddExpanationButton: FunctionComponent<{ onClick: () => void }> = ({
+const AddExplanationButton: FunctionComponent<{ onClick: () => void }> = ({
   onClick,
 }) => (
   <Localized id="common-moderationReason-addExplanation">
     <Button
       onClick={onClick}
-      className={styles.optionAction}
+      className={commonStyles.optionAction}
       variant="none"
       color="success"
     >
@@ -38,7 +38,7 @@ const Reasons: FunctionComponent<Props> = ({
   return (
     <>
       <Localized id="common-moderationReason-reason">
-        <span className={styles.sectionLabel}>Reason</span>
+        <span className={commonStyles.sectionLabel}>Reason</span>
       </Localized>
 
       {Object.values(GQLREJECTION_REASON_CODE)
@@ -66,13 +66,13 @@ const Reasons: FunctionComponent<Props> = ({
             </Localized>
 
             {selected === code && (
-              <AddExpanationButton onClick={onAddExplanation} />
+              <AddExplanationButton onClick={onAddExplanation} />
             )}
           </div>
         ))}
 
       <Localized id="common-moderationReason-reason-moreReasons">
-        <span className={styles.sectionLabel}>+ More reasons</span>
+        <span className={commonStyles.sectionLabel}>+ More reasons</span>
       </Localized>
 
       <>
diff --git a/client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx b/client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx
index c422028e68..46ab777427 100644
--- a/client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx
+++ b/client/src/core/client/stream/tabs/Comments/IllegalContentReportView/IllegalContentReportViewContainer.tsx
@@ -1,11 +1,7 @@
 import { Localized } from "@fluent/react/compat";
 import cn from "classnames";
 import { FormApi } from "final-form";
-import React, {
-  FunctionComponent,
-  useCallback,
-  useState,
-} from "react";
+import React, { FunctionComponent, useCallback, useState } from "react";
 import { Field, Form } from "react-final-form";
 import { graphql } from "react-relay";
 
@@ -16,9 +12,6 @@ import { useMutation, withFragmentContainer } from "coral-framework/lib/relay";
 import { required } from "coral-framework/lib/validation";
 import CLASSES from "coral-stream/classes";
 import UserBoxContainer from "coral-stream/common/UserBox";
-import { ViewFullDiscussionEvent } from "coral-stream/events";
-import { SetCommentIDMutation } from "coral-stream/mutations";
-import { ArrowLeftIcon, ButtonSvgIcon } from "coral-ui/components/icons";
 import {
   CheckBox,
   Flex,