fix: improved Slack widget

packages/ui/src/base/avatar/index.tsx

@@ -5,16 +5,18 @@ type AvatarProps = {
   url?: string;
   name?: string;
   decal?: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg';
+  size?: keyof typeof sizes;
 };
 
 const sizes = {
+  xs: 20,
   sm: 28,
   md: 50,
   lg: 75,
 };
 
 const fontSizes = {
+  xs: 8,
   sm: 10,
   md: 24,
   lg: 32,

packages/ui/src/base/form/index.stories.tsx

@@ -0,0 +1,29 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { Form } from '.';
+import { Button } from '../button';
+
+type Story = StoryObj<typeof Form>;
+
+const meta = {
+  title: 'Components/Form',
+  component: Form,
+} satisfies Meta<typeof Form>;
+
+const docs: Story = {
+  render: () => (
+    <Form>
+      <Form.Field label="Owner">
+        <Form.Input />
+      </Form.Field>
+      <Form.Field label="Repo">
+        <Form.Input />
+      </Form.Field>
+      <Form.Buttons>
+        <Button title="Save" />
+      </Form.Buttons>
+    </Form>
+  ),
+};
+
+export default meta;
+export { docs };

packages/ui/src/base/form/index.tsx

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import { View } from '../view';
+import { Typography } from '../../typography';
+
+type RootProps = React.ComponentProps<typeof View> & {
+  children: React.ReactNode;
+};
+
+const Root: React.FC<RootProps> = ({ children, ...props }) => (
+  <View $fc $gap="sm" {...props}>
+    {children}
+  </View>
+);
+
+type FieldProps = React.ComponentProps<typeof View> & {
+  label: string;
+  children: React.ReactNode;
+};
+
+const Label = styled(Typography)`
+  font-weight: bold;
+`;
+
+const FieldWrapper = styled(View)``;
+
+const Field: React.FC<FieldProps> = ({ label, children, ...props }) => (
+  <FieldWrapper {...props} $fc>
+    <Label as="label" variant="overline">
+      {label}
+    </Label>
+    {children}
+  </FieldWrapper>
+);
+
+const Input = styled.input`
+  all: unset;
+  display: block;
+  border-radius: 4px;
+  padding: 8px 12px;
+  box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.bg.highlight100};
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.bg.highlight};
+  }
+`;
+
+const Buttons = styled(View)`
+  display: flex;
+  justify-content: flex-end;
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 8px 12px;
+  background-color: ${({ theme }) => theme.colors.bg.highlight100};
+`;
+
+const Form = Object.assign(Root, {
+  Field,
+  Input,
+  Buttons,
+});
+
+export { Form };

packages/ui/src/base/index.ts

@@ -10,3 +10,4 @@ export * from './button';
 export * from './masonry';
 export * from './code-editor';
 export * from './popover';
+export * from './form';

packages/ui/src/linear/issue/index.tsx

@@ -1,5 +1,4 @@
 import type { Issue as IssueType } from '@linear/sdk';
-import { Link } from 'react-router-dom';
 import { IssueSearchResult } from '@linear/sdk/dist/_generated_documents';
 
 type IssueProps = {
@@ -8,9 +7,7 @@ type IssueProps = {
 const Issue: React.FC<IssueProps> = ({ issue }) => {
   return (
     <div>
-      <Link to={`/linear/issue?id=${issue.id}`}>
-        <h3 className="text-lg font-bold">{issue.title}</h3>
-      </Link>
+      <h3 className="text-lg font-bold">{issue.title}</h3>
       {issue.description}
     </div>
   );

packages/ui/src/theme/provider.tsx

@@ -29,6 +29,11 @@ const GlobalStyle = createGlobalStyle`
     padding: 0;
     ${styles.body}
   }
+
+  a {
+    color: ${({ theme }) => theme.colors.bg.highlight};
+    text-decoration: none;
+  }
 `;
 
 const UIProvider: React.FC<UIProviderProps> = ({ children }) => {