From 99412beaf3e5d5406925b1c83fd2aea533feaa76 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 3 Apr 2023 14:09:06 +0200
Subject: [PATCH] feat: added dismiss button to NoticeBanner

---
 ts/components/NoticeBanner.tsx                | 25 +++++++++++++++++--
 .../conversation/SessionConversation.tsx      |  5 ++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/ts/components/NoticeBanner.tsx b/ts/components/NoticeBanner.tsx
index 7adf44220..70fce54fd 100644
--- a/ts/components/NoticeBanner.tsx
+++ b/ts/components/NoticeBanner.tsx
@@ -1,21 +1,33 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Flex } from './basic/Flex';
+import { SessionIconButton } from './icon';
 
 const StyledNoticeBanner = styled(Flex)`
+  position: relative;
   background-color: var(--primary-color);
   color: var(--background-primary-color);
   font-size: var(--font-size-lg);
   padding: var(--margins-xs) var(--margins-sm);
   text-align: center;
+
+  .session-icon-button {
+    position: absolute;
+    right: var(--margins-sm);
+  }
+`;
+
+const StyledText = styled.span`
+  margin-right: var(--margins-lg);
 `;
 
 type NoticeBannerProps = {
   text: string;
+  dismissCallback: () => void;
 };
 
 export const NoticeBanner = (props: NoticeBannerProps) => {
-  const { text } = props;
+  const { text, dismissCallback } = props;
 
   return (
     <StyledNoticeBanner
@@ -24,7 +36,16 @@ export const NoticeBanner = (props: NoticeBannerProps) => {
       justifyContent={'center'}
       alignItems={'center'}
     >
-      {text}
+      <StyledText>{text}</StyledText>
+      <SessionIconButton
+        iconType="exit"
+        iconColor="inherit"
+        iconSize="small"
+        onClick={event => {
+          event.preventDefault();
+          dismissCallback();
+        }}
+      />
     </StyledNoticeBanner>
   );
 };
diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx
index f43540a01..5bf640d13 100644
--- a/ts/components/conversation/SessionConversation.tsx
+++ b/ts/components/conversation/SessionConversation.tsx
@@ -261,6 +261,11 @@ export class SessionConversation extends React.Component<Props, State> {
                 text={window.i18n('disappearingMessagesModeOutdated', [
                   selectedConversation.hasOutdatedClient,
                 ])}
+                dismissCallback={() => {
+                  const conversation = getConversationController().get(selectedConversation.id);
+                  conversation.set({ hasOutdatedClient: undefined });
+                  conversation.commit();
+                }}
               />
             )}
         </div>