From a879d9d56f6a13c653fbeb033607aca88ff54ce7 Mon Sep 17 00:00:00 2001
From: Tom Watson <thomasgabriel.watson@gmail.com>
Date: Wed, 3 May 2023 11:25:37 -0700
Subject: [PATCH 1/7] Add send button to all chat forms

---
 .../__snapshots__/Comment.test.js.snap        | 12 +++----
 .../Comments/CommentForm/CommentForm.js       | 33 ++++++++++++++-----
 .../Comments/CommentForm/CommentForm.scss     | 16 +++++++++
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/routes/PostDetail/Comments/Comment/__snapshots__/Comment.test.js.snap b/src/routes/PostDetail/Comments/Comment/__snapshots__/Comment.test.js.snap
index 426f59a30..6ca24cb19 100644
--- a/src/routes/PostDetail/Comments/Comment/__snapshots__/Comment.test.js.snap
+++ b/src/routes/PostDetail/Comments/Comment/__snapshots__/Comment.test.js.snap
@@ -21,7 +21,7 @@ exports[`Comment displays image attachments 1`] = `
     <span
       data-stylename="timestamp"
     >
-      2 mos ago
+      3 mos ago
     </span>
     <div
       data-stylename="upperRight"
@@ -151,7 +151,7 @@ exports[`Comment displays the delete menu when deleteComment is defined 1`] = `
     <span
       data-stylename="timestamp"
     >
-      2 mos ago
+      3 mos ago
     </span>
     <div
       data-stylename="upperRight"
@@ -275,7 +275,7 @@ exports[`Comment displays the remove menu when removeComment is defined 1`] = `
     <span
       data-stylename="timestamp"
     >
-      2 mos ago
+      3 mos ago
     </span>
     <div
       data-stylename="upperRight"
@@ -390,7 +390,7 @@ exports[`Comment does not display the delete menu when deleteComment is not defi
     <span
       data-stylename="timestamp"
     >
-      2 mos ago
+      3 mos ago
     </span>
     <div
       data-stylename="upperRight"
@@ -496,7 +496,7 @@ exports[`Comment does not display the remove menu when removeComment is not defi
     <span
       data-stylename="timestamp"
     >
-      2 mos ago
+      3 mos ago
     </span>
     <div
       data-stylename="upperRight"
@@ -620,7 +620,7 @@ exports[`Comment renders correctly 1`] = `
     <span
       data-stylename="timestamp"
     >
-      2 mos ago
+      3 mos ago
     </span>
     <div
       data-stylename="upperRight"
diff --git a/src/routes/PostDetail/Comments/CommentForm/CommentForm.js b/src/routes/PostDetail/Comments/CommentForm/CommentForm.js
index e2de8330c..d9ad6d189 100644
--- a/src/routes/PostDetail/Comments/CommentForm/CommentForm.js
+++ b/src/routes/PostDetail/Comments/CommentForm/CommentForm.js
@@ -3,7 +3,9 @@ import { throttle } from 'lodash/fp'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
+import { IoSend } from 'react-icons/io5'
 import AttachmentManager from 'components/AttachmentManager'
+import Button from 'components/Button'
 import HyloEditor from 'components/HyloEditor'
 import Icon from 'components/Icon'
 import Loading from 'components/Loading'
@@ -101,15 +103,28 @@ export default class CommentForm extends Component {
             >
               Sign up to reply
             </Link>
-            : <UploadAttachmentButton
-              type='comment'
-              id='new'
-              allowMultiple
-              onSuccess={addAttachment}
-              customRender={renderProps => (
-                <UploadButton {...renderProps} styleName='upload-button' />
-              )}
-            />
+            : (
+              <>
+                <div styleName='send-message-container'>
+                  <Button
+                    borderRadius='6px'
+                    onClick={() => this.handleOnEnter(this.editor.current.getHTML())}
+                    styleName='send-message-button'
+                  >
+                    <IoSend color='white' />
+                  </Button>
+                </div>
+                <UploadAttachmentButton
+                  type='comment'
+                  id='new'
+                  allowMultiple
+                  onSuccess={addAttachment}
+                  customRender={renderProps => (
+                    <UploadButton {...renderProps} styleName='upload-button' />
+                  )}
+                />
+              </>
+            )
           }
         </div>
       </div>
diff --git a/src/routes/PostDetail/Comments/CommentForm/CommentForm.scss b/src/routes/PostDetail/Comments/CommentForm/CommentForm.scss
index 562b9d2cd..7790c7822 100644
--- a/src/routes/PostDetail/Comments/CommentForm/CommentForm.scss
+++ b/src/routes/PostDetail/Comments/CommentForm/CommentForm.scss
@@ -14,6 +14,22 @@
   margin-right: 7px;
 }
 
