diff --git a/webapp/channels/package.json b/webapp/channels/package.json
index 66bca562e7..c706345121 100644
--- a/webapp/channels/package.json
+++ b/webapp/channels/package.json
@@ -49,7 +49,7 @@
     "localforage": "1.10.0",
     "localforage-observable": "2.1.1",
     "lodash": "4.17.21",
-    "luxon": "3.3.0",
+    "luxon": "3.6.1",
     "mark.js": "8.11.1",
     "marked": "github:mattermost/marked#3b13ba8ddf725327ddf0298361d6d304a021f2d1",
     "memoize-one": "6.0.0",
@@ -90,7 +90,7 @@
     "shallow-equals": "1.0.0",
     "smooth-scroll-into-view-if-needed": "2.0.2",
     "stream-browserify": "3.0.0",
-    "styled-components": "5.3.6",
+    "styled-components": "5.3.7",
     "timezones.json": "1.7.1",
     "tinycolor2": "1.6.0",
     "turndown": "7.2.0",
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap
index 3e7031ef75..f385c642b7 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/custom_enable_disable_guest_accounts_setting.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
       class="col-sm-8"
     >
       <label
-        class="Label-eIDBis ggzVFA"
+        class="Label-eJcoMl iShgPr"
       >
         <input
           data-testid="MySettingtrue"
@@ -28,7 +28,7 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
         True
       </label>
       <label
-        class="Label-eIDBis ggzVFA"
+        class="Label-eJcoMl iShgPr"
       >
         <input
           checked=""
@@ -73,7 +73,7 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
       class="col-sm-8"
     >
       <label
-        class="Label-eIDBis ggzVFA"
+        class="Label-eJcoMl iShgPr"
       >
         <input
           checked=""
