Merge pull request #81 from zamm-dev/send-button-icon

Use icon for chat send button

src-svelte/src/lib/controls/Button.svelte

@@ -3,6 +3,7 @@
 
   export let unwrapped = false;
   export let rightEnd = false;
+  export let ariaLabel: string | undefined = undefined;
   const dispatchClickEvent = createEventDispatcher();
 
   function handleClick() {
@@ -15,6 +16,7 @@
     class="cut-corners inner"
     class:right-end={rightEnd}
     type="submit"
+    aria-label={ariaLabel}
     on:click={handleClick}
   >
     <slot />
@@ -24,6 +26,7 @@
     class="cut-corners outer"
     class:right-end={rightEnd}
     type="submit"
+    aria-label={ariaLabel}
     on:click={handleClick}
   >
     <div class="cut-corners inner" class:right-end={rightEnd}>

src-svelte/src/routes/chat/Form.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import autosize from "autosize";
   import Button from "$lib/controls/Button.svelte";
+  import IconSend from "~icons/gravity-ui/arrow-right";
   import { onMount } from "svelte";
 
   export let sendChatMessage: (message: string) => void;
@@ -51,7 +52,7 @@
     bind:this={textareaInput}
     bind:value={currentMessage}
   />
-  <Button unwrapped rightEnd>Send</Button>
+  <Button ariaLabel="Send" unwrapped rightEnd><IconSend /></Button>
 </form>
 
 <style>
@@ -73,4 +74,12 @@
     max-height: 9.8rem;
     resize: none;
   }
+
+  form :global(button) {
+    width: 4rem;
+    min-height: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>

src-svelte/src/routes/credits/Creditor.svelte

@@ -99,11 +99,11 @@
 
   img {
     width: 2rem;
+    border-radius: var(--corner-roundness);
   }
 
   img.person {
     width: 2.5rem;
-    border-radius: var(--corner-roundness);
   }
 
   .logo-placeholder,

src-svelte/src/routes/credits/Credits.svelte

@@ -182,6 +182,11 @@
                 logo="vaadin.svg"
                 url="https://vaadin.com/"
               />
+              <Creditor
+                name="Gravity UI"
+                logo="gravity-ui.png"
+                url="https://gravity-ui.com/"
+              />
             </Grid>
           </SubInfoBox>
         </div>

src-svelte/src/routes/storybook.test.ts

@@ -161,7 +161,7 @@ const components: ComponentTestConfig[] = [
         name: "new-message-sent",
         prefix: "extra-long-input",
         additionalAction: async (frame: Frame) => {
-          await frame.click('button:has-text("Send")');
+          await frame.click('button[aria-label="Send"]');
           await frame.click('button[title="Dismiss"]');
         },
       },