feat: style modal closing (#445)

.eslintrc

@@ -3,7 +3,10 @@
   "plugins": ["prettier"],
   "globals": {
     "URLSearchParams": false,
-    "vi": false
+    "vi": false,
+    "defineProps": false,
+    "defineEmits": false,
+    "withDefaults": false
   },
   "parser": "vue-eslint-parser",
   "parserOptions": {

CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## v2.0.11
+
+- Update linting to understand Vue globals
+- Style the close button in `Modal`s
+- Add new icons for the `Icon` component
+  - `CircleCheck`
+  - `CircleClose`
+  - `CircleExclamation`
+  - `Close`
+
 ## v2.0.10
 
 - Downgrade Vue to 3.2.32

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/Icon/Icon.vue

@@ -13,13 +13,7 @@
 
 <script setup lang="ts">
 import { Size } from '@/types';
-import {
-  computed,
-  defineAsyncComponent,
-  defineProps,
-  watch,
-  withDefaults
-} from 'vue';
+import { computed, defineAsyncComponent, watch } from 'vue';
 
 import { IconName, IconSize } from './types';
 

src/components/Icon/types.ts

@@ -17,9 +17,13 @@ export const IconName = {
   BELL: 'Bell',
   BULLHORN: 'Bullhorn',
   CAR: 'Car',
+  CIRCLE_CHECK: 'CircleCheck',
+  CIRCLE_CLOSE: 'CircleClose',
   CIRCLE_EMPTY: 'CircleEmpty',
+  CIRCLE_EXCLAMATION: 'CircleExclamation',
   CIRCLE_QUESTION: 'CircleQuestion',
   CIRCLE_USER: 'CircleUser',
+  CLOSE: 'Close',
   CLOUD_DATA: 'CloudData',
   CODE: 'Code',
   COIN: 'Coin',

src/components/Modal/Modal.vue

@@ -3,15 +3,20 @@
     :modal="showMask"
     :closable="closable"
     :pt="{
-      root: { class: `relative bg-white p-10 rounded-xl shadow-large` },
+      root: {
+        class: `relative bg-white p-10 rounded-xl shadow-large text-gray-800`
+      },
       mask: {
         style: 'animation: fadeIn 100ms;', // This is a hack. Without it the styles flash.
         class: 'backdrop-blur-sm backdrop-brightness-[.80]'
       },
       header: { class: 'flex flex-col items-start justify-center mb-4' },
       content: { class: 'type-base-400' },
       footer: { class: 'flex justify-end mt-8 gap-4' },
-      closeButton: { class: 'absolute top-6 right-6 text-black' },
+      closeButton: {
+        class:
+          'absolute top-4 right-4 hover:bg-gray-50 active:bg-gray-100 p-2 rounded-full transition duration-300'
+      },
       transition: {
         enterFromClass: 'opacity-0 scale-95',
         enterActiveClass: 'transition duration-250 ease-out',
@@ -31,7 +36,7 @@
     @hide="emits('close')"
   >
     <template #closeicon>
-      <XmarkLarge />
+      <Icon icon="Close" size="xxl" />
     </template>
 
     <template #header>
@@ -61,15 +66,8 @@
 <script setup lang="ts">
 import { Icon } from '@/components/Icon';
 import { IconName } from '@/components/Icon/types';
-import XmarkLarge from '@/components/Icons/XmarkLarge.vue';
 import Dialog, { DialogProps } from 'primevue/dialog';
-import {
-  computed,
-  defineEmits,
-  defineProps,
-  useSlots,
-  withDefaults
-} from 'vue';
+import { computed, useSlots } from 'vue';
 
 import { ModalColor, ModalVariant } from './types';