added milestone list to approved modal and fixed styling

Author: tasqat

.eslintignore

@@ -1,2 +1,4 @@
 # ignore dist directory to speed up linting after we build project
 dist/*
+# ignore test automation folder as it uses TypeScript with its own Eslint config
+connect-automation/*

src/projects/detail/components/SimplePlan/components/MilestonesApprovalNotification/MilestonesApprovalNotification.jsx

@@ -114,17 +114,45 @@ class MilestonesApprovalNotification extends React.Component {
 
     if (showAllApproved && this.state.show) {
       return (
-        <div styleName="milestones-notifications">
-          <div styleName="milestones-notifications-left">
-            <MilestoneApprovalButton
-              type="approve"
-              global
-            />
-            The following milestone(s) has been approved:  
+        <div styleName="approved-notifications">
+          <div styleName="milestones-notifications">
+            <div styleName="milestones-notifications-left">
+              <button
+                type="submit"
+                className="tc-btn"
+                styleName="tranparent-button"
+                onClick={() => {
+                  this.setState({ open: !this.state.open })
+                }}
+              >
+                <IconCollapse
+                  styleName={`icon-expand ${this.state.open ? 'open' : ''}`}
+                />
+              </button>
+              The following milestone(s) has been approved&nbsp;
+              <MilestoneApprovalButton
+                type="approve"
+              />
+            </div>
+            {renderDismissButton(() => {
+              this.setState({ show: false })
+            })}
           </div>
-          {renderDismissButton(() => {
-            this.setState({ show: false })
-          })}
+          {this.state.open && (
+            <div styleName="body">
+              {revieweds.map((item, key) => (
+                <div
+                  className="flex middle"
+                  styleName="accordion-body-item"
+                  key={key}
+                >
+                  <div styleName="body-item-one">
+                    <p styleName="bullet">{item.name}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       )
     }

src/projects/detail/components/SimplePlan/components/MilestonesApprovalNotification/MilestonesApprovalNotification.scss

@@ -51,6 +51,47 @@
     }
 }
 
+.approved-notifications {
+    .milestones-notifications-left {
+        display: flex;
+        align-items: center;
+        
+        button {
+            padding: 0;
+        }
+    }
+
+    .body {
+        padding: 20px calc(35px + 20px);
+        border-top: none;
+        background-color: white;
+
+        .accordion-body-item {
+            font-size: 90%;
+                 
+            .body-item-one {
+                flex: 20;
+            }
+        
+            .body-item-two {
+                flex: 45;
+            }
+        
+            &:first-child {
+                font-weight: normal;
+            }
+            
+            .body-item-one {
+                .bullet {
+                    display: list-item;
+                    list-style-type: disc;
+                    list-style-position: inside;            
+                }
+            }
+        }
+    }
+}
+
 .reject-notifications {
 
     .trigger {