Updates on styles for templates. (#162) (#163)

arhtudormorar · iuliacimpeanu · web-flow · commit fbf5055132d8 · 2025-07-14T14:02:54.000+03:00
* Updates for template dapp UI.

* Updated changelog

* Fixed tests.

* Upgraded version.

Co-authored-by: Iulia Cimpeanu &lt;72752718+iuliacimpeanu@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.0.14](https://github.com/multiversx/mx-sdk-dapp-ui/pull/163)] - 2025-07-14
+
+- [Updates on styles for templates.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/162)
+
 ## [[0.0.13](https://github.com/multiversx/mx-sdk-dapp-ui/pull/161)] - 2025-07-10
 
 - [UI updates on icons for failed transactions and Firefox extension.](https://github.com/multiversx/mx-sdk-dapp-ui/pull/160)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",
diff --git a/src/components/controlled/transactions-table/components/transaction-account/transaction-account.tsx b/src/components/controlled/transactions-table/components/transaction-account/transaction-account.tsx
@@ -6,6 +6,10 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 import type { TransactionAccountType } from '../../transactions-table.type';
 
+const transactionAccountClasses: Record<string, string> = {
+  explorerLink: 'mvx:text-blue-link!',
+};
+
 @Component({
   tag: 'mvx-transaction-account',
   styleUrl: 'transaction-account.scss',
@@ -29,7 +33,13 @@ export class TransactionAccount {
 
         {this.account.isContract && <mvx-fa-icon icon={faFileAlt} description="Smart Contract" />}
         {this.account.showLink ? (
-          <mvx-explorer-link link={this.account.link} data-testid={explorerLinkDataTestId} />
+          <mvx-explorer-link
+            link={this.account.link}
+            data-testid={explorerLinkDataTestId}
+            class={transactionAccountClasses.explorerLink}
+          >
+            <span>{this.account.address}</span>
+          </mvx-explorer-link>
         ) : (
           <mvx-transaction-account-name
             name={this.account.name}
diff --git a/src/components/controlled/transactions-table/components/transaction-hash/tests/transaction-hash.spec.tsx b/src/components/controlled/transactions-table/components/transaction-hash/tests/transaction-hash.spec.tsx
@@ -52,7 +52,7 @@ describe('TransactionHash', () => {
       <mvx-transaction-hash>
           <div class="transaction-hash">
             <mvx-transaction-icon></mvx-transaction-icon>
-            <mvx-explorer-link dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/123"><span>0x123456789abcdef</span></mvx-explorer-link>
+            <mvx-explorer-link class="mvx:text-blue-link!" dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/123"><span>0x123456789abcdef</span></mvx-explorer-link>
           </div>
       </mvx-transaction-hash>
     `);
@@ -90,7 +90,7 @@ describe('TransactionHash', () => {
       <mvx-transaction-hash>
           <div class="transaction-hash">
             <mvx-transaction-icon></mvx-transaction-icon>
-            <mvx-explorer-link dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/initial"><span>0xInitialHash</span></mvx-explorer-link>
+            <mvx-explorer-link class="mvx:text-blue-link!" dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/initial"><span>0xInitialHash</span></mvx-explorer-link>
           </div>
       </mvx-transaction-hash>
     `);
@@ -124,7 +124,7 @@ describe('TransactionHash', () => {
       <mvx-transaction-hash>
           <div class="transaction-hash">
             <mvx-transaction-icon></mvx-transaction-icon>
-            <mvx-explorer-link dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/updated"><span>0xUpdatedHash</span></mvx-explorer-link>
+            <mvx-explorer-link class="mvx:text-blue-link!" dataTestId="${DataTestIdsEnum.transactionLink}" link="https://example.com/tx/updated"><span>0xUpdatedHash</span></mvx-explorer-link>
           </div>
       </mvx-transaction-hash>
     `);
diff --git a/src/components/controlled/transactions-table/components/transaction-hash/transaction-hash.tsx b/src/components/controlled/transactions-table/components/transaction-hash/transaction-hash.tsx
@@ -3,6 +3,10 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 import type { TransactionRowType } from '../../transactions-table.type';
 
+const transactionHashClasses: Record<string, string> = {
+  explorerLink: 'mvx:text-blue-link!',
+};
+
 @Component({
   tag: 'mvx-transaction-hash',
 })
@@ -19,7 +23,11 @@ export class TransactionHash {
       <div class={{ 'transaction-hash': true, [this.class]: Boolean(this.class) }}>
         <mvx-transaction-icon iconInfo={this.transaction.iconInfo} />
 
-        <mvx-explorer-link dataTestId={DataTestIdsEnum.transactionLink} link={this.transaction.link}>
+        <mvx-explorer-link
+          dataTestId={DataTestIdsEnum.transactionLink}
+          link={this.transaction.link}
+          class={transactionHashClasses.explorerLink}
+        >
           <span>{this.transaction.txHash}</span>
         </mvx-explorer-link>
       </div>
diff --git a/src/components/controlled/transactions-table/components/transaction-shards/tests/transaction-shards.spec.tsx b/src/components/controlled/transactions-table/components/transaction-shards/tests/transaction-shards.spec.tsx
@@ -53,11 +53,11 @@ describe('TransactionShards', () => {
     expect(page.root).toEqualHtml(`
       <mvx-transaction-shards>
           <div class="transaction-shards">
-            <mvx-explorer-link class="transactions-table-body-cell-link" data-testid="${DataTestIdsEnum.shardFromLink}" link="/blocks?shard=0">
+            <mvx-explorer-link class="mvx:text-blue-link!" data-testid="${DataTestIdsEnum.shardFromLink}" link="/blocks?shard=0">
               <span data-testid="${DataTestIdsEnum.senderShard}">0</span>
             </mvx-explorer-link>
             <span class="transaction-shards-arrow">&#10132;</span>
-            <mvx-explorer-link class="transactions-table-body-cell-link" data-testid="${DataTestIdsEnum.shardToLink}" link="/blocks?shard=1">
+            <mvx-explorer-link class="mvx:text-blue-link!" data-testid="${DataTestIdsEnum.shardToLink}" link="/blocks?shard=1">
               <span data-testid="${DataTestIdsEnum.receiverShard}">1</span>
             </mvx-explorer-link>
           </div>
@@ -76,11 +76,11 @@ describe('TransactionShards', () => {
     expect(page.root).toEqualHtml(`
       <mvx-transaction-shards class="custom-class">
           <div class="custom-class transaction-shards">
-            <mvx-explorer-link class="transactions-table-body-cell-link" data-testid="${DataTestIdsEnum.shardFromLink}" link="/blocks?shard=0">
+            <mvx-explorer-link class="mvx:text-blue-link!" data-testid="${DataTestIdsEnum.shardFromLink}" link="/blocks?shard=0">
               <span data-testid="${DataTestIdsEnum.senderShard}">0</span>
             </mvx-explorer-link>
             <span class="transaction-shards-arrow">&#10132;</span>
-            <mvx-explorer-link class="transactions-table-body-cell-link" data-testid="${DataTestIdsEnum.shardToLink}" link="/blocks?shard=1">
+            <mvx-explorer-link class="mvx:text-blue-link!" data-testid="${DataTestIdsEnum.shardToLink}" link="/blocks?shard=1">
               <span data-testid="${DataTestIdsEnum.receiverShard}">1</span>
             </mvx-explorer-link>
           </div>
diff --git a/src/components/controlled/transactions-table/components/transaction-shards/transaction-shards.tsx b/src/components/controlled/transactions-table/components/transaction-shards/transaction-shards.tsx
@@ -4,6 +4,10 @@ import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 import type { TransactionRowType } from '../../transactions-table.type';
 
+const transactionShardsClasses: Record<string, string> = {
+  explorerLink: 'mvx:text-blue-link!',
+};
+
 @Component({
   tag: 'mvx-transaction-shards',
   styleUrl: 'transaction-shards.scss',
@@ -17,7 +21,7 @@ export class TransactionShards {
       <div class={classNames(this.class, 'transaction-shards')}>
         <mvx-explorer-link
           link={this.transaction.sender.shardLink}
-          class="transactions-table-body-cell-link"
+          class={transactionShardsClasses.explorerLink}
           data-testid={DataTestIdsEnum.shardFromLink}
         >
           <span data-testid={DataTestIdsEnum.senderShard}>{this.transaction.sender.shard}</span>
@@ -26,9 +30,9 @@ export class TransactionShards {
         <span class="transaction-shards-arrow">&#10132;</span>
 
         <mvx-explorer-link
-          class="transactions-table-body-cell-link"
           link={this.transaction.receiver.shardLink}
           data-testid={DataTestIdsEnum.shardToLink}
+          class={transactionShardsClasses.explorerLink}
         >
           <span data-testid={DataTestIdsEnum.receiverShard}>{this.transaction.receiver.shard}</span>
         </mvx-explorer-link>
diff --git a/src/components/controlled/transactions-table/transactions-table.scss b/src/components/controlled/transactions-table/transactions-table.scss
@@ -40,6 +40,7 @@
 }
 
 .transactions-table-body-cell > * {
+  display: flex;
   width: max-content;
 }
 
diff --git a/src/global/tailwind.css b/src/global/tailwind.css
@@ -4,6 +4,7 @@
   --breakpoint-xs: 30rem; /* 480px */
   --color-primary: var(--mvx-text-color-primary);
   --color-link: var(--mvx-link-color);
+  --color-blue-link: var(--mvx-blue-600);
   --color-accent: var(--mvx-text-accent-color);
   --color-preloader: var(--mvx-preloader-item-bg);
 }
diff --git a/src/global/variables.css b/src/global/variables.css
@@ -45,6 +45,7 @@
   --mvx-teal-150: #a5fcf0;
   --mvx-teal-350: #23f7dd;
   --mvx-teal-925: #143736;
+  --mvx-blue-600: #2563EB;
   --mvx-blue-650: #007bff;
   --mvx-blue-750: #0062cc;
   --mvx-cyan-550: #17a2b8;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@multiversx/sdk-dapp-ui",`
`3`		`- "version": "0.0.13",`
	`3`	`+ "version": "0.0.14",`
`4`	`4`	`"description": "A library to hold UI components for a dApp on the MultiversX blockchain",`
`5`	`5`	`"author": "MultiversX",`
`6`	`6`	`"license": "MIT",`
Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.transactions-table-body-cell > * {`
	`43`	`+ display: flex;`
`43`	`44`	`width: max-content;`
`44`	`45`	`}`
`45`	`46`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`--breakpoint-xs: 30rem; /* 480px */`
`5`	`5`	`--color-primary: var(--mvx-text-color-primary);`
`6`	`6`	`--color-link: var(--mvx-link-color);`
	`7`	`+ --color-blue-link: var(--mvx-blue-600);`
`7`	`8`	`--color-accent: var(--mvx-text-accent-color);`
`8`	`9`	`--color-preloader: var(--mvx-preloader-item-bg);`
`9`	`10`	`}`