update based on designs

client/src/core/client/admin/components/ModerationReason/DetailedExplanation.css

@@ -1,5 +1,5 @@
 .detailedExplanation {
-  margin-bottom: var(--spacing-3);
+  margin-bottom: var(--spacing-2);
 }
 
 .explanationLabel {

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

@@ -19,17 +19,20 @@ export interface Props {
   explanationValue: string | null;
   customReasonValue: string | null;
   onBack: () => void;
+  linkClassName?: string;
 }
 
-const AddExplanationButton: FunctionComponent<{ onClick: () => void }> = ({
-  onClick,
-}) => (
+const AddExplanationButton: FunctionComponent<{
+  onClick: () => void;
+  linkClassName?: string;
+}> = ({ onClick, linkClassName }) => (
   <Localized id="common-moderationReason-addExplanation">
     <Button
       onClick={onClick}
-      className={commonStyles.optionAction}
-      variant="none"
-      color="success"
+      className={cn(linkClassName, commonStyles.optionAction)}
+      variant="flat"
+      color="primary"
+      underline
     >
       + Add explanation
     </Button>
@@ -43,15 +46,20 @@ const DetailedExplanation: FunctionComponent<Props> = ({
   onBack,
   customReasonValue,
   onChangeCustomReason,
+  linkClassName,
 }) => {
-  const [showAddExplanation, setShowAddExplanation] = useState(
-    !!(code === GQLREJECTION_REASON_CODE.OTHER)
-  );
+  const [showAddExplanation, setShowAddExplanation] = useState(false);
 
   return (
     <>
       <Localized id="common-moderationReason-changeReason">
-        <Button className={styles.changeReason} variant="none" onClick={onBack}>
+        <Button
+          className={cn(linkClassName, styles.changeReason)}
+          variant="flat"
+          onClick={onBack}
+          color="primary"
+          underline
+        >
           &lt; Change reason
         </Button>
       </Localized>

client/src/core/client/admin/components/ModerationReason/ModerationReason.css

@@ -13,9 +13,6 @@
 .optionAction {
   padding: 0;
   margin: var(--spacing-1) 0;
-  color: $colors-teal-600;
-  font-weight: var(--font-weight-secondary-regular);
-  text-decoration: underline;
 }
 
 .rejectButton {

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

@@ -18,12 +18,14 @@ export interface Props {
   onCancel: () => void;
   onReason: (reason: Reason) => void;
   id: string;
+  linkClassName?: string;
 }
 
 const ModerationReason: FunctionComponent<Props> = ({
   onCancel,
   onReason,
   id,
+  linkClassName,
 }) => {
   const [view, setView] = useState<"REASON" | "EXPLANATION">("REASON");
   const [reasonCode, setReasonCode] = useState<ReasonCode | null>(null);
@@ -75,6 +77,7 @@ const ModerationReason: FunctionComponent<Props> = ({
           onChangeExplanation={setDetailedExplanation}
           customReasonValue={otherCustomReason}
           onChangeCustomReason={setOtherCustomReason}
+          linkClassName={linkClassName}
         />
       )}
 

client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.css

@@ -0,0 +1,3 @@
+.link {
+  color: var(--palette-primary-600);
+}

client/src/core/client/stream/tabs/Comments/Comment/ModerationDropdown/ModerationDropdownContainer.tsx

@@ -23,6 +23,8 @@ import UserBanPopoverContainer from "../UserBanPopover/UserBanPopoverContainer";
 import ModerationActionsContainer from "./ModerationActionsContainer";
 import RejectCommentMutation from "./RejectCommentMutation";
 
+import styles from "./ModerationDropdownContainer.css";
+
 export type ModerationDropdownView =
   | "MODERATE"
   | "REJECT_REASON"
@@ -108,6 +110,7 @@ const ModerationDropdownContainer: FunctionComponent<Props> = ({
           id={comment.id}
           onReason={reject}
           onCancel={onDismiss}
+          linkClassName={styles.link}
         />
       ) : (
         <UserBanPopoverContainer