Nicer UI for repository commands

Screenshot https://imgur.com/a/v5ZXK4x

Bug: Issue 16115
Release-Notes: skip
Change-Id: Ida9f3efc180b8fcd2fd589bc2cb5659dcd10c32d

polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands.ts

diff --git a/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands.ts b/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands.ts
index 777120a..a0a358a 100644
--- a/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands.ts
+++ b/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands.ts
@@ -85,8 +85,11 @@
       subpageStyles,
       sharedStyles,
       css`
-        #form gr-button {
-          margin-bottom: var(--spacing-xxl);
+        #form h2 {
+          margin-top: var(--spacing-xxl);
+        }
+        p {
+          padding: var(--spacing-m) 0;
         }
       `,
     ];
@@ -100,27 +103,44 @@
           Loading...
         </div>
         <div id="loadedContent" class=${this.loading ? 'loading' : ''}>
-          <h2 id="options" class="heading-2">Command</h2>
           <div id="form">
-            <h3 class="heading-3">Create change</h3>
-            <gr-button
-              ?loading=${this.creatingChange}
-              @click=${() => {
-                this.createNewChange();
-              }}
-            >
-              Create change
-            </gr-button>
-            <h3 class="heading-3">Edit repo config</h3>
-            <gr-button
-              id="editRepoConfig"
-              ?loading=${this.editingConfig}
-              @click=${() => {
-                this.handleEditRepoConfig();
-              }}
-            >
-              Edit repo config
-            </gr-button>
+            <h2 class="heading-2">Create change</h2>
+            <div>
+              <p>
+                Creates an empty work-in-progress change that can be used to
+                edit files online and send the modifications for review.
+              </p>
+            </div>
+            <div>
+              <gr-button
+                ?loading=${this.creatingChange}
+                @click=${() => {
+                  this.createNewChange();
+                }}
+              >
+                Create change
+              </gr-button>
+            </div>
+            <h2 class="heading-2">Edit repo config</h2>
+            <div>
+              <p>
+                Creates a work-in-progress change that allows to edit the
+                <code>project.config</code> file in the
+                <code>refs/meta/config</code> branch and send the modifications
+                for review.
+              </p>
+            </div>
+            <div>
+              <gr-button
+                id="editRepoConfig"
+                ?loading=${this.editingConfig}
+                @click=${() => {
+                  this.handleEditRepoConfig();
+                }}
+              >
+                Edit repo config
+              </gr-button>
+            </div>
             ${this.renderRepoGarbageCollector()}
             <gr-endpoint-decorator name="repo-command">
               <gr-endpoint-param name="config" .value=${this.repoConfig}>

polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands_test.ts

diff --git a/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands_test.ts b/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands_test.ts
index 7e86e3d..85aaa39 100644
--- a/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands_test.ts
+++ b/polygerrit-ui/app/elements/admin/gr-repo-commands/gr-repo-commands_test.ts
@@ -43,21 +43,39 @@
           <h1 class="heading-1" id="Title">Repository Commands</h1>
           <div class="loading" id="loading">Loading...</div>
           <div class="loading" id="loadedContent">
-            <h2 class="heading-2" id="options">Command</h2>
             <div id="form">
-              <h3 class="heading-3">Create change</h3>
-              <gr-button aria-disabled="false" role="button" tabindex="0">
-                Create change
-              </gr-button>
-              <h3 class="heading-3">Edit repo config</h3>
-              <gr-button
-                aria-disabled="false"
-                id="editRepoConfig"
-                role="button"
-                tabindex="0"
-              >
-                Edit repo config
-              </gr-button>
+              <h2 class="heading-2">Create change</h2>
+              <div>
+                <p>
+                  Creates an empty work-in-progress change that can be used to
+                  edit files online and send the modifications for review.
+                </p>
+              </div>
+              <div>
+                <gr-button aria-disabled="false" role="button" tabindex="0">
+                  Create change
+                </gr-button>
+              </div>
+              <h2 class="heading-2">Edit repo config</h2>
+              <div>
+                <p>
+                  Creates a work-in-progress change that allows to edit the
+                  <code> project.config </code>
+                  file in the
+                  <code> refs/meta/config </code>
+                  branch and send the modifications for review.
+                </p>
+              </div>
+              <div>
+                <gr-button
+                  aria-disabled="false"
+                  id="editRepoConfig"
+                  role="button"
+                  tabindex="0"
+                >
+                  Edit repo config
+                </gr-button>
+              </div>
               <gr-endpoint-decorator name="repo-command">
                 <gr-endpoint-param name="config"> </gr-endpoint-param>
                 <gr-endpoint-param name="repoName"> </gr-endpoint-param>
@@ -85,7 +103,8 @@
             </div>
           </gr-dialog>
         </gr-overlay>
-      `
+      `,
+      {ignoreTags: ['p']}
     );
   });