basic layout

public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

@@ -125,13 +125,20 @@ export class AddPanelWidget extends React.Component<Props, State> {
     dashboard.removePanel(this.props.panel);
   };
 
-  render() {
-    let addCopyButton;
-
-    if (this.state.copiedPanelPlugins.length === 1) {
-      addCopyButton = this.copyButton(this.state.copiedPanelPlugins[0]);
-    }
+  renderOptionLink = (icon, text, onClick) => {
+    return (
+      <div>
+        <a href="#" onClick={onClick} className="add-panel-widget__link btn-inverse">
+          <div className="add-panel-widget__icon">
+            <i className={`gicon gicon-${icon}`} />
+          </div>
+          <span>{text}</span>
+        </a>
+      </div>
+    );
+  };
 
+  render() {
     return (
       <div className="panel-container add-panel-widget-container">
         <div className="add-panel-widget">
@@ -142,13 +149,9 @@ export class AddPanelWidget extends React.Component<Props, State> {
             </button>
           </div>
           <div className="add-panel-widget__btn-container">
-            <button className="btn-success btn btn-large" onClick={this.onCreateNewPanel}>
-              Edit Panel
-            </button>
-            {addCopyButton}
-            <button className="btn-inverse btn" onClick={this.onCreateNewRow}>
-              Add Row
-            </button>
+            {this.renderOptionLink('queries', 'Add query', this.onCreateNewPanel)}
+            {this.renderOptionLink('visualization', 'Choose Panel type', this.onCreateNewPanel)}
+            {this.renderOptionLink('queries', 'Convert to row', this.onCreateNewRow)}
           </div>
         </div>
       </div>

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -26,6 +26,26 @@
   }
 }
 
+.add-panel-widget__link {
+  display: block;
+  margin: 0 8px;
+  width: 130px;
+  text-align: center;
+  padding: 8px 0;
+}
+
+.add-panel-widget__icon {
+  margin-bottom: 8px;
+
+  .gicon {
+    color: white;
+    height: 44px;
+    width: 53px;
+    position: relative;
+    left: 5px;
+  }
+}
+
 .add-panel-widget__close {
   margin-left: auto;
   background-color: transparent;
@@ -39,7 +59,7 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  flex-direction: column;
+  flex-direction: row;
 
   .btn {
     margin-bottom: 10px;

public/sass/base/_icons.scss

@@ -212,7 +212,7 @@
   padding-right: 5px;
 }
 
-.panel-editor-tabs {
+.panel-editor-tabs, .add-panel-widget__icon {
   .gicon-advanced-active {
     background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced_active.svg');
   }