More cosmetic improvements

frontend_vue/src/components/ManageToken.vue

@@ -165,9 +165,9 @@ async function fetchTokenData() {
 }
 
 async function loadComponent() {
-  // const toke = 'cc'
+  const toke = 'cc'
   dynamicComponent.value = await defineAsyncComponent(
-    () => import(`@/components/tokens/${getTokenType.value}/ManageToken.vue`)
+    () => import(`@/components/tokens/${toke}/ManageToken.vue`)
   );
 }
 

frontend_vue/src/components/base/BaseContentBlock.spec.ts

@@ -7,8 +7,9 @@ describe('BaseContentBlock', () => {
   it('renders text correctly', () => {
     const label = 'Card Name';
     const text = 'John Doe';
+    const iconName = 'credit-card';
     const wrapper = mount(BaseContentBlock, {
-      props: { label, text, copyContent: true },
+      props: { label, text, iconName, copyContent: true },
       global: {
         stubs: { BaseCopyButton, FontAwesomeIcon },
       },
@@ -21,8 +22,9 @@ describe('BaseContentBlock', () => {
   it('emits click event when button is clicked', async () => {
     const label = 'Card Name';
     const text = 'John Doe';
+    const iconName = 'credit-card';
     const wrapper = mount(BaseContentBlock, {
-      props: { label, text, copyContent: true },
+      props: { label, text, iconName, copyContent: true },
       global: {
         stubs: { BaseCopyButton, FontAwesomeIcon },
       },
@@ -35,9 +37,10 @@ describe('BaseContentBlock', () => {
 
 	it('does not render copy if copyContent is false', async () => {
     const label = 'Card Name';
-    const text = 'John Dode';
+    const text = 'John Dude';
+    const iconName = 'credit-card';
     const wrapper = mount(BaseContentBlock, {
-      props: { label, text, copyContent: false },
+      props: { label, text, iconName, copyContent: false },
       global: {
         stubs: { BaseCopyButton },
       },

frontend_vue/src/components/base/BaseContentBlock.vue

@@ -1,16 +1,14 @@
 <template>
 	<span
-		class="flex items-center justify-between gap-16 md:gap-24 py-8 px-[1em] text-grey-500 border border-grey-200 rounded-xl hover:bg-white hover:text-grey-700">
-		<div>
-			<span class="block text-xs font-medium text-grey-800 mb-1.5">{{ props.label }}:</span>
-			<span class="block" :class="{ copied }">{{ props.text }}</span>
+		class="content-block flex items-center justify-between gap-8 sm:gap-24 py-8 px-[1em] text-grey-500 border border-grey-200 rounded-xl hover:bg-white hover:text-grey-700">
+		<div class="flex items-center">
+			<font-awesome-icon class="text-grey-400 mr-8 sm:mr-[.75em] text-lg sm:text-xl" aria-hidden="true" :icon="iconName" />
+			<div>
+				<span class="block text-xs font-medium text-grey-800 mb-1.5">{{ props.label }}:</span>
+				<span class="block" :class="{ copied }">{{ props.text }}</span>
+			</div>
 		</div>
-		<BaseCopyButton
-			v-if="copyContent"
-			:content="props.text"
-			class="ring-white ring-4"
-			@click="handleCopyText()"
-		/>
+		<BaseCopyButton v-if="copyContent" :content="props.text" class="ring-white ring-4" @click="handleCopyText()" />
 	</span>
 </template>
 
@@ -21,6 +19,7 @@ const props = defineProps<{
 	label: string;
 	text: string;
 	copyContent: boolean;
+	iconName: string;
 }>();
 
 const copied = ref(false)
@@ -32,7 +31,15 @@ const handleCopyText = () => {
 	}, 1750);
 }
 </script>
-<style>
+<style lang="scss" scoped>
+.content-block {
+	button {
+		opacity: 0;
+	}
+	&:hover button {
+		opacity: 1;
+	}
+}
 span.copied {
 	background-color: #0393b3;
 	color: white;

frontend_vue/src/components/tokens/cc/ManageToken.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
 const tokenInfo = ref({
 	card_name: 'Paul Ndegwa Gichuki',
 	card_number:'0000 0000 0000 0000',
-	expiry: '11/27',
+	expiry: '11/2027',
 	cvc: '344',
 });
 </script>

frontend_vue/src/components/ui/CreditCardToken.vue

@@ -5,15 +5,15 @@
 		<span class="absolute top-[135px] sm:top-[160px] left-[20px] sm:left-[25px]">{{ props.tokenData.expiry }}</span>
 		<span class="absolute top-[135px] sm:top-[160px] left-[135px] sm:left-[165px]">{{ props.tokenData.cvc }}</span>
 	</div>
-	<div class="grid grid-cols-6 p-16 text-sm grid-flow-row-dense gap-8 mt-16 items-center border border-grey-200 rounded-xl shadow-solid-shadow-grey">
+	<div class="grid grid-cols-6 p-16 text-sm grid-flow-row-dense gap-8 mt-24 items-center border border-grey-200 rounded-xl shadow-solid-shadow-grey">
 		<BaseContentBlock
-			class="col-span-6 sm:col-span-4" :label="'Card Name'" :text="props.tokenData.card_name" copy-content />
+			class="col-span-6 sm:col-span-4" :label="'Card Name'" :text="props.tokenData.card_name" :icon-name="'id-card'" copy-content />
 		<BaseContentBlock
-			class="col-span-6 sm:col-span-4" :label="'Card Number'" :text="props.tokenData.card_number" copy-content />
+			class="col-span-6 sm:col-span-4" :label="'Card Number'" :text="props.tokenData.card_number" :icon-name="'credit-card'" copy-content />
 		<BaseContentBlock
-			class="col-span-3 sm:col-span-2" :label="'Expiry'" :text="props.tokenData.expiry" copy-content />
+			class="col-span-3 sm:col-span-2" :label="'Expires'" :text="props.tokenData.expiry" :icon-name="'calendar-day'" copy-content />
 		<BaseContentBlock
-			class="col-span-3 sm:col-span-2" :label="'CVC'" :text="props.tokenData.cvc" copy-content />
+			class="col-span-3 sm:col-span-2" :label="'CVC'" :text="props.tokenData.cvc" :icon-name="'lock'" copy-content />
 	</div>
 </template>
 

frontend_vue/src/main.ts

@@ -31,7 +31,11 @@ import {
   faFileExcel,
   faFile,
   faQuoteLeft,
-  faArrowUpRightFromSquare
+  faArrowUpRightFromSquare,
+  faCreditCard,
+  faLock,
+  faCalendarDay,
+  faIdCard,
 } from '@fortawesome/free-solid-svg-icons';
 import { createVfm } from 'vue-final-modal';
 import { vTooltip } from 'floating-vue';
@@ -70,6 +74,10 @@ library.add(
   faFile,
   faQuoteLeft,
   faArrowUpRightFromSquare,
+  faCreditCard,
+  faLock,
+  faCalendarDay,
+  faIdCard,
 );
 
 const vfm = createVfm();