fix: update CSS to correctly match default nova styles (#101)

JeffBeltran · Mar 8, 2024 · 67424e7 · 67424e7
1 parent 649ff17
commit 67424e7
Show file tree

Hide file tree

Showing 5 changed files with 387 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -33,13 +33,13 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-vue": "^9.1.1",
     "laravel-mix": "^6.0.49",
+    "laravel-nova-ui": "^0.4.12",
+    "luxon": "^3.4.4",
     "postcss": "^8.4.14",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
     "semantic-release": "^21.0.2",
     "vue-loader": "^17.1.1"
   },
-  "dependencies": {
-    "luxon": "^3.3.0"
-  }
+  "dependencies": {}
 }
diff --git a/resources/js/components/CreateTokenModal.vue b/resources/js/components/CreateTokenModal.vue
@@ -22,7 +22,7 @@
                 list="name-list"
                 type="text"
                 placeholder="Name"
-                class="w-full form-control form-input form-input-bordered"
+                class="w-full form-control form-input form-control-bordered"
                 required
               />
             </div>
@@ -38,7 +38,7 @@
                 v-model="tokenAbilities"
                 type="text"
                 :placeholder="options.defaultAbilities"
-                class="w-full form-control form-input form-input-bordered"
+                class="w-full form-control form-input form-control-bordered"
               />
               <p>
                 {{ __("Comma separated list of abilities to apply to token.") }}

diff --git a/resources/js/components/CreatedTokenModal.vue b/resources/js/components/CreatedTokenModal.vue
@@ -8,24 +8,24 @@
         <ModalContent>
           <div class="flex flex-col">
             <div class="flex flex-col space-y-2">
-              <div class="text-lg bg-gray-100 rounded p-4">
-                <button
-                  v-tooltip="__('Copy to clipboard')"
-                  type="button"
-                  class="flex items-center justify-between w-full hover:bg-gray-50 dark:hover:bg-gray-900 text-gray-500 dark:text-gray-400 hover:text-gray-500 active:text-gray-600 rounded-lg px-1 -mx-1"
-                  @click.prevent.stop="copyValueToClipboard(newToken)"
-                >
-                  <span ref="theFieldValue">
-                    {{ newToken }}
-                  </span>
-
-                  <Icon
-                    class="text-gray-500 dark:text-gray-400 ml-1"
-                    :solid="true"
-                    type="clipboard"
-                    width="14"
-                  />
-                </button>
+              <div class="flex items-center justify-between space-x-2">
+                <input
+                  readonly
+                  class="w-full form-control form-input"
+                  type="text"
+                  :value="newToken"
+                  data-disabled
+                />
+                <IconButton
+                  v-tooltip="{
+                    content: __('Copied to clipboard'),
+                    triggers: ['click'],
+                    placement: 'right',
+                    autoHide: true,
+                  }"
+                  icon-type="clipboard"
+                  @click.prevent.stop="copyValueToClipboard"
+                />
               </div>
               <HelpText class="mt-2 help-text-error">
                 {{
@@ -64,19 +64,19 @@ export default {
     handleConfirmed() {
       this.$emit("confirmed");
     },
-    copyValueToClipboard(value) {
+    copyValueToClipboard() {
       if (navigator.clipboard) {
-        navigator.clipboard.writeText(value);
+        navigator.clipboard.writeText(this.newToken);
       } else if (window.clipboardData) {
-        window.clipboardData.setData("Text", value);
+        window.clipboardData.setData("Text", this.newToken);
       } else {
         const input = document.createElement("input");
         const [scrollTop, scrollLeft] = [
           document.documentElement.scrollTop,
           document.documentElement.scrollLeft,
         ];
         document.body.appendChild(input);
-        input.value = value;
+        input.value = this.newToken;
         input.focus();
         input.select();
         document.documentElement.scrollTop = scrollTop;

diff --git a/resources/js/components/DeleteTokenModal.vue b/resources/js/components/DeleteTokenModal.vue
@@ -27,17 +27,26 @@
           >
             {{ __("Cancel") }}
           </LinkButton>
-          <DangerButton type="button" @click.prevent="handleConfirmed">
+          <NovaButton
+            type="submit"
+            state="danger"
+            @click.prevent="handleConfirmed"
+          >
             {{ __("Revoke Token") }}
-          </DangerButton>
+          </NovaButton>
         </div>
       </ModalFooter>
     </div>
   </Modal>
 </template>
 
 <script>
+import { Button as NovaButton } from "laravel-nova-ui";
+
 export default {
+  components: {
+    NovaButton,
+  },
   props: {
     tokenName: {
       required: true,