Some suggestions from PR.

src/shared/components/app/navbar.tsx

@@ -241,7 +241,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                         ),
                       })}
                     >
-                      <Icon icon="edit" />
+                      <Icon icon="clipboard" />
                       {this.state.unreadApplicationCount > 0 && (
                         <span class="mx-1 badge badge-light">
                           {numToSI(this.state.unreadApplicationCount)}
@@ -417,7 +417,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           ),
                         })}
                       >
-                        <Icon icon="edit" />
+                        <Icon icon="clipboard" />
                         {this.state.unreadApplicationCount > 0 && (
                           <span class="mx-1 badge badge-light">
                             {numToSI(this.state.unreadApplicationCount)}

src/shared/components/common/registration-application.tsx

@@ -17,6 +17,7 @@ interface RegistrationApplicationProps {
 
 interface RegistrationApplicationState {
   denyReason?: string;
+  denyExpanded: boolean;
 }
 
 export class RegistrationApplication extends Component<
@@ -25,6 +26,7 @@ export class RegistrationApplication extends Component<
 > {
   private emptyState: RegistrationApplicationState = {
     denyReason: this.props.application.registration_application.deny_reason,
+    denyExpanded: false,
   };
 
   constructor(props: any, context: any) {
@@ -63,23 +65,34 @@ export class RegistrationApplication extends Component<
                   #
                   <PersonListing person={a.admin} />
                 </T>
+                <div>
+                  {i18n.t("deny_reason")}:{" "}
+                  <div
+                    className="md-div d-inline-flex"
+                    dangerouslySetInnerHTML={mdToHtml(ra.deny_reason || "")}
+                  />
+                </div>
               </div>
             )}
           </div>
         )}
 
-        <div class="form-group row">
+        {this.state.denyExpanded && (
-          <label class="col-sm-2 col-form-label">{i18n.t("deny_reason")}</label>
+          <div class="form-group row">
-          <div class="col-sm-10">
+            <label class="col-sm-2 col-form-label">
-            <MarkdownTextArea
+              {i18n.t("deny_reason")}
-              initialContent={this.state.denyReason}
+            </label>
-              onContentChange={this.handleDenyReasonChange}
+            <div class="col-sm-10">
-              hideNavigationWarnings
+              <MarkdownTextArea
-            />
+                initialContent={this.state.denyReason}
+                onContentChange={this.handleDenyReasonChange}
+                hideNavigationWarnings
+              />
+            </div>
           </div>
-        </div>
+        )}
         <button
-          className="btn btn-secondary mr-2"
+          className="btn btn-secondary mr-2 my-2"
           onClick={linkEvent(this, this.handleApprove)}
           aria-label={i18n.t("approve")}
         >
@@ -99,6 +112,7 @@ export class RegistrationApplication extends Component<
   }
 
   handleApprove(i: RegistrationApplication) {
+    i.setState({ denyExpanded: false });
     let form: ApproveRegistrationApplication = {
       id: i.props.application.registration_application.id,
       deny_reason: "",
@@ -111,15 +125,20 @@ export class RegistrationApplication extends Component<
   }
 
   handleDeny(i: RegistrationApplication) {
-    let form: ApproveRegistrationApplication = {
+    if (i.state.denyExpanded) {
-      id: i.props.application.registration_application.id,
+      i.setState({ denyExpanded: false });
-      approve: false,
+      let form: ApproveRegistrationApplication = {
-      deny_reason: i.state.denyReason,
+        id: i.props.application.registration_application.id,
-      auth: authField(),
+        approve: false,
-    };
+        deny_reason: i.state.denyReason,
-    WebSocketService.Instance.send(
+        auth: authField(),
-      wsClient.approveRegistrationApplication(form)
+      };
-    );
+      WebSocketService.Instance.send(
+        wsClient.approveRegistrationApplication(form)
+      );
+    } else {
+      i.setState({ denyExpanded: true });
+    }
   }
 
   handleDenyReasonChange(val: string) {

src/shared/components/common/symbols.tsx

@@ -12,6 +12,9 @@ export const SYMBOLS = (
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <defs>
+      <symbol id="icon-clipboard" viewBox="0 0 24 24">
+        <path d="M7 5c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h6c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414h1c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM9 1c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414h-1c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h12c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-1c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM9 3h6v2h-6z"></path>
+      </symbol>
       <symbol id="icon-shield" viewBox="0 0 24 24">
         <path d="M12 20.862c-1.184-0.672-4.42-2.695-6.050-5.549-0.079-0.138-0.153-0.276-0.223-0.417-0.456-0.911-0.727-1.878-0.727-2.896v-6.307l7-2.625 7 2.625v6.307c0 1.018-0.271 1.985-0.726 2.897-0.070 0.14-0.145 0.279-0.223 0.417-1.631 2.854-4.867 4.876-6.050 5.549zM12.447 22.894c0 0 4.989-2.475 7.34-6.589 0.096-0.168 0.188-0.34 0.276-0.515 0.568-1.135 0.937-2.408 0.937-3.79v-7c0-0.426-0.267-0.79-0.649-0.936l-8-3c-0.236-0.089-0.485-0.082-0.702 0l-8 3c-0.399 0.149-0.646 0.527-0.649 0.936v7c0 1.382 0.369 2.655 0.938 3.791 0.087 0.175 0.179 0.346 0.276 0.515 2.351 4.114 7.34 6.589 7.34 6.589 0.292 0.146 0.62 0.136 0.894 0z"></path>
       </symbol>