Restyle oidc device login views

dashboard/src/views/OidcDeviceConfirmView.vue

@@ -1,5 +1,7 @@
 <script setup>
 
+import { Button } from '@cloudron/pankow';
+
 import PublicPageLayout from '../components/PublicPageLayout.vue';
 
 // coming from oidc_device_confirm.html server-side rendered
@@ -11,63 +13,48 @@ const form = window.cloudron.form;
 
 <template>
   <PublicPageLayout>
-    <div style="max-width: 300px;">
-      <h2>Confirm Device</h2>
-      <p>
-        <strong>{{ clientName }}</strong>
-        <br/><br/>
-        The following code should be displayed on your device<br/><br/>
-        <code class="user-code">{{ userCode }}</code>
-        <br/><br/>
-        <small>If you did not initiate this action or the code does not match, please close this window or click abort.</small>
-      </p>
-      <div v-html="form" class="device-form"></div>
-      <button type="submit" form="op.deviceConfirmForm" class="device-submit" autofocus>Continue</button>
-      <div class="help">
-        <button type="submit" form="op.deviceConfirmForm" value="yes" name="abort" class="abort-link">[ Abort ]</button>
-      </div>
+    <div>
+      <h2>Authorize {{ clientName }}</h2>
+      <p>Verify the code below</p>
+      <div class="user-code">{{ userCode }}</div>
+      <p class="code-hint">If you did not initiate this action or the code does not match, please close this window or cancel.</p>
+
+      <!-- injected form for submission from oidcserver.js -->
+      <div v-html="form"></div>
+
+      <button class="pankow-button" type="submit" form="op.deviceConfirmForm">Continue</button>
+      <button type="submit" form="op.deviceConfirmForm" value="yes" name="abort" class="cancel-button">Cancel</button>
     </div>
   </PublicPageLayout>
 </template>
 
 <style scoped>
+
+p {
+  padding: 10px 0;
+}
+
 .user-code {
-  font-size: 2em;
+  font-size: 26px;
+  font-family: monospace;
 }
-.device-submit {
-  width: 100%;
-  display: block;
-  margin-top: 12px;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 700;
-  height: 36px;
-  padding: 0 8px;
-  border: 0;
-  color: #fff;
-  background-color: #4d90fe;
-  cursor: pointer;
-  border-radius: 4px;
-}
-.device-submit:hover {
-  background-color: #357ae8;
-}
-.help {
-  width: 100%;
+
+.code-hint {
   font-size: 12px;
-  text-align: center;
-  margin-top: 8px;
 }
-.abort-link {
+
+.cancel-button {
+  margin-left: 15px;
   background: none;
   border: none;
   padding: 0;
-  font: inherit;
   cursor: pointer;
-  color: #666;
-  opacity: 0.6;
+  font-size: 12px;
+  color: var(--pankow-color-dark);
 }
-.abort-link:hover {
-  opacity: 1;
+
+.cancel-button:hover {
+  color: var(--pankow-color-primary-hover);
 }
+
 </style>