Merge pull request #2499 from dusk-network/feature-2498

web-wallet: Update textfield to use the small sizing

web-wallet/CHANGELOG.md

@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update ENV variables to the `VITE_FEATURE_*` naming convention [#2434]
 - Make address field only vertically resizable (Send flow) [#2435]
 - Update `Stake` to use `Stepper` [#2436]
+- Update textfield input to use the small control sizing [#2498]
 
 ### Fixed
 
@@ -272,6 +273,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#2434]: https://github.com/dusk-network/rusk/issues/2434
 [#2435]: https://github.com/dusk-network/rusk/issues/2435
 [#2436]: https://github.com/dusk-network/rusk/issues/2436
+[#2498]: https://github.com/dusk-network/rusk/issues/2498
 
 <!-- VERSIONS -->
 

web-wallet/src/lib/components/Allocate/Allocate.svelte

@@ -360,7 +360,6 @@
 
     :global(&__input-field) {
       width: 100%;
-      padding: 0.5em 1em;
     }
 
     :global(&__input-field:invalid) {

web-wallet/src/lib/components/Send/Send.svelte

@@ -362,10 +362,6 @@
       justify-content: flex-start;
     }
 
-    :global(&__input-wrapper &__input-field) {
-      padding: 0.5em 1em;
-    }
-
     :global(&__input-field:invalid) {
       color: var(--error-color);
     }

web-wallet/src/lib/components/Stake/Stake.svelte

@@ -405,10 +405,6 @@
       column-gap: var(--default-gap);
     }
 
-    :global(&__input-wrapper &__input-field) {
-      padding: 0.5em 1em;
-    }
-
     :global(&__input-field:invalid) {
       color: var(--error-color);
     }

web-wallet/src/lib/components/__tests__/__snapshots__/Send.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Send > Address step > should render the Send component Address step 1`] = `
 <div
-  class="operation svelte-172bpxb"
+  class="operation svelte-1b3rqbs"
 >
   <div
     class="dusk-wizard"
@@ -79,10 +79,10 @@ exports[`Send > Address step > should render the Send component Address step 1`]
      
      
     <div
-      class="operation__send svelte-172bpxb"
+      class="operation__send svelte-1b3rqbs"
     >
       <div
-        class="operation__address-wrapper svelte-172bpxb"
+        class="operation__address-wrapper svelte-1b3rqbs"
       >
         <p>
           Enter address:
@@ -201,7 +201,7 @@ exports[`Send > Address step > should render the Send component Address step 1`]
 
 exports[`Send > Amount step > should render the Send component Amount state with Allocate option 1`] = `
 <div
-  class="operation svelte-172bpxb"
+  class="operation svelte-1b3rqbs"
 >
   <div
     class="dusk-wizard"
@@ -280,7 +280,7 @@ exports[`Send > Amount step > should render the Send component Amount state with
      
      
     <div
-      class="operation__send svelte-172bpxb"
+      class="operation__send svelte-1b3rqbs"
       style="animation: __svelte_3516408220_0 400ms linear 0ms 1 both;"
     >
       <div
@@ -334,7 +334,7 @@ exports[`Send > Amount step > should render the Send component Amount state with
       </div>
        
       <div
-        class="operation__amount-wrapper svelte-172bpxb"
+        class="operation__amount-wrapper svelte-1b3rqbs"
       >
         <p>
           Enter amount:
@@ -353,7 +353,7 @@ exports[`Send > Amount step > should render the Send component Amount state with
       </div>
        
       <div
-        class="operation__input-wrapper svelte-172bpxb"
+        class="operation__input-wrapper svelte-1b3rqbs"
       >
         <input
           class="dusk-textbox dusk-textbox-number operation__input-field"
@@ -503,7 +503,7 @@ exports[`Send > Amount step > should render the Send component Amount state with
 
 exports[`Send > Amount step > should render the Send component Amount step 1`] = `
 <div
-  class="operation svelte-131a88q"
+  class="operation svelte-1b3rqbs"
 >
   <div
     class="dusk-wizard"
@@ -582,7 +582,7 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
      
      
     <div
-      class="operation__send svelte-131a88q"
+      class="operation__send svelte-1b3rqbs"
       style="animation: __svelte_3516408220_0 400ms linear 0ms 1 both;"
     >
       <div
@@ -624,7 +624,7 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
       </div>
        
       <div
-        class="operation__send-amount operation__space-between svelte-131a88q"
+        class="operation__amount-wrapper svelte-1b3rqbs"
       >
         <p>
           Enter amount:
@@ -643,7 +643,7 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
       </div>
        
       <div
-        class="operation__send-amount operation__input svelte-131a88q"
+        class="operation__input-wrapper svelte-1b3rqbs"
       >
         <input
           class="dusk-textbox dusk-textbox-number operation__input-field"
@@ -793,7 +793,7 @@ exports[`Send > Amount step > should render the Send component Amount step 1`] =
 
 exports[`Send > Review step > should render the Send component Review step 1`] = `
 <div
-  class="operation svelte-172bpxb"
+  class="operation svelte-1b3rqbs"
 >
   <div
     class="dusk-wizard"
@@ -874,7 +874,7 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
      
      
     <div
-      class="operation__send svelte-172bpxb"
+      class="operation__send svelte-1b3rqbs"
       style="animation: __svelte_3516408220_0 400ms linear 0ms 1 both;"
     >
       <div
@@ -921,10 +921,10 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
       </span>
        
       <dl
-        class="operation__review-transaction svelte-172bpxb"
+        class="operation__review-transaction svelte-1b3rqbs"
       >
         <dt
-          class="review-transaction__label svelte-172bpxb"
+          class="review-transaction__label svelte-1b3rqbs"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -943,7 +943,7 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
            
         </dt>
         <dd
-          class="review-transaction__value operation__review-amount svelte-172bpxb"
+          class="review-transaction__value operation__review-amount svelte-1b3rqbs"
         >
           <span>
             2,345.000000000
@@ -965,10 +965,10 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
       </dl>
        
       <dl
-        class="operation__review-transaction svelte-172bpxb"
+        class="operation__review-transaction svelte-1b3rqbs"
       >
         <dt
-          class="review-transaction__label svelte-172bpxb"
+          class="review-transaction__label svelte-1b3rqbs"
         >
           <svg
             class="dusk-icon dusk-icon--size--default"
@@ -987,7 +987,7 @@ exports[`Send > Review step > should render the Send component Review step 1`] =
            
         </dt>
         <dd
-          class="operation__review-address svelte-172bpxb"
+          class="operation__review-address svelte-1b3rqbs"
         >
           <span>
             47jNTgAhzn9KCKF3msCfvKg3k1P1QpPCLZ3HG3AoNp87sQ5WNS3QyjckYHWeuXqW7uvLmbKgejpP8Xkcip89vnMM

web-wallet/src/lib/components/__tests__/__snapshots__/Stake.spec.js.snap

@@ -157,7 +157,7 @@ exports[`Stake > should render the Stake component 1`] = `
     </div>
      
     <div
-      class="operation__amount-wrapper svelte-qgo6eq"
+      class="operation__amount-wrapper svelte-b32npl"
     >
       <p>
         Enter amount:
@@ -176,7 +176,7 @@ exports[`Stake > should render the Stake component 1`] = `
     </div>
      
     <div
-      class="operation__input-wrapper svelte-qgo6eq"
+      class="operation__input-wrapper svelte-b32npl"
     >
       <input
         class="dusk-textbox dusk-textbox-number operation__input-field"
@@ -444,7 +444,7 @@ exports[`Stake > should render the Stake notice 1`] = `
         class="dusk-card__body-container"
       >
         <p
-          class="staking-warning svelte-qgo6eq"
+          class="staking-warning svelte-b32npl"
         >
           I understand that I have set up a node properly, as described 
           <a
@@ -599,7 +599,7 @@ exports[`Stake > should render the review step of the Stake component 1`] = `
      
      
     <div
-      class="operation__stake svelte-qgo6eq"
+      class="operation__stake svelte-b32npl"
       style="animation: __svelte_3516408220_0 400ms linear 0ms 1 both;"
     >
       <div

web-wallet/src/routes/(app)/dashboard/allocate/__tests__/__snapshots__/page.spec.js.snap

@@ -43,7 +43,7 @@ exports[`Allocate > should render the allocation page 1`] = `
     class="dusk-card__body-container"
   >
     <div
-      class="operation svelte-c5yudt"
+      class="operation svelte-awb0tn"
     >
       <div
         class="dusk-wizard"
@@ -52,24 +52,24 @@ exports[`Allocate > should render the allocation page 1`] = `
          
          
         <div
-          class="operation__allocate svelte-c5yudt"
+          class="operation__allocate svelte-awb0tn"
         >
           <p>
             Edit the value to change the allocation of your Dusk between your
           shielded or public account.
           </p>
            
           <fieldset
-            class="operation__fieldset svelte-c5yudt"
+            class="operation__fieldset svelte-awb0tn"
           >
             <p
-              class="operation__label svelte-c5yudt"
+              class="operation__label svelte-awb0tn"
             >
               Shielded
             </p>
              
             <div
-              class="operation__address-wrapper svelte-c5yudt"
+              class="operation__address-wrapper svelte-awb0tn"
             >
               <svg
                 class="dusk-icon dusk-icon--size--default"
@@ -86,7 +86,7 @@ exports[`Allocate > should render the allocation page 1`] = `
             </div>
              
             <div
-              class="operation__input-wrapper svelte-c5yudt"
+              class="operation__input-wrapper svelte-awb0tn"
             >
               <input
                 class="dusk-textbox dusk-textbox-number operation__input-field"
@@ -113,17 +113,17 @@ exports[`Allocate > should render the allocation page 1`] = `
             </div>
              
             <hr
-              class="glyph svelte-c5yudt"
+              class="glyph svelte-awb0tn"
             />
              
             <p
-              class="operation__label svelte-c5yudt"
+              class="operation__label svelte-awb0tn"
             >
               Unshielded
             </p>
              
             <div
-              class="operation__address-wrapper svelte-c5yudt"
+              class="operation__address-wrapper svelte-awb0tn"
             >
               <svg
                 class="dusk-icon dusk-icon--size--default"
@@ -140,7 +140,7 @@ exports[`Allocate > should render the allocation page 1`] = `
             </div>
              
             <div
-              class="operation__input-wrapper svelte-c5yudt"
+              class="operation__input-wrapper svelte-awb0tn"
             >
               <input
                 class="dusk-textbox dusk-textbox-number operation__input-field"

web-wallet/src/routes/(app)/dashboard/send/__tests__/__snapshots__/page.spec.js.snap

@@ -44,7 +44,7 @@ exports[`Send > should render the send page 1`] = `
     class="dusk-card__body-container"
   >
     <div
-      class="operation svelte-172bpxb"
+      class="operation svelte-1b3rqbs"
     >
       <div
         class="dusk-wizard"
@@ -121,10 +121,10 @@ exports[`Send > should render the send page 1`] = `
          
          
         <div
-          class="operation__send svelte-172bpxb"
+          class="operation__send svelte-1b3rqbs"
         >
           <div
-            class="operation__address-wrapper svelte-172bpxb"
+            class="operation__address-wrapper svelte-1b3rqbs"
           >
             <p>
               Enter address:

web-wallet/src/style/dusk-components/button.css

@@ -48,8 +48,8 @@
 .dusk-button--size--small,
 .dusk-anchor-button--size--small,
 .dusk-anchor-button--size--small:visited {
-  font-size: var(--control-small-font-size);
-  gap: calc(var(--control-small-font-size) / 2);
+  font-size: var(--control-font-size);
+  gap: calc(var(--control-font-size) / 2);
   padding: var(--control-small-padding);
 }
 

web-wallet/src/style/dusk-components/textbox.css

@@ -2,13 +2,14 @@
   font-family: inherit;
   font-size: var(--control-font-size);
   letter-spacing: inherit;
-  padding: var(--control-padding);
+  padding: var(--control-small-padding);
   background-color: var(--non-button-control-bg-color);
   border-color: var(--control-border-color);
   border-radius: var(--control-border-radius-size);
   border-style: solid;
   border-width: var(--control-border-size);
   color: var(--non-button-control-text-color);
+  min-height: 44px;
 }
 
 .dusk-textbox:disabled,

web-wallet/src/style/dusk/language.css

@@ -53,8 +53,7 @@
   --control-font-size: 1em;
   --control-icon-size: 2em;
   --control-padding: 0.9em 1.25em;
-  --control-small-font-size: 0.875em;
-  --control-small-padding: 0.625em 0.875em;
+  --control-small-padding: 0.65em 0.875em;
 
   --non-button-control-bg-color: #fff;
   --non-button-control-text-color: var(--smokey-black);