feat(planner): add close button in planner settings modal (#3702)

* Add close button in planner

* Removing first child styling for planner settings section

Author: jloh02

website/src/views/planner/PlannerContainer/PlannerContainer.tsx

@@ -134,6 +134,8 @@ export class PlannerContainerComponent extends PureComponent<Props, State> {
 
   closeAddCustomData = () => this.setState({ showCustomModule: null });
 
+  closeSettingsModal = () => this.setState({ showSettings: false });
+
   renderHeader() {
     const modules = [...this.props.iblocsModules, ...flatten(flatMap(this.props.modules, values))];
     const credits = getTotalMC(modules);
@@ -261,12 +263,8 @@ export class PlannerContainerComponent extends PureComponent<Props, State> {
           </div>
         </DragDropContext>
 
-        <Modal
-          isOpen={this.state.showSettings}
-          onRequestClose={() => this.setState({ showSettings: false })}
-          animate
-        >
-          <PlannerSettings />
+        <Modal isOpen={this.state.showSettings} onRequestClose={this.closeSettingsModal} animate>
+          <PlannerSettings onCloseButtonClicked={this.closeSettingsModal} />
         </Modal>
 
         <Modal

website/src/views/planner/PlannerSettings.scss

@@ -2,8 +2,11 @@
 @import 'variables';
 
 .settings {
+  display: flex;
+  flex-direction: column;
+
   section {
-    margin-bottom: 2rem;
+    margin-bottom: 1rem;
 
     &:last-child {
       margin-bottom: 0;

website/src/views/planner/PlannerSettings.tsx

@@ -13,6 +13,7 @@ import {
 } from 'actions/planner';
 import ExternalLink from 'views/components/ExternalLink';
 import Toggle from 'views/components/Toggle';
+import CloseButton from 'views/components/CloseButton';
 import { State } from 'types/state';
 import styles from './PlannerSettings.scss';
 
@@ -23,6 +24,7 @@ type Props = {
   readonly ignorePrereqCheck?: boolean;
 
   // Actions
+  readonly onCloseButtonClicked: () => void;
   readonly setMinYear: (str: string) => void;
   readonly setMaxYear: (str: string) => void;
   readonly setIBLOCs: (boolean: boolean) => void;
@@ -66,6 +68,9 @@ export const PlannerSettingsComponent: React.FC<Props> = (props) => {
 
   return (
     <div className={styles.settings}>
+      <div className={styles.closeButton}>
+        <CloseButton onClick={props.onCloseButtonClicked} />
+      </div>
       <section>
         <h2 className={styles.label}>Matriculated in</h2>
         <ul className={styles.years}>