CLDR-18165 cla: ui: clean up UI a bit

- use <a-row> and <a-col>
- explain error cases

tools/cldr-apps/js/src/esm/cldrComponents.mjs

@@ -24,6 +24,7 @@ import {
   Button,
   Card,
   Checkbox,
+  Col,
   Collapse,
   CollapsePanel,
   Form,
@@ -33,6 +34,7 @@ import {
   Popover,
   Progress,
   Radio,
+  Row,
   Select,
   Spin,
   Steps,
@@ -62,6 +64,7 @@ function setup(app) {
   app.component("a-button", Button);
   app.component("a-card", Card);
   app.component("a-checkbox", Checkbox);
+  app.component("a-col", Col);
   app.component("a-collapse-panel", CollapsePanel);
   app.component("a-collapse", Collapse);
   app.component("a-form-item", Form.Item);
@@ -77,6 +80,7 @@ function setup(app) {
   app.component("a-progress", Progress);
   app.component("a-radio-group", Radio.Group);
   app.component("a-radio", Radio);
+  app.component("a-row", Row);
   app.component("a-select", Select);
   app.component("a-spin", Spin);
   app.component("a-step", Steps.Step);

tools/cldr-apps/js/src/views/SignCla.vue

@@ -2,52 +2,60 @@
   <div class="clapage">
     <a-spin v-if="loading" :delay="500" />
 
-    <!-- try GitHub first -->
+    <!-- First, an exception case: logged in with GitHub but the CLA isn't signed! -->
     <template
       v-if="
         !loading && needCla && githubLoginUrl && !skipGithub && githubSessionId
       "
     >
+      <h3>CLA Signature Not Found</h3>
+
       <p>
-        .. we see you are github user @{{ githubSessionId }} .. BUT did not
-        detect CLA
-      </p>
-      <p>
-        You can Sign the CLA by
-        <a href="https://cla-assistant.io/unicode-org/.github">Clicking here</a>
-      </p>
-      <p>
-        Don't have a GitHub account or want to sign the CLA manually?
-        <a-button @click="doSkipGitHub">Sign Manually</a-button>
-      </p>
-      <p>
-        If this is the wrong account, you can
-        <a :href="githubReloginUrl">Login w/ Github</a> to login with a
-        different id.
+        Your GitHub account, @{{ githubSessionId }}, was not detected as signing
+        the <a href="https://cla-assistant.io/unicode-org/.github">CLA</a>.
+        </p>
+
+        <p>Note that it
+        is possible that you have signed, but that our records are out of date.
       </p>
+      <a-row>
+        <a-col :span="8">
+          <a-button :href="githubReloginUrl">Change GitHub account</a-button>
+        </a-col>
+        <a-col :span="8">
+          <a-button @click="doSkipGitHub">Sign Manually</a-button>
+        </a-col>
+        <a-col :span="8">
+          <a-button href="mailto:cldr-cla@unicode.org">Contact Us</a-button>
+        </a-col>
+      </a-row>
     </template>
+
+    <!-- try GitHub first: This is the FIRST panel people will see -->
     <template v-else-if="!loading && needCla && githubLoginUrl && !skipGithub">
-      <p>
-        ... offer to sign w/ github ..
-        <a :href="githubLoginUrl">Login w/ Github</a>
-      </p>
-      <p>If you dont have a github login you can:</p>
-      <ol>
-        <li>
-          Sign up at
-          <a href="https://github.com/signup">https://github.com/signup</a>
-        </li>
-        <li>
-          Sign the CLA by
-          <a href="https://cla-assistant.io/unicode-org/.github"
-            >Clicking here</a
-          >
-        </li>
-        <li>It will take us some time</li>
-      </ol>
+      <a-row>
+        <a-col :span="12">
+          <p>
+            Have you already
+            <a href="https://cla-assistant.io/unicode-org/.github"
+              >signed the CLA</a
+            >
+            with your GitHub account? <br />
+            If so, simply click this button so we can check it:
+          </p>
+          <a-button :href="githubLoginUrl"> Log in with GitHub</a-button>
+        </a-col>
+        <a-col :span="12">
+          <p>
+            Don't have a GitHub account or want to sign the CLA manually?
+            <br />Click this button instead:
+          </p>
+          <a-button @click="doSkipGitHub">Sign Manually</a-button>
+        </a-col>
+      </a-row>
     </template>
 
-    <!-- "manual" sign -->
+    <!-- "Manual" sign (or successful sign) - this is the "details" page. -->
     <template v-else-if="!loading">
       <a-alert
         v-if="needCla"