ComposeButton: style group compose button

app/soapbox/features/ui/components/compose-button.tsx

@@ -1,11 +1,23 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
-import { Button } from 'soapbox/components/ui';
+import { Avatar, Button, HStack } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
+import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup';
 
 const ComposeButton = () => {
+  const location = useLocation();
+
+  if (location.pathname.startsWith('/group/')) {
+    return <GroupComposeButton />;
+  }
+
+  return <HomeComposeButton />;
+};
+
+const HomeComposeButton = () => {
   const dispatch = useAppDispatch();
   const onOpenCompose = () => dispatch(openModal('COMPOSE'));
 
@@ -22,4 +34,32 @@ const ComposeButton = () => {
   );
 };
 
+const GroupComposeButton = () => {
+  const dispatch = useAppDispatch();
+  const match = useRouteMatch<{ groupSlug: string }>('/group/:groupSlug');
+  const { entity: group } = useGroupLookup(match?.params.groupSlug || '');
+
+  const onOpenCompose = () => dispatch(openModal('COMPOSE'));
+
+  if (group) {
+    return (
+      <Button
+        theme='accent'
+        size='lg'
+        onClick={onOpenCompose}
+        block
+      >
+        <HStack space={3} alignItems='center'>
+          <Avatar className='-my-1 border-2 border-white' size={30} src={group.avatar} />
+          <span>
+            <FormattedMessage id='navigation.compose_group' defaultMessage='Compose to Group' />
+          </span>
+        </HStack>
+      </Button>
+    );
+  }
+
+  return null;
+};
+
 export default ComposeButton;