@@ -86,7 +86,7 @@ exports[`components/AdminConsole/CustomEnableDisableGuestAccountsSetting renders
         True
       </label>
       <label
-        class="Label-eIDBis ggzVFA"
+        class="Label-eJcoMl iShgPr"
       >
         <input
           data-testid="MySettingfalse"
diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap b/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap
index 4d57b8c32f..47cae603e2 100644
--- a/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap
+++ b/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`NotificationPermissionBar should render the NotificationPermissionNeverGrantedBar when permission is never granted yet 1`] = `
 <div>
   <div
-    class="_StyledDiv-BRlth ksRYxX announcement-bar"
+    class="_StyledDiv-BZhus eMNHXM announcement-bar"
   >
     <div
       class="announcement-bar__text"
@@ -33,7 +33,7 @@ exports[`NotificationPermissionBar should render the NotificationPermissionNever
 exports[`NotificationPermissionBar should render the NotificationUnsupportedBar if notifications are not supported 1`] = `
 <div>
   <div
-    class="_StyledDiv-BRlth ksRYxX announcement-bar"
+    class="_StyledDiv-BZhus eMNHXM announcement-bar"
   >
     <div
       class="announcement-bar__text"
diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
index cfde375735..b3acbd9ab1 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
@@ -657,7 +657,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                                 uppercase={true}
                               >
                                 <div
-                                  className="TagWrapper-keYggn gnIgwl Tag Tag--info Tag--xs"
+                                  className="TagWrapper-kezsCu cA-dXXM Tag Tag--info Tag--xs"
                                   data-testid="post-priority-label"
                                 >
                                   <AlertCircleOutlineIcon
@@ -678,7 +678,7 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
                                   </AlertCircleOutlineIcon>
                                   <TagText>
                                     <span
-                                      className="TagText-bWgUzx kzWPbz"
+                                      className="TagText-bWoQAI beIloY"
                                     >
                                       Important
                                     </span>
diff --git a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
index 0034c19c83..96fb26a131 100644
--- a/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/__snapshots__/user_group_popover.test.tsx.snap
@@ -59,21 +59,21 @@ exports[`component/user_group_popover should match snapshot 1`] = `
       >
         <Body>
           <div
-            className="Body-jPXXyK jYTxAq"
+            className="Body-jPQbxz igoCos"
           >
             <Header>
               <div
-                className="Header-ibKheB hIZrPW"
+                className="Header-ibSdfM kusPoL"
               >
                 <Heading>
                   <div
-                    className="Heading-dalVaC VzXTr"
+                    className="Heading-da-dYZr fNyNqu"
                   >
                     <Title
                       className="overflow--ellipsis text-nowrap"
                     >
                       <span
-                        className="Title-kjfqTJ hEcOkX overflow--ellipsis text-nowrap"
+                        className="Title-kjnmUU dRyzkA overflow--ellipsis text-nowrap"
                       >
                         group_display_name
                       </span>
@@ -85,7 +85,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                     >
                       <button
                         aria-label="Close user group popover"
-                        className="CloseButton-lhxEdi gyMeQZ btn btn-sm btn-compact btn-icon"
+                        className="CloseButton-lhpIbX gfSMvf btn btn-sm btn-compact btn-icon"
                         onClick={[Function]}
                       >
                         <i
@@ -97,7 +97,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                 </Heading>
                 <Subtitle>
                   <div
-                    className="Subtitle-ocLvS dzpPJy"
+                    className="Subtitle-nUPuH jRbNtQ"
                   >
                     <span
                       className="overflow--ellipsis text-nowrap"
@@ -107,7 +107,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                     </span>
                     <Dot>
                       <span
-                        className="NoShrink-kvXWXm Dot-etDJYJ wzpro jiooBj"
+                        className="NoShrink-kvQaWb Dot-eteWuQ dtTPXO cgfuuF"
                       >
                         •
                       </span>
@@ -120,9 +120,9 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                           "$$typeof": Symbol(react.forward_ref),
                           "attrs": Array [],
                           "componentStyle": e {
-                            "baseHash": -1318562053,
+                            "baseHash": 1545875173,
                             "baseStyle": undefined,
-                            "componentId": "NoShrink-kvXWXm",
+                            "componentId": "NoShrink-kvQaWb",
                             "isStatic": false,
                             "rules": Array [
                               "flex:0 0 auto;",
@@ -132,7 +132,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                           "foldedComponentIds": Array [],
                           "render": [Function],
                           "shouldForwardProp": undefined,
-                          "styledComponentId": "NoShrink-kvXWXm",
+                          "styledComponentId": "NoShrink-kvQaWb",
                           "target": "span",
                           "toString": [Function],
                           "warnTooManyClasses": [Function],
@@ -147,7 +147,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                     >
                       <NoShrink>
                         <span
-                          className="NoShrink-kvXWXm wzpro"
+                          className="NoShrink-kvQaWb dtTPXO"
                         >
                           15 Members
                         </span>
@@ -162,7 +162,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                 >
                   <button
                     aria-label="group_display_name @group_name 15 Members View full group info"
-                    className="HeaderButton-jHgPlb jFywol user-group-popover_header-button"
+                    className="HeaderButton-jHoLmm ilOgnu user-group-popover_header-button"
                     onClick={[Function]}
                   />
                 </HeaderButton>
@@ -170,7 +170,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
             </Header>
             <SearchBar>
               <div
-                className="SearchBar-cqKmJF easqtW"
+                className="SearchBar-cqlzfM icjFto"
               >
                 <MagnifyIcon>
                   <svg
@@ -905,7 +905,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                   }
                 >
                   <div
-                    className="UserList-XqScV gnsdGQ"
+                    className="UserList-XyOeg gYqnUW"
                     role="list"
                     style={
                       Object {
@@ -986,7 +986,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                   }
                                 >
                                   <div
-                                    className="UserListItem-iCIMiI bTPvin group-member-list_item"
+                                    className="UserListItem-iDhzMB btbTmI group-member-list_item"
                                     role="listitem"
                                     style={
                                       Object {
@@ -1015,7 +1015,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       >
                                         <UserButton>
                                           <button
-                                            className="UserButton-bZNeGd gDRhSF"
+                                            className="UserButton-bZVaHo jdKisE"
                                           >
                                             <span
                                               className="status-wrapper"
@@ -1073,7 +1073,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="overflow--ellipsis text-nowrap"
                                             >
                                               <span
-                                                className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                                className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                               >
                                                 username0
                                               </span>
@@ -1082,7 +1082,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="group-member-list_gap"
                                             >
                                               <span
-                                                className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                                className="Gap-pObhx gkSZux group-member-list_gap"
                                               />
                                             </Gap>
                                           </button>
@@ -1093,7 +1093,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       className="group-member-list_dm-button"
                                     >
                                       <div
-                                        className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                        className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                                       >
                                         <WithTooltip
                                           title="Send message"
@@ -1112,7 +1112,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <button
                                               aria-label="Send message to username0"
-                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
@@ -1165,7 +1165,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                   }
                                 >
                                   <div
-                                    className="UserListItem-iCIMiI cXUsja group-member-list_item"
+                                    className="UserListItem-iDhzMB dXGDct group-member-list_item"
                                     role="listitem"
                                     style={
                                       Object {
@@ -1194,7 +1194,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       >
                                         <UserButton>
                                           <button
-                                            className="UserButton-bZNeGd gDRhSF"
+                                            className="UserButton-bZVaHo jdKisE"
                                           >
                                             <span
                                               className="status-wrapper"
@@ -1252,7 +1252,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="overflow--ellipsis text-nowrap"
                                             >
                                               <span
-                                                className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                                className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                               >
                                                 username1
                                               </span>
@@ -1261,7 +1261,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="group-member-list_gap"
                                             >
                                               <span
-                                                className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                                className="Gap-pObhx gkSZux group-member-list_gap"
                                               />
                                             </Gap>
                                           </button>
@@ -1272,7 +1272,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       className="group-member-list_dm-button"
                                     >
                                       <div
-                                        className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                        className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                                       >
                                         <WithTooltip
                                           title="Send message"
@@ -1291,7 +1291,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <button
                                               aria-label="Send message to username1"
-                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
@@ -1344,7 +1344,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                   }
                                 >
                                   <div
-                                    className="UserListItem-iCIMiI cXUsja group-member-list_item"
+                                    className="UserListItem-iDhzMB dXGDct group-member-list_item"
                                     role="listitem"
                                     style={
                                       Object {
@@ -1373,7 +1373,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       >
                                         <UserButton>
                                           <button
-                                            className="UserButton-bZNeGd gDRhSF"
+                                            className="UserButton-bZVaHo jdKisE"
                                           >
                                             <span
                                               className="status-wrapper"
@@ -1431,7 +1431,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="overflow--ellipsis text-nowrap"
                                             >
                                               <span
-                                                className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                                className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                               >
                                                 username10
                                               </span>
@@ -1440,7 +1440,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="group-member-list_gap"
                                             >
                                               <span
-                                                className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                                className="Gap-pObhx gkSZux group-member-list_gap"
                                               />
                                             </Gap>
                                           </button>
@@ -1451,7 +1451,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       className="group-member-list_dm-button"
                                     >
                                       <div
-                                        className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                        className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                                       >
                                         <WithTooltip
                                           title="Send message"
@@ -1470,7 +1470,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <button
                                               aria-label="Send message to username10"
-                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
@@ -1523,7 +1523,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                   }
                                 >
                                   <div
-                                    className="UserListItem-iCIMiI cXUsja group-member-list_item"
+                                    className="UserListItem-iDhzMB dXGDct group-member-list_item"
                                     role="listitem"
                                     style={
                                       Object {
@@ -1552,7 +1552,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       >
                                         <UserButton>
                                           <button
-                                            className="UserButton-bZNeGd gDRhSF"
+                                            className="UserButton-bZVaHo jdKisE"
                                           >
                                             <span
                                               className="status-wrapper"
@@ -1610,7 +1610,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="overflow--ellipsis text-nowrap"
                                             >
                                               <span
-                                                className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                                className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                               >
                                                 username11
                                               </span>
@@ -1619,7 +1619,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="group-member-list_gap"
                                             >
                                               <span
-                                                className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                                className="Gap-pObhx gkSZux group-member-list_gap"
                                               />
                                             </Gap>
                                           </button>
@@ -1630,7 +1630,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       className="group-member-list_dm-button"
                                     >
                                       <div
-                                        className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                        className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                                       >
                                         <WithTooltip
                                           title="Send message"
@@ -1649,7 +1649,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <button
                                               aria-label="Send message to username11"
-                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
@@ -1702,7 +1702,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                   }
                                 >
                                   <div
-                                    className="UserListItem-iCIMiI cXUsja group-member-list_item"
+                                    className="UserListItem-iDhzMB dXGDct group-member-list_item"
                                     role="listitem"
                                     style={
                                       Object {
@@ -1731,7 +1731,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       >
                                         <UserButton>
                                           <button
-                                            className="UserButton-bZNeGd gDRhSF"
+                                            className="UserButton-bZVaHo jdKisE"
                                           >
                                             <span
                                               className="status-wrapper"
@@ -1789,7 +1789,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="overflow--ellipsis text-nowrap"
                                             >
                                               <span
-                                                className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                                className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                               >
                                                 username12
                                               </span>
@@ -1798,7 +1798,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                               className="group-member-list_gap"
                                             >
                                               <span
-                                                className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                                className="Gap-pObhx gkSZux group-member-list_gap"
                                               />
                                             </Gap>
                                           </button>
@@ -1809,7 +1809,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                       className="group-member-list_dm-button"
                                     >
                                       <div
-                                        className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                        className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                                       >
                                         <WithTooltip
                                           title="Send message"
@@ -1828,7 +1828,7 @@ exports[`component/user_group_popover should match snapshot 1`] = `
                                           >
                                             <button
                                               aria-label="Send message to username12"
-                                              className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                              className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
diff --git a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
index e8bf00e2bf..4422ad77b4 100644
--- a/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
+++ b/webapp/channels/src/components/user_group_popover/group_member_list/__snapshots__/group_member_list.test.tsx.snap
@@ -291,7 +291,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
           }
         >
           <div
-            className="UserList-XqScV gnsdGQ"
+            className="UserList-XyOeg gYqnUW"
             role="list"
             style={
               Object {
@@ -372,7 +372,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                           }
                         >
                           <div
-                            className="UserListItem-iCIMiI bTPvin group-member-list_item"
+                            className="UserListItem-iDhzMB btbTmI group-member-list_item"
                             role="listitem"
                             style={
                               Object {
@@ -401,7 +401,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               >
                                 <UserButton>
                                   <button
-                                    className="UserButton-bZNeGd gDRhSF"
+                                    className="UserButton-bZVaHo jdKisE"
                                   >
                                     <span
                                       className="status-wrapper"
@@ -459,7 +459,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="overflow--ellipsis text-nowrap"
                                     >
                                       <span
-                                        className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                        className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                       >
                                         Name0 Surname0
                                       </span>
@@ -468,7 +468,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="group-member-list_gap"
                                     >
                                       <span
-                                        className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                        className="Gap-pObhx gkSZux group-member-list_gap"
                                       />
                                     </Gap>
                                   </button>
@@ -479,7 +479,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               className="group-member-list_dm-button"
                             >
                               <div
-                                className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                               >
                                 <WithTooltip
                                   title="Send message"
@@ -498,7 +498,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <button
                                       aria-label="Send message to Name0 Surname0"
-                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                       onBlur={[Function]}
                                       onClick={[Function]}
                                       onFocus={[Function]}
@@ -551,7 +551,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                           }
                         >
                           <div
-                            className="UserListItem-iCIMiI cXUsja group-member-list_item"
+                            className="UserListItem-iDhzMB dXGDct group-member-list_item"
                             role="listitem"
                             style={
                               Object {
@@ -580,7 +580,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               >
                                 <UserButton>
                                   <button
-                                    className="UserButton-bZNeGd gDRhSF"
+                                    className="UserButton-bZVaHo jdKisE"
                                   >
                                     <span
                                       className="status-wrapper"
@@ -638,7 +638,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="overflow--ellipsis text-nowrap"
                                     >
                                       <span
-                                        className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                        className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                       >
                                         Name1 Surname1
                                       </span>
@@ -647,7 +647,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="group-member-list_gap"
                                     >
                                       <span
-                                        className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                        className="Gap-pObhx gkSZux group-member-list_gap"
                                       />
                                     </Gap>
                                   </button>
@@ -658,7 +658,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               className="group-member-list_dm-button"
                             >
                               <div
-                                className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                               >
                                 <WithTooltip
                                   title="Send message"
@@ -677,7 +677,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <button
                                       aria-label="Send message to Name1 Surname1"
-                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                       onBlur={[Function]}
                                       onClick={[Function]}
                                       onFocus={[Function]}
@@ -730,7 +730,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                           }
                         >
                           <div
-                            className="UserListItem-iCIMiI cXUsja group-member-list_item"
+                            className="UserListItem-iDhzMB dXGDct group-member-list_item"
                             role="listitem"
                             style={
                               Object {
@@ -759,7 +759,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               >
                                 <UserButton>
                                   <button
-                                    className="UserButton-bZNeGd gDRhSF"
+                                    className="UserButton-bZVaHo jdKisE"
                                   >
                                     <span
                                       className="status-wrapper"
@@ -817,7 +817,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="overflow--ellipsis text-nowrap"
                                     >
                                       <span
-                                        className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                        className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                       >
                                         Name2 Surname2
                                       </span>
@@ -826,7 +826,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="group-member-list_gap"
                                     >
                                       <span
-                                        className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                        className="Gap-pObhx gkSZux group-member-list_gap"
                                       />
                                     </Gap>
                                   </button>
@@ -837,7 +837,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               className="group-member-list_dm-button"
                             >
                               <div
-                                className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                               >
                                 <WithTooltip
                                   title="Send message"
@@ -856,7 +856,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <button
                                       aria-label="Send message to Name2 Surname2"
-                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                       onBlur={[Function]}
                                       onClick={[Function]}
                                       onFocus={[Function]}
@@ -909,7 +909,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                           }
                         >
                           <div
-                            className="UserListItem-iCIMiI cXUsja group-member-list_item"
+                            className="UserListItem-iDhzMB dXGDct group-member-list_item"
                             role="listitem"
                             style={
                               Object {
@@ -938,7 +938,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               >
                                 <UserButton>
                                   <button
-                                    className="UserButton-bZNeGd gDRhSF"
+                                    className="UserButton-bZVaHo jdKisE"
                                   >
                                     <span
                                       className="status-wrapper"
@@ -996,7 +996,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="overflow--ellipsis text-nowrap"
                                     >
                                       <span
-                                        className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                        className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                       >
                                         Name3 Surname3
                                       </span>
@@ -1005,7 +1005,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="group-member-list_gap"
                                     >
                                       <span
-                                        className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                        className="Gap-pObhx gkSZux group-member-list_gap"
                                       />
                                     </Gap>
                                   </button>
@@ -1016,7 +1016,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               className="group-member-list_dm-button"
                             >
                               <div
-                                className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                               >
                                 <WithTooltip
                                   title="Send message"
@@ -1035,7 +1035,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <button
                                       aria-label="Send message to Name3 Surname3"
-                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                       onBlur={[Function]}
                                       onClick={[Function]}
                                       onFocus={[Function]}
@@ -1088,7 +1088,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                           }
                         >
                           <div
-                            className="UserListItem-iCIMiI krPIGz group-member-list_item"
+                            className="UserListItem-iDhzMB hyQuZQ group-member-list_item"
                             role="listitem"
                             style={
                               Object {
@@ -1117,7 +1117,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               >
                                 <UserButton>
                                   <button
-                                    className="UserButton-bZNeGd gDRhSF"
+                                    className="UserButton-bZVaHo jdKisE"
                                   >
                                     <span
                                       className="status-wrapper"
@@ -1175,7 +1175,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="overflow--ellipsis text-nowrap"
                                     >
                                       <span
-                                        className="Username-hebqVM cKlgOV overflow--ellipsis text-nowrap"
+                                        className="Username-heAezF leQMXk overflow--ellipsis text-nowrap"
                                       >
                                         Name4 Surname4
                                       </span>
@@ -1184,7 +1184,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                       className="group-member-list_gap"
                                     >
                                       <span
-                                        className="Gap-pVXiI hWeVKL group-member-list_gap"
+                                        className="Gap-pObhx gkSZux group-member-list_gap"
                                       />
                                     </Gap>
                                   </button>
@@ -1195,7 +1195,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                               className="group-member-list_dm-button"
                             >
                               <div
-                                className="DMContainer-ilPVMc Cnskx group-member-list_dm-button"
+                                className="DMContainer-imoJpV dVIrdO group-member-list_dm-button"
                               >
                                 <WithTooltip
                                   title="Send message"
@@ -1214,7 +1214,7 @@ exports[`component/user_group_popover/group_member_list should match snapshot 1`
                                   >
                                     <button
                                       aria-label="Send message to Name4 Surname4"
-                                      className="DMButton-hIFgRF ecgFEo btn btn-icon btn-xs"
+                                      className="DMButton-hIgtnM hCLJtg btn btn-icon btn-xs"
                                       onBlur={[Function]}
                                       onClick={[Function]}
                                       onFocus={[Function]}
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index f7ec8ecaec..c7345a6558 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -103,7 +103,7 @@
         "localforage": "1.10.0",
         "localforage-observable": "2.1.1",
         "lodash": "4.17.21",
-        "luxon": "3.3.0",
+        "luxon": "3.6.1",
         "mark.js": "8.11.1",
         "marked": "github:mattermost/marked#3b13ba8ddf725327ddf0298361d6d304a021f2d1",
         "memoize-one": "6.0.0",
@@ -144,7 +144,7 @@
         "shallow-equals": "1.0.0",
         "smooth-scroll-into-view-if-needed": "2.0.2",
         "stream-browserify": "3.0.0",
-        "styled-components": "5.3.6",
+        "styled-components": "5.3.7",
         "timezones.json": "1.7.1",
         "tinycolor2": "1.6.0",
         "turndown": "7.2.0",
@@ -429,6 +429,14 @@
         "react-dom": "^17.0.1"
       }
     },
+    "channels/node_modules/luxon": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.6.1.tgz",
+      "integrity": "sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "channels/node_modules/react-color": {
       "version": "2.19.3",
       "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
@@ -592,6 +600,35 @@
         "node": ">=8"
       }
     },
+    "channels/node_modules/styled-components": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.7.tgz",
+      "integrity": "sha512-JL1b4A79OGqav4TxkrNsuuQfy6ZnrpyQx6hBDQ3Hd3JyuR2IQuVNBpF+FCEWFNZpN5hj+fhkaEVWteVJ18f0tw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
     "channels/node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
@@ -20562,14 +20599,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/luxon": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.3.0.tgz",
-      "integrity": "sha512-An0UCfG/rSiqtAIiBPO0Y9/zAnHUZxAMiCpTd5h2smgsj7GGmcenvrvww2cqNA8/4A5ZrD1gJpHN2mIHZQF+Mg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",