address comments

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={{

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;
 }

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;
+}

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;

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;

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";
 

client/src/core/client/admin/components/ModerationReason/Reasons.tsx

@@ -7,21 +7,21 @@ 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;
   selected: GQLREJECTION_REASON_CODE | null;
   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>
 
       <>

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,