fix update gaping and component

Author: lohanidamodar

src/lib/components/billing/paymentModal.svelte

@@ -101,34 +101,33 @@
     bind:error
     onSubmit={handleSubmit}>
     <slot />
-    <InputText
-        id="name"
-        required
-        autofocus={true}
-        bind:value={name}
-        label="Cardholder name"
-        placeholder="Cardholder name" />
-
-    <div class="aw-stripe-container" data-private>
-        {#if isLoading}
-            <div class="loader-element">
-                <Spinner />
-            </div>
-        {/if}
-        {#if showState}
-            <div class="state-element">
-                <!-- input select for state picker -->
-                <StatePicker card={paymentMethod} bind:state />
-            </div>
-        {:else}
+    {#if showState}
+        <div class="state-element">
+            <!-- input select for state picker -->
+            <StatePicker card={paymentMethod} bind:state />
+        </div>
+    {:else}
+        <InputText
+            id="name"
+            required
+            autofocus={true}
+            bind:value={name}
+            label="Cardholder name"
+            placeholder="Cardholder name" />
+        <div class="aw-stripe-container" data-private>
+            {#if isLoading}
+                <div class="loader-element">
+                    <Spinner />
+                </div>
+            {/if}
             <div
                 style:display={isLoading ? 'none' : 'initial'}
                 class="stripe-element"
                 bind:this={element}>
                 <!-- Stripe will create form elements here -->
             </div>
-        {/if}
-    </div>
+        </div>
+    {/if}
     <slot name="end"></slot>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>

src/lib/components/billing/statePicker.svelte

@@ -2,41 +2,50 @@
     import { states } from './states.js';
     import { InputSelect } from '$lib/elements/forms';
     import type { PaymentMethod } from '@stripe/stripe-js';
-    import Card from '../card.svelte';
-    import { Alert, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Alert, Card, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { CreditCardBrandImage } from '../index.js';
 
     export let state: string = '';
     export let card: PaymentMethod | null = null;
 </script>
 
-{#if card}
-    <Card>
-        <Layout.Stack direction="row" alignItems="center" gap="s">
-            <CreditCardBrandImage brand={card.card?.brand} />
-            <span>ending in {card.card?.last4}</span>
-        </Layout.Stack>
+<div class="state-picker-container">
+    {#if card}
+        <Card.Base variant="secondary" padding="s">
+            <Layout.Stack direction="row" alignItems="center" gap="s">
+                <CreditCardBrandImage brand={card.card?.brand} />
+                <span>ending in {card.card?.last4}</span>
+            </Layout.Stack>
+            <Typography.Text size="s">
+                {card.card.country}
+                {card.billing_details.address.postal_code}
+            </Typography.Text>
+        </Card.Base>
+    {/if}
+
+    <Alert.Inline status="info" title="State is required for US payment methods">
         <Typography.Text size="s">
-            {card.card.country}
-            {card.billing_details.address.postal_code}
+            To complete the billing information, select your state so we can apply the correct taxes
+            and meet U.S. legal requirements.
         </Typography.Text>
-    </Card>
-{/if}
+    </Alert.Inline>
 
-<Alert.Inline status="info" title="State is required for US payment methods">
-    <Typography.Text size="s">
-        To complete the billing information, select your state so we can apply the correct taxes and
-        meet U.S. legal requirements.
-    </Typography.Text>
-</Alert.Inline>
+    <InputSelect
+        bind:value={state}
+        label="State"
+        placeholder="Select a state"
+        id="state-picker"
+        options={states.map((state) => ({
+            label: state.name,
+            value: state.abbreviation,
+            id: state.abbreviation.toLowerCase()
+        }))} />
+</div>
 
-<InputSelect
-    bind:value={state}
-    label="State"
-    placeholder="Select a state"
-    id="state-picker"
-    options={states.map((state) => ({
-        label: state.name,
-        value: state.abbreviation,
-        id: state.abbreviation.toLowerCase()
-    }))} />
+<style>
+    .state-picker-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+</style>