fix: Hide outline in some widget components (#5017)

### Description

- Hide ouline in button and text input
- Rename clip path id in discord logo

### Backward compatibility

Yes

.changeset/pink-sloths-turn.md

@@ -0,0 +1,5 @@
+---
+'@hyperlane-xyz/widgets': patch
+---
+
+Hide outline in button and text input components

typescript/widgets/src/components/Button.tsx

@@ -7,7 +7,7 @@ export function Button(props: Props) {
   const { className, children, ...rest } = props;
 
   const base =
-    'htw-flex htw-items-center htw-justify-center htw-rounded-sm htw-transition-all';
+    'htw-flex htw-items-center htw-justify-center htw-rounded-sm htw-transition-all htw-outline-none focus:htw-outline-none';
   const onHover = 'hover:htw-opacity-80';
   const onDisabled = 'disabled:htw-opacity-30 disabled:htw-cursor-default';
   const onActive = 'active:htw-scale-95';

typescript/widgets/src/components/TextInput.tsx

@@ -22,7 +22,7 @@ export function _TextInput(
       type="text"
       autoComplete="off"
       onChange={handleChange}
-      className={`htw-bg-gray-100 focus:htw-bg-gray-200 disabled:htw-bg-gray-500 htw-outline-none htw-transition-all htw-duration-300 ${className}`}
+      className={`htw-bg-gray-100 focus:htw-bg-gray-200 disabled:htw-bg-gray-500 htw-outline-none focus:htw-outline-none htw-transition-all htw-duration-300 ${className}`}
       {...props}
     />
   );

typescript/widgets/src/icons/Discord.tsx

@@ -7,14 +7,14 @@ import { DefaultIconProps } from './types.js';
 function _Discord({ color, ...rest }: DefaultIconProps) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71 55" {...rest}>
-      <g clipPath="url(#a)">
+      <g clipPath="url(#discord-logo-clip)">
         <path
           d="M60.1 4.9A58.5 58.5 0 0 0 45.4.5l-1.8 3.7a54 54 0 0 0-16.2 0 37.4 37.4 0 0 0-2-3.8A58.4 58.4 0 0 0 10.7 5 60 60 0 0 0 .4 45.6a58.9 58.9 0 0 0 18 8.8 42 42 0 0 0 3.6-5.9l-.1-.3c-2-.7-3.8-1.6-5.6-2.6a.2.2 0 0 1 0-.4 30.3 30.3 0 0 0 1.3-.9 42 42 0 0 0 36 0l1 1c.2 0 .2.2 0 .3-1.7 1-3.6 1.9-5.5 2.6a47.2 47.2 0 0 0 3.8 6.3 58.7 58.7 0 0 0 17.8-9.1A59.5 59.5 0 0 0 60 4.9ZM23.7 37.3c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Zm23.6 0c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Z"
           fill={color || ColorPalette.Black}
         />
       </g>
       <defs>
-        <clipPath id="a">
+        <clipPath id="discord-logo-clip">
           <path fill={color || ColorPalette.Black} d="M0 0h71v55H0z" />
         </clipPath>
       </defs>