Move add collection pane to React (#486)

* Move add collection pane to React

* Add feature flag

* fix unit tests

* FIx merge conflicts and address comments

* Resolve merge conflicts

* Address comments

* Fix e2e test failure

* Update test snapshots

* Update test snapshots

src/Explorer/Panes/PanelComponent.less

@@ -1,12 +1,58 @@
 @import "../../../less/Common/Constants";
 
-.panelContentContainer {
+.panelFormWrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
 
   .panelMainContent {
     flex-grow: 1;
+    padding: 0 34px;
+    margin: 20px 0;
+    overflow: auto;
+
+    & > * {
+      margin-bottom: @DefaultSpace;
+
+      & > * {
+        margin-bottom: @SmallSpace;
+      }
+    }
+
+    .panelInfoIcon {
+      font-size: @mediumFontSize;
+      width: @mediumFontSize;
+      margin: auto 0 auto @SmallSpace;
+      color: @InfoIconColor;
+      cursor: default;
+      vertical-align: middle;
+    }
+
+    .panelTextBold {
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .panelTextField {
+      font-size: @mediumFontSize;
+      border: 1px solid #605e5c;
+      color: #000;
+      padding: 4px 10px;
+      width: @newCollectionPaneInputWidth;
+    }
+
+    .panelRadioBtn {
+      margin: 0;
+    }
+
+    .panelRadioBtnLabel {
+      font-size: @mediumFontSize;
+      padding: 0 @LargeSpace 0 @SmallSpace;
+    }
+
+    .collapsibleSection {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -16,26 +62,30 @@
   font-weight: 400;
 }
 
-.panelWarningErrorContainer {
+.panelInfoErrorContainer {
   background-color: @BaseLow;
   padding: @DefaultSpace;
   display: inline-flex;
-  margin-bottom: 24px;
+  margin: 20px 34px 0 34px;
 
-  .panelWarningIcon {
+  i {
     font-size: @WarningErrorIconSize;
     width: @WarningErrorIconSize;
-    margin: auto 0 auto @SmallSpace;
+    margin-left: @SmallSpace;
+  }
+
+  .panelWarningIcon {
     color: @WarningIconColor;
   }
 
   .panelErrorIcon {
-    font-size: @WarningErrorIconSize;
-    width: @WarningErrorIconSize;
-    margin: auto 0 auto @SmallSpace;
     color: @ErrorIconColor;
   }
 
+  .panelLargeInfoIcon {
+    color: @InfoIconColor;
+  }
+
   .panelWarningErrorDetailsLinkContainer {
     display: flex;
     flex-direction: column;
@@ -48,10 +98,19 @@
   }
 }
 
-.panelFooter button {
-  height: 30px;
+.panelFooter {
+  padding: 20px 34px;
+  border-top: solid 1px #bbbbbb;
+
+  & button {
+    height: 30px;
+  }
 }
 
 .deleteCollectionFeedback {
   margin-top: 12px;
 }
+
+.panelGroupSpacing > * {
+  margin-bottom: @SmallSpace;
+}