fix: touch target issues (#161)

* fix: touch target issues * fix: feedback close button * fix: didbox * fix: hide password button * tests; update
ForkbombEu · Oct 7, 2024 · 0dd2d77 · 0dd2d77
1 parent 8540e92
commit 0dd2d77
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 10 deletions.
diff --git a/src/components/button/d-button.tsx b/src/components/button/d-button.tsx
@@ -127,7 +127,7 @@ export class DButton implements ComponentInterface {
       >
         <TagType
           {...attrs}
-          class={{ 'button-native': true, [color]: true, 'accent': inButtonsGroup || color === 'accent', 'uppercase': !inButtonsGroup }}
+          class={{ 'h-full': true, 'button-native': true, [color]: true, 'accent': inButtonsGroup || color === 'accent', 'uppercase': !inButtonsGroup }}
           part="native"
           disabled={disabled}
           onFocus={this.onFocus}

diff --git a/src/components/button/test/d-button.spec.tsx b/src/components/button/test/d-button.spec.tsx
@@ -10,7 +10,7 @@ describe('d-button', () => {
     expect(page.root).toEqualHtml(`
      <d-button class="button button-default primary" color="primary">
        <mock:shadow-root>
-         <button class="button-native primary uppercase" part="native" type="button">
+         <button class="button-native h-full primary uppercase" part="native" type="button">
            <span class="button-inner justify-center">
              <slot name="icon-only"></slot>
              <slot name="start"></slot>

diff --git a/src/components/d-did-box/d-did-box.tsx b/src/components/d-did-box/d-did-box.tsx
@@ -18,7 +18,7 @@ export class DDidBox {
     return (
       <Host>
         <d-text size="s" class="text-gray">
-          <a class="flex" href={`https://explorer.did.dyne.org/details/did:dyne:${fullId}`}>
+          <a class="flex h-12" href={`https://explorer.did.dyne.org/details/did:dyne:${fullId}`}>
             <d-text size="s" class="w-full flex justify-center flex-wrap space-y-0.5">
               <span class="w-4 h-4 mr-2">
                 <d-icon icon="key" outline/>

diff --git a/src/components/feedback/d-feedback.tsx b/src/components/feedback/d-feedback.tsx
@@ -76,7 +76,7 @@ export class DFeedback {
               <div class="w-6 h-6">{this.type === 'success' ? successIcon : errorIcon}</div>
               <d-text>{this.feedback}</d-text>
             </div>
-            <button onClick={this.onClose}>
+            <button onClick={this.onClose} class="w-12 h-12 flex items-center justify-end">
               <div class="w-5 h-5">{closeIcon}</div>
             </button>
           </div>

diff --git a/src/components/feedback/test/d-feedback.spec.tsx b/src/components/feedback/test/d-feedback.spec.tsx
@@ -22,7 +22,7 @@ describe('d-feedback', () => {
                </div>
                <d-text></d-text>
              </div>
-             <button>
+             <button class="w-12 h-12 flex items-center justify-end">
                <div class="h-5 w-5">
                  <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
                    <g id="x">

diff --git a/src/components/header/d-header.tsx b/src/components/header/d-header.tsx
@@ -40,10 +40,10 @@ export class DHeader {
               </ion-title>
               {this.settings && (
                 <ion-buttons slot="end">
-                  <ion-menu-toggle>
-                    <ion-button>
-                      <div class="w-6 h-6 text-on">
-                        <d-icon icon="settings" outline />;
+                  <ion-menu-toggle class="h-12 w-12">
+                    <ion-button class="h-full w-full">
+                      <div class="w-8 h-8 text-on flex justify-center items-center">
+                        <d-icon icon="settings" outline />
                       </div>
                     </ion-button>
                   </ion-menu-toggle>

diff --git a/src/components/input/d-input.tsx b/src/components/input/d-input.tsx
@@ -80,7 +80,7 @@ export class DInput {
             </d-button>
           )}
           {this.hidable && (
-            <d-button slot="end" clear onClick={this.changePasswordVisibility} aria-checked={this.type !== 'password' ? 'true' : 'false'} aria-label="show password" role="switch">
+            <d-button class="h-full" slot="end" clear onClick={this.changePasswordVisibility} aria-checked={this.type !== 'password' ? 'true' : 'false'} aria-label="show password" role="switch">
               {this.type === 'password' ? <d-icon icon="visibility" outline /> : <d-icon icon="visibility-off" outline />}
             </d-button>
           )}