+.send-message-container {
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.send-message-button {
+  padding: 0;
+  line-height: 26px;
+  width: 25px;
+  height: 25px;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 6px;
+}
+
 .prompt {
   display: flex;
   border-radius: 4px;

From 2790de4e9ce2e443db0320c8fd95e46c1b188c2a Mon Sep 17 00:00:00 2001
From: Aaron Brodeur <aaronb@gmail.com>
Date: Wed, 3 May 2023 11:39:36 -0700
Subject: [PATCH 2/7] Cleaned up styling of group cards

---
 src/routes/Groups/Groups.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/routes/Groups/Groups.scss b/src/routes/Groups/Groups.scss
index c9925a0ed..c98935ad8 100644
--- a/src/routes/Groups/Groups.scss
+++ b/src/routes/Groups/Groups.scss
@@ -1,4 +1,5 @@
 .container {
+
 }
 
 .add-group {
@@ -122,6 +123,8 @@
     width: 100%;
     text-decoration: none;
     color: white;
+    max-height: 36px;
+    overflow: hidden;
 
     span {
       white-space: nowrap;
@@ -131,6 +134,7 @@
       text-decoration: none;
       color: white;
       font-size: 14px;
+      line-height: 18px;
     }
   }
 

From 85d2c4cc3b319c6212cd9403d851ea934689581c Mon Sep 17 00:00:00 2001
From: Tibet Sprague <tibet.sprague@gmail.com>
Date: Thu, 4 May 2023 08:55:39 -0700
Subject: [PATCH 3/7] Show first two lines of description on group cards

---
 src/routes/Groups/Groups.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/Groups/Groups.scss b/src/routes/Groups/Groups.scss
index c98935ad8..ceaf5f279 100644
--- a/src/routes/Groups/Groups.scss
+++ b/src/routes/Groups/Groups.scss
@@ -127,7 +127,6 @@
     overflow: hidden;
 
     span {
-      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       display: block;

From b8b73b65b5e46bfa8c92f030eb353e6e9316003c Mon Sep 17 00:00:00 2001
From: Tibet Sprague <tibet.sprague@gmail.com>
Date: Thu, 4 May 2023 08:57:06 -0700
Subject: [PATCH 4/7] Show badges in the sidebar next to Group Moderators

---
 src/routes/GroupSidebar/GroupSidebar.js       | 119 ++++++++++--------
 src/routes/GroupSidebar/GroupSidebar.scss     |   8 +-
 .../__snapshots__/GroupSidebar.test.js.snap   |   1 +
 3 files changed, 77 insertions(+), 51 deletions(-)

diff --git a/src/routes/GroupSidebar/GroupSidebar.js b/src/routes/GroupSidebar/GroupSidebar.js
index f57362127..ad373a631 100644
--- a/src/routes/GroupSidebar/GroupSidebar.js
+++ b/src/routes/GroupSidebar/GroupSidebar.js
@@ -5,6 +5,7 @@ import { isEmpty } from 'lodash/fp'
 import { TextHelpers } from 'hylo-shared'
 import { personUrl, groupUrl } from 'util/navigation'
 import Avatar from 'components/Avatar'
+import BadgeEmoji from 'components/BadgeEmoji'
 import ClickCatcher from 'components/ClickCatcher'
 import Loading from 'components/Loading'
 import RoundImageRow from 'components/RoundImageRow'
@@ -31,19 +32,21 @@ export default class GroupSidebar extends Component {
 
     const { description, memberCount, moderatorDescriptorPlural, name, slug } = group
 
-    return <div styleName='group-sidebar'>
-      <SettingsLink canModerate={canModerate} group={group} />
-      {canModerate && <Link to={groupUrl(slug, 'settings/invite')} styleName='invite-link'>
-        <Button styleName='settings-link'><Icon name='Invite' styleName='invite-icon' /> Invite People</Button>
-      </Link>}
-      <AboutSection name={name} description={description} />
-      <MemberSection
-        members={members}
-        memberCount={memberCount}
-        slug={slug}
-        canModerate={canModerate} />
-      <GroupLeaderSection leaders={leaders} slug={slug} descriptor={moderatorDescriptorPlural} />
-    </div>
+    return (
+      <div styleName='group-sidebar'>
+        <SettingsLink canModerate={canModerate} group={group} />
+        {canModerate && <Link to={groupUrl(slug, 'settings/invite')} styleName='invite-link'>
+          <Button styleName='settings-link'><Icon name='Invite' styleName='invite-icon' /> Invite People</Button>
+        </Link>}
+        <AboutSection name={name} description={description} />
+        <MemberSection
+          members={members}
+          memberCount={memberCount}
+          slug={slug}
+          canModerate={canModerate} />
+        <GroupLeaderSection leaders={leaders} slug={slug} descriptor={moderatorDescriptorPlural} groupId={group.id} />
+      </div>
+    )
   }
 }
 
@@ -70,28 +73,32 @@ export class AboutSection extends Component {
       expanded = true
     }
 
-    return <div styleName='about-section'>
-      <div styleName='header'>
-        About {name}
-      </div>
-      <div styleName={cx('description', { expanded })}>
-        {!expanded && <div styleName='gradient' />}
-        <ClickCatcher>
-          <HyloHTML element='span' html={TextHelpers.markdown(description)} />
-        </ClickCatcher>
+    return (
+      <div styleName='about-section'>
+        <div styleName='header'>
+          About {name}
+        </div>
+        <div styleName={cx('description', { expanded })}>
+          {!expanded && <div styleName='gradient' />}
+          <ClickCatcher>
+            <HyloHTML element='span' html={TextHelpers.markdown(description)} />
+          </ClickCatcher>
+        </div>
+        {showExpandButton && <span styleName='expand-button' onClick={onClick}>
+          {expanded ? 'Show Less' : 'Read More'}
+        </span>}
       </div>
-      {showExpandButton && <span styleName='expand-button' onClick={onClick}>
-        {expanded ? 'Show Less' : 'Read More'}
-      </span>}
-    </div>
+    )
   }
 }
 
 export function SettingsLink ({ canModerate, group }) {
   if (!canModerate) return null
-  return <Link styleName='settings-link' to={groupUrl(group.slug, 'settings')}>
-    <Icon name='Settings' styleName='settings-icon' /> Group Settings
-  </Link>
+  return (
+    <Link styleName='settings-link' to={groupUrl(group.slug, 'settings')}>
+      <Icon name='Settings' styleName='settings-icon' /> Group Settings
+    </Link>
+  )
 }
 
 export function MemberSection ({ members, memberCount, slug, canModerate }) {
@@ -102,30 +109,42 @@ export function MemberSection ({ members, memberCount, slug, canModerate }) {
 
   const showTotal = memberCount - members.length > 0
 
-  return <div styleName='member-section'>
-    <Link to={groupUrl(slug, 'members')} styleName='members-link'>
-      <div styleName='header'>Members</div>
-      <div styleName='images-and-count'>
-        <RoundImageRow imageUrls={members.map(m => m.avatarUrl)} styleName='image-row' />
-        {showTotal && <span styleName='members-total'>
-          {formatTotal(memberCount - members.length)}
-        </span>}
-      </div>
-    </Link>
-  </div>
+  return (
+    <div styleName='member-section'>
+      <Link to={groupUrl(slug, 'members')} styleName='members-link'>
+        <div styleName='header'>Members</div>
+        <div styleName='images-and-count'>
+          <RoundImageRow imageUrls={members.map(m => m.avatarUrl)} styleName='image-row' />
+          {showTotal && <span styleName='members-total'>
+            {formatTotal(memberCount - members.length)}
+          </span>}
+        </div>
+      </Link>
+    </div>
+  )
 }
 
-export function GroupLeaderSection ({ descriptor, leaders, slug }) {
-  return <div styleName='leader-section'>
-    <div styleName='header leader-header'>Group {descriptor}</div>
-    {leaders.map(l => <GroupLeader leader={l} slug={slug} key={l.id} />)}
-  </div>
+export function GroupLeaderSection ({ descriptor, groupId, leaders, slug }) {
+  return (
+    <div styleName='leader-section'>
+      <div styleName='header leader-header'>Group {descriptor}</div>
+      {leaders.map(l => <GroupLeader leader={l} slug={slug} key={l.id} groupId={groupId} />)}
+    </div>
+  )
 }
 
-export function GroupLeader ({ leader, slug }) {
+export function GroupLeader ({ groupId, leader, slug }) {
   const { name, avatarUrl } = leader
-  return <div styleName='leader'>
-    <Avatar url={personUrl(leader.id, slug)} avatarUrl={avatarUrl} styleName='leader-image' medium />
-    <Link to={personUrl(leader.id, slug)} styleName='leader-name'>{name}</Link>
-  </div>
+  const badges = leader.groupRoles?.filter(role => role.groupId === groupId) || []
+  return (
+    <div styleName='leader'>
+      <Avatar url={personUrl(leader.id, slug)} avatarUrl={avatarUrl} styleName='leader-image' medium />
+      <Link to={personUrl(leader.id, slug)} styleName='leader-name'>{name}</Link>
+      <div styleName='badges'>
+        {badges.map(badge => (
+          <BadgeEmoji key={badge.name} expanded {...badge} id={leader.id} />
+        ))}
+      </div>
+    </div>
+  )
 }
diff --git a/src/routes/GroupSidebar/GroupSidebar.scss b/src/routes/GroupSidebar/GroupSidebar.scss
index d357b8be7..9f30fc0ef 100644
--- a/src/routes/GroupSidebar/GroupSidebar.scss
+++ b/src/routes/GroupSidebar/GroupSidebar.scss
@@ -160,7 +160,7 @@ $about-height: 116px;
 }
 
 .leader-image {
-  margin-right: $space-4x;
+  margin-right: $space-2x;
 }
 
 .leader-name {
@@ -171,3 +171,9 @@ $about-height: 116px;
     text-decoration: none;
   }
 }
+
+.badges {
+  display: flex;
+  margin-left: 4px;
+  grid-gap: 2px;
+}
\ No newline at end of file
diff --git a/src/routes/GroupSidebar/__snapshots__/GroupSidebar.test.js.snap b/src/routes/GroupSidebar/__snapshots__/GroupSidebar.test.js.snap
index bf40d2c57..49cc1692e 100644
--- a/src/routes/GroupSidebar/__snapshots__/GroupSidebar.test.js.snap
+++ b/src/routes/GroupSidebar/__snapshots__/GroupSidebar.test.js.snap
@@ -37,6 +37,7 @@ exports[`GroupSidebar renders correctly 1`] = `
     slug="great-cause"
   />
   <GroupLeaderSection
+    groupId={1}
     leaders={
       Array [
         Object {

From fac2bfa920dce121f4cce15121ab59fd4f7c60cd Mon Sep 17 00:00:00 2001
From: Tibet Sprague <tibet.sprague@gmail.com>
Date: Thu, 4 May 2023 08:59:04 -0700
Subject: [PATCH 5/7] Update to version 5.4.2

---
 CHANGELOG.md | 9 +++++++++
 package.json | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5410005ea..1dc50c53f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## [5.4.2] - 2023-05-04
+
+### Changed
+- Tweaked styling of group cards so they are not too big and show first two lines of description
+
+### Added
+- Show badges next to moderators in group sidebar
+
+
 ## [5.4.1] - 2023-04-13
 
 ### Fixed
diff --git a/package.json b/package.json
index 489f7f13a..613e6fcba 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hylo-evo",
   "description": "Hylo Frontend",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "private": true,
   "engines": {
     "node": "16.13.2",

From 9f39b44911d973a04585940dc3bea24e25d9dcc2 Mon Sep 17 00:00:00 2001
From: Tibet Sprague <tibet.sprague@gmail.com>
Date: Thu, 4 May 2023 09:58:36 -0700
Subject: [PATCH 6/7] Make sure group roles appear for all moderators in
 sidebar

---
 src/graphql/fragments/groupFieldsFragment.js | 6 ++++++
 src/graphql/fragments/groupQueryFragment.js  | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/src/graphql/fragments/groupFieldsFragment.js b/src/graphql/fragments/groupFieldsFragment.js
index 648967594..227b1e4c6 100644
--- a/src/graphql/fragments/groupFieldsFragment.js
+++ b/src/graphql/fragments/groupFieldsFragment.js
@@ -90,6 +90,12 @@ const groupFieldsFragment = ({ withTopics, withJoinQuestions, withPrerequisites,
       id
       name
       avatarUrl
+      groupRoles {
+        name
+        emoji
+        active
+        groupId
+      }
     }
   }
   parentGroups {
diff --git a/src/graphql/fragments/groupQueryFragment.js b/src/graphql/fragments/groupQueryFragment.js
index bfe66079d..0eda6c1a9 100644
--- a/src/graphql/fragments/groupQueryFragment.js
+++ b/src/graphql/fragments/groupQueryFragment.js
@@ -187,6 +187,12 @@ export default () => {
         avatarUrl
         lastActiveAt
         name
+        groupRoles {
+          name
+          emoji
+          active
+          groupId
+        }
       }
     }
     openOffersAndRequests: posts(types: ["offer", "request"], isFulfilled: false, first: 4) {

From ae4d4620ca9570f98b0aace1a07b26383e361396 Mon Sep 17 00:00:00 2001
From: Tibet Sprague <tibet.sprague@gmail.com>
Date: Thu, 4 May 2023 14:36:51 -0700
Subject: [PATCH 7/7] CHANGELOG tweak

---
 CHANGELOG.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1dc50c53f..8fe378e91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,12 +8,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [5.4.2] - 2023-05-04
 
-### Changed
-- Tweaked styling of group cards so they are not too big and show first two lines of description
-
 ### Added
 - Show badges next to moderators in group sidebar
+- Send button to all comment forms 
 
+### Changed
+- Tweaked styling of group cards so they are not too big and show first two lines of description
 
 ## [5.4.1] - 2023-04-13