updated add panel a bit

public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

@@ -203,22 +203,24 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     return (
       <div className="panel-container add-panel-container">
         <div className="add-panel">
-          <div className="add-panel__header">
+          <div className="add-panel__header grid-drag-handle">
             <i className="gicon gicon-add-panel" />
             <button className="add-panel__close" onClick={this.handleCloseAddPanel}>
               <i className="fa fa-close" />
             </button>
           </div>
           <div className="add-panel-btn-container">
-            <div className="gf-form-button-row">
-              <button className="btn-success btn" onClick={() => this.onCreateNewPanel(panel)} title={panel.name}>
-                Create new Panel
-              </button>
-              {addCopyButton}
-              <button className="btn-inverse btn" onClick={() => this.onCreateNewRow(row)} title={row.name}>
-                Add new Row
-              </button>
-            </div>
+            <button
+              className="btn-success btn btn-large"
+              onClick={() => this.onCreateNewPanel(panel)}
+              title={panel.name}
+            >
+              Edit Panel
+            </button>
+            {addCopyButton}
+            <button className="btn-inverse btn" onClick={() => this.onCreateNewRow(row)} title={row.name}>
+              Add Row
+            </button>
           </div>
         </div>
       </div>

public/sass/components/_panel_add_panel.scss

@@ -4,8 +4,6 @@
 
 .add-panel {
   height: 100%;
-  //display: flex;
-  //flex-direction: column;
 }
 
 .add-panel__header {
@@ -15,10 +13,17 @@
   display: flex;
   align-items: center;
   width: 100%;
+  cursor: move;
+
   .gicon {
     font-size: 30px;
     margin-right: $spacer;
   }
+
+  &:hover {
+    transition: background-color 0.1s ease-in-out;
+    background-color: $panel-header-hover-bg;
+  }
 }
 
 .add-panel__close {
@@ -29,63 +34,14 @@
   margin-right: -10px;
 }
 
-.add-panel__items {
-  padding: 3px 8px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  overflow: auto;
-  height: 100%;
-  align-content: flex-start;
-  justify-content: space-around;
-  position: relative;
-}
-
-.add-panel__item {
-  background: $card-background;
-  box-shadow: $card-shadow;
-
-  border-radius: 3px;
-  padding: $spacer/3 $spacer;
-  width: 31%;
-  height: 60px;
-  text-align: center;
-  margin: $gf-form-margin;
-  cursor: pointer;
-
-  &.active,
-  &:hover {
-    background: $card-background-hover;
-  }
-}
-
-.add-panel__item-name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  font-size: $font-size-sm;
-}
-
-.add-panel__item-img {
-  height: calc(100% - 15px);
-}
-
-.add-panel__searchbar {
-  width: 100%;
-  margin-bottom: 10px;
-  margin-top: 7px;
-}
-
-.add-panel__no-panels {
-  color: $text-color-weak;
-  font-style: italic;
-  width: 100%;
-  padding: 3px 8px;
-}
-
 .add-panel-btn-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
+  flex-direction: column;
+
+  .btn {
+    margin-bottom: 10px;
+  }
 }