From ffe0f3b74bf75dab255720c5fbf5673caf59bfb0 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Tue, 25 May 2021 09:04:03 +0300
Subject: [PATCH 01/46] AAA I can set an announcement with funnels and CTA
 button

---
 functions/venue.js                            |   3 +-
 src/api/bannerAdmin.ts                        |   2 +-
 .../AnnouncementMessage.scss                  |  13 +-
 .../AnnouncementMessage.tsx                   |  26 +--
 src/components/molecules/NavBar/NavBar.tsx    |   1 -
 .../organisms/BannerAdmin/BannerAdmin.scss    |  22 +++
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 155 +++++++++++++-----
 src/pages/Admin/Venue/VenueAdminPage.scss     |  25 ++-
 src/pages/Admin/Venue/VenueAdminPage.tsx      |  41 +++--
 .../AnnouncementContainer.scss                |   9 +
 .../AnnouncementContainer.tsx                 |  18 ++
 .../VenuePage/AnnouncementContainer/index.ts  |   1 +
 src/pages/VenuePage/TemplateWrapper.tsx       |  26 +--
 src/types/banner.ts                           |   9 +
 src/types/venues.ts                           |   3 +-
 15 files changed, 264 insertions(+), 90 deletions(-)
 create mode 100644 src/components/organisms/BannerAdmin/BannerAdmin.scss
 create mode 100644 src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
 create mode 100644 src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
 create mode 100644 src/pages/VenuePage/AnnouncementContainer/index.ts
 create mode 100644 src/types/banner.ts

diff --git a/functions/venue.js b/functions/venue.js
index 569fff6525..ecdcdb3c4b 100644
--- a/functions/venue.js
+++ b/functions/venue.js
@@ -863,6 +863,7 @@ exports.adminHideVenue = functions.https.onCall(async (data, context) => {
   admin.firestore().collection("venues").doc(venueId).update(updated);
 });
 
+//This will be change
 exports.adminUpdateBannerMessage = functions.https.onCall(
   async (data, context) => {
     await checkUserIsOwner(data.venueId, context.auth.token.user_id);
@@ -870,7 +871,7 @@ exports.adminUpdateBannerMessage = functions.https.onCall(
       .firestore()
       .collection("venues")
       .doc(data.venueId)
-      .update({ bannerMessage: data.bannerMessage || null });
+      .update({ banner: data.banner || null });
   }
 );
 
diff --git a/src/api/bannerAdmin.ts b/src/api/bannerAdmin.ts
index 9df2c4166f..f25020fcac 100644
--- a/src/api/bannerAdmin.ts
+++ b/src/api/bannerAdmin.ts
@@ -7,7 +7,7 @@ export const makeUpdateBanner = (
 ) => async (message?: string): Promise<void> => {
   const params = {
     venueId,
-    bannerMessage: message ?? "",
+    banner: message ?? {},
   };
 
   await firebase
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 95055d4df4..3ca98f0a27 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -7,20 +7,13 @@ $message-margin: $spacing + $close-icon-width + 5px;
 .announcement-container {
   display: block;
   z-index: z(announcement);
-  position: absolute;
+  position: relative;
   background: $primary;
-  top: 66px;
-  left: 50%;
-  width: 500px;
-  margin: 0 auto 0 -250px;
+  width: 638px;
   transition: left 0.1s linear;
 
-  &.centered {
-    left: 50%;
-  }
-
   padding: $spacing 0;
-  border-radius: 0 0 20px 20px;
+  border-radius: 20px;
   text-align: center;
 
   .close-button {
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index b73238edfe..dcc25db58b 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -9,12 +9,16 @@ import { RenderMarkdown } from "components/organisms/RenderMarkdown";
 
 import "./AnnouncementMessage.scss";
 
+import { BannerFormData } from "types/banner";
+
 type AnnouncementMessageProps = {
-  message?: string;
+  banner?: BannerFormData;
+  isCancel?: boolean;
 };
 
 export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
-  message = "",
+  banner,
+  isCancel = false,
 }) => {
   const [isVisible, setVisibility] = useState<boolean>(false);
   const { isExpanded } = useChatSidebarControls();
@@ -24,12 +28,12 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   }, []);
 
   useEffect(() => {
-    if (message) {
+    if (banner?.content) {
       setVisibility(true);
     }
-  }, [message]);
+  }, [banner]);
 
-  if (!isVisible || !message) return null;
+  if (!isVisible || !banner?.content) return null;
 
   return (
     <div
@@ -40,15 +44,17 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       })}
     >
       <div className="announcement-message" id="announcement-container-message">
-        <RenderMarkdown text={message} />
+        <RenderMarkdown text={banner.content} />
       </div>
-      <button
+      {isCancel ? (
+        <button
         aria-label="Close announcement message"
         className="close-button"
         onClick={hideAnnouncement}
-      >
-        <FontAwesomeIcon icon={faTimesCircle} />
-      </button>
+        >
+          <FontAwesomeIcon icon={faTimesCircle} />
+        </button>
+      ) : null}
     </div>
   );
 };
diff --git a/src/components/molecules/NavBar/NavBar.tsx b/src/components/molecules/NavBar/NavBar.tsx
index c3b639ccc7..3cfdda3727 100644
--- a/src/components/molecules/NavBar/NavBar.tsx
+++ b/src/components/molecules/NavBar/NavBar.tsx
@@ -74,7 +74,6 @@ export interface NavBarPropsType {
 export const NavBar: React.FC<NavBarPropsType> = ({ hasBackButton = true }) => {
   const { user, userWithId } = useUser();
   const venueId = useVenueId();
-
   const radioStations = useSelector(radioStationsSelector);
 
   const { currentVenue, parentVenue, sovereignVenueId } = useRelatedVenues({
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
new file mode 100644
index 0000000000..eeca85effa
--- /dev/null
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -0,0 +1,22 @@
+@import "scss/constants.scss";
+
+.Banner {
+  &__input-text {
+    text-align: start;
+  }
+
+  &__button-container {
+    margin-top: 25px;
+  }
+
+  &__action-container {
+    margin-left: 50px;
+  }
+}
+
+.BannerToggle {
+  &__title {
+    font-size: $font-size--lg;
+    margin-left: $spacing--md;
+  }
+}
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 2c7c70fd47..4fd3950430 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -1,9 +1,21 @@
-import React, { useCallback, useRef, useState } from "react";
-
-import { makeUpdateBanner } from "api/bannerAdmin";
+import React, { useCallback } from "react";
+import { useForm } from "react-hook-form";
 
+import { BannerFormData } from "types/banner";
 import { AnyVenue } from "types/venues";
 
+import "./BannerAdmin.scss";
+
+const initialBannerData = {
+  title: "",
+  content: "",
+  isActionButton: false,
+  buttonUrl: "",
+  buttonDisplayText: "",
+  isFullScreen: false,
+  isCloseButton: false,
+};
+
 interface BannerAdminProps {
   venueId?: string;
   venue: AnyVenue;
@@ -12,73 +24,132 @@ interface BannerAdminProps {
 // @debt This component is almost exactly the same as IframeAdmin, we should refactor them both to use the same generic base component
 //   BannerAdmin is the 'canonical example' to follow when we do this
 export const BannerAdmin: React.FC<BannerAdminProps> = ({ venueId, venue }) => {
-  const existingBannerMessage = venue?.bannerMessage ?? "";
-
-  const textareaFieldRef = useRef<HTMLTextAreaElement>(null);
-  const [error, setError] = useState<string | null>();
-
-  const handleInputChange = useCallback(() => {
-    setError(null);
-  }, []);
+  const { register, handleSubmit, reset } = useForm<BannerFormData>({
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
 
   const updateBannerInFirestore = useCallback(
-    (msg?: string) => {
+    (data: BannerFormData) => {
       if (!venueId) return;
 
-      makeUpdateBanner(venueId, (errorMsg) => setError(errorMsg))(msg);
+      // makeUpdateBanner(venueId)(data);
     },
     [venueId]
   );
 
-  const saveBanner = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.preventDefault();
+  const onSubmit = (data: BannerFormData) => {
+    updateBannerInFirestore(data);
+  };
 
-      if (!textareaFieldRef.current) return;
-
-      updateBannerInFirestore(textareaFieldRef.current.value);
-    },
-    [updateBannerInFirestore]
-  );
-
-  const clearBanner = useCallback(() => updateBannerInFirestore(""), [
-    updateBannerInFirestore,
-  ]);
+  const clearBanner = useCallback(() => {
+    updateBannerInFirestore(initialBannerData);
+    reset();
+  }, [updateBannerInFirestore, reset]);
 
   return (
     <div className="container">
       <div className="row">
         <div className="col">
-          <form>
+          <form onSubmit={handleSubmit(onSubmit)}>
             <div className="form-group">
-              <label htmlFor="bannerMessage">Banner Message</label>
+              <input
+                ref={register({ required: true })}
+                name="title"
+                type="text"
+                placeholder="Please type your announcement title. (optional)"
+                autoComplete="off"
+                className="Banner__input-text"
+              />
+            </div>
 
+            <div className="form-group">
               <textarea
-                ref={textareaFieldRef}
-                defaultValue={existingBannerMessage}
-                onChange={handleInputChange}
-                placeholder="Enter banner message here..."
-                autoComplete="off"
+                name="content"
+                className="Banner__input-text"
+                placeholder="Please type your announcement content"
+                ref={register}
               />
+            </div>
+
+            <div className="BannerToggle">
+              <label id={"isActionButton"} className="switch">
+                <input
+                  type="checkbox"
+                  id={"isActionButton"}
+                  name={"isActionButton"}
+                  ref={register}
+                />
+                <span className="slider round"></span>
+              </label>
+              <span className="BannerToggle__title">Call to Action Button</span>
+            </div>
 
-              {error && <span className="error">{error}</span>}
+            <div className="Banner__action-container">
+              <div className="form-group">
+                <input
+                  ref={register}
+                  name="buttonUrl"
+                  type="text"
+                  placeholder="Button URL"
+                  autoComplete="off"
+                  className="Banner__input-text"
+                />
+              </div>
+
+              <div className="form-group">
+                <input
+                  ref={register}
+                  name="buttonDisplayText"
+                  type="text"
+                  placeholder="Button display text"
+                  autoComplete="off"
+                  className="Banner__input-text"
+                />
+              </div>
             </div>
 
-            <div className="form-inline justify-content-between">
+            <div className="BannerToggle">
+              <label id={"isFullScreen"} className="switch">
+                <input
+                  type="checkbox"
+                  id={"isFullScreen"}
+                  name={"isFullScreen"}
+                  ref={register}
+                />
+                <span className="slider round"></span>
+              </label>
+              <span className="BannerToggle__title">
+                Set fullscreen announcement
+              </span>
+            </div>
+
+            <div className="BannerToggle">
+              <label id={"isCloseButton"} className="switch">
+                <input
+                  type="checkbox"
+                  id={"isCloseButton"}
+                  name={"isCloseButton"}
+                  ref={register}
+                />
+                <span className="slider round"></span>
+              </label>
+              <span className="BannerToggle__title">
+                Force funnel (users will have to click your button)
+              </span>
+            </div>
+
+            <div className="form-inline justify-content-between Banner__button-container">
               <button
                 className="btn btn-danger"
                 type="reset"
                 onClick={clearBanner}
               >
-                Clear Banner
+                Clear
               </button>
 
-              <button
-                className="btn btn-primary"
-                type="submit"
-                onClick={saveBanner}
-              >
-                Save Banner
+              <button className="btn btn-primary" type="submit">
+                Save
               </button>
             </div>
           </form>
diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index d932e432fe..462d706516 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -1,4 +1,23 @@
-.admin-page-title {
-  text-align: center;
-  padding-top: 25px;
+@import "scss/constants";
+
+.AdminPage {
+  position: relative;
+  max-width: 638px;
+  margin: 0 auto;
+
+  &__title {
+    text-align: center;
+    margin-top: 41px;
+    padding: 5px;
+    font-size: $font-size--sm;
+    background: #1a1d24;
+    border-radius: $border-radius--xl;
+    opacity: 0.7;
+  }
+
+  &__options {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 10px;
+  }
 }
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index 76db44d353..24dc16ad30 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-
-import { IFRAME_TEMPLATES } from "settings";
+import React, { useMemo } from "react";
+import { Button } from "react-bootstrap";
 
 import {
   isCurrentVenueNGRequestedSelector,
@@ -10,12 +9,15 @@ import {
 import { useConnectCurrentVenueNG } from "hooks/useConnectCurrentVenueNG";
 import { useIsUserVenueOwner } from "hooks/useIsUserVenueOwner";
 import { useSelector } from "hooks/useSelector";
+import { useShowHide } from "hooks/useShowHide";
 import { useUser } from "hooks/useUser";
 import { useVenueId } from "hooks/useVenueId";
 
 import { BannerAdmin } from "components/organisms/BannerAdmin";
+import { NewProfileModal } from "components/organisms/NewProfileModal";
+import { WithNavigationBar } from "components/organisms/WithNavigationBar";
 
-import { IframeAdmin } from "components/molecules/IframeAdmin";
+import { AnnouncementMessage } from "components/molecules/AnnouncementMessage";
 import { LoadingPage } from "components/molecules/LoadingPage";
 
 import "./VenueAdminPage.scss";
@@ -26,11 +28,16 @@ export const VenueAdminPage: React.FC = () => {
   const { currentVenue: venue } = useConnectCurrentVenueNG(venueId);
   const venueRequestStatus = useSelector(isCurrentVenueNGRequestedSelector);
   const venueRequestingStatus = useSelector(isCurrentVenueNGRequestingSelector);
+  const { isShown, show } = useShowHide();
 
   const isVenueOwner = useIsUserVenueOwner();
   const isVenueLoading = venueRequestingStatus || !venueRequestStatus;
   const isLoggedIn = profile && user;
 
+  const banner = useMemo(() => {
+    return venue?.banner ?? { content: "No announcement" };
+  }, [venue]);
+
   if (isVenueLoading) {
     return <LoadingPage />;
   }
@@ -49,13 +56,25 @@ export const VenueAdminPage: React.FC = () => {
     );
   }
 
-  const isIframeVenue = IFRAME_TEMPLATES.includes(venue.template);
-
   return (
-    <>
-      <h4 className="admin-page-title">You are editing venue: {venue.name}</h4>
-      <BannerAdmin venueId={venueId} venue={venue} />
-      {isIframeVenue && <IframeAdmin venueId={venueId} venue={venue} />}
-    </>
+    <WithNavigationBar>
+      <div className="AdminPage">
+        <h4 className="AdminPage__title">
+          Current Announcement in Space Title
+        </h4>
+        {isShown ? (
+          <BannerAdmin venueId={venueId} venue={venue} />
+        ) : (
+          <>
+            <AnnouncementMessage banner={banner} />
+            <div className="AdminPage__options">
+              <div></div>
+              <Button onClick={show}>Edit</Button>
+            </div>
+          </>
+        )}
+      </div>
+      <NewProfileModal venue={venue} />
+    </WithNavigationBar>
   );
 };
diff --git a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
new file mode 100644
index 0000000000..0ee5d976a3
--- /dev/null
+++ b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
@@ -0,0 +1,9 @@
+@import "scss/constants";
+
+.AnnouncementContainer {
+  position: absolute;
+  top: 66px;
+  left: calc(50% - 319px);
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
new file mode 100644
index 0000000000..9f1855d35c
--- /dev/null
+++ b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+import "./AnnouncementContainer.scss";
+
+export interface AnnouncementContainerProps {
+  isFullScreen?: boolean;
+}
+
+export const AnnouncementContainer: React.FC<AnnouncementContainerProps> = ({
+  isFullScreen,
+  children,
+}) => {
+  // if (isFullScreen) {
+  //   return ();
+  // }
+
+  return <div className="AnnouncementContainer">{children}</div>;
+};
diff --git a/src/pages/VenuePage/AnnouncementContainer/index.ts b/src/pages/VenuePage/AnnouncementContainer/index.ts
new file mode 100644
index 0000000000..b765697294
--- /dev/null
+++ b/src/pages/VenuePage/AnnouncementContainer/index.ts
@@ -0,0 +1 @@
+export { AnnouncementContainer } from "./AnnouncementContainer";
diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index 0994445870..9f87ad54fb 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -6,6 +6,8 @@ import { AnyVenue, VenueTemplate } from "types/venues";
 import { WithId } from "utils/id";
 
 import { ReactionsProvider } from "hooks/reactions";
+import { RelatedVenuesProvider } from "hooks/useRelatedVenues";
+import { WorldUsersProvider } from "hooks/users";
 
 import { FriendShipPage } from "pages/FriendShipPage";
 
@@ -135,15 +137,19 @@ export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
 
   // @debt remove backButton from Navbar
   return (
-    <ReactionsProvider venueId={venue.id}>
-      <WithNavigationBar hasBackButton={hasBackButton}>
-        <AnnouncementMessage message={venue.bannerMessage} />
-
-        <Suspense fallback={<LoadingPage />}>{template}</Suspense>
-
-        <ChatSidebar venue={venue} />
-        <NewProfileModal venue={venue} />
-      </WithNavigationBar>
-    </ReactionsProvider>
+    <WorldUsersProvider venueId={venue.id}>
+      <RelatedVenuesProvider venueId={venue.id}>
+        <ReactionsProvider venueId={venue.id}>
+          <WithNavigationBar hasBackButton={hasBackButton}>
+            <AnnouncementMessage banner={venue.banner} />
+
+            <Suspense fallback={<LoadingPage />}>{template}</Suspense>
+
+            <ChatSidebar venue={venue} />
+            <NewProfileModal venue={venue} />
+          </WithNavigationBar>
+        </ReactionsProvider>
+      </RelatedVenuesProvider>
+    </WorldUsersProvider>
   );
 };
diff --git a/src/types/banner.ts b/src/types/banner.ts
new file mode 100644
index 0000000000..d89a60c48e
--- /dev/null
+++ b/src/types/banner.ts
@@ -0,0 +1,9 @@
+export interface BannerFormData {
+  title?: string;
+  content?: string;
+  isActionButton?: boolean;
+  buttonUrl?: string;
+  buttonDisplayText?: string;
+  isFullScreen?: boolean;
+  isCloseButton?: boolean;
+}
diff --git a/src/types/venues.ts b/src/types/venues.ts
index 5acdd31907..9fa140374c 100644
--- a/src/types/venues.ts
+++ b/src/types/venues.ts
@@ -15,6 +15,7 @@ import { UpcomingEvent } from "./UpcomingEvent";
 import { UsernameVisibility, UserStatus } from "./User";
 import { VenueAccessMode } from "./VenueAcccess";
 import { VideoAspectRatio } from "./VideoAspectRatio";
+import { BannerFormData } from "./banner";
 
 // These represent all of our templates (they should remain alphabetically sorted, deprecated should be separate from the rest)
 // @debt unify this with VenueTemplate in functions/venue.js + share the same code between frontend/backend
@@ -150,7 +151,7 @@ export interface BaseVenue {
   radioTitle?: string;
   dustStorm?: boolean;
   activity?: string;
-  bannerMessage?: string;
+  banner?: BannerFormData;
   playaIcon?: PlayaIcon;
   playaIcon2?: PlayaIcon;
   miniAvatars?: boolean;

From 659a5c488a07a1a7526c8ed0bc43460efebab14a Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Wed, 26 May 2021 11:31:53 +0300
Subject: [PATCH 02/46] updates

---
 .../AnnouncementMessage.scss                  |  2 +-
 .../AnnouncementContainer.scss                |  6 +++++
 .../AnnouncementContainer.tsx                 | 24 +++++++++++++++----
 src/pages/VenuePage/TemplateWrapper.tsx       |  2 ++
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 3ca98f0a27..8da63b789b 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -9,7 +9,7 @@ $message-margin: $spacing + $close-icon-width + 5px;
   z-index: z(announcement);
   position: relative;
   background: $primary;
-  width: 638px;
+  width: 100%;
   transition: left 0.1s linear;
 
   padding: $spacing 0;
diff --git a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
index 0ee5d976a3..ee418c31e3 100644
--- a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
+++ b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
@@ -3,7 +3,13 @@
 .AnnouncementContainer {
   position: absolute;
   top: 66px;
+  width: 638px;
   left: calc(50% - 319px);
   display: flex;
   justify-content: center;
 }
+
+.ts-AnnouncementModalContainer {
+  background-color: red;
+  padding: 0;
+}
diff --git a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
index 9f1855d35c..98cc60bc7b 100644
--- a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
+++ b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Modal } from "react-bootstrap";
 
 import "./AnnouncementContainer.scss";
 
@@ -10,9 +11,24 @@ export const AnnouncementContainer: React.FC<AnnouncementContainerProps> = ({
   isFullScreen,
   children,
 }) => {
-  // if (isFullScreen) {
-  //   return ();
-  // }
+  const [showAnnouncement, setShowAnnouncement] = useState(isFullScreen);
+
+  useEffect(() => {
+    setShowAnnouncement(isFullScreen);
+  }, [isFullScreen]);
+
+  if (isFullScreen) {
+    return (
+      <Modal
+        contentClassName="AnnouncementModalContainer"
+        show={showAnnouncement}
+        onHide={() => setShowAnnouncement(false)}
+        centered
+      >
+        <Modal.Body>{children}</Modal.Body>
+      </Modal>
+    );
+  }
 
   return <div className="AnnouncementContainer">{children}</div>;
 };
diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index 9f87ad54fb..2fb9564cd6 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -40,6 +40,8 @@ export interface TemplateWrapperProps {
 export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
   const match = useRouteMatch();
 
+  // const { isShown, show, hide } = useShowHide();
+
   let template;
   // @debt remove backButton from Navbar
   let hasBackButton = true;

From 40cf2f9375d2768bcda62bd5127dbd90a597e68b Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Thu, 27 May 2021 16:44:57 +0300
Subject: [PATCH 03/46] updates

---
 src/assets/icons/icon-checkmark.svg           |   1 +
 src/assets/icons/icon-close.svg               |   1 +
 .../AnnouncementMessage.scss                  |  64 ++++-
 .../AnnouncementMessage.tsx                   | 103 +++++---
 .../organisms/BannerAdmin/BannerAdmin.scss    |  31 ++-
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 241 ++++++++++--------
 .../ConfirmationBannerModal.scss              |  31 +++
 .../ConfirmationBannerModal.tsx               |  44 ++++
 .../ConfirmationBannerModal/index.ts          |   1 +
 .../AnnouncementOptions.scss                  |  33 +++
 .../AnnouncementOptions.tsx                   |  57 +++++
 .../Admin/Venue/AnnouncementOptions/index.ts  |   1 +
 src/pages/Admin/Venue/VenueAdminPage.scss     |   7 +-
 src/pages/Admin/Venue/VenueAdminPage.tsx      |  33 ++-
 .../AnnouncementContainer.scss                |  15 --
 .../AnnouncementContainer.tsx                 |  34 ---
 .../VenuePage/AnnouncementContainer/index.ts  |   1 -
 src/pages/VenuePage/TemplateWrapper.tsx       |   2 -
 18 files changed, 472 insertions(+), 228 deletions(-)
 create mode 100644 src/assets/icons/icon-checkmark.svg
 create mode 100644 src/assets/icons/icon-close.svg
 create mode 100644 src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
 create mode 100644 src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
 create mode 100644 src/components/organisms/BannerAdmin/ConfirmationBannerModal/index.ts
 create mode 100644 src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
 create mode 100644 src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
 create mode 100644 src/pages/Admin/Venue/AnnouncementOptions/index.ts
 delete mode 100644 src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
 delete mode 100644 src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
 delete mode 100644 src/pages/VenuePage/AnnouncementContainer/index.ts

diff --git a/src/assets/icons/icon-checkmark.svg b/src/assets/icons/icon-checkmark.svg
new file mode 100644
index 0000000000..44fb1f48aa
--- /dev/null
+++ b/src/assets/icons/icon-checkmark.svg
@@ -0,0 +1 @@
+<svg width="16" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.87 11.27a1.1 1.1 0 01-1.56 0L.8 7.72C.39 7.28.4 6.6.82 6.18a1.1 1.1 0 011.55 0L5.1 8.92l8.54-8.6a1.1 1.1 0 011.55 0c.43.43.43 1.13 0 1.57l-9.31 9.38z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-close.svg b/src/assets/icons/icon-close.svg
new file mode 100644
index 0000000000..ecf9efebf3
--- /dev/null
+++ b/src/assets/icons/icon-close.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.66 4.34a1.5 1.5 0 010 2.12L12.12 10l3.54 3.54a1.5 1.5 0 01-2.12 2.12L10 12.12l-3.54 3.54a1.5 1.5 0 11-2.12-2.12L7.88 10 4.34 6.46a1.5 1.5 0 112.12-2.12L10 7.88l3.54-3.54a1.5 1.5 0 012.12 0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 8da63b789b..2e903e6fdc 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -4,22 +4,48 @@ $spacing: 15px;
 $close-icon-width: 20px;
 $message-margin: $spacing + $close-icon-width + 5px;
 
-.announcement-container {
+.AnnouncementMessage {
   display: block;
-  z-index: z(announcement);
   position: relative;
   background: $primary;
-  width: 100%;
+  width: 638px;
   transition: left 0.1s linear;
 
   padding: $spacing 0;
   border-radius: 20px;
   text-align: center;
 
-  .close-button {
-    background: transparent;
-    border: none;
-    color: $white;
+  &__default-text {
+    opacity: 0.6;
+  }
+
+  &__title {
+    font-size: $font-size--xl;
+  }
+
+  &__content {
+    font-size: $font-size--md;
+    margin: 0 $message-margin;
+  }
+
+  &__action-button {
+    display: inline-block;
+    background-color: $primary--darker;
+    min-width: 136px;
+    min-height: 30px;
+    margin-top: 15px;
+    text-decoration: none;
+    font-size: $font-size--md;
+    font-weight: 500;
+    padding: 6px;
+    border-radius: $border-radius--xl;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &__close-button {
     cursor: pointer;
     position: absolute;
     top: $spacing;
@@ -32,6 +58,26 @@ $message-margin: $spacing + $close-icon-width + 5px;
   }
 }
 
-.announcement-message {
-  margin: 0 $message-margin;
+.AnnouncementContainer {
+  position: fixed;
+  top: 66px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: z(announcement);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  &--centered {
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    background-color: opaque-black(0.6);
+  }
+
+  &--canceled {
+    position: relative;
+    top: 0;
+  }
 }
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index dcc25db58b..2208389945 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -1,65 +1,90 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 
-import { useChatSidebarControls } from "hooks/chats/chatSidebar";
+import { BannerFormData } from "types/banner";
+
+import { externalUrlAdditionalProps } from "utils/url";
+
+import { useShowHide } from "hooks/useShowHide";
 
 import { RenderMarkdown } from "components/organisms/RenderMarkdown";
 
 import "./AnnouncementMessage.scss";
 
-import { BannerFormData } from "types/banner";
-
-type AnnouncementMessageProps = {
+export interface AnnouncementMessageProps {
   banner?: BannerFormData;
-  isCancel?: boolean;
-};
+  isUser?: boolean;
+}
 
 export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   banner,
-  isCancel = false,
+  isUser = false,
 }) => {
-  const [isVisible, setVisibility] = useState<boolean>(false);
-  const { isExpanded } = useChatSidebarControls();
 
-  const hideAnnouncement = useCallback(() => {
-    setVisibility(false);
-  }, []);
+  const {
+    isShown: isShownAnnouncementMessage,
+    show: showAnnouncementMessage,
+    hide: hideAnnouncementMessage,
+  } = useShowHide();
 
   useEffect(() => {
     if (banner?.content) {
-      setVisibility(true);
+      showAnnouncementMessage();
     }
-  }, [banner]);
+  }, [banner, showAnnouncementMessage]);
 
-  if (!isVisible || !banner?.content) return null;
+  const noop = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+  };
+
+  const isActiveButton =
+    banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
+
+  const containerClassNames = classNames("AnnouncementContainer", {
+    "AnnouncementContainer--centered": banner?.isFullScreen,
+    "AnnouncementContainer--canceled": !isUser,
+  });
+
+  if (!isUser && !banner?.content)
+    return (
+      <div className="AnnouncementMessage">
+        <span className="AnnouncementMessage__default-text">
+          No announcement
+        </span>
+      </div>
+    );
+
+  if (!isShownAnnouncementMessage || !banner?.content) return null;
 
   return (
-    <div
-      aria-labelledby="announcement-container-message"
-      role="dialog"
-      className={classNames("announcement-container", {
-        centered: !isExpanded,
-      })}
-    >
-      <div className="announcement-message" id="announcement-container-message">
-        <RenderMarkdown text={banner.content} />
+    <div className={containerClassNames} onClick={hideAnnouncementMessage}>
+      <div className="AnnouncementMessage" onClick={noop}>
+        {banner?.title && (
+          <h2 className="AnnouncementMessage__title">{banner.title}</h2>
+        )}
+        <div className="AnnouncementMessage__content">
+          <RenderMarkdown text={banner.content} />
+        </div>
+        {isActiveButton && (
+          <a
+            href={banner.buttonUrl}
+            className="AnnouncementMessage__action-button"
+            {...externalUrlAdditionalProps}
+          >
+            {banner.buttonDisplayText}
+          </a>
+        )}
+        {isUser && banner.isCloseButton ? (
+          <span
+            className="AnnouncementMessage__close-button"
+            onClick={hideAnnouncementMessage}
+          >
+            <FontAwesomeIcon icon={faTimesCircle} />
+          </span>
+        ) : null}
       </div>
-      {isCancel ? (
-        <button
-        aria-label="Close announcement message"
-        className="close-button"
-        onClick={hideAnnouncement}
-        >
-          <FontAwesomeIcon icon={faTimesCircle} />
-        </button>
-      ) : null}
     </div>
   );
 };
-
-/**
- * @deprecated use named export instead
- */
-export default AnnouncementMessage;
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index eeca85effa..cda86aa3e1 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -3,20 +3,43 @@
 .Banner {
   &__input-text {
     text-align: start;
+    padding: 6px 14px;
+    font-size: $font-size--md;
+
+    &--large {
+      height: 55px;
+    }
+  }
+
+  &__input-container {
+    margin-bottom: 14px;
   }
 
   &__button-container {
+    display: flex;
+    justify-content: space-between;
     margin-top: 25px;
   }
 
+  &__button {
+    width: 136px;
+    height: 44px;
+  }
+
   &__action-container {
     margin-left: 50px;
   }
-}
 
-.BannerToggle {
-  &__title {
+  &__checkbox {
+    justify-content: start;
+    margin-bottom: 19px;
+
+    &--action {
+      margin-bottom: 4px;
+    }
+  }
+
+  &__checkbox-label {
     font-size: $font-size--lg;
-    margin-left: $spacing--md;
   }
 }
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 4fd3950430..cf6a942ae9 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -1,9 +1,23 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
+import { Button } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 
+<<<<<<< HEAD
+=======
+import { makeUpdateBanner } from "api/bannerAdmin";
+
+import { AnyVenue } from "types/venues";
+>>>>>>> updates
 import { BannerFormData } from "types/banner";
 import { AnyVenue } from "types/venues";
 
+import { useShowHide } from "hooks/useShowHide";
+
+import { Checkbox } from "components/atoms/Checkbox";
+import { InputField } from "components/atoms/InputField";
+
+import { ConfirmationBannerModal } from "./ConfirmationBannerModal";
+
 import "./BannerAdmin.scss";
 
 const initialBannerData = {
@@ -19,27 +33,43 @@ const initialBannerData = {
 interface BannerAdminProps {
   venueId?: string;
   venue: AnyVenue;
+  onClose: () => void;
 }
 
 // @debt This component is almost exactly the same as IframeAdmin, we should refactor them both to use the same generic base component
 //   BannerAdmin is the 'canonical example' to follow when we do this
-export const BannerAdmin: React.FC<BannerAdminProps> = ({ venueId, venue }) => {
+export const BannerAdmin: React.FC<BannerAdminProps> = ({
+  venueId,
+  venue,
+  onClose,
+}) => {
   const { register, handleSubmit, reset } = useForm<BannerFormData>({
     mode: "onChange",
     reValidateMode: "onChange",
   });
 
+  const [bannerData, setBannerDate] = useState<BannerFormData>(
+    initialBannerData
+  );
+
+  const {
+    isShown: isShowModal,
+    show: showModal,
+    hide: hideModal,
+  } = useShowHide();
+
   const updateBannerInFirestore = useCallback(
     (data: BannerFormData) => {
       if (!venueId) return;
-
-      // makeUpdateBanner(venueId)(data);
+      makeUpdateBanner(venueId)(data);
+      onClose();
     },
-    [venueId]
+    [venueId, onClose]
   );
 
   const onSubmit = (data: BannerFormData) => {
-    updateBannerInFirestore(data);
+    showModal();
+    setBannerDate(data);
   };
 
   const clearBanner = useCallback(() => {
@@ -47,114 +77,101 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({ venueId, venue }) => {
     reset();
   }, [updateBannerInFirestore, reset]);
 
+  const confirmChangeBannerData = () => {
+    updateBannerInFirestore(bannerData);
+    hideModal();
+  };
+
   return (
-    <div className="container">
-      <div className="row">
-        <div className="col">
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="form-group">
-              <input
-                ref={register({ required: true })}
-                name="title"
-                type="text"
-                placeholder="Please type your announcement title. (optional)"
-                autoComplete="off"
-                className="Banner__input-text"
-              />
-            </div>
-
-            <div className="form-group">
-              <textarea
-                name="content"
-                className="Banner__input-text"
-                placeholder="Please type your announcement content"
-                ref={register}
-              />
-            </div>
-
-            <div className="BannerToggle">
-              <label id={"isActionButton"} className="switch">
-                <input
-                  type="checkbox"
-                  id={"isActionButton"}
-                  name={"isActionButton"}
-                  ref={register}
-                />
-                <span className="slider round"></span>
-              </label>
-              <span className="BannerToggle__title">Call to Action Button</span>
-            </div>
-
-            <div className="Banner__action-container">
-              <div className="form-group">
-                <input
-                  ref={register}
-                  name="buttonUrl"
-                  type="text"
-                  placeholder="Button URL"
-                  autoComplete="off"
-                  className="Banner__input-text"
-                />
-              </div>
-
-              <div className="form-group">
-                <input
-                  ref={register}
-                  name="buttonDisplayText"
-                  type="text"
-                  placeholder="Button display text"
-                  autoComplete="off"
-                  className="Banner__input-text"
-                />
-              </div>
-            </div>
-
-            <div className="BannerToggle">
-              <label id={"isFullScreen"} className="switch">
-                <input
-                  type="checkbox"
-                  id={"isFullScreen"}
-                  name={"isFullScreen"}
-                  ref={register}
-                />
-                <span className="slider round"></span>
-              </label>
-              <span className="BannerToggle__title">
-                Set fullscreen announcement
-              </span>
-            </div>
-
-            <div className="BannerToggle">
-              <label id={"isCloseButton"} className="switch">
-                <input
-                  type="checkbox"
-                  id={"isCloseButton"}
-                  name={"isCloseButton"}
-                  ref={register}
-                />
-                <span className="slider round"></span>
-              </label>
-              <span className="BannerToggle__title">
-                Force funnel (users will have to click your button)
-              </span>
-            </div>
-
-            <div className="form-inline justify-content-between Banner__button-container">
-              <button
-                className="btn btn-danger"
-                type="reset"
-                onClick={clearBanner}
-              >
-                Clear
-              </button>
-
-              <button className="btn btn-primary" type="submit">
-                Save
-              </button>
-            </div>
-          </form>
+    <div className="Banner">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <InputField
+          ref={register}
+          name="title"
+          placeholder="Please type your announcement title. (optional)"
+          defaultValue={venue?.banner?.title}
+          containerClassName="Banner__input-container"
+          inputClassName="Banner__input-text"
+          autoComplete="off"
+        />
+
+        <div className="form-group">
+          <textarea
+            name="content"
+            defaultValue={venue?.banner?.content}
+            className="Banner__input-text"
+            placeholder="Please type your announcement content"
+            ref={register({ required: true })}
+          />
         </div>
-      </div>
+
+        <Checkbox
+          containerClassName="Banner__checkbox Banner__checkbox--action"
+          labelClassName="Banner__checkbox-label"
+          name="isActionButton"
+          label="Call to Action Button"
+          toggler
+          forwardedRef={register}
+          defaultChecked={venue?.banner?.isActionButton}
+        />
+
+        <div className="Banner__action-container">
+          <InputField
+            ref={register}
+            name="buttonUrl"
+            placeholder="Button URL"
+            defaultValue={venue?.banner?.buttonUrl}
+            containerClassName="Banner__input-container"
+            inputClassName="Banner__input-text"
+            autoComplete="off"
+          />
+          <InputField
+            ref={register}
+            name="buttonDisplayText"
+            placeholder="Button display text"
+            defaultValue={venue?.banner?.buttonDisplayText}
+            containerClassName="Banner__input-container"
+            inputClassName="Banner__input-text"
+            autoComplete="off"
+          />
+        </div>
+        <Checkbox
+          containerClassName="Banner__checkbox"
+          name="isFullScreen"
+          label="Set fullscreen announcement"
+          toggler
+          forwardedRef={register}
+          defaultChecked={venue?.banner?.isFullScreen}
+        />
+
+        <Checkbox
+          containerClassName="Banner__checkbox"
+          name="isCloseButton"
+          label="Force funnel (users will have to click your button)"
+          toggler
+          forwardedRef={register}
+          defaultChecked={venue?.banner?.isCloseButton}
+        />
+
+        <div className="Banner__button-container">
+          <Button
+            className="Banner__button"
+            variant="danger"
+            onClick={clearBanner}
+          >
+            Clear
+          </Button>
+          <Button className="Banner__button" type="submit">
+            Save
+          </Button>
+        </div>
+      </form>
+
+      <ConfirmationBannerModal
+        show={isShowModal}
+        onConfirm={confirmChangeBannerData}
+        onCancel={hideModal}
+      />
     </div>
   );
 };
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
new file mode 100644
index 0000000000..831eb44d4a
--- /dev/null
+++ b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
@@ -0,0 +1,31 @@
+@import "scss/constants.scss";
+
+$button-width: 136px;
+
+.ConfirmationBannerModal {
+  text-align: center;
+
+  &__header {
+    font-size: $font-size--xl;
+  }
+
+  &__message {
+    padding: 10px 0 30px 0;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+  &__confirm-button {
+    width: $button-width;
+  }
+
+  &__cancel-button {
+    background-image: none;
+    background-color: $black;
+    border: solid $white 1px;
+    border-color: $white;
+    width: $button-width;
+  }
+}
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
new file mode 100644
index 0000000000..d39edd7bdd
--- /dev/null
+++ b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Button, Modal } from "react-bootstrap";
+
+import "./ConfirmationBannerModal.scss";
+
+interface ConfirmationBannerModalProps {
+  show?: boolean;
+  onConfirm: () => void;
+  onCancel?: () => void;
+}
+
+export const ConfirmationBannerModal: React.FC<ConfirmationBannerModalProps> = ({
+  show,
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <Modal show={show} onHide={onCancel} centered>
+      <Modal.Body>
+        <div className="ConfirmationBannerModal">
+          <h2 className="ConfirmationBannerModal__header">
+            Erase your beautiful work?
+          </h2>
+          <div className="ConfirmationBannerModal__message">Are you sure?</div>
+          <div className="ConfirmationBannerModal__buttons">
+            <Button
+              variant="secondary"
+              className="ConfirmationBannerModal__cancel-button"
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="ConfirmationBannerModal__confirm-button"
+              onClick={onConfirm}
+            >
+              Clear & Save
+            </Button>
+          </div>
+        </div>
+      </Modal.Body>
+    </Modal>
+  );
+};
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/index.ts b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/index.ts
new file mode 100644
index 0000000000..d0d805eff0
--- /dev/null
+++ b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/index.ts
@@ -0,0 +1 @@
+export { ConfirmationBannerModal } from "./ConfirmationBannerModal";
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
new file mode 100644
index 0000000000..62b061a3a6
--- /dev/null
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
@@ -0,0 +1,33 @@
+@import "scss/constants";
+
+.AnnouncementOptions {
+  font-size: $font-size--lg;
+  margin-top: 4px;
+
+  &__buttons {
+    display: flex;
+  }
+
+  &__checkbox {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+  }
+
+  &__img {
+    margin-right: 4px;
+  }
+
+  &__url {
+    margin-top: 19px;
+  }
+
+  &__url-text {
+    font-size: $font-size--md;
+    padding-left: 17px;
+
+    &--empty {
+      opacity: 0.4;
+    }
+  }
+}
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
new file mode 100644
index 0000000000..3c8c6755ab
--- /dev/null
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import classNames from "classnames";
+
+import { BannerFormData } from "types/banner";
+
+import iconCheck from "assets/icons/icon-checkmark.svg";
+import iconClose from "assets/icons/icon-close.svg";
+
+import "./AnnouncementOptions.scss";
+
+type AnnouncementOptionsProps = {
+  banner?: BannerFormData;
+};
+
+export const AnnouncementOptions: React.FC<AnnouncementOptionsProps> = ({
+  banner,
+}) => {
+  const fullscreenImg = banner?.isFullScreen ? iconCheck : iconClose;
+  const isCloseImg = banner?.isCloseButton ? iconCheck : iconClose;
+
+  const fullscreenText = banner?.isFullScreen ? "enabled" : "disabled";
+  const ForceText = banner?.isCloseButton ? "enabled" : "disabled";
+
+  const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
+
+  const urlTextClassNames = classNames("AnnouncementOptions__url-text", {
+    "AnnouncementOptions__url-text--empty": !banner?.isActionButton,
+  });
+
+  if (!banner?.content) return <div />;
+
+  return (
+    <div className="AnnouncementOptions">
+      <div className="AnnouncementOptions__buttons">
+        <span className="AnnouncementOptions__checkbox">
+          <img
+            src={fullscreenImg}
+            alt="on"
+            className="AnnouncementOptions__img"
+          />
+          FullScreen {fullscreenText}
+        </span>
+        <span className="AnnouncementOptions__checkbox">
+          <img
+            src={isCloseImg}
+            alt="off"
+            className="AnnouncementOptions__img"
+          />
+          Force funnel {ForceText}
+        </span>
+      </div>
+      <div className="AnnouncementOptions__url">
+        URL: <span className={urlTextClassNames}>{urlText}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/index.ts b/src/pages/Admin/Venue/AnnouncementOptions/index.ts
new file mode 100644
index 0000000000..2fe3e0609b
--- /dev/null
+++ b/src/pages/Admin/Venue/AnnouncementOptions/index.ts
@@ -0,0 +1 @@
+export { AnnouncementOptions } from "./AnnouncementOptions";
diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index 462d706516..33509ac87e 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -18,6 +18,11 @@
   &__options {
     display: flex;
     justify-content: space-between;
-    padding-top: 10px;
+    padding-top: 18px;
+  }
+
+  &__option-button {
+    height: 44px;
+    width: 136px;
   }
 }
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index 24dc16ad30..2f340c074d 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { Button } from "react-bootstrap";
 
 import {
@@ -20,6 +20,8 @@ import { WithNavigationBar } from "components/organisms/WithNavigationBar";
 import { AnnouncementMessage } from "components/molecules/AnnouncementMessage";
 import { LoadingPage } from "components/molecules/LoadingPage";
 
+import { AnnouncementOptions } from "./AnnouncementOptions";
+
 import "./VenueAdminPage.scss";
 
 export const VenueAdminPage: React.FC = () => {
@@ -28,16 +30,16 @@ export const VenueAdminPage: React.FC = () => {
   const { currentVenue: venue } = useConnectCurrentVenueNG(venueId);
   const venueRequestStatus = useSelector(isCurrentVenueNGRequestedSelector);
   const venueRequestingStatus = useSelector(isCurrentVenueNGRequestingSelector);
-  const { isShown, show } = useShowHide();
+  const {
+    isShown: isShowBannerAdmin,
+    show: showBannerAdmin,
+    hide: hideBannerAdmin,
+  } = useShowHide();
 
   const isVenueOwner = useIsUserVenueOwner();
   const isVenueLoading = venueRequestingStatus || !venueRequestStatus;
   const isLoggedIn = profile && user;
 
-  const banner = useMemo(() => {
-    return venue?.banner ?? { content: "No announcement" };
-  }, [venue]);
-
   if (isVenueLoading) {
     return <LoadingPage />;
   }
@@ -62,14 +64,23 @@ export const VenueAdminPage: React.FC = () => {
         <h4 className="AdminPage__title">
           Current Announcement in Space Title
         </h4>
-        {isShown ? (
-          <BannerAdmin venueId={venueId} venue={venue} />
+        {isShowBannerAdmin ? (
+          <BannerAdmin
+            venueId={venueId}
+            venue={venue}
+            onClose={hideBannerAdmin}
+          />
         ) : (
           <>
-            <AnnouncementMessage banner={banner} />
+            <AnnouncementMessage banner={venue?.banner} />
             <div className="AdminPage__options">
-              <div></div>
-              <Button onClick={show}>Edit</Button>
+              <AnnouncementOptions banner={venue?.banner} />
+              <Button
+                onClick={showBannerAdmin}
+                className="AdminPage__option-button"
+              >
+                Edit
+              </Button>
             </div>
           </>
         )}
diff --git a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
deleted file mode 100644
index ee418c31e3..0000000000
--- a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "scss/constants";
-
-.AnnouncementContainer {
-  position: absolute;
-  top: 66px;
-  width: 638px;
-  left: calc(50% - 319px);
-  display: flex;
-  justify-content: center;
-}
-
-.ts-AnnouncementModalContainer {
-  background-color: red;
-  padding: 0;
-}
diff --git a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx b/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
deleted file mode 100644
index 98cc60bc7b..0000000000
--- a/src/pages/VenuePage/AnnouncementContainer/AnnouncementContainer.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Modal } from "react-bootstrap";
-
-import "./AnnouncementContainer.scss";
-
-export interface AnnouncementContainerProps {
-  isFullScreen?: boolean;
-}
-
-export const AnnouncementContainer: React.FC<AnnouncementContainerProps> = ({
-  isFullScreen,
-  children,
-}) => {
-  const [showAnnouncement, setShowAnnouncement] = useState(isFullScreen);
-
-  useEffect(() => {
-    setShowAnnouncement(isFullScreen);
-  }, [isFullScreen]);
-
-  if (isFullScreen) {
-    return (
-      <Modal
-        contentClassName="AnnouncementModalContainer"
-        show={showAnnouncement}
-        onHide={() => setShowAnnouncement(false)}
-        centered
-      >
-        <Modal.Body>{children}</Modal.Body>
-      </Modal>
-    );
-  }
-
-  return <div className="AnnouncementContainer">{children}</div>;
-};
diff --git a/src/pages/VenuePage/AnnouncementContainer/index.ts b/src/pages/VenuePage/AnnouncementContainer/index.ts
deleted file mode 100644
index b765697294..0000000000
--- a/src/pages/VenuePage/AnnouncementContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { AnnouncementContainer } from "./AnnouncementContainer";
diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index 2fb9564cd6..9f87ad54fb 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -40,8 +40,6 @@ export interface TemplateWrapperProps {
 export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
   const match = useRouteMatch();
 
-  // const { isShown, show, hide } = useShowHide();
-
   let template;
   // @debt remove backButton from Navbar
   let hasBackButton = true;

From 899a3f0a63de3d189a0b0bdcecc82341356a47bc Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Mon, 31 May 2021 13:34:25 +0300
Subject: [PATCH 04/46] Minor changes

---
 .../AnnouncementMessage.scss                  |  2 +-
 .../organisms/BannerAdmin/BannerAdmin.scss    | 14 ++---
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 15 +++--
 .../ConfirmationBannerModal.scss              |  2 -
 .../AnnouncementOptions.scss                  | 34 +++--------
 .../AnnouncementOptions.tsx                   | 50 ++++-------------
 .../AnnouncementStatus.scss                   | 30 ++++++++++
 .../AnnouncementStatus.tsx                    | 56 +++++++++++++++++++
 .../AnnouoncementStatus/index.ts              |  1 +
 src/pages/Admin/Venue/VenueAdminPage.scss     | 11 ----
 src/pages/Admin/Venue/VenueAdminPage.tsx      | 14 ++---
 src/scss/constants.scss                       |  1 +
 12 files changed, 130 insertions(+), 100 deletions(-)
 create mode 100644 src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.scss
 create mode 100644 src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
 create mode 100644 src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/index.ts

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 2e903e6fdc..962f1ed491 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -31,7 +31,7 @@ $message-margin: $spacing + $close-icon-width + 5px;
   &__action-button {
     display: inline-block;
     background-color: $primary--darker;
-    min-width: 136px;
+    min-width: $button-width;
     min-height: 30px;
     margin-top: 15px;
     text-decoration: none;
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index cda86aa3e1..d583db460d 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -3,7 +3,7 @@
 .Banner {
   &__input-text {
     text-align: start;
-    padding: 6px 14px;
+    padding: $spacing--sm $spacing--lg;
     font-size: $font-size--md;
 
     &--large {
@@ -12,18 +12,18 @@
   }
 
   &__input-container {
-    margin-bottom: 14px;
+    margin-bottom: $spacing--lg;
   }
 
   &__button-container {
     display: flex;
     justify-content: space-between;
-    margin-top: 25px;
+    margin-top: $spacing--xl;
   }
 
   &__button {
-    width: 136px;
-    height: 44px;
+    width: $button-width;
+    height: $submit-button-diameter;
   }
 
   &__action-container {
@@ -32,10 +32,10 @@
 
   &__checkbox {
     justify-content: start;
-    margin-bottom: 19px;
+    margin-bottom: $spacing--lg;
 
     &--action {
-      margin-bottom: 4px;
+      margin-bottom: $spacing--xs;
     }
   }
 
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index cf6a942ae9..cbe5f27416 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -67,20 +67,23 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
     [venueId, onClose]
   );
 
-  const onSubmit = (data: BannerFormData) => {
-    showModal();
-    setBannerDate(data);
-  };
+  const onSubmit = useCallback(
+    (data: BannerFormData) => {
+      showModal();
+      setBannerDate(data);
+    },
+    [showModal]
+  );
 
   const clearBanner = useCallback(() => {
     updateBannerInFirestore(initialBannerData);
     reset();
   }, [updateBannerInFirestore, reset]);
 
-  const confirmChangeBannerData = () => {
+  const confirmChangeBannerData = useCallback(() => {
     updateBannerInFirestore(bannerData);
     hideModal();
-  };
+  }, [bannerData, updateBannerInFirestore, hideModal]);
 
   return (
     <div className="Banner">
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
index 831eb44d4a..f96300894a 100644
--- a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
+++ b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
@@ -1,7 +1,5 @@
 @import "scss/constants.scss";
 
-$button-width: 136px;
-
 .ConfirmationBannerModal {
   text-align: center;
 
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
index 62b061a3a6..830f56e548 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
@@ -1,33 +1,17 @@
 @import "scss/constants";
 
 .AnnouncementOptions {
-  font-size: $font-size--lg;
-  margin-top: 4px;
+  display: flex;
+  justify-content: space-between;
+  padding-top: $spacing--lg;
 
-  &__buttons {
-    display: flex;
+  &__left-side {
+    font-size: $font-size--lg;
+    margin-top: $spacing--xs;
   }
 
-  &__checkbox {
-    display: flex;
-    align-items: center;
-    margin-right: 20px;
-  }
-
-  &__img {
-    margin-right: 4px;
-  }
-
-  &__url {
-    margin-top: 19px;
-  }
-
-  &__url-text {
-    font-size: $font-size--md;
-    padding-left: 17px;
-
-    &--empty {
-      opacity: 0.4;
-    }
+  &__edit-button {
+    height: $submit-button-diameter;
+    width: $button-width;
   }
 }
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
index 3c8c6755ab..acccdf71de 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
@@ -1,56 +1,30 @@
 import React from "react";
-import classNames from "classnames";
+import { Button } from "react-bootstrap";
 
 import { BannerFormData } from "types/banner";
 
-import iconCheck from "assets/icons/icon-checkmark.svg";
-import iconClose from "assets/icons/icon-close.svg";
+import { AnnouncementStatus } from "./AnnouoncementStatus";
 
 import "./AnnouncementOptions.scss";
 
-type AnnouncementOptionsProps = {
+export interface AnnouncementOptionsProps {
   banner?: BannerFormData;
-};
+  onEdit: () => void;
+}
 
 export const AnnouncementOptions: React.FC<AnnouncementOptionsProps> = ({
   banner,
+  onEdit,
 }) => {
-  const fullscreenImg = banner?.isFullScreen ? iconCheck : iconClose;
-  const isCloseImg = banner?.isCloseButton ? iconCheck : iconClose;
-
-  const fullscreenText = banner?.isFullScreen ? "enabled" : "disabled";
-  const ForceText = banner?.isCloseButton ? "enabled" : "disabled";
-
-  const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
-
-  const urlTextClassNames = classNames("AnnouncementOptions__url-text", {
-    "AnnouncementOptions__url-text--empty": !banner?.isActionButton,
-  });
-
-  if (!banner?.content) return <div />;
-
   return (
     <div className="AnnouncementOptions">
-      <div className="AnnouncementOptions__buttons">
-        <span className="AnnouncementOptions__checkbox">
-          <img
-            src={fullscreenImg}
-            alt="on"
-            className="AnnouncementOptions__img"
-          />
-          FullScreen {fullscreenText}
-        </span>
-        <span className="AnnouncementOptions__checkbox">
-          <img
-            src={isCloseImg}
-            alt="off"
-            className="AnnouncementOptions__img"
-          />
-          Force funnel {ForceText}
-        </span>
+      <div className="AnnouncementOptions__left-side">
+        <AnnouncementStatus banner={banner} />
       </div>
-      <div className="AnnouncementOptions__url">
-        URL: <span className={urlTextClassNames}>{urlText}</span>
+      <div className="AnnouncementOptions__right-side">
+        <Button onClick={onEdit} className="AnnouncementOptions__edit-button">
+          Edit
+        </Button>
       </div>
     </div>
   );
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.scss b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.scss
new file mode 100644
index 0000000000..9c41f7a48c
--- /dev/null
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.scss
@@ -0,0 +1,30 @@
+@import "scss/constants";
+
+.AnnouncementStatus {
+  &__buttons {
+    display: flex;
+  }
+
+  &__checkbox {
+    display: flex;
+    align-items: center;
+    margin-right: $spacing--xl;
+  }
+
+  &__img {
+    margin-right: $spacing--xs;
+  }
+
+  &__url {
+    margin-top: $spacing--lg;
+  }
+
+  &__url-text {
+    font-size: $font-size--md;
+    padding-left: $spacing--lg;
+
+    &--empty {
+      opacity: 0.4;
+    }
+  }
+}
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
new file mode 100644
index 0000000000..d51f1674cd
--- /dev/null
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import classNames from "classnames";
+
+import { BannerFormData } from "types/banner";
+
+import iconCheck from "assets/icons/icon-checkmark.svg";
+import iconClose from "assets/icons/icon-close.svg";
+
+import "./AnnouncementStatus.scss";
+
+export interface AnnouncementStatusProps {
+  banner?: BannerFormData;
+}
+
+const ENABLED = "enabled";
+const DISABLED = "disabled";
+
+export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
+  banner,
+}) => {
+  const fullscreenImg = banner?.isFullScreen ? iconCheck : iconClose;
+  const closeImg = banner?.isCloseButton ? iconCheck : iconClose;
+
+  const fullscreenText = banner?.isFullScreen ? ENABLED : DISABLED;
+  const forceText = banner?.isCloseButton ? ENABLED : DISABLED;
+
+  const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
+
+  const urlTextClassNames = classNames("AnnouncementStatus__url-text", {
+    "AnnouncementStatus__url-text--empty": !banner?.isActionButton,
+  });
+
+  if (!banner?.content) return null;
+
+  return (
+    <div className="AnnouncementStatus">
+      <div className="AnnouncementStatus__buttons">
+        <span className="AnnouncementStatus__checkbox">
+          <img
+            src={fullscreenImg}
+            alt="on"
+            className="AnnouncementStatus__img"
+          />
+          FullScreen {fullscreenText}
+        </span>
+        <span className="AnnouncementStatus__checkbox">
+          <img src={closeImg} alt="off" className="AnnouncementStatus__img" />
+          Force funnel {forceText}
+        </span>
+      </div>
+      <div className="AnnouncementStatus__url">
+        URL: <span className={urlTextClassNames}>{urlText}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/index.ts b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/index.ts
new file mode 100644
index 0000000000..c888dba9dc
--- /dev/null
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/index.ts
@@ -0,0 +1 @@
+export { AnnouncementStatus } from "./AnnouncementStatus";
diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index 33509ac87e..bc689df4a9 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -14,15 +14,4 @@
     border-radius: $border-radius--xl;
     opacity: 0.7;
   }
-
-  &__options {
-    display: flex;
-    justify-content: space-between;
-    padding-top: 18px;
-  }
-
-  &__option-button {
-    height: 44px;
-    width: 136px;
-  }
 }
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index 2f340c074d..aea9bc199b 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { Button } from "react-bootstrap";
 
 import {
   isCurrentVenueNGRequestedSelector,
@@ -73,15 +72,10 @@ export const VenueAdminPage: React.FC = () => {
         ) : (
           <>
             <AnnouncementMessage banner={venue?.banner} />
-            <div className="AdminPage__options">
-              <AnnouncementOptions banner={venue?.banner} />
-              <Button
-                onClick={showBannerAdmin}
-                className="AdminPage__option-button"
-              >
-                Edit
-              </Button>
-            </div>
+            <AnnouncementOptions
+              banner={venue?.banner}
+              onEdit={showBannerAdmin}
+            />
           </>
         )}
       </div>
diff --git a/src/scss/constants.scss b/src/scss/constants.scss
index df89280a3f..a281c75943 100644
--- a/src/scss/constants.scss
+++ b/src/scss/constants.scss
@@ -99,6 +99,7 @@ $spacing--xl: 24px;
 $spacing--xxl: 30px;
 
 $submit-button-diameter: 44px;
+$button-width: 136px;
 
 $font-size--xxs: 10px;
 $font-size--xs: 11px;

From 81180bb95e0822c8b072af37aefa64ffb4e6f2f1 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Mon, 31 May 2021 14:10:15 +0300
Subject: [PATCH 05/46] add error and isActionButon control to BennerAdmin

---
 .../organisms/BannerAdmin/BannerAdmin.tsx          | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index cbe5f27416..92bdd92106 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -43,10 +43,17 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   venue,
   onClose,
 }) => {
-  const { register, handleSubmit, reset } = useForm<BannerFormData>({
+  const {
+    register,
+    handleSubmit,
+    errors,
+    reset,
+    watch,
+  } = useForm<BannerFormData>({
     mode: "onChange",
     reValidateMode: "onChange",
   });
+  const isActionButtonValue = watch("isActionButton");
 
   const [bannerData, setBannerDate] = useState<BannerFormData>(
     initialBannerData
@@ -106,6 +113,9 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
             placeholder="Please type your announcement content"
             ref={register({ required: true })}
           />
+          {errors.content && errors.content.type === "required" && (
+            <span className="input-error">Display content is required</span>
+          )}
         </div>
 
         <Checkbox
@@ -126,6 +136,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
             defaultValue={venue?.banner?.buttonUrl}
             containerClassName="Banner__input-container"
             inputClassName="Banner__input-text"
+            disabled={!isActionButtonValue}
             autoComplete="off"
           />
           <InputField
@@ -135,6 +146,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
             defaultValue={venue?.banner?.buttonDisplayText}
             containerClassName="Banner__input-container"
             inputClassName="Banner__input-text"
+            disabled={!isActionButtonValue}
             autoComplete="off"
           />
         </div>

From 8b694f79010ff25290e1c42c574a7275efb8abd4 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Thu, 3 Jun 2021 11:18:46 +0300
Subject: [PATCH 06/46] minor changes before review

---
 .../atoms/LinkButton/LinkButton.tsx           |  2 +-
 .../AnnouncementMessage.scss                  | 15 +++++--------
 .../AnnouncementMessage.tsx                   |  7 +++----
 .../organisms/BannerAdmin/BannerAdmin.scss    | 10 ++++++++-
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 21 ++++++++++++-------
 .../ConfirmationBannerModal.scss              | 21 ++++++++++---------
 .../ConfirmationBannerModal.tsx               |  9 ++++----
 .../AnnouncementOptions.scss                  | 11 ++++++----
 .../AnnouncementOptions.tsx                   |  5 +++--
 9 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/src/components/atoms/LinkButton/LinkButton.tsx b/src/components/atoms/LinkButton/LinkButton.tsx
index 6f71e545e5..99ee1825f0 100644
--- a/src/components/atoms/LinkButton/LinkButton.tsx
+++ b/src/components/atoms/LinkButton/LinkButton.tsx
@@ -10,7 +10,7 @@ export interface LinkButtonProps
     AnchorHTMLAttributes<HTMLAnchorElement>,
     HTMLAnchorElement
   > {
-  href: string;
+  href?: string;
 }
 
 export const LinkButton: React.FC<LinkButtonProps> = ({
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 962f1ed491..14cfa74bcf 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -3,6 +3,8 @@
 $spacing: 15px;
 $close-icon-width: 20px;
 $message-margin: $spacing + $close-icon-width + 5px;
+$action-button-height: 30px;
+$action-button-padding: 6px;
 
 .AnnouncementMessage {
   display: block;
@@ -32,17 +34,10 @@ $message-margin: $spacing + $close-icon-width + 5px;
     display: inline-block;
     background-color: $primary--darker;
     min-width: $button-width;
-    min-height: 30px;
-    margin-top: 15px;
-    text-decoration: none;
+    min-height: $action-button-height;
     font-size: $font-size--md;
-    font-weight: 500;
-    padding: 6px;
-    border-radius: $border-radius--xl;
-
-    &:hover {
-      text-decoration: none;
-    }
+    font-weight: $font-weight--500;
+    padding: $action-button-padding $spacing--lg;
   }
 
   &__close-button {
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 2208389945..8749ae1ac5 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -5,7 +5,7 @@ import classNames from "classnames";
 
 import { BannerFormData } from "types/banner";
 
-import { externalUrlAdditionalProps } from "utils/url";
+import { LinkButton } from "components/atoms/LinkButton";
 
 import { useShowHide } from "hooks/useShowHide";
 
@@ -68,13 +68,12 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
           <RenderMarkdown text={banner.content} />
         </div>
         {isActiveButton && (
-          <a
+          <LinkButton
             href={banner.buttonUrl}
             className="AnnouncementMessage__action-button"
-            {...externalUrlAdditionalProps}
           >
             {banner.buttonDisplayText}
-          </a>
+          </LinkButton>
         )}
         {isUser && banner.isCloseButton ? (
           <span
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index d583db460d..19aa902334 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -23,7 +23,6 @@
 
   &__button {
     width: $button-width;
-    height: $submit-button-diameter;
   }
 
   &__action-container {
@@ -43,3 +42,12 @@
     font-size: $font-size--lg;
   }
 }
+
+// Override global styles button
+button.Banner__button {
+  background-color: $primary--live;
+
+  &--close {
+    background-color: $red;
+  }
+}
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 92bdd92106..175b2f5312 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -1,5 +1,4 @@
-import React, { useCallback, useState } from "react";
-import { Button } from "react-bootstrap";
+import React, { useCallback, useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 <<<<<<< HEAD
@@ -13,6 +12,7 @@ import { AnyVenue } from "types/venues";
 
 import { useShowHide } from "hooks/useShowHide";
 
+import { Button } from "components/atoms/Button";
 import { Checkbox } from "components/atoms/Checkbox";
 import { InputField } from "components/atoms/InputField";
 
@@ -58,12 +58,18 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   const [bannerData, setBannerDate] = useState<BannerFormData>(
     initialBannerData
   );
-
   const {
     isShown: isShowModal,
     show: showModal,
     hide: hideModal,
   } = useShowHide();
+  const [isDisabledUrlFields, setIsDisabledUrlFields] = useState(
+    venue?.banner?.isActionButton
+  );
+
+  useEffect(() => {
+    setIsDisabledUrlFields(isActionButtonValue);
+  }, [isActionButtonValue]);
 
   const updateBannerInFirestore = useCallback(
     (data: BannerFormData) => {
@@ -136,7 +142,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
             defaultValue={venue?.banner?.buttonUrl}
             containerClassName="Banner__input-container"
             inputClassName="Banner__input-text"
-            disabled={!isActionButtonValue}
+            disabled={!isDisabledUrlFields}
             autoComplete="off"
           />
           <InputField
@@ -146,7 +152,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
             defaultValue={venue?.banner?.buttonDisplayText}
             containerClassName="Banner__input-container"
             inputClassName="Banner__input-text"
-            disabled={!isActionButtonValue}
+            disabled={!isDisabledUrlFields}
             autoComplete="off"
           />
         </div>
@@ -170,13 +176,12 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
 
         <div className="Banner__button-container">
           <Button
-            className="Banner__button"
-            variant="danger"
+            customClass="Banner__button Banner__button--close"
             onClick={clearBanner}
           >
             Clear
           </Button>
-          <Button className="Banner__button" type="submit">
+          <Button customClass="Banner__button" type="submit">
             Save
           </Button>
         </div>
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
index f96300894a..518977232e 100644
--- a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
+++ b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
@@ -5,25 +5,26 @@
 
   &__header {
     font-size: $font-size--xl;
+    margin: 0;
   }
 
   &__message {
-    padding: 10px 0 30px 0;
+    padding: $spacing--md 0 $spacing--xl;
   }
 
   &__buttons {
     display: flex;
     justify-content: space-around;
   }
-  &__confirm-button {
-    width: $button-width;
-  }
+}
+
+// Override global styles button
+button.ConfirmationBannerModal__button {
+  width: $button-width;
+  font-weight: $font-weight--500;
+  background-color: $primary--live;
 
-  &__cancel-button {
-    background-image: none;
-    background-color: $black;
-    border: solid $white 1px;
-    border-color: $white;
-    width: $button-width;
+  &--cancel {
+    background-color: opaque-white(0.2);
   }
 }
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
index d39edd7bdd..0c76fe7f3f 100644
--- a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
+++ b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
@@ -1,5 +1,7 @@
 import React from "react";
-import { Button, Modal } from "react-bootstrap";
+import { Modal } from "react-bootstrap";
+
+import { Button } from "components/atoms/Button";
 
 import "./ConfirmationBannerModal.scss";
 
@@ -24,14 +26,13 @@ export const ConfirmationBannerModal: React.FC<ConfirmationBannerModalProps> = (
           <div className="ConfirmationBannerModal__message">Are you sure?</div>
           <div className="ConfirmationBannerModal__buttons">
             <Button
-              variant="secondary"
-              className="ConfirmationBannerModal__cancel-button"
+              customClass="ConfirmationBannerModal__button ConfirmationBannerModal__button--cancel"
               onClick={onCancel}
             >
               Cancel
             </Button>
             <Button
-              className="ConfirmationBannerModal__confirm-button"
+              customClass="ConfirmationBannerModal__button"
               onClick={onConfirm}
             >
               Clear & Save
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
index 830f56e548..75fb9ab354 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
@@ -9,9 +9,12 @@
     font-size: $font-size--lg;
     margin-top: $spacing--xs;
   }
+}
 
-  &__edit-button {
-    height: $submit-button-diameter;
-    width: $button-width;
-  }
+// Override global styles button
+button.AnnouncementOptions__edit-button {
+  height: $submit-button-diameter;
+  width: $button-width;
+  background-color: $white;
+  color: $primary--live;
 }
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
index acccdf71de..0f09335adb 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
@@ -1,8 +1,9 @@
 import React from "react";
-import { Button } from "react-bootstrap";
 
 import { BannerFormData } from "types/banner";
 
+import { Button } from "components/atoms/Button";
+
 import { AnnouncementStatus } from "./AnnouoncementStatus";
 
 import "./AnnouncementOptions.scss";
@@ -22,7 +23,7 @@ export const AnnouncementOptions: React.FC<AnnouncementOptionsProps> = ({
         <AnnouncementStatus banner={banner} />
       </div>
       <div className="AnnouncementOptions__right-side">
-        <Button onClick={onEdit} className="AnnouncementOptions__edit-button">
+        <Button onClick={onEdit} customClass="AnnouncementOptions__edit-button">
           Edit
         </Button>
       </div>

From 307452850d0fabd7ef629340f92b6908b9340eb4 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 04:24:05 +0300
Subject: [PATCH 07/46] discussion_r644699780

---
 src/api/bannerAdmin.ts                          | 17 ++++++++++++-----
 .../AnnouncementMessage/AnnouncementMessage.tsx |  4 ++--
 .../components/RunTabToolbar/RunTabToolbar.tsx  |  2 +-
 .../organisms/BannerAdmin/BannerAdmin.tsx       | 10 +++-------
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/api/bannerAdmin.ts b/src/api/bannerAdmin.ts
index f25020fcac..fc64f8fa26 100644
--- a/src/api/bannerAdmin.ts
+++ b/src/api/bannerAdmin.ts
@@ -1,13 +1,20 @@
 import Bugsnag from "@bugsnag/js";
 import firebase from "firebase/app";
 
-export const makeUpdateBanner = (
-  venueId: string,
+import { BannerFormData } from "types/banner";
+
+export const makeUpdateBanner = async ({
+  venueId,
+  banner,
+  onError = () => {}
+}: {
+  venueId: string;
+  banner: BannerFormData;
   onError?: (errorMsg: string) => void
-) => async (message?: string): Promise<void> => {
+}): Promise<void> => {
   const params = {
     venueId,
-    banner: message ?? {},
+    banner,
   };
 
   await firebase
@@ -18,7 +25,7 @@ export const makeUpdateBanner = (
         event.addMetadata("context", {
           location: "api/bannerAdmin::makeUpdateBanner",
           venueId,
-          message,
+          banner,
         });
       });
       onError?.(e.toString());
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 8749ae1ac5..7ec7aa2e6c 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -5,12 +5,12 @@ import classNames from "classnames";
 
 import { BannerFormData } from "types/banner";
 
-import { LinkButton } from "components/atoms/LinkButton";
-
 import { useShowHide } from "hooks/useShowHide";
 
 import { RenderMarkdown } from "components/organisms/RenderMarkdown";
 
+import { LinkButton } from "components/atoms/LinkButton";
+
 import "./AnnouncementMessage.scss";
 
 export interface AnnouncementMessageProps {
diff --git a/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx b/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
index 71200b0c9f..892b1f6259 100644
--- a/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
+++ b/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
@@ -29,7 +29,7 @@ export const RunTabToolbar: React.FC<RunTabToolbarProps> = ({ venueId }) => {
   ] = useAsyncFn(async () => {
     if (!venueId) return;
     const bannerMessage = getValues().message;
-    await makeUpdateBanner(venueId)(bannerMessage);
+    await makeUpdateBanner({venueId, banner: {title: bannerMessage}});
   }, [getValues, venueId]);
 
   return (
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 175b2f5312..5a7e5af4b5 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -1,12 +1,8 @@
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useCallback, useEffect,useState } from "react";
 import { useForm } from "react-hook-form";
 
-<<<<<<< HEAD
-=======
 import { makeUpdateBanner } from "api/bannerAdmin";
 
-import { AnyVenue } from "types/venues";
->>>>>>> updates
 import { BannerFormData } from "types/banner";
 import { AnyVenue } from "types/venues";
 
@@ -72,9 +68,9 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   }, [isActionButtonValue]);
 
   const updateBannerInFirestore = useCallback(
-    (data: BannerFormData) => {
+    (banner: BannerFormData) => {
       if (!venueId) return;
-      makeUpdateBanner(venueId)(data);
+      makeUpdateBanner({venueId, banner});
       onClose();
     },
     [venueId, onClose]

From 91c882aa6efcd1673c53c8cb0f507fe9c226cb4b Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 04:24:49 +0300
Subject: [PATCH 08/46] discussion_r644699971

---
 src/assets/icons/icon-checkmark.svg           |  1 -
 src/assets/icons/icon-close.svg               |  1 -
 .../AnnouncementStatus.tsx                    | 19 ++++++++++---------
 3 files changed, 10 insertions(+), 11 deletions(-)
 delete mode 100644 src/assets/icons/icon-checkmark.svg
 delete mode 100644 src/assets/icons/icon-close.svg

diff --git a/src/assets/icons/icon-checkmark.svg b/src/assets/icons/icon-checkmark.svg
deleted file mode 100644
index 44fb1f48aa..0000000000
--- a/src/assets/icons/icon-checkmark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="16" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.87 11.27a1.1 1.1 0 01-1.56 0L.8 7.72C.39 7.28.4 6.6.82 6.18a1.1 1.1 0 011.55 0L5.1 8.92l8.54-8.6a1.1 1.1 0 011.55 0c.43.43.43 1.13 0 1.57l-9.31 9.38z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon-close.svg b/src/assets/icons/icon-close.svg
deleted file mode 100644
index ecf9efebf3..0000000000
--- a/src/assets/icons/icon-close.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.66 4.34a1.5 1.5 0 010 2.12L12.12 10l3.54 3.54a1.5 1.5 0 01-2.12 2.12L10 12.12l-3.54 3.54a1.5 1.5 0 11-2.12-2.12L7.88 10 4.34 6.46a1.5 1.5 0 112.12-2.12L10 7.88l3.54-3.54a1.5 1.5 0 012.12 0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
index d51f1674cd..cdacb78233 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
@@ -1,11 +1,10 @@
 import React from "react";
 import classNames from "classnames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 
 import { BannerFormData } from "types/banner";
 
-import iconCheck from "assets/icons/icon-checkmark.svg";
-import iconClose from "assets/icons/icon-close.svg";
-
 import "./AnnouncementStatus.scss";
 
 export interface AnnouncementStatusProps {
@@ -18,8 +17,8 @@ const DISABLED = "disabled";
 export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
   banner,
 }) => {
-  const fullscreenImg = banner?.isFullScreen ? iconCheck : iconClose;
-  const closeImg = banner?.isCloseButton ? iconCheck : iconClose;
+  const fullscreenImg = banner?.isFullScreen ? faCheck : faTimes;
+  const closeImg = banner?.isCloseButton ? faCheck : faTimes;
 
   const fullscreenText = banner?.isFullScreen ? ENABLED : DISABLED;
   const forceText = banner?.isCloseButton ? ENABLED : DISABLED;
@@ -36,15 +35,17 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
     <div className="AnnouncementStatus">
       <div className="AnnouncementStatus__buttons">
         <span className="AnnouncementStatus__checkbox">
-          <img
-            src={fullscreenImg}
-            alt="on"
+          <FontAwesomeIcon
+            icon={fullscreenImg}
             className="AnnouncementStatus__img"
           />
           FullScreen {fullscreenText}
         </span>
         <span className="AnnouncementStatus__checkbox">
-          <img src={closeImg} alt="off" className="AnnouncementStatus__img" />
+          <FontAwesomeIcon
+            icon={closeImg}
+            className="AnnouncementStatus__img"
+          />
           Force funnel {forceText}
         </span>
       </div>

From 48653ae688107c71d14db0b8a6fa1909aeb404e5 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 04:26:02 +0300
Subject: [PATCH 09/46] discussion_r644700886

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.scss      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 14cfa74bcf..ddfb89af4e 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -14,7 +14,7 @@ $action-button-padding: 6px;
   transition: left 0.1s linear;
 
   padding: $spacing 0;
-  border-radius: 20px;
+  border-radius: $border-radius--xl;
   text-align: center;
 
   &__default-text {

From c7fb982a8937e849292f6a38de68003ed78f06eb Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 04:27:00 +0300
Subject: [PATCH 10/46] discussion_r644701249

---
 .../AnnouncementMessage.scss                  | 40 +++++++++----------
 .../AnnouncementMessage.tsx                   |  6 +--
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index ddfb89af4e..faab8ea0d7 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -51,28 +51,28 @@ $action-button-padding: 6px;
       text-decoration: underline;
     }
   }
-}
-
-.AnnouncementContainer {
-  position: fixed;
-  top: 66px;
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: z(announcement);
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
 
-  &--centered {
-    bottom: 0;
+  &__container {
+    position: fixed;
+    top: 66px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: z(announcement);
     display: flex;
-    align-items: center;
-    background-color: opaque-black(0.6);
-  }
+    justify-content: center;
+    align-items: flex-start;
 
-  &--canceled {
-    position: relative;
-    top: 0;
+    &--centered {
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      background-color: opaque-black(0.6);
+    }
+
+    &--canceled {
+      position: relative;
+      top: 0;
+    }
   }
 }
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 7ec7aa2e6c..107f8deca8 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -42,9 +42,9 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   const isActiveButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
-  const containerClassNames = classNames("AnnouncementContainer", {
-    "AnnouncementContainer--centered": banner?.isFullScreen,
-    "AnnouncementContainer--canceled": !isUser,
+  const containerClassNames = classNames("AnnouncementMessage__container", {
+    "AnnouncementMessage__container--centered": banner?.isFullScreen,
+    "AnnouncementMessage__container--canceled": !isUser,
   });
 
   if (!isUser && !banner?.content)

From 4a18ef31354e76b711eaa72d98b529334f688000 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 04:28:10 +0300
Subject: [PATCH 11/46] discussion_r644702532

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 107f8deca8..d2af537dd3 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -5,6 +5,8 @@ import classNames from "classnames";
 
 import { BannerFormData } from "types/banner";
 
+import { isDefined } from "utils/types";
+
 import { useShowHide } from "hooks/useShowHide";
 
 import { RenderMarkdown } from "components/organisms/RenderMarkdown";
@@ -30,7 +32,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   } = useShowHide();
 
   useEffect(() => {
-    if (banner?.content) {
+    if (isDefined(banner?.content)) {
       showAnnouncementMessage();
     }
   }, [banner, showAnnouncementMessage]);

From 9ce4fabff69bca239d7d7dbaf54dd06ec7e52759 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 04:28:36 +0300
Subject: [PATCH 12/46] discussion_r644702936

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index d2af537dd3..44ca293865 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -44,7 +44,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   const isActiveButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
-  const containerClassNames = classNames("AnnouncementMessage__container", {
+  const containerClasses = classNames("AnnouncementMessage__container", {
     "AnnouncementMessage__container--centered": banner?.isFullScreen,
     "AnnouncementMessage__container--canceled": !isUser,
   });
@@ -61,7 +61,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   if (!isShownAnnouncementMessage || !banner?.content) return null;
 
   return (
-    <div className={containerClassNames} onClick={hideAnnouncementMessage}>
+    <div className={containerClasses} onClick={hideAnnouncementMessage}>
       <div className="AnnouncementMessage" onClick={noop}>
         {banner?.title && (
           <h2 className="AnnouncementMessage__title">{banner.title}</h2>

From 3585573499c20aa1c43583956e57d06dbaa56ca6 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 04:29:10 +0300
Subject: [PATCH 13/46] discussion_r644710614

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx   | 2 +-
 src/components/organisms/BannerAdmin/BannerAdmin.tsx        | 6 +++---
 .../AnnouoncementStatus/AnnouncementStatus.tsx              | 4 ++--
 src/types/banner.ts                                         | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 44ca293865..fcbf92cac4 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -77,7 +77,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
             {banner.buttonDisplayText}
           </LinkButton>
         )}
-        {isUser && banner.isCloseButton ? (
+        {isUser && banner.hasCloseButton ? (
           <span
             className="AnnouncementMessage__close-button"
             onClick={hideAnnouncementMessage}
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 5a7e5af4b5..6fd296cfce 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -23,7 +23,7 @@ const initialBannerData = {
   buttonUrl: "",
   buttonDisplayText: "",
   isFullScreen: false,
-  isCloseButton: false,
+  hasCloseButton: false,
 };
 
 interface BannerAdminProps {
@@ -163,11 +163,11 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
 
         <Checkbox
           containerClassName="Banner__checkbox"
-          name="isCloseButton"
+          name="hasCloseButton"
           label="Force funnel (users will have to click your button)"
           toggler
           forwardedRef={register}
-          defaultChecked={venue?.banner?.isCloseButton}
+          defaultChecked={venue?.banner?.hasCloseButton}
         />
 
         <div className="Banner__button-container">
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
index cdacb78233..fa8f30a040 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
@@ -18,10 +18,10 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
   banner,
 }) => {
   const fullscreenImg = banner?.isFullScreen ? faCheck : faTimes;
-  const closeImg = banner?.isCloseButton ? faCheck : faTimes;
+  const closeImg = banner?.hasCloseButton ? faCheck : faTimes;
 
   const fullscreenText = banner?.isFullScreen ? ENABLED : DISABLED;
-  const forceText = banner?.isCloseButton ? ENABLED : DISABLED;
+  const forceText = banner?.hasCloseButton ? ENABLED : DISABLED;
 
   const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
 
diff --git a/src/types/banner.ts b/src/types/banner.ts
index d89a60c48e..ba5803566b 100644
--- a/src/types/banner.ts
+++ b/src/types/banner.ts
@@ -5,5 +5,5 @@ export interface BannerFormData {
   buttonUrl?: string;
   buttonDisplayText?: string;
   isFullScreen?: boolean;
-  isCloseButton?: boolean;
+  hasCloseButton?: boolean;
 }

From 14e353bdeb4c1306eedc44f7e2c273d2b33edf06 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 04:29:50 +0300
Subject: [PATCH 14/46] discussion_r644711161

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index fcbf92cac4..30474f3613 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -69,7 +69,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
         <div className="AnnouncementMessage__content">
           <RenderMarkdown text={banner.content} />
         </div>
-        {isActiveButton && (
+        {isActiveButton && banner.buttonUrl && (
           <LinkButton
             href={banner.buttonUrl}
             className="AnnouncementMessage__action-button"

From 9a3743708debc7d80cf472e338714766918b32c9 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 05:46:31 +0300
Subject: [PATCH 15/46] discussion_r644711366

---
 .../organisms/BannerAdmin/BannerAdmin.scss    |  4 +--
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 32 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index 19aa902334..4b478340b1 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -1,6 +1,6 @@
 @import "scss/constants.scss";
 
-.Banner {
+.BannerAdmin {
   &__input-text {
     text-align: start;
     padding: $spacing--sm $spacing--lg;
@@ -44,7 +44,7 @@
 }
 
 // Override global styles button
-button.Banner__button {
+button.BannerAdmin__button {
   background-color: $primary--live;
 
   &--close {
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 6fd296cfce..cb37263140 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -95,15 +95,15 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   }, [bannerData, updateBannerInFirestore, hideModal]);
 
   return (
-    <div className="Banner">
+    <div className="BannerAdmin">
       <form onSubmit={handleSubmit(onSubmit)}>
         <InputField
           ref={register}
           name="title"
           placeholder="Please type your announcement title. (optional)"
           defaultValue={venue?.banner?.title}
-          containerClassName="Banner__input-container"
-          inputClassName="Banner__input-text"
+          containerClassName="BannerAdmin__input-container"
+          inputClassName="BannerAdmin__input-text"
           autoComplete="off"
         />
 
@@ -111,7 +111,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
           <textarea
             name="content"
             defaultValue={venue?.banner?.content}
-            className="Banner__input-text"
+            className="BannerAdmin__input-text"
             placeholder="Please type your announcement content"
             ref={register({ required: true })}
           />
@@ -121,8 +121,8 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         </div>
 
         <Checkbox
-          containerClassName="Banner__checkbox Banner__checkbox--action"
-          labelClassName="Banner__checkbox-label"
+          containerClassName="BannerAdmin__checkbox BannerAdmin__checkbox--action"
+          labelClassName="BannerAdmin__checkbox-label"
           name="isActionButton"
           label="Call to Action Button"
           toggler
@@ -130,14 +130,14 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
           defaultChecked={venue?.banner?.isActionButton}
         />
 
-        <div className="Banner__action-container">
+        <div className="BannerAdmin__action-container">
           <InputField
             ref={register}
             name="buttonUrl"
             placeholder="Button URL"
             defaultValue={venue?.banner?.buttonUrl}
-            containerClassName="Banner__input-container"
-            inputClassName="Banner__input-text"
+            containerClassName="BannerAdmin__input-container"
+            inputClassName="BannerAdmin__input-text"
             disabled={!isDisabledUrlFields}
             autoComplete="off"
           />
@@ -146,14 +146,14 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
             name="buttonDisplayText"
             placeholder="Button display text"
             defaultValue={venue?.banner?.buttonDisplayText}
-            containerClassName="Banner__input-container"
-            inputClassName="Banner__input-text"
+            containerClassName="BannerAdmin__input-container"
+            inputClassName="BannerAdmin__input-text"
             disabled={!isDisabledUrlFields}
             autoComplete="off"
           />
         </div>
         <Checkbox
-          containerClassName="Banner__checkbox"
+          containerClassName="BannerAdmin__checkbox"
           name="isFullScreen"
           label="Set fullscreen announcement"
           toggler
@@ -162,7 +162,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         />
 
         <Checkbox
-          containerClassName="Banner__checkbox"
+          containerClassName="BannerAdmin__checkbox"
           name="hasCloseButton"
           label="Force funnel (users will have to click your button)"
           toggler
@@ -170,14 +170,14 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
           defaultChecked={venue?.banner?.hasCloseButton}
         />
 
-        <div className="Banner__button-container">
+        <div className="BannerAdmin__button-container">
           <Button
-            customClass="Banner__button Banner__button--close"
+            customClass="BannerAdmin__button BannerAdmin__button--close"
             onClick={clearBanner}
           >
             Clear
           </Button>
-          <Button customClass="Banner__button" type="submit">
+          <Button customClass="BannerAdmin__button" type="submit">
             Save
           </Button>
         </div>

From f93fdc064bdceb63f403c88f79a73bbffa00a0ec Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 05:57:38 +0300
Subject: [PATCH 16/46] discussion_r644714568

---
 src/api/bannerAdmin.ts                        | 14 ++++++++------
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 19 ++++---------------
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/api/bannerAdmin.ts b/src/api/bannerAdmin.ts
index fc64f8fa26..06a5224322 100644
--- a/src/api/bannerAdmin.ts
+++ b/src/api/bannerAdmin.ts
@@ -3,18 +3,20 @@ import firebase from "firebase/app";
 
 import { BannerFormData } from "types/banner";
 
+export interface MakeUpdateBannerProps {
+  venueId: string;
+  banner?: BannerFormData;
+  onError?: (errorMsg: string) => void
+}
+
 export const makeUpdateBanner = async ({
   venueId,
   banner,
   onError = () => {}
-}: {
-  venueId: string;
-  banner: BannerFormData;
-  onError?: (errorMsg: string) => void
-}): Promise<void> => {
+}: MakeUpdateBannerProps): Promise<void> => {
   const params = {
     venueId,
-    banner,
+    banner: banner ?? firebase.firestore.FieldValue.delete(),
   };
 
   await firebase
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index cb37263140..8ff8b6d2cd 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -16,16 +16,6 @@ import { ConfirmationBannerModal } from "./ConfirmationBannerModal";
 
 import "./BannerAdmin.scss";
 
-const initialBannerData = {
-  title: "",
-  content: "",
-  isActionButton: false,
-  buttonUrl: "",
-  buttonDisplayText: "",
-  isFullScreen: false,
-  hasCloseButton: false,
-};
-
 interface BannerAdminProps {
   venueId?: string;
   venue: AnyVenue;
@@ -51,9 +41,8 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   });
   const isActionButtonValue = watch("isActionButton");
 
-  const [bannerData, setBannerDate] = useState<BannerFormData>(
-    initialBannerData
-  );
+  const [bannerData, setBannerDate] = useState<BannerFormData>();
+
   const {
     isShown: isShowModal,
     show: showModal,
@@ -68,7 +57,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   }, [isActionButtonValue]);
 
   const updateBannerInFirestore = useCallback(
-    (banner: BannerFormData) => {
+    (banner?: BannerFormData) => {
       if (!venueId) return;
       makeUpdateBanner({venueId, banner});
       onClose();
@@ -85,7 +74,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   );
 
   const clearBanner = useCallback(() => {
-    updateBannerInFirestore(initialBannerData);
+    updateBannerInFirestore(undefined);
     reset();
   }, [updateBannerInFirestore, reset]);
 

From 4e7eafea9cc660042bfd33d6d785085607651f4b Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 06:00:24 +0300
Subject: [PATCH 17/46] discussion_r644716944

---
 .../AnnouoncementStatus/AnnouncementStatus.tsx            | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
index fa8f30a040..51382d338f 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
@@ -11,8 +11,8 @@ export interface AnnouncementStatusProps {
   banner?: BannerFormData;
 }
 
-const ENABLED = "enabled";
-const DISABLED = "disabled";
+const ENABLED__TEXT = "enabled";
+const DISABLED__TEXT = "disabled";
 
 export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
   banner,
@@ -20,8 +20,8 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
   const fullscreenImg = banner?.isFullScreen ? faCheck : faTimes;
   const closeImg = banner?.hasCloseButton ? faCheck : faTimes;
 
-  const fullscreenText = banner?.isFullScreen ? ENABLED : DISABLED;
-  const forceText = banner?.hasCloseButton ? ENABLED : DISABLED;
+  const fullscreenText = banner?.isFullScreen ? ENABLED__TEXT : DISABLED__TEXT;
+  const forceText = banner?.hasCloseButton ? ENABLED__TEXT : DISABLED__TEXT;
 
   const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
 

From fcd796ad8cfab9e70f15db4fad2b18d09712de91 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 06:04:07 +0300
Subject: [PATCH 18/46] discussion_r644717292

---
 .../AnnouoncementStatus/AnnouncementStatus.tsx                | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
index 51382d338f..6d82e19f6e 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
@@ -5,6 +5,8 @@ import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 
 import { BannerFormData } from "types/banner";
 
+import { isDefined } from "utils/types";
+
 import "./AnnouncementStatus.scss";
 
 export interface AnnouncementStatusProps {
@@ -29,7 +31,7 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
     "AnnouncementStatus__url-text--empty": !banner?.isActionButton,
   });
 
-  if (!banner?.content) return null;
+  if (isDefined(!banner?.content)) return null;
 
   return (
     <div className="AnnouncementStatus">

From a62d41aa88316076fb1de18940cdefe1f5fadfa9 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 06:05:45 +0300
Subject: [PATCH 19/46] discussion_r644717671

---
 src/pages/Admin/Venue/VenueAdminPage.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index bc689df4a9..d846697386 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -8,10 +8,10 @@
   &__title {
     text-align: center;
     margin-top: 41px;
-    padding: 5px;
+    padding: $spacing--xs;
     font-size: $font-size--sm;
-    background: #1a1d24;
+    background: $dark;
     border-radius: $border-radius--xl;
-    opacity: 0.7;
+    opacity: 0.9;
   }
 }

From 332ea6a9559ecd0d04fbd61ba946edbffb362d77 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 06:16:19 +0300
Subject: [PATCH 20/46] discussion_r644719421

---
 .../AnnouncementMessage/AnnouncementMessage.tsx        | 10 +++++-----
 src/pages/VenuePage/TemplateWrapper.tsx                |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 30474f3613..30f6b250f1 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -17,12 +17,12 @@ import "./AnnouncementMessage.scss";
 
 export interface AnnouncementMessageProps {
   banner?: BannerFormData;
-  isUser?: boolean;
+  announcementForUser?: boolean;
 }
 
 export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   banner,
-  isUser = false,
+  announcementForUser = false,
 }) => {
 
   const {
@@ -46,10 +46,10 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
 
   const containerClasses = classNames("AnnouncementMessage__container", {
     "AnnouncementMessage__container--centered": banner?.isFullScreen,
-    "AnnouncementMessage__container--canceled": !isUser,
+    "AnnouncementContainer--canceled": !announcementForUser,
   });
 
-  if (!isUser && !banner?.content)
+  if (!announcementForUser && !banner?.content)
     return (
       <div className="AnnouncementMessage">
         <span className="AnnouncementMessage__default-text">
@@ -77,7 +77,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
             {banner.buttonDisplayText}
           </LinkButton>
         )}
-        {isUser && banner.hasCloseButton ? (
+        {announcementForUser && banner.isCloseButton ? (
           <span
             className="AnnouncementMessage__close-button"
             onClick={hideAnnouncementMessage}
diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index 9f87ad54fb..8159f2eea6 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -141,7 +141,7 @@ export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
       <RelatedVenuesProvider venueId={venue.id}>
         <ReactionsProvider venueId={venue.id}>
           <WithNavigationBar hasBackButton={hasBackButton}>
-            <AnnouncementMessage banner={venue.banner} />
+            <AnnouncementMessage banner={venue.banner} announcementForUser />
 
             <Suspense fallback={<LoadingPage />}>{template}</Suspense>
 

From 8a74cea05fea4750760f54ad05459fbef72621c1 Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 06:27:34 +0300
Subject: [PATCH 21/46] discussion_r644719631

---
 src/api/bannerAdmin.ts                         |  4 ++--
 .../AnnouncementMessage.tsx                    |  6 +++---
 .../organisms/BannerAdmin/BannerAdmin.tsx      | 18 ++++++------------
 .../AnnouncementOptions.tsx                    |  4 ++--
 .../AnnouoncementStatus/AnnouncementStatus.tsx |  4 ++--
 src/types/banner.ts                            |  2 +-
 src/types/venues.ts                            |  4 ++--
 7 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/api/bannerAdmin.ts b/src/api/bannerAdmin.ts
index 06a5224322..c02e6f881f 100644
--- a/src/api/bannerAdmin.ts
+++ b/src/api/bannerAdmin.ts
@@ -1,11 +1,11 @@
 import Bugsnag from "@bugsnag/js";
 import firebase from "firebase/app";
 
-import { BannerFormData } from "types/banner";
+import { Banner } from "types/banner";
 
 export interface MakeUpdateBannerProps {
   venueId: string;
-  banner?: BannerFormData;
+  banner?: Banner;
   onError?: (errorMsg: string) => void
 }
 
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 30f6b250f1..99d2c69d3f 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -3,7 +3,7 @@ import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 
-import { BannerFormData } from "types/banner";
+import { Banner  } from "types/banner";
 
 import { isDefined } from "utils/types";
 
@@ -16,7 +16,7 @@ import { LinkButton } from "components/atoms/LinkButton";
 import "./AnnouncementMessage.scss";
 
 export interface AnnouncementMessageProps {
-  banner?: BannerFormData;
+  banner?: Banner;
   announcementForUser?: boolean;
 }
 
@@ -77,7 +77,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
             {banner.buttonDisplayText}
           </LinkButton>
         )}
-        {announcementForUser && banner.isCloseButton ? (
+        {announcementForUser && banner.hasCloseButton ? (
           <span
             className="AnnouncementMessage__close-button"
             onClick={hideAnnouncementMessage}
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 8ff8b6d2cd..a743466dd7 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -3,8 +3,8 @@ import { useForm } from "react-hook-form";
 
 import { makeUpdateBanner } from "api/bannerAdmin";
 
-import { BannerFormData } from "types/banner";
-import { AnyVenue } from "types/venues";
+import { Banner } from "types/banner";
+import { AnyVenue  } from "types/venues";
 
 import { useShowHide } from "hooks/useShowHide";
 
@@ -29,19 +29,13 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   venue,
   onClose,
 }) => {
-  const {
-    register,
-    handleSubmit,
-    errors,
-    reset,
-    watch,
-  } = useForm<BannerFormData>({
+  const { register, handleSubmit, errors, reset, watch } = useForm<Banner>({
     mode: "onChange",
     reValidateMode: "onChange",
   });
   const isActionButtonValue = watch("isActionButton");
 
-  const [bannerData, setBannerDate] = useState<BannerFormData>();
+  const [bannerData, setBannerDate] = useState<Banner>();
 
   const {
     isShown: isShowModal,
@@ -57,7 +51,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   }, [isActionButtonValue]);
 
   const updateBannerInFirestore = useCallback(
-    (banner?: BannerFormData) => {
+    (banner?: Banner) => {
       if (!venueId) return;
       makeUpdateBanner({venueId, banner});
       onClose();
@@ -66,7 +60,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   );
 
   const onSubmit = useCallback(
-    (data: BannerFormData) => {
+    (data: Banner) => {
       showModal();
       setBannerDate(data);
     },
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
index 0f09335adb..8037d6d30b 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { BannerFormData } from "types/banner";
+import { Banner } from "types/banner";
 
 import { Button } from "components/atoms/Button";
 
@@ -9,7 +9,7 @@ import { AnnouncementStatus } from "./AnnouoncementStatus";
 import "./AnnouncementOptions.scss";
 
 export interface AnnouncementOptionsProps {
-  banner?: BannerFormData;
+  banner?: Banner;
   onEdit: () => void;
 }
 
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
index 6d82e19f6e..f597477642 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
@@ -3,14 +3,14 @@ import classNames from "classnames";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 
-import { BannerFormData } from "types/banner";
+import { Banner } from "types/banner";
 
 import { isDefined } from "utils/types";
 
 import "./AnnouncementStatus.scss";
 
 export interface AnnouncementStatusProps {
-  banner?: BannerFormData;
+  banner?: Banner;
 }
 
 const ENABLED__TEXT = "enabled";
diff --git a/src/types/banner.ts b/src/types/banner.ts
index ba5803566b..eff6bd2b5f 100644
--- a/src/types/banner.ts
+++ b/src/types/banner.ts
@@ -1,4 +1,4 @@
-export interface BannerFormData {
+export interface Banner {
   title?: string;
   content?: string;
   isActionButton?: boolean;
diff --git a/src/types/venues.ts b/src/types/venues.ts
index 9fa140374c..2f52b78c36 100644
--- a/src/types/venues.ts
+++ b/src/types/venues.ts
@@ -15,7 +15,7 @@ import { UpcomingEvent } from "./UpcomingEvent";
 import { UsernameVisibility, UserStatus } from "./User";
 import { VenueAccessMode } from "./VenueAcccess";
 import { VideoAspectRatio } from "./VideoAspectRatio";
-import { BannerFormData } from "./banner";
+import { Banner } from "./banner";
 
 // These represent all of our templates (they should remain alphabetically sorted, deprecated should be separate from the rest)
 // @debt unify this with VenueTemplate in functions/venue.js + share the same code between frontend/backend
@@ -151,7 +151,7 @@ export interface BaseVenue {
   radioTitle?: string;
   dustStorm?: boolean;
   activity?: string;
-  banner?: BannerFormData;
+  banner?: Banner;
   playaIcon?: PlayaIcon;
   playaIcon2?: PlayaIcon;
   miniAvatars?: boolean;

From ab6186d977dcda79fb9d46d961939ee2b8b065fc Mon Sep 17 00:00:00 2001
From: Oleksii Pohorelyi <oleksii.pohorelyi@gmail.com>
Date: Sun, 13 Jun 2021 06:40:19 +0300
Subject: [PATCH 22/46] discussion_r644704264

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 99d2c69d3f..83bbf3f06c 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -58,7 +58,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       </div>
     );
 
-  if (!isShownAnnouncementMessage || !banner?.content) return null;
+  if (!isShownAnnouncementMessage) return null;
 
   return (
     <div className={containerClasses} onClick={hideAnnouncementMessage}>

From fbbebcd8796eebdb41a672772aed2023c1fd323f Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Thu, 1 Jul 2021 13:45:10 +0300
Subject: [PATCH 23/46] fixes as per PR + banner modal/confirm modal merged

---
 functions/venue.js                            |  1 -
 .../ConfirmationModal/ConfirmationModal.scss  | 29 +++++++
 .../ConfirmationModal/ConfirmationModal.tsx   | 36 ++++++--
 .../atoms/LinkButton/LinkButton.tsx           |  2 +-
 .../AnnouncementMessage.scss                  |  6 +-
 .../AnnouncementMessage.tsx                   | 32 ++++---
 .../organisms/BannerAdmin/BannerAdmin.scss    |  6 +-
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 87 +++++++++++--------
 .../ConfirmationBannerModal.scss              | 30 -------
 .../ConfirmationBannerModal.tsx               | 45 ----------
 .../ConfirmationBannerModal/index.ts          |  1 -
 .../AdvancedSettings/AdvancedSettings.tsx     |  3 +-
 .../AnnouncementOptions.tsx                   |  2 +-
 .../AnnouncementStatus.scss                   |  0
 .../AnnouncementStatus.tsx                    |  8 +-
 .../index.ts                                  |  0
 src/pages/Admin/Venue/VenueAdminPage.scss     |  2 +-
 src/pages/Admin/Venue/VenueAdminPage.tsx      | 20 +++--
 src/pages/VenuePage/TemplateWrapper.tsx       |  3 +
 src/types/banner.ts                           |  2 +-
 src/types/venues.ts                           |  1 +
 21 files changed, 163 insertions(+), 153 deletions(-)
 delete mode 100644 src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
 delete mode 100644 src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
 delete mode 100644 src/components/organisms/BannerAdmin/ConfirmationBannerModal/index.ts
 rename src/pages/Admin/Venue/{AnnouncementOptions/AnnouoncementStatus => AnnouncementStatus}/AnnouncementStatus.scss (100%)
 rename src/pages/Admin/Venue/{AnnouncementOptions/AnnouoncementStatus => AnnouncementStatus}/AnnouncementStatus.tsx (89%)
 rename src/pages/Admin/Venue/{AnnouncementOptions/AnnouoncementStatus => AnnouncementStatus}/index.ts (100%)

diff --git a/functions/venue.js b/functions/venue.js
index ecdcdb3c4b..76d72b06d1 100644
--- a/functions/venue.js
+++ b/functions/venue.js
@@ -863,7 +863,6 @@ exports.adminHideVenue = functions.https.onCall(async (data, context) => {
   admin.firestore().collection("venues").doc(venueId).update(updated);
 });
 
-//This will be change
 exports.adminUpdateBannerMessage = functions.https.onCall(
   async (data, context) => {
     await checkUserIsOwner(data.venueId, context.auth.token.user_id);
diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index 2286c4d60f..bb24cf86bd 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -22,3 +22,32 @@
     }
   }
 }
+
+.ConfirmationBannerModal {
+  text-align: center;
+
+  &__header {
+    font-size: $font-size--xl;
+    margin: 0;
+  }
+
+  &__message {
+    padding: $spacing--md 0 $spacing--xl;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+}
+
+// Override global styles button
+button.ConfirmationBannerModal__button {
+  width: $button-width;
+  font-weight: $font-weight--500;
+  background-color: $primary--live;
+
+  &--cancel {
+    background-color: opaque-white(0.2);
+  }
+}
diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
index 1679f66518..7bfde49eec 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
@@ -9,8 +9,17 @@ interface ConfirmationModalProps {
   show?: boolean;
   header?: string;
   message: string;
+  cancelBtnLabel?: string;
+  saveBtnLabel?: string;
   onConfirm: () => void;
   onCancel?: () => void;
+  containerClassName?: string;
+  headerClassName?: string;
+  messageClassName?: string;
+  buttonsContainerClassName?: string;
+  buttonClassName?: string;
+  cancelButtonClassName?: string;
+  isCentered?: boolean;
 }
 
 export const ConfirmationModal: FC<ConfirmationModalProps> = ({
@@ -19,6 +28,15 @@ export const ConfirmationModal: FC<ConfirmationModalProps> = ({
   message,
   onConfirm,
   onCancel,
+  cancelBtnLabel = "No",
+  saveBtnLabel = "Yes",
+  containerClassName = "confirmation-modal",
+  headerClassName = "confirm-header",
+  messageClassName = "confirm-message",
+  buttonsContainerClassName = "confirmation-buttons",
+  buttonClassName = "cancel-button",
+  cancelButtonClassName = "confirm-button",
+  isCentered = false,
 }) => {
   const [isVisible, setIsVisible] = useState(true);
 
@@ -41,17 +59,17 @@ export const ConfirmationModal: FC<ConfirmationModalProps> = ({
   const isShown = show !== undefined ? show : isVisible;
 
   return (
-    <Modal show={isShown} onHide={hide}>
+    <Modal show={isShown} onHide={hide} centered={isCentered}>
       <Modal.Body>
-        <div className="confirmation-modal">
-          {hasHeader && <h2 className="confirm-header">{header}</h2>}
-          <div className="confirm-message">{message}</div>
-          <div className="confirmation-buttons">
-            <Button className="cancel-button" onClick={cancel}>
-              No
+        <div className={containerClassName}>
+          {hasHeader && <h2 className={headerClassName}>{header}</h2>}
+          <div className={messageClassName}>{message}</div>
+          <div className={buttonsContainerClassName}>
+            <Button className={cancelButtonClassName} onClick={cancel}>
+              {cancelBtnLabel}
             </Button>
-            <Button className="confirm-button" onClick={confirm}>
-              Yes
+            <Button className={buttonClassName} onClick={confirm}>
+              {saveBtnLabel}
             </Button>
           </div>
         </div>
diff --git a/src/components/atoms/LinkButton/LinkButton.tsx b/src/components/atoms/LinkButton/LinkButton.tsx
index 99ee1825f0..6f71e545e5 100644
--- a/src/components/atoms/LinkButton/LinkButton.tsx
+++ b/src/components/atoms/LinkButton/LinkButton.tsx
@@ -10,7 +10,7 @@ export interface LinkButtonProps
     AnchorHTMLAttributes<HTMLAnchorElement>,
     HTMLAnchorElement
   > {
-  href?: string;
+  href: string;
 }
 
 export const LinkButton: React.FC<LinkButtonProps> = ({
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index faab8ea0d7..01ce0dd0cf 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -53,7 +53,6 @@ $action-button-padding: 6px;
   }
 
   &__container {
-    position: fixed;
     top: 66px;
     left: 0;
     right: 0;
@@ -65,11 +64,16 @@ $action-button-padding: 6px;
 
     &--centered {
       bottom: 0;
+      position: fixed;
       display: flex;
       align-items: center;
       background-color: opaque-black(0.6);
     }
 
+    &--admin {
+      position: initial;
+    }
+
     &--canceled {
       position: relative;
       top: 0;
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 83bbf3f06c..7bf317c7bf 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -16,17 +16,16 @@ import { LinkButton } from "components/atoms/LinkButton";
 import "./AnnouncementMessage.scss";
 
 export interface AnnouncementMessageProps {
-  banner?: Banner;
+  banner: Banner;
   announcementForUser?: boolean;
 }
 
 export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   banner,
-  announcementForUser = false,
+  announcementForUser: isAnnouncementForUser = false,
 }) => {
-
   const {
-    isShown: isShownAnnouncementMessage,
+    isShown: isAnnouncementMessageVisible,
     show: showAnnouncementMessage,
     hide: hideAnnouncementMessage,
   } = useShowHide();
@@ -44,12 +43,16 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   const isActiveButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
+  const isButtonShown = isActiveButton && banner.buttonUrl;
+  const isAnnouncementCloseable =
+    isAnnouncementForUser && banner?.hasCloseButton;
+
   const containerClasses = classNames("AnnouncementMessage__container", {
     "AnnouncementMessage__container--centered": banner?.isFullScreen,
-    "AnnouncementContainer--canceled": !announcementForUser,
+    "AnnouncementMessage__container--admin": !isAnnouncementForUser,
   });
 
-  if (!announcementForUser && !banner?.content)
+  if (!isAnnouncementForUser && !banner?.content)
     return (
       <div className="AnnouncementMessage">
         <span className="AnnouncementMessage__default-text">
@@ -58,7 +61,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       </div>
     );
 
-  if (!isShownAnnouncementMessage) return null;
+  if (!isAnnouncementMessageVisible) return null;
 
   return (
     <div className={containerClasses} onClick={hideAnnouncementMessage}>
@@ -66,25 +69,28 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
         {banner?.title && (
           <h2 className="AnnouncementMessage__title">{banner.title}</h2>
         )}
+
         <div className="AnnouncementMessage__content">
-          <RenderMarkdown text={banner.content} />
+          <RenderMarkdown text={banner?.content} />
         </div>
-        {isActiveButton && banner.buttonUrl && (
+
+        {isButtonShown && (
           <LinkButton
-            href={banner.buttonUrl}
+            href={banner.buttonUrl || ""}
             className="AnnouncementMessage__action-button"
           >
-            {banner.buttonDisplayText}
+            {banner?.buttonDisplayText}
           </LinkButton>
         )}
-        {announcementForUser && banner.hasCloseButton ? (
+
+        {isAnnouncementCloseable && (
           <span
             className="AnnouncementMessage__close-button"
             onClick={hideAnnouncementMessage}
           >
             <FontAwesomeIcon icon={faTimesCircle} />
           </span>
-        ) : null}
+        )}
       </div>
     </div>
   );
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index 4b478340b1..e42a9bcabd 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -38,9 +38,13 @@
     }
   }
 
-  &__checkbox-label {
+  &__checkbox__label {
     font-size: $font-size--lg;
   }
+  &__checkbox__label__disabled {
+    color: --white;
+    opacity: 20%;
+  }
 }
 
 // Override global styles button
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index a743466dd7..002be31770 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect,useState } from "react";
 import { useForm } from "react-hook-form";
+import classNames from "classnames";
 
 import { makeUpdateBanner } from "api/bannerAdmin";
 
@@ -10,16 +11,15 @@ import { useShowHide } from "hooks/useShowHide";
 
 import { Button } from "components/atoms/Button";
 import { Checkbox } from "components/atoms/Checkbox";
+import { ConfirmationModal } from "components/atoms/ConfirmationModal/ConfirmationModal";
 import { InputField } from "components/atoms/InputField";
 
-import { ConfirmationBannerModal } from "./ConfirmationBannerModal";
-
 import "./BannerAdmin.scss";
 
 interface BannerAdminProps {
   venueId?: string;
   venue: AnyVenue;
-  onClose: () => void;
+  onClose?: () => void;
 }
 
 // @debt This component is almost exactly the same as IframeAdmin, we should refactor them both to use the same generic base component
@@ -27,59 +27,60 @@ interface BannerAdminProps {
 export const BannerAdmin: React.FC<BannerAdminProps> = ({
   venueId,
   venue,
-  onClose,
+  onClose = () => {},
 }) => {
   const { register, handleSubmit, errors, reset, watch } = useForm<Banner>({
     mode: "onChange",
     reValidateMode: "onChange",
   });
-  const isActionButtonValue = watch("isActionButton");
-
-  const [bannerData, setBannerDate] = useState<Banner>();
+  const isUrlButtonActive = watch("isActionButton");
 
-  const {
-    isShown: isShowModal,
-    show: showModal,
-    hide: hideModal,
-  } = useShowHide();
   const [isDisabledUrlFields, setIsDisabledUrlFields] = useState(
     venue?.banner?.isActionButton
   );
 
   useEffect(() => {
-    setIsDisabledUrlFields(isActionButtonValue);
-  }, [isActionButtonValue]);
+    setIsDisabledUrlFields(isUrlButtonActive);
+  }, [isUrlButtonActive]);
+
+  const {
+    isShown: isShowBannerChangeModal,
+    show: showBannerChangeModal,
+    hide: hideBannerChangeModal,
+  } = useShowHide();
 
   const updateBannerInFirestore = useCallback(
     (banner?: Banner) => {
       if (!venueId) return;
-      makeUpdateBanner({venueId, banner});
+
+      makeUpdateBanner({ venueId, banner });
       onClose();
     },
     [venueId, onClose]
   );
 
-  const onSubmit = useCallback(
-    (data: Banner) => {
-      showModal();
-      setBannerDate(data);
-    },
-    [showModal]
-  );
+  const saveBanner = async (data: Banner) => {
+    await updateBannerInFirestore(data);
+  };
 
   const clearBanner = useCallback(() => {
-    updateBannerInFirestore(undefined);
+    showBannerChangeModal();
+
     reset();
-  }, [updateBannerInFirestore, reset]);
+  }, [showBannerChangeModal, reset]);
 
   const confirmChangeBannerData = useCallback(() => {
-    updateBannerInFirestore(bannerData);
-    hideModal();
-  }, [bannerData, updateBannerInFirestore, hideModal]);
+    updateBannerInFirestore(undefined);
+    hideBannerChangeModal();
+  }, [updateBannerInFirestore, hideBannerChangeModal]);
+
+  const forceFunnelLabelClasses = classNames("BannerAdmin__checkbox__label", {
+    BannerAdmin__checkbox__label__disabled: !isUrlButtonActive,
+  });
 
   return (
     <div className="BannerAdmin">
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(saveBanner)}>
         <InputField
           ref={register}
           name="title"
@@ -92,11 +93,11 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
 
         <div className="form-group">
           <textarea
+            ref={register({ required: true })}
             name="content"
             defaultValue={venue?.banner?.content}
             className="BannerAdmin__input-text"
             placeholder="Please type your announcement content"
-            ref={register({ required: true })}
           />
           {errors.content && errors.content.type === "required" && (
             <span className="input-error">Display content is required</span>
@@ -105,7 +106,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
 
         <Checkbox
           containerClassName="BannerAdmin__checkbox BannerAdmin__checkbox--action"
-          labelClassName="BannerAdmin__checkbox-label"
+          labelClassName="BannerAdmin__checkbox__label"
           name="isActionButton"
           label="Call to Action Button"
           toggler
@@ -136,21 +137,24 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
           />
         </div>
         <Checkbox
+          forwardedRef={register}
           containerClassName="BannerAdmin__checkbox"
+          labelClassName="BannerAdmin__checkbox__label"
           name="isFullScreen"
           label="Set fullscreen announcement"
           toggler
-          forwardedRef={register}
           defaultChecked={venue?.banner?.isFullScreen}
         />
 
         <Checkbox
+          forwardedRef={register}
           containerClassName="BannerAdmin__checkbox"
+          labelClassName={forceFunnelLabelClasses}
           name="hasCloseButton"
           label="Force funnel (users will have to click your button)"
           toggler
-          forwardedRef={register}
           defaultChecked={venue?.banner?.hasCloseButton}
+          disabled={!isDisabledUrlFields}
         />
 
         <div className="BannerAdmin__button-container">
@@ -166,10 +170,23 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         </div>
       </form>
 
-      <ConfirmationBannerModal
-        show={isShowModal}
+      <ConfirmationModal
+        show={isShowBannerChangeModal}
         onConfirm={confirmChangeBannerData}
-        onCancel={hideModal}
+        onCancel={hideBannerChangeModal}
+        header={"Erase your beautiful work?"}
+        message={"Are you sure?"}
+        saveBtnLabel="Clear & Save"
+        cancelBtnLabel="Cancel"
+        containerClassName={"ConfirmationBannerModal"}
+        headerClassName={"ConfirmationBannerModal__header"}
+        messageClassName={"ConfirmationBannerModal__message"}
+        buttonsContainerClassName={"ConfirmationBannerModal__buttons"}
+        buttonClassName={
+          "ConfirmationBannerModal__button ConfirmationBannerModal__button--cancel"
+        }
+        cancelButtonClassName={"ConfirmationBannerModal__button"}
+        isCentered
       />
     </div>
   );
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
deleted file mode 100644
index 518977232e..0000000000
--- a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import "scss/constants.scss";
-
-.ConfirmationBannerModal {
-  text-align: center;
-
-  &__header {
-    font-size: $font-size--xl;
-    margin: 0;
-  }
-
-  &__message {
-    padding: $spacing--md 0 $spacing--xl;
-  }
-
-  &__buttons {
-    display: flex;
-    justify-content: space-around;
-  }
-}
-
-// Override global styles button
-button.ConfirmationBannerModal__button {
-  width: $button-width;
-  font-weight: $font-weight--500;
-  background-color: $primary--live;
-
-  &--cancel {
-    background-color: opaque-white(0.2);
-  }
-}
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
deleted file mode 100644
index 0c76fe7f3f..0000000000
--- a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/ConfirmationBannerModal.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import { Modal } from "react-bootstrap";
-
-import { Button } from "components/atoms/Button";
-
-import "./ConfirmationBannerModal.scss";
-
-interface ConfirmationBannerModalProps {
-  show?: boolean;
-  onConfirm: () => void;
-  onCancel?: () => void;
-}
-
-export const ConfirmationBannerModal: React.FC<ConfirmationBannerModalProps> = ({
-  show,
-  onConfirm,
-  onCancel,
-}) => {
-  return (
-    <Modal show={show} onHide={onCancel} centered>
-      <Modal.Body>
-        <div className="ConfirmationBannerModal">
-          <h2 className="ConfirmationBannerModal__header">
-            Erase your beautiful work?
-          </h2>
-          <div className="ConfirmationBannerModal__message">Are you sure?</div>
-          <div className="ConfirmationBannerModal__buttons">
-            <Button
-              customClass="ConfirmationBannerModal__button ConfirmationBannerModal__button--cancel"
-              onClick={onCancel}
-            >
-              Cancel
-            </Button>
-            <Button
-              customClass="ConfirmationBannerModal__button"
-              onClick={onConfirm}
-            >
-              Clear & Save
-            </Button>
-          </div>
-        </div>
-      </Modal.Body>
-    </Modal>
-  );
-};
diff --git a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/index.ts b/src/components/organisms/BannerAdmin/ConfirmationBannerModal/index.ts
deleted file mode 100644
index d0d805eff0..0000000000
--- a/src/components/organisms/BannerAdmin/ConfirmationBannerModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ConfirmationBannerModal } from "./ConfirmationBannerModal";
diff --git a/src/pages/Admin/AdvancedSettings/AdvancedSettings.tsx b/src/pages/Admin/AdvancedSettings/AdvancedSettings.tsx
index 870eeefee1..0db9cacd4a 100644
--- a/src/pages/Admin/AdvancedSettings/AdvancedSettings.tsx
+++ b/src/pages/Admin/AdvancedSettings/AdvancedSettings.tsx
@@ -107,7 +107,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
       showGrid: venue.showGrid,
       showRadio: venue.showRadio,
       showRangers: venue.showRangers,
-      bannerMessage: venue.bannerMessage,
+      bannerMessage: venue.bannerMessage, // @deprecated + @debt probably need to change bannerMessage to banner
       attendeesTitle: venue.attendeesTitle,
       chatTitle: venue.chatTitle,
     },
@@ -123,6 +123,7 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
     updateVenue_v2(
       {
         name: venue.name,
+        // @deprecated + @debt probably need to change bannerMessage to banner
         ...data,
       },
       user
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
index 8037d6d30b..fe40baf6bc 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
@@ -4,7 +4,7 @@ import { Banner } from "types/banner";
 
 import { Button } from "components/atoms/Button";
 
-import { AnnouncementStatus } from "./AnnouoncementStatus";
+import { AnnouncementStatus } from "../AnnouncementStatus";
 
 import "./AnnouncementOptions.scss";
 
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.scss b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.scss
similarity index 100%
rename from src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.scss
rename to src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.scss
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
similarity index 89%
rename from src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
rename to src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
index f597477642..5d41abbc88 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
@@ -27,11 +27,11 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
 
   const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
 
-  const urlTextClassNames = classNames("AnnouncementStatus__url-text", {
+  const urlTextClasses = classNames("AnnouncementStatus__url-text", {
     "AnnouncementStatus__url-text--empty": !banner?.isActionButton,
   });
 
-  if (isDefined(!banner?.content)) return null;
+  if (!isDefined(banner?.content)) return null;
 
   return (
     <div className="AnnouncementStatus">
@@ -43,6 +43,7 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
           />
           FullScreen {fullscreenText}
         </span>
+
         <span className="AnnouncementStatus__checkbox">
           <FontAwesomeIcon
             icon={closeImg}
@@ -51,8 +52,9 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
           Force funnel {forceText}
         </span>
       </div>
+
       <div className="AnnouncementStatus__url">
-        URL: <span className={urlTextClassNames}>{urlText}</span>
+        URL: <span className={urlTextClasses}>{urlText}</span>
       </div>
     </div>
   );
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/index.ts b/src/pages/Admin/Venue/AnnouncementStatus/index.ts
similarity index 100%
rename from src/pages/Admin/Venue/AnnouncementOptions/AnnouoncementStatus/index.ts
rename to src/pages/Admin/Venue/AnnouncementStatus/index.ts
diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index d846697386..420462a6af 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -1,6 +1,6 @@
 @import "scss/constants";
 
-.AdminPage {
+.VenueAdminPage {
   position: relative;
   max-width: 638px;
   margin: 0 auto;
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index aea9bc199b..532911bef9 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -30,7 +30,7 @@ export const VenueAdminPage: React.FC = () => {
   const venueRequestStatus = useSelector(isCurrentVenueNGRequestedSelector);
   const venueRequestingStatus = useSelector(isCurrentVenueNGRequestingSelector);
   const {
-    isShown: isShowBannerAdmin,
+    isShown: isBannerAdminVisibile,
     show: showBannerAdmin,
     hide: hideBannerAdmin,
   } = useShowHide();
@@ -59,27 +59,29 @@ export const VenueAdminPage: React.FC = () => {
 
   return (
     <WithNavigationBar>
-      <div className="AdminPage">
-        <h4 className="AdminPage__title">
+      <div className="VenueAdminPage">
+        <h4 className="VenueAdminPage__title">
           Current Announcement in Space Title
         </h4>
-        {isShowBannerAdmin ? (
+
+        {isBannerAdminVisibile ? (
           <BannerAdmin
             venueId={venueId}
             venue={venue}
             onClose={hideBannerAdmin}
           />
-        ) : (
+        ) : venue?.banner ? (
           <>
-            <AnnouncementMessage banner={venue?.banner} />
+            <AnnouncementMessage banner={venue.banner} />
+
             <AnnouncementOptions
-              banner={venue?.banner}
+              banner={venue.banner}
               onEdit={showBannerAdmin}
             />
           </>
-        )}
+        ) : null}
       </div>
       <NewProfileModal venue={venue} />
     </WithNavigationBar>
-  );
+     );
 };
diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index 8159f2eea6..39d6812f8d 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -141,7 +141,10 @@ export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
       <RelatedVenuesProvider venueId={venue.id}>
         <ReactionsProvider venueId={venue.id}>
           <WithNavigationBar hasBackButton={hasBackButton}>
+
+            {venue?.banner && (
             <AnnouncementMessage banner={venue.banner} announcementForUser />
+            )}
 
             <Suspense fallback={<LoadingPage />}>{template}</Suspense>
 
diff --git a/src/types/banner.ts b/src/types/banner.ts
index eff6bd2b5f..9717ec56ad 100644
--- a/src/types/banner.ts
+++ b/src/types/banner.ts
@@ -1,6 +1,6 @@
 export interface Banner {
   title?: string;
-  content?: string;
+  content: string;
   isActionButton?: boolean;
   buttonUrl?: string;
   buttonDisplayText?: string;
diff --git a/src/types/venues.ts b/src/types/venues.ts
index 2f52b78c36..88e230e58b 100644
--- a/src/types/venues.ts
+++ b/src/types/venues.ts
@@ -151,6 +151,7 @@ export interface BaseVenue {
   radioTitle?: string;
   dustStorm?: boolean;
   activity?: string;
+  bannerMessage?: string; // @deprecated + @debt was used as banner message previously to banner
   banner?: Banner;
   playaIcon?: PlayaIcon;
   playaIcon2?: PlayaIcon;

From 7f30e59aab5a14912554b546aa6ef32c0c8834af Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Fri, 2 Jul 2021 14:53:22 +0300
Subject: [PATCH 24/46] PR fixes + minor css changes

---
 .../ConfirmationModal/ConfirmationModal.scss  | 15 +++++++------
 .../AnnouncementMessage.scss                  |  8 +++++--
 .../AnnouncementMessage.tsx                   |  7 ++++++-
 .../organisms/BannerAdmin/BannerAdmin.scss    | 13 ++++++------
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 21 +++++++------------
 .../AnnouncementOptions.scss                  | 13 ++++++------
 src/pages/Admin/Venue/VenueAdminPage.scss     |  4 ++--
 src/scss/constants.scss                       |  5 ++++-
 src/types/venues.ts                           |  8 +++----
 9 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index bb24cf86bd..3c8544cb1a 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -39,15 +39,14 @@
     display: flex;
     justify-content: space-around;
   }
-}
 
-// Override global styles button
-button.ConfirmationBannerModal__button {
-  width: $button-width;
-  font-weight: $font-weight--500;
-  background-color: $primary--live;
+  & .ConfirmationBannerModal__button {
+    width: $announce-button-width;
+    font-weight: $font-weight--500;
+    background-color: $primary--live;
 
-  &--cancel {
-    background-color: opaque-white(0.2);
+    &--cancel {
+      background-color: opaque-white(0.2);
+    }
   }
 }
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 01ce0dd0cf..23763bf090 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -10,13 +10,17 @@ $action-button-padding: 6px;
   display: block;
   position: relative;
   background: $primary;
-  width: 638px;
+  width: $announcement-container-width;
   transition: left 0.1s linear;
 
   padding: $spacing 0;
   border-radius: $border-radius--xl;
   text-align: center;
 
+  &--fullscreen {
+    width: $announcement-container-width-fullscreen;
+  }
+
   &__default-text {
     opacity: 0.6;
   }
@@ -33,7 +37,7 @@ $action-button-padding: 6px;
   &__action-button {
     display: inline-block;
     background-color: $primary--darker;
-    min-width: $button-width;
+    min-width: $announce-button-width;
     min-height: $action-button-height;
     font-size: $font-size--md;
     font-weight: $font-weight--500;
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 7bf317c7bf..473714e045 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -52,6 +52,11 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
     "AnnouncementMessage__container--admin": !isAnnouncementForUser,
   });
 
+  const announcementMessageClasses = classNames("AnnouncementMessage", {
+    "AnnouncementMessage--fullscreen":
+      banner?.isFullScreen && isAnnouncementForUser,
+  });
+
   if (!isAnnouncementForUser && !banner?.content)
     return (
       <div className="AnnouncementMessage">
@@ -65,7 +70,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
 
   return (
     <div className={containerClasses} onClick={hideAnnouncementMessage}>
-      <div className="AnnouncementMessage" onClick={noop}>
+      <div className={announcementMessageClasses} onClick={noop}>
         {banner?.title && (
           <h2 className="AnnouncementMessage__title">{banner.title}</h2>
         )}
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index e42a9bcabd..d2c00b1bfd 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -22,7 +22,7 @@
   }
 
   &__button {
-    width: $button-width;
+    width: $announce-button-width;
   }
 
   &__action-container {
@@ -45,13 +45,12 @@
     color: --white;
     opacity: 20%;
   }
-}
 
-// Override global styles button
-button.BannerAdmin__button {
-  background-color: $primary--live;
+  & .BannerAdmin__button {
+    background-color: $primary--live;
 
-  &--close {
-    background-color: $red;
+    &--close {
+      background-color: $red;
+    }
   }
 }
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 002be31770..32bc600c50 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect,useState } from "react";
+import React, { useCallback } from "react";
 import { useForm } from "react-hook-form";
 import classNames from "classnames";
 
@@ -27,22 +27,17 @@ interface BannerAdminProps {
 export const BannerAdmin: React.FC<BannerAdminProps> = ({
   venueId,
   venue,
-  onClose = () => {},
+  onClose,
 }) => {
   const { register, handleSubmit, errors, reset, watch } = useForm<Banner>({
     mode: "onChange",
     reValidateMode: "onChange",
   });
-  const isUrlButtonActive = watch("isActionButton");
-
-  const [isDisabledUrlFields, setIsDisabledUrlFields] = useState(
+  const isUrlButtonActive = watch(
+    "isActionButton",
     venue?.banner?.isActionButton
   );
 
-  useEffect(() => {
-    setIsDisabledUrlFields(isUrlButtonActive);
-  }, [isUrlButtonActive]);
-
   const {
     isShown: isShowBannerChangeModal,
     show: showBannerChangeModal,
@@ -54,7 +49,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
       if (!venueId) return;
 
       makeUpdateBanner({ venueId, banner });
-      onClose();
+      onClose && onClose();
     },
     [venueId, onClose]
   );
@@ -122,7 +117,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
             defaultValue={venue?.banner?.buttonUrl}
             containerClassName="BannerAdmin__input-container"
             inputClassName="BannerAdmin__input-text"
-            disabled={!isDisabledUrlFields}
+            disabled={!isUrlButtonActive}
             autoComplete="off"
           />
           <InputField
@@ -132,7 +127,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
             defaultValue={venue?.banner?.buttonDisplayText}
             containerClassName="BannerAdmin__input-container"
             inputClassName="BannerAdmin__input-text"
-            disabled={!isDisabledUrlFields}
+            disabled={!isUrlButtonActive}
             autoComplete="off"
           />
         </div>
@@ -154,7 +149,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
           label="Force funnel (users will have to click your button)"
           toggler
           defaultChecked={venue?.banner?.hasCloseButton}
-          disabled={!isDisabledUrlFields}
+          disabled={!isUrlButtonActive}
         />
 
         <div className="BannerAdmin__button-container">
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
index 75fb9ab354..f2a98adc70 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
@@ -9,12 +9,11 @@
     font-size: $font-size--lg;
     margin-top: $spacing--xs;
   }
-}
 
-// Override global styles button
-button.AnnouncementOptions__edit-button {
-  height: $submit-button-diameter;
-  width: $button-width;
-  background-color: $white;
-  color: $primary--live;
+  & .AnnouncementOptions__edit-button {
+    height: $submit-button-diameter;
+    width: $announce-button-width;
+    background-color: $white;
+    color: $primary--live;
+  }
 }
diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index 420462a6af..6625fc3375 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -2,12 +2,12 @@
 
 .VenueAdminPage {
   position: relative;
-  max-width: 638px;
+  max-width: $announcement-container-width;
   margin: 0 auto;
 
   &__title {
     text-align: center;
-    margin-top: 41px;
+    margin-top: $spacing--xxxl;
     padding: $spacing--xs;
     font-size: $font-size--sm;
     background: $dark;
diff --git a/src/scss/constants.scss b/src/scss/constants.scss
index a281c75943..32059d76f9 100644
--- a/src/scss/constants.scss
+++ b/src/scss/constants.scss
@@ -71,6 +71,8 @@ $footer-height: 30px;
 $chat-input-height: 114px;
 $announcement-banner-height: 50px;
 $admin-spaces-sidebar-width: 20%;
+$announcement-container-width: 640px;
+$announcement-container-width-fullscreen: 430px;
 
 $avatarSize: max(4vh, 3vw);
 $avatarSizeMin: 25px;
@@ -97,9 +99,10 @@ $spacing--md: 12px;
 $spacing--lg: 16px;
 $spacing--xl: 24px;
 $spacing--xxl: 30px;
+$spacing--xxxl: 40px;
 
 $submit-button-diameter: 44px;
-$button-width: 136px;
+$announce-button-width: 136px;
 
 $font-size--xxs: 10px;
 $font-size--xs: 11px;
diff --git a/src/types/venues.ts b/src/types/venues.ts
index 88e230e58b..7bf4b7b6be 100644
--- a/src/types/venues.ts
+++ b/src/types/venues.ts
@@ -6,16 +6,16 @@ import { WithVenueId } from "utils/id";
 
 import { GameOptions } from "components/templates/AnimateMap/configs/GameConfig";
 
+import { Banner } from "./banner";
 import { EntranceStepConfig } from "./EntranceStep";
 import { Poster } from "./posters";
 import { Quotation } from "./Quotation";
 import { Room } from "./rooms";
-import { Table } from "./Table";
-import { UpcomingEvent } from "./UpcomingEvent";
-import { UsernameVisibility, UserStatus } from "./User";
+import { Table  } from "./Table";
+import { UpcomingEvent  } from "./UpcomingEvent";
+import { UsernameVisibility,UserStatus } from "./User";
 import { VenueAccessMode } from "./VenueAcccess";
 import { VideoAspectRatio } from "./VideoAspectRatio";
-import { Banner } from "./banner";
 
 // These represent all of our templates (they should remain alphabetically sorted, deprecated should be separate from the rest)
 // @debt unify this with VenueTemplate in functions/venue.js + share the same code between frontend/backend

From 0a25561c35c1b0d46bb17c372ad21bc647340a7e Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Fri, 2 Jul 2021 15:51:34 +0300
Subject: [PATCH 25/46] removed stopPropagation + noop from modal

---
 .../AnnouncementMessage.scss                  |  5 +++++
 .../AnnouncementMessage.tsx                   | 22 +++++++++++++------
 .../organisms/BannerAdmin/BannerAdmin.tsx     |  4 ++--
 .../AnnouncementStatus/AnnouncementStatus.tsx |  4 ++--
 src/types/banner.ts                           |  2 +-
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 23763bf090..df0e4dd97a 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -18,6 +18,10 @@ $action-button-padding: 6px;
   text-align: center;
 
   &--fullscreen {
+    top: 35%;
+    left: 35%;
+    position: fixed;
+    z-index: 123;
     width: $announcement-container-width-fullscreen;
   }
 
@@ -65,6 +69,7 @@ $action-button-padding: 6px;
     display: flex;
     justify-content: center;
     align-items: flex-start;
+    position: absolute;
 
     &--centered {
       bottom: 0;
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 473714e045..acf14102fd 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -36,16 +36,16 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
     }
   }, [banner, showAnnouncementMessage]);
 
-  const noop = (e: React.MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-  };
+  // const noop = (e: React.MouseEvent<HTMLElement>) => {
+  //   e.stopPropagation();
+  // };
 
   const isActiveButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
   const isButtonShown = isActiveButton && banner.buttonUrl;
   const isAnnouncementCloseable =
-    isAnnouncementForUser && banner?.hasCloseButton;
+    isAnnouncementForUser && !banner?.isForceFunnel;
 
   const containerClasses = classNames("AnnouncementMessage__container", {
     "AnnouncementMessage__container--centered": banner?.isFullScreen,
@@ -57,6 +57,12 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       banner?.isFullScreen && isAnnouncementForUser,
   });
 
+  const handleBannerModalClose = () => {
+    if (banner?.isForceFunnel) return;
+
+    hideAnnouncementMessage();
+  };
+
   if (!isAnnouncementForUser && !banner?.content)
     return (
       <div className="AnnouncementMessage">
@@ -69,8 +75,10 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   if (!isAnnouncementMessageVisible) return null;
 
   return (
-    <div className={containerClasses} onClick={hideAnnouncementMessage}>
-      <div className={announcementMessageClasses} onClick={noop}>
+    <>
+      <div className={containerClasses} onClick={handleBannerModalClose} />
+
+      <div className={announcementMessageClasses}>
         {banner?.title && (
           <h2 className="AnnouncementMessage__title">{banner.title}</h2>
         )}
@@ -97,6 +105,6 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
           </span>
         )}
       </div>
-    </div>
+    </>
   );
 };
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 32bc600c50..28d25e08a2 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -145,10 +145,10 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
           forwardedRef={register}
           containerClassName="BannerAdmin__checkbox"
           labelClassName={forceFunnelLabelClasses}
-          name="hasCloseButton"
+          name="isForceFunnel"
           label="Force funnel (users will have to click your button)"
           toggler
-          defaultChecked={venue?.banner?.hasCloseButton}
+          defaultChecked={venue?.banner?.isForceFunnel}
           disabled={!isUrlButtonActive}
         />
 
diff --git a/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
index 5d41abbc88..589c47c783 100644
--- a/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
@@ -20,10 +20,10 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
   banner,
 }) => {
   const fullscreenImg = banner?.isFullScreen ? faCheck : faTimes;
-  const closeImg = banner?.hasCloseButton ? faCheck : faTimes;
+  const closeImg = banner?.isForceFunnel ? faCheck : faTimes;
 
   const fullscreenText = banner?.isFullScreen ? ENABLED__TEXT : DISABLED__TEXT;
-  const forceText = banner?.hasCloseButton ? ENABLED__TEXT : DISABLED__TEXT;
+  const forceText = banner?.isForceFunnel ? ENABLED__TEXT : DISABLED__TEXT;
 
   const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
 
diff --git a/src/types/banner.ts b/src/types/banner.ts
index 9717ec56ad..523f46375f 100644
--- a/src/types/banner.ts
+++ b/src/types/banner.ts
@@ -5,5 +5,5 @@ export interface Banner {
   buttonUrl?: string;
   buttonDisplayText?: string;
   isFullScreen?: boolean;
-  hasCloseButton?: boolean;
+  isForceFunnel?: boolean;
 }

From 16b3be46d28032d4380e0e5499ffcdfa28612e7d Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Thu, 8 Jul 2021 10:21:38 +0300
Subject: [PATCH 26/46] user announcement style fixes

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.scss | 7 ++++++-
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx  | 5 +----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index df0e4dd97a..054772abd5 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -12,7 +12,6 @@ $action-button-padding: 6px;
   background: $primary;
   width: $announcement-container-width;
   transition: left 0.1s linear;
-
   padding: $spacing 0;
   border-radius: $border-radius--xl;
   text-align: center;
@@ -25,6 +24,12 @@ $action-button-padding: 6px;
     width: $announcement-container-width-fullscreen;
   }
 
+  &--user {
+    left: 25%;
+    position: absolute;
+    z-index: 2;
+  }
+
   &__default-text {
     opacity: 0.6;
   }
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index acf14102fd..2f927245f7 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -36,10 +36,6 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
     }
   }, [banner, showAnnouncementMessage]);
 
-  // const noop = (e: React.MouseEvent<HTMLElement>) => {
-  //   e.stopPropagation();
-  // };
-
   const isActiveButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
@@ -55,6 +51,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   const announcementMessageClasses = classNames("AnnouncementMessage", {
     "AnnouncementMessage--fullscreen":
       banner?.isFullScreen && isAnnouncementForUser,
+    "AnnouncementMessage--user": isAnnouncementForUser,
   });
 
   const handleBannerModalClose = () => {

From 8445fd3c508653ebefe8eae1bda745a4211c51f7 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Fri, 9 Jul 2021 09:09:19 +0300
Subject: [PATCH 27/46] formatting prettier

---
 src/pages/VenuePage/TemplateWrapper.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index 39d6812f8d..5b81a45a3f 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -141,9 +141,8 @@ export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
       <RelatedVenuesProvider venueId={venue.id}>
         <ReactionsProvider venueId={venue.id}>
           <WithNavigationBar hasBackButton={hasBackButton}>
-
             {venue?.banner && (
-            <AnnouncementMessage banner={venue.banner} announcementForUser />
+              <AnnouncementMessage banner={venue.banner} announcementForUser />
             )}
 
             <Suspense fallback={<LoadingPage />}>{template}</Suspense>

From 07e357d4d1a9bd23c85021febfe0910c7ccae1ec Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Sun, 11 Jul 2021 16:44:23 +0300
Subject: [PATCH 28/46] PR fixes

---
 .../ConfirmationModal/ConfirmationModal.scss  | 12 ++++---
 .../AnnouncementMessage.scss                  | 16 ++++-----
 .../organisms/AppRouter/AppRouter.tsx         |  2 +-
 .../organisms/BannerAdmin/BannerAdmin.scss    |  2 +-
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 36 ++++++++++---------
 .../AnnouncementOptions.scss                  |  2 +-
 .../AnnouncementStatus/AnnouncementStatus.tsx |  2 +-
 src/pages/Admin/Venue/VenueAdminPage.tsx      | 14 ++++----
 src/scss/constants.scss                       |  4 +++
 9 files changed, 51 insertions(+), 39 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index 3c8544cb1a..d0de6a1c1b 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -23,7 +23,7 @@
   }
 }
 
-.ConfirmationBannerModal {
+.ConfirmationModal {
   text-align: center;
 
   &__header {
@@ -40,13 +40,17 @@
     justify-content: space-around;
   }
 
-  & .ConfirmationBannerModal__button {
+  & .ConfirmationModal__button {
     width: $announce-button-width;
     font-weight: $font-weight--500;
     background-color: $primary--live;
+  }
+
+  & .ConfirmationModal__button--cancel {
+    background-color: rgba(255, 255, 255, 0.2);
 
-    &--cancel {
-      background-color: opaque-white(0.2);
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
     }
   }
 }
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 054772abd5..4c2346c910 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -16,20 +16,20 @@ $action-button-padding: 6px;
   border-radius: $border-radius--xl;
   text-align: center;
 
+  &--user {
+    left: 25%;
+    position: absolute;
+    z-index: z(z-layer-announcement-banner);
+  }
+
   &--fullscreen {
     top: 35%;
     left: 35%;
     position: fixed;
-    z-index: 123;
+    z-index: z(z-layer-announcement-banner);
     width: $announcement-container-width-fullscreen;
   }
 
-  &--user {
-    left: 25%;
-    position: absolute;
-    z-index: 2;
-  }
-
   &__default-text {
     opacity: 0.6;
   }
@@ -66,7 +66,7 @@ $action-button-padding: 6px;
   }
 
   &__container {
-    top: 66px;
+    top: $navbar-height;
     left: 0;
     right: 0;
     width: 100%;
diff --git a/src/components/organisms/AppRouter/AppRouter.tsx b/src/components/organisms/AppRouter/AppRouter.tsx
index 21155b9afc..2ef2be8fb8 100644
--- a/src/components/organisms/AppRouter/AppRouter.tsx
+++ b/src/components/organisms/AppRouter/AppRouter.tsx
@@ -95,7 +95,7 @@ export const AppRouter: React.FC = () => {
           </Route>
           <Route path="/e/:step/:venueId" component={VenueEntrancePage} />
           <Route path="/in/:venueId/admin">
-            <Provided withRelatedVenues>
+            <Provided withRelatedVenues withWorldUsers>
               <VenueAdminPage />
             </Provided>
           </Route>
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index d2c00b1bfd..89e8b589ec 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -7,7 +7,7 @@
     font-size: $font-size--md;
 
     &--large {
-      height: 55px;
+      height: $announcement-banner-admin-height;
     }
   }
 
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 28d25e08a2..4b873d1aae 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback } from "react";
 import { useForm } from "react-hook-form";
+import { useAsyncFn } from "react-use";
 import classNames from "classnames";
 
 import { makeUpdateBanner } from "api/bannerAdmin";
@@ -44,20 +45,16 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
     hide: hideBannerChangeModal,
   } = useShowHide();
 
-  const updateBannerInFirestore = useCallback(
-    (banner?: Banner) => {
+  const [{ loading: isUpdatingBanner }, saveBanner] = useAsyncFn(
+    async (banner?: Banner) => {
       if (!venueId) return;
 
-      makeUpdateBanner({ venueId, banner });
+      await makeUpdateBanner({ venueId, banner });
       onClose && onClose();
     },
     [venueId, onClose]
   );
 
-  const saveBanner = async (data: Banner) => {
-    await updateBannerInFirestore(data);
-  };
-
   const clearBanner = useCallback(() => {
     showBannerChangeModal();
 
@@ -65,9 +62,9 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   }, [showBannerChangeModal, reset]);
 
   const confirmChangeBannerData = useCallback(() => {
-    updateBannerInFirestore(undefined);
+    saveBanner(undefined);
     hideBannerChangeModal();
-  }, [updateBannerInFirestore, hideBannerChangeModal]);
+  }, [saveBanner, hideBannerChangeModal]);
 
   const forceFunnelLabelClasses = classNames("BannerAdmin__checkbox__label", {
     BannerAdmin__checkbox__label__disabled: !isUrlButtonActive,
@@ -156,10 +153,15 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
           <Button
             customClass="BannerAdmin__button BannerAdmin__button--close"
             onClick={clearBanner}
+            disabled={isUpdatingBanner}
           >
             Clear
           </Button>
-          <Button customClass="BannerAdmin__button" type="submit">
+          <Button
+            customClass="BannerAdmin__button"
+            type="submit"
+            disabled={isUpdatingBanner}
+          >
             Save
           </Button>
         </div>
@@ -173,14 +175,14 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         message={"Are you sure?"}
         saveBtnLabel="Clear & Save"
         cancelBtnLabel="Cancel"
-        containerClassName={"ConfirmationBannerModal"}
-        headerClassName={"ConfirmationBannerModal__header"}
-        messageClassName={"ConfirmationBannerModal__message"}
-        buttonsContainerClassName={"ConfirmationBannerModal__buttons"}
-        buttonClassName={
-          "ConfirmationBannerModal__button ConfirmationBannerModal__button--cancel"
+        containerClassName={"ConfirmationModal"}
+        headerClassName={"ConfirmationModal__header"}
+        messageClassName={"ConfirmationModal__message"}
+        buttonsContainerClassName={"ConfirmationModal__buttons"}
+        buttonClassName={"ConfirmationModal__button"}
+        cancelButtonClassName={
+          "ConfirmationModal__button  ConfirmationModal__button--cancel"
         }
-        cancelButtonClassName={"ConfirmationBannerModal__button"}
         isCentered
       />
     </div>
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
index f2a98adc70..6bcb285b46 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
@@ -10,7 +10,7 @@
     margin-top: $spacing--xs;
   }
 
-  & .AnnouncementOptions__edit-button {
+  &.AnnouncementOptions__edit-button {
     height: $submit-button-diameter;
     width: $announce-button-width;
     background-color: $white;
diff --git a/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
index 589c47c783..b7a01dee2a 100644
--- a/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
@@ -41,7 +41,7 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
             icon={fullscreenImg}
             className="AnnouncementStatus__img"
           />
-          FullScreen {fullscreenText}
+          Fullscreen {fullscreenText}
         </span>
 
         <span className="AnnouncementStatus__checkbox">
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index 532911bef9..69084f474e 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -5,7 +5,7 @@ import {
   isCurrentVenueNGRequestingSelector,
 } from "utils/selectors";
 
-import { useConnectCurrentVenueNG } from "hooks/useConnectCurrentVenueNG";
+import { useConnectCurrentVenueNG  } from "hooks/useConnectCurrentVenueNG";
 import { useIsUserVenueOwner } from "hooks/useIsUserVenueOwner";
 import { useSelector } from "hooks/useSelector";
 import { useShowHide } from "hooks/useShowHide";
@@ -16,8 +16,8 @@ import { BannerAdmin } from "components/organisms/BannerAdmin";
 import { NewProfileModal } from "components/organisms/NewProfileModal";
 import { WithNavigationBar } from "components/organisms/WithNavigationBar";
 
-import { AnnouncementMessage } from "components/molecules/AnnouncementMessage";
-import { LoadingPage } from "components/molecules/LoadingPage";
+import { AnnouncementMessage  } from "components/molecules/AnnouncementMessage";
+import { LoadingPage  } from "components/molecules/LoadingPage";
 
 import { AnnouncementOptions } from "./AnnouncementOptions";
 
@@ -64,13 +64,15 @@ export const VenueAdminPage: React.FC = () => {
           Current Announcement in Space Title
         </h4>
 
-        {isBannerAdminVisibile ? (
+        {isBannerAdminVisibile && (
           <BannerAdmin
             venueId={venueId}
             venue={venue}
             onClose={hideBannerAdmin}
           />
-        ) : venue?.banner ? (
+        )}
+
+        {!isBannerAdminVisibile && venue?.banner && (
           <>
             <AnnouncementMessage banner={venue.banner} />
 
@@ -79,7 +81,7 @@ export const VenueAdminPage: React.FC = () => {
               onEdit={showBannerAdmin}
             />
           </>
-        ) : null}
+        )}
       </div>
       <NewProfileModal venue={venue} />
     </WithNavigationBar>
diff --git a/src/scss/constants.scss b/src/scss/constants.scss
index 32059d76f9..5c672fd77f 100644
--- a/src/scss/constants.scss
+++ b/src/scss/constants.scss
@@ -73,6 +73,7 @@ $announcement-banner-height: 50px;
 $admin-spaces-sidebar-width: 20%;
 $announcement-container-width: 640px;
 $announcement-container-width-fullscreen: 430px;
+$announcement-banner-admin-height: 55px;
 
 $avatarSize: max(4vh, 3vw);
 $avatarSizeMin: 25px;
@@ -148,6 +149,7 @@ $z-layer-navbar: 30;
 $z-layer-live-schedule: 20;
 $z-layer-live-schedule-download: 25;
 $z-layer-sidebar: 15;
+$z-layer-announcement-banner: 15;
 
 // @debt hack-fix to hide dropdown under navbar (reason: navbar stacking context)
 //       a better solution discussed here https://github.com/sparkletown/sparkle/pull/1350#discussion_r622895298
@@ -203,6 +205,8 @@ $z-layers: (
   account-profile-picture-preview: 1,
   duststorm-container: 100,
   duststorm-modal-content: 220,
+  // Announcement banner
+  z-layer-announcement-banner: $z-layer-announcement-banner,
   // Unsorted
   announcement: $z-layer-sidebar,
   footer: $z-layer-sidebar,

From 985b6161f663f3e46cac2d93b7f4af4966cb9ee3 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Mon, 12 Jul 2021 08:39:33 +0300
Subject: [PATCH 29/46] fix cancel btn color style

---
 src/components/atoms/ConfirmationModal/ConfirmationModal.scss | 3 ++-
 src/components/organisms/BannerAdmin/BannerAdmin.tsx          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index d0de6a1c1b..a5951d0ae3 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -46,8 +46,9 @@
     background-color: $primary--live;
   }
 
-  & .ConfirmationModal__button--cancel {
+  & button.btn.ConfirmationModal__button--cancel {
     background-color: rgba(255, 255, 255, 0.2);
+    border: none;
 
     &:hover {
       background-color: rgba(255, 255, 255, 0.2);
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 4b873d1aae..abca85122e 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -181,7 +181,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         buttonsContainerClassName={"ConfirmationModal__buttons"}
         buttonClassName={"ConfirmationModal__button"}
         cancelButtonClassName={
-          "ConfirmationModal__button  ConfirmationModal__button--cancel"
+          "ConfirmationModal__button ConfirmationModal__button--cancel"
         }
         isCentered
       />

From e21bde4ae44c5f5c1936244740bd507e8820ac3e Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Mon, 12 Jul 2021 18:40:41 +0300
Subject: [PATCH 30/46] pr comment fixes

---
 src/components/atoms/ConfirmationModal/ConfirmationModal.scss | 4 ++--
 .../molecules/AnnouncementMessage/AnnouncementMessage.scss    | 4 ++--
 src/components/organisms/BannerAdmin/BannerAdmin.tsx          | 3 ++-
 src/scss/constants.scss                                       | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index a5951d0ae3..63117fa76d 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -47,11 +47,11 @@
   }
 
   & button.btn.ConfirmationModal__button--cancel {
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: opaque-white(0.2);
     border: none;
 
     &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
+      background-color: opaque-white(0.2);
     }
   }
 }
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 4c2346c910..bc9f87ef5c 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -19,14 +19,14 @@ $action-button-padding: 6px;
   &--user {
     left: 25%;
     position: absolute;
-    z-index: z(z-layer-announcement-banner);
+    z-index: z(announcement-banner);
   }
 
   &--fullscreen {
     top: 35%;
     left: 35%;
     position: fixed;
-    z-index: z(z-layer-announcement-banner);
+    z-index: z(announcement-banner);
     width: $announcement-container-width-fullscreen;
   }
 
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index abca85122e..067f7c3ff5 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import { useForm } from "react-hook-form";
 import { useAsyncFn } from "react-use";
 import classNames from "classnames";
+import { useAsyncFn } from "react-use";
 
 import { makeUpdateBanner } from "api/bannerAdmin";
 
@@ -62,7 +63,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   }, [showBannerChangeModal, reset]);
 
   const confirmChangeBannerData = useCallback(() => {
-    saveBanner(undefined);
+    saveBanner();
     hideBannerChangeModal();
   }, [saveBanner, hideBannerChangeModal]);
 
diff --git a/src/scss/constants.scss b/src/scss/constants.scss
index 5c672fd77f..9708024004 100644
--- a/src/scss/constants.scss
+++ b/src/scss/constants.scss
@@ -206,7 +206,7 @@ $z-layers: (
   duststorm-container: 100,
   duststorm-modal-content: 220,
   // Announcement banner
-  z-layer-announcement-banner: $z-layer-announcement-banner,
+  announcement-banner: $z-layer-announcement-banner,
   // Unsorted
   announcement: $z-layer-sidebar,
   footer: $z-layer-sidebar,

From 3f689b82dafcfa1c1f085af5b4f166f1c7261525 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Thu, 15 Jul 2021 19:30:49 +0300
Subject: [PATCH 31/46] pr fixes

---
 .../ConfirmationModal/ConfirmationModal.scss  | 47 ++++---------------
 .../ConfirmationModal/ConfirmationModal.tsx   | 12 ++---
 .../AnnouncementMessage.tsx                   |  7 ++-
 .../organisms/BannerAdmin/BannerAdmin.scss    | 33 +++++++++++++
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 10 ++--
 src/pages/Admin/Venue/VenueAdminPage.tsx      |  6 +--
 6 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index 63117fa76d..9b9b418e49 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -1,19 +1,23 @@
 @import "scss/constants.scss";
 
-.confirmation-modal {
-  .confirm-message {
+.ConfirmationModal {
+  &__header {
+    //
+  }
+
+  &__message {
     padding: 10px 0 30px 0;
   }
 
-  .confirmation-buttons {
+  &__buttons {
     display: flex;
     justify-content: space-around;
 
-    .confirm-button {
+    &-confirm {
       width: 50%;
     }
 
-    .cancel-button {
+    &-cancel {
       background-image: none;
       background-color: $black;
       border: solid $white 1px;
@@ -22,36 +26,3 @@
     }
   }
 }
-
-.ConfirmationModal {
-  text-align: center;
-
-  &__header {
-    font-size: $font-size--xl;
-    margin: 0;
-  }
-
-  &__message {
-    padding: $spacing--md 0 $spacing--xl;
-  }
-
-  &__buttons {
-    display: flex;
-    justify-content: space-around;
-  }
-
-  & .ConfirmationModal__button {
-    width: $announce-button-width;
-    font-weight: $font-weight--500;
-    background-color: $primary--live;
-  }
-
-  & button.btn.ConfirmationModal__button--cancel {
-    background-color: opaque-white(0.2);
-    border: none;
-
-    &:hover {
-      background-color: opaque-white(0.2);
-    }
-  }
-}
diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
index 7bfde49eec..323072d246 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
@@ -30,12 +30,12 @@ export const ConfirmationModal: FC<ConfirmationModalProps> = ({
   onCancel,
   cancelBtnLabel = "No",
   saveBtnLabel = "Yes",
-  containerClassName = "confirmation-modal",
-  headerClassName = "confirm-header",
-  messageClassName = "confirm-message",
-  buttonsContainerClassName = "confirmation-buttons",
-  buttonClassName = "cancel-button",
-  cancelButtonClassName = "confirm-button",
+  containerClassName = "ConfirmationModal",
+  headerClassName = "ConfirmationModal__header",
+  messageClassName = "ConfirmationModal__message",
+  buttonsContainerClassName = "ConfirmationModal__buttons",
+  buttonClassName = "ConfirmationModal__button-confirm",
+  cancelButtonClassName = "ConfirmationModal__button-cancel",
   isCentered = false,
 }) => {
   const [isVisible, setIsVisible] = useState(true);
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 2f927245f7..993135b2bb 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -16,7 +16,7 @@ import { LinkButton } from "components/atoms/LinkButton";
 import "./AnnouncementMessage.scss";
 
 export interface AnnouncementMessageProps {
-  banner: Banner;
+  banner: Banner | undefined;
   announcementForUser?: boolean;
 }
 
@@ -39,7 +39,6 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   const isActiveButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
-  const isButtonShown = isActiveButton && banner.buttonUrl;
   const isAnnouncementCloseable =
     isAnnouncementForUser && !banner?.isForceFunnel;
 
@@ -84,9 +83,9 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
           <RenderMarkdown text={banner?.content} />
         </div>
 
-        {isButtonShown && (
+        {isActiveButton && banner?.buttonUrl && (
           <LinkButton
-            href={banner.buttonUrl || ""}
+            href={banner.buttonUrl}
             className="AnnouncementMessage__action-button"
           >
             {banner?.buttonDisplayText}
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index 89e8b589ec..c2df21804d 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -54,3 +54,36 @@
     }
   }
 }
+
+.BannerAdminModal {
+  text-align: center;
+
+  &__header {
+    font-size: $font-size--xl;
+    margin: 0;
+  }
+
+  &__message {
+    padding: $spacing--md 0 $spacing--xl;
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  &__button {
+    width: $announce-button-width;
+    font-weight: $font-weight--500;
+    background-color: $primary--live;
+
+    &--cancel.btn.btn-primary {
+      background-color: opaque-white(0.2);
+      border: none;
+
+      &:hover {
+        background-color: opaque-white(0.2);
+      }
+    }
+  }
+}
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 067f7c3ff5..9b09087cd8 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -177,12 +177,12 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         saveBtnLabel="Clear & Save"
         cancelBtnLabel="Cancel"
         containerClassName={"ConfirmationModal"}
-        headerClassName={"ConfirmationModal__header"}
-        messageClassName={"ConfirmationModal__message"}
-        buttonsContainerClassName={"ConfirmationModal__buttons"}
-        buttonClassName={"ConfirmationModal__button"}
+        headerClassName={"BannerAdminModal__header"}
+        messageClassName={"BannerAdminModal__message"}
+        buttonsContainerClassName={"BannerAdminModal__buttons"}
+        buttonClassName={"BannerAdminModal__button"}
         cancelButtonClassName={
-          "ConfirmationModal__button ConfirmationModal__button--cancel"
+          "BannerAdminModal__button BannerAdminModal__button--cancel"
         }
         isCentered
       />
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index 69084f474e..5097fcba83 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -61,7 +61,7 @@ export const VenueAdminPage: React.FC = () => {
     <WithNavigationBar>
       <div className="VenueAdminPage">
         <h4 className="VenueAdminPage__title">
-          Current Announcement in Space Title
+          Current Announcement in {venue?.name}
         </h4>
 
         {isBannerAdminVisibile && (
@@ -72,9 +72,9 @@ export const VenueAdminPage: React.FC = () => {
           />
         )}
 
-        {!isBannerAdminVisibile && venue?.banner && (
+        {!isBannerAdminVisibile && (
           <>
-            <AnnouncementMessage banner={venue.banner} />
+            <AnnouncementMessage banner={venue?.banner} />
 
             <AnnouncementOptions
               banner={venue.banner}

From 0e0352d53c1bda030b26ff876fb4e74c93d36e6f Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Fri, 16 Jul 2021 11:34:40 +0300
Subject: [PATCH 32/46] minor logic url/force funnel fix

---
 .../organisms/BannerAdmin/BannerAdmin.tsx        | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 9b09087cd8..516f004a2d 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -17,6 +17,7 @@ import { ConfirmationModal } from "components/atoms/ConfirmationModal/Confirmati
 import { InputField } from "components/atoms/InputField";
 
 import "./BannerAdmin.scss";
+import { useEffect } from "react";
 
 interface BannerAdminProps {
   venueId?: string;
@@ -31,7 +32,14 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   venue,
   onClose,
 }) => {
-  const { register, handleSubmit, errors, reset, watch } = useForm<Banner>({
+  const {
+    register,
+    handleSubmit,
+    errors,
+    reset,
+    watch,
+    setValue,
+  } = useForm<Banner>({
     mode: "onChange",
     reValidateMode: "onChange",
   });
@@ -67,6 +75,12 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
     hideBannerChangeModal();
   }, [saveBanner, hideBannerChangeModal]);
 
+  useEffect(() => {
+    if (!isUrlButtonActive) {
+      setValue("isForceFunnel", false);
+    }
+  }, [isUrlButtonActive, setValue]);
+
   const forceFunnelLabelClasses = classNames("BannerAdmin__checkbox__label", {
     BannerAdmin__checkbox__label__disabled: !isUrlButtonActive,
   });

From 07f250ca215e0e4ed7b7ac2ec3d89110569a17d5 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Tue, 27 Jul 2021 07:40:25 +0300
Subject: [PATCH 33/46] minor change

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 993135b2bb..5bac834e67 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -65,6 +65,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
         <span className="AnnouncementMessage__default-text">
           No announcement
         </span>
+        g
       </div>
     );
 

From 52739ac4db3d97191873e47148da87f45629e886 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Tue, 27 Jul 2021 07:40:46 +0300
Subject: [PATCH 34/46] minor fix

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 5bac834e67..993135b2bb 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -65,7 +65,6 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
         <span className="AnnouncementMessage__default-text">
           No announcement
         </span>
-        g
       </div>
     );
 

From de685849868bb42b983f7784507ee1e881d3c924 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Wed, 18 Aug 2021 16:17:58 +0300
Subject: [PATCH 35/46] pr fixes

---
 src/api/bannerAdmin.ts                                    | 4 ++--
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx | 2 +-
 .../components/RunTabToolbar/RunTabToolbar.tsx            | 2 +-
 src/components/organisms/BannerAdmin/BannerAdmin.tsx      | 6 ++----
 .../Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx | 4 ++--
 src/pages/Admin/Venue/VenueAdminPage.tsx                  | 8 ++++----
 src/types/venues.ts                                       | 6 +++---
 7 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/api/bannerAdmin.ts b/src/api/bannerAdmin.ts
index c02e6f881f..21fda8575e 100644
--- a/src/api/bannerAdmin.ts
+++ b/src/api/bannerAdmin.ts
@@ -6,13 +6,13 @@ import { Banner } from "types/banner";
 export interface MakeUpdateBannerProps {
   venueId: string;
   banner?: Banner;
-  onError?: (errorMsg: string) => void
+  onError?: (errorMsg: string) => void;
 }
 
 export const makeUpdateBanner = async ({
   venueId,
   banner,
-  onError = () => {}
+  onError = () => {},
 }: MakeUpdateBannerProps): Promise<void> => {
   const params = {
     venueId,
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 993135b2bb..d8692afcad 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -3,7 +3,7 @@ import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 
-import { Banner  } from "types/banner";
+import { Banner } from "types/banner";
 
 import { isDefined } from "utils/types";
 
diff --git a/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx b/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
index 892b1f6259..559d5c3f7a 100644
--- a/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
+++ b/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
@@ -29,7 +29,7 @@ export const RunTabToolbar: React.FC<RunTabToolbarProps> = ({ venueId }) => {
   ] = useAsyncFn(async () => {
     if (!venueId) return;
     const bannerMessage = getValues().message;
-    await makeUpdateBanner({venueId, banner: {title: bannerMessage}});
+    await makeUpdateBanner({ venueId, banner: { content: bannerMessage } });
   }, [getValues, venueId]);
 
   return (
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 516f004a2d..b9b81e666a 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -1,13 +1,12 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useAsyncFn } from "react-use";
 import classNames from "classnames";
-import { useAsyncFn } from "react-use";
 
 import { makeUpdateBanner } from "api/bannerAdmin";
 
 import { Banner } from "types/banner";
-import { AnyVenue  } from "types/venues";
+import { AnyVenue } from "types/venues";
 
 import { useShowHide } from "hooks/useShowHide";
 
@@ -17,7 +16,6 @@ import { ConfirmationModal } from "components/atoms/ConfirmationModal/Confirmati
 import { InputField } from "components/atoms/InputField";
 
 import "./BannerAdmin.scss";
-import { useEffect } from "react";
 
 interface BannerAdminProps {
   venueId?: string;
diff --git a/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
index b7a01dee2a..bed56d0069 100644
--- a/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import classNames from "classnames";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classNames from "classnames";
 
 import { Banner } from "types/banner";
 
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index 5097fcba83..41965c8b6e 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -5,7 +5,7 @@ import {
   isCurrentVenueNGRequestingSelector,
 } from "utils/selectors";
 
-import { useConnectCurrentVenueNG  } from "hooks/useConnectCurrentVenueNG";
+import { useConnectCurrentVenueNG } from "hooks/useConnectCurrentVenueNG";
 import { useIsUserVenueOwner } from "hooks/useIsUserVenueOwner";
 import { useSelector } from "hooks/useSelector";
 import { useShowHide } from "hooks/useShowHide";
@@ -16,8 +16,8 @@ import { BannerAdmin } from "components/organisms/BannerAdmin";
 import { NewProfileModal } from "components/organisms/NewProfileModal";
 import { WithNavigationBar } from "components/organisms/WithNavigationBar";
 
-import { AnnouncementMessage  } from "components/molecules/AnnouncementMessage";
-import { LoadingPage  } from "components/molecules/LoadingPage";
+import { AnnouncementMessage } from "components/molecules/AnnouncementMessage";
+import { LoadingPage } from "components/molecules/LoadingPage";
 
 import { AnnouncementOptions } from "./AnnouncementOptions";
 
@@ -85,5 +85,5 @@ export const VenueAdminPage: React.FC = () => {
       </div>
       <NewProfileModal venue={venue} />
     </WithNavigationBar>
-     );
+  );
 };
diff --git a/src/types/venues.ts b/src/types/venues.ts
index 7bf4b7b6be..ae75130662 100644
--- a/src/types/venues.ts
+++ b/src/types/venues.ts
@@ -11,9 +11,9 @@ import { EntranceStepConfig } from "./EntranceStep";
 import { Poster } from "./posters";
 import { Quotation } from "./Quotation";
 import { Room } from "./rooms";
-import { Table  } from "./Table";
-import { UpcomingEvent  } from "./UpcomingEvent";
-import { UsernameVisibility,UserStatus } from "./User";
+import { Table } from "./Table";
+import { UpcomingEvent } from "./UpcomingEvent";
+import { UsernameVisibility, UserStatus } from "./User";
 import { VenueAccessMode } from "./VenueAcccess";
 import { VideoAspectRatio } from "./VideoAspectRatio";
 

From d8b731f400a5276162e427ff3ebcf2c1fd8182e9 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Wed, 15 Sep 2021 17:26:16 +0300
Subject: [PATCH 36/46] fixed banner positioning + force funnel banner close on
 btn click

---
 .../molecules/AnnouncementMessage/AnnouncementMessage.scss    | 4 +++-
 .../molecules/AnnouncementMessage/AnnouncementMessage.tsx     | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index bc9f87ef5c..9d7943f863 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -17,7 +17,9 @@ $action-button-padding: 6px;
   text-align: center;
 
   &--user {
-    left: 25%;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
     position: absolute;
     z-index: z(announcement-banner);
   }
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index d8692afcad..f5895d0006 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -87,6 +87,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
           <LinkButton
             href={banner.buttonUrl}
             className="AnnouncementMessage__action-button"
+            onClick={hideAnnouncementMessage}
           >
             {banner?.buttonDisplayText}
           </LinkButton>

From 7eb5c075c719626f5d53d0b44bdd94067ef2d8b1 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Fri, 17 Sep 2021 16:01:43 +0300
Subject: [PATCH 37/46] update announce ui + minor refactor

---
 src/assets/icons/close-icon.svg               |  3 ++
 .../AnnouncementMessage.scss                  | 36 +++++++++++++++----
 .../AnnouncementMessage.tsx                   |  6 +---
 src/scss/constants.scss                       |  5 +--
 4 files changed, 36 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/icons/close-icon.svg

diff --git a/src/assets/icons/close-icon.svg b/src/assets/icons/close-icon.svg
new file mode 100644
index 0000000000..f198c1adab
--- /dev/null
+++ b/src/assets/icons/close-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6569 4.34313C16.2426 4.92892 16.2426 5.87867 15.6569 6.46445L12.1213 9.99999L15.6569 13.5355C16.2426 14.1213 16.2426 15.0711 15.6569 15.6568C15.0711 16.2426 14.1213 16.2426 13.5355 15.6568L10 12.1213L6.46447 15.6568C5.87868 16.2426 4.92893 16.2426 4.34315 15.6568C3.75736 15.0711 3.75736 14.1213 4.34315 13.5355L7.87868 9.99999L4.34315 6.46445C3.75736 5.87867 3.75736 4.92892 4.34315 4.34313C4.92893 3.75735 5.87868 3.75735 6.46447 4.34313L10 7.87867L13.5355 4.34313C14.1213 3.75735 15.0711 3.75735 15.6569 4.34313Z" fill="white"/>
+</svg>
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 9d7943f863..0006b83c22 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -5,15 +5,19 @@ $close-icon-width: 20px;
 $message-margin: $spacing + $close-icon-width + 5px;
 $action-button-height: 30px;
 $action-button-padding: 6px;
+$announce-box-shadow: 0px 2px 20px 5px;
 
 .AnnouncementMessage {
   display: block;
   position: relative;
-  background: $primary;
+  background: $announcement-background;
   width: $announcement-container-width;
+  min-height: $announcement-container-height;
+  height: auto;
   transition: left 0.1s linear;
   padding: $spacing 0;
-  border-radius: $border-radius--xl;
+  border-bottom-left-radius: $border-radius--xl;
+  border-bottom-right-radius: $border-radius--xl;
   text-align: center;
 
   &--user {
@@ -25,11 +29,18 @@ $action-button-padding: 6px;
   }
 
   &--fullscreen {
-    top: 35%;
-    left: 35%;
     position: fixed;
     z-index: z(announcement-banner);
-    width: $announcement-container-width-fullscreen;
+    border-radius: $border-radius--xl;
+    top: 50%;
+    left: 30%;
+    transform: translate(-50%, -50%);
+    border: 1px solid opaque-white(0.4);
+    box-sizing: border-box;
+    box-shadow: $announce-box-shadow opaque-white(0.35);
+    backdrop-filter: blur(50px);
+
+    border-radius: 16px;
   }
 
   &__default-text {
@@ -38,16 +49,24 @@ $action-button-padding: 6px;
 
   &__title {
     font-size: $font-size--xl;
+    margin-bottom: 0px;
+    margin-top: $spacing--xl;
   }
 
   &__content {
     font-size: $font-size--md;
-    margin: 0 $message-margin;
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+
+    p {
+      margin-bottom: 0px;
+    }
   }
 
   &__action-button {
     display: inline-block;
-    background-color: $primary--darker;
+    background-color: $primary--live;
     min-width: $announce-button-width;
     min-height: $action-button-height;
     font-size: $font-size--md;
@@ -60,6 +79,9 @@ $action-button-padding: 6px;
     position: absolute;
     top: $spacing;
     right: $spacing;
+    background: url("/assets/icons/close-icon.svg");
+    height: 20px;
+    width: 20px;
     &:focus,
     &:hover {
       color: var(--primary-color);
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index f5895d0006..e98172cba8 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -1,6 +1,4 @@
 import React, { useEffect } from "react";
-import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 
 import { Banner } from "types/banner";
@@ -97,9 +95,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
           <span
             className="AnnouncementMessage__close-button"
             onClick={hideAnnouncementMessage}
-          >
-            <FontAwesomeIcon icon={faTimesCircle} />
-          </span>
+          />
         )}
       </div>
     </>
diff --git a/src/scss/constants.scss b/src/scss/constants.scss
index 1efb6aba29..b5970b1553 100644
--- a/src/scss/constants.scss
+++ b/src/scss/constants.scss
@@ -24,6 +24,7 @@ $input--invalid-focus: #ff7384;
 $input--invalid-box-shadow-focus: 0 0 0 2px rgba($input--invalid-focus, 1);
 
 $modal-background--confirm: #232225;
+$announcement-background: rgba(39, 35, 34, 0.9);
 
 // @debt replace all greyish colors with $secondary alternatives
 $dark-grey: #1a1d23;
@@ -74,8 +75,8 @@ $reserved-page-height: $navbar-height + $footer-height;
 $chat-input-height: 114px;
 $announcement-banner-height: 50px;
 $admin-spaces-sidebar-width: 20%;
-$announcement-container-width: 640px;
-$announcement-container-width-fullscreen: 430px;
+$announcement-container-width: 470px;
+$announcement-container-height: 140px;
 $announcement-banner-admin-height: 55px;
 
 $avatarSize: max(4vh, 3vw);

From 297dca66e7000508680c040e3204a07db126ab3a Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Fri, 17 Sep 2021 16:38:26 +0300
Subject: [PATCH 38/46] minor ui fix

---
 .../AnnouncementMessage/AnnouncementMessage.scss      | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 0006b83c22..7be8298f81 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -16,8 +16,11 @@ $announce-box-shadow: 0px 2px 20px 5px;
   height: auto;
   transition: left 0.1s linear;
   padding: $spacing 0;
-  border-bottom-left-radius: $border-radius--xl;
-  border-bottom-right-radius: $border-radius--xl;
+  border-radius: 0px 0px $border-radius--xl $border-radius--xl;
+  border: 1px solid opaque-white(0.4);
+  box-sizing: border-box;
+  box-shadow: $announce-box-shadow opaque-white(0.35);
+  backdrop-filter: blur(50px);
   text-align: center;
 
   &--user {
@@ -35,10 +38,6 @@ $announce-box-shadow: 0px 2px 20px 5px;
     top: 50%;
     left: 30%;
     transform: translate(-50%, -50%);
-    border: 1px solid opaque-white(0.4);
-    box-sizing: border-box;
-    box-shadow: $announce-box-shadow opaque-white(0.35);
-    backdrop-filter: blur(50px);
 
     border-radius: 16px;
   }

From ed799a193fd863b9f2dfdbd2e56f0697f46600fc Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Mon, 20 Sep 2021 12:53:46 +0300
Subject: [PATCH 39/46] banner announcement fixes pr

---
 src/api/bannerAdmin.ts                        |  8 ++---
 .../AnnouncementMessage.scss                  | 28 +++++++++------
 .../AnnouncementMessage.tsx                   | 35 ++++++++++---------
 .../RunTabToolbar/RunTabToolbar.tsx           |  8 ++---
 .../organisms/AppRouter/AppRouter.tsx         |  2 +-
 .../organisms/BannerAdmin/BannerAdmin.tsx     |  6 ++--
 .../AnnouncementOptions.scss                  |  2 +-
 .../AnnouncementOptions.tsx                   |  8 ++---
 .../AnnouncementStatus/AnnouncementStatus.tsx | 25 ++++++-------
 .../Venue/AnnouncementStatus/statusHelpers.ts |  8 +++++
 src/pages/Admin/Venue/VenueAdminPage.scss     |  1 -
 src/pages/Admin/Venue/VenueAdminPage.tsx      | 11 +++---
 src/pages/VenuePage/TemplateWrapper.tsx       |  2 +-
 src/scss/constants.scss                       |  1 -
 14 files changed, 79 insertions(+), 66 deletions(-)
 create mode 100644 src/pages/Admin/Venue/AnnouncementStatus/statusHelpers.ts

diff --git a/src/api/bannerAdmin.ts b/src/api/bannerAdmin.ts
index 21fda8575e..28ba80a055 100644
--- a/src/api/bannerAdmin.ts
+++ b/src/api/bannerAdmin.ts
@@ -3,17 +3,17 @@ import firebase from "firebase/app";
 
 import { Banner } from "types/banner";
 
-export interface MakeUpdateBannerProps {
+export interface UpdateBannerProps {
   venueId: string;
   banner?: Banner;
   onError?: (errorMsg: string) => void;
 }
 
-export const makeUpdateBanner = async ({
+export const updateBanner = async ({
   venueId,
   banner,
   onError = () => {},
-}: MakeUpdateBannerProps): Promise<void> => {
+}: UpdateBannerProps): Promise<void> => {
   const params = {
     venueId,
     banner: banner ?? firebase.firestore.FieldValue.delete(),
@@ -25,7 +25,7 @@ export const makeUpdateBanner = async ({
     .catch((e) => {
       Bugsnag.notify(e, (event) => {
         event.addMetadata("context", {
-          location: "api/bannerAdmin::makeUpdateBanner",
+          location: "api/bannerAdmin::updateBanner",
           venueId,
           banner,
         });
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 7be8298f81..e9bae46f36 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -12,33 +12,37 @@ $announce-box-shadow: 0px 2px 20px 5px;
   position: relative;
   background: $announcement-background;
   width: $announcement-container-width;
-  min-height: $announcement-container-height;
   height: auto;
   transition: left 0.1s linear;
   padding: $spacing 0;
-  border-radius: 0px 0px $border-radius--xl $border-radius--xl;
-  border: 1px solid opaque-white(0.4);
-  box-sizing: border-box;
-  box-shadow: $announce-box-shadow opaque-white(0.35);
   backdrop-filter: blur(50px);
   text-align: center;
 
+  &--admin {
+    border-radius: $border-radius--xl;
+    background: $primary;
+  }
+
   &--user {
     left: 0;
     right: 0;
     margin: 0 auto;
     position: absolute;
+    min-height: $announcement-container-height;
     z-index: z(announcement-banner);
+    border-radius: 0px 0px $border-radius--xl $border-radius--xl;
+    border: 1px solid opaque-white(0.4);
+    border-top: none;
+    box-sizing: border-box;
+    box-shadow: $announce-box-shadow opaque-white(0.35);
   }
 
   &--fullscreen {
     position: fixed;
+    border: 1px solid opaque-white(0.4);
     z-index: z(announcement-banner);
     border-radius: $border-radius--xl;
-    top: 50%;
-    left: 30%;
-    transform: translate(-50%, -50%);
-
+    top: 40%;
     border-radius: 16px;
   }
 
@@ -71,6 +75,10 @@ $announce-box-shadow: 0px 2px 20px 5px;
     font-size: $font-size--md;
     font-weight: $font-weight--500;
     padding: $action-button-padding $spacing--lg;
+
+    &-admin {
+      background-color: $primary--darker;
+    }
   }
 
   &__close-button {
@@ -93,7 +101,7 @@ $announce-box-shadow: 0px 2px 20px 5px;
     left: 0;
     right: 0;
     width: 100%;
-    z-index: z(announcement);
+    z-index: z(announcement-banner);
     display: flex;
     justify-content: center;
     align-items: flex-start;
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index e98172cba8..a6df95e064 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -14,13 +14,13 @@ import { LinkButton } from "components/atoms/LinkButton";
 import "./AnnouncementMessage.scss";
 
 export interface AnnouncementMessageProps {
-  banner: Banner | undefined;
-  announcementForUser?: boolean;
+  banner?: Banner;
+  isAnnouncementUserView?: boolean;
 }
 
 export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   banner,
-  announcementForUser: isAnnouncementForUser = false,
+  isAnnouncementUserView = false,
 }) => {
   const {
     isShown: isAnnouncementMessageVisible,
@@ -34,21 +34,26 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
     }
   }, [banner, showAnnouncementMessage]);
 
-  const isActiveButton =
+  const isWithButton =
     banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
 
   const isAnnouncementCloseable =
-    isAnnouncementForUser && !banner?.isForceFunnel;
+    isAnnouncementUserView && !banner?.isForceFunnel;
 
   const containerClasses = classNames("AnnouncementMessage__container", {
     "AnnouncementMessage__container--centered": banner?.isFullScreen,
-    "AnnouncementMessage__container--admin": !isAnnouncementForUser,
+    "AnnouncementMessage__container--admin": !isAnnouncementUserView,
   });
 
   const announcementMessageClasses = classNames("AnnouncementMessage", {
     "AnnouncementMessage--fullscreen":
-      banner?.isFullScreen && isAnnouncementForUser,
-    "AnnouncementMessage--user": isAnnouncementForUser,
+      banner?.isFullScreen && isAnnouncementUserView,
+    "AnnouncementMessage--user": isAnnouncementUserView,
+    "AnnouncementMessage--admin": !isAnnouncementUserView,
+  });
+
+  const actionButtonClasses = classNames("AnnouncementMessage__action-button", {
+    "AnnouncementMessage__action-button-admin": !isAnnouncementUserView,
   });
 
   const handleBannerModalClose = () => {
@@ -57,9 +62,9 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
     hideAnnouncementMessage();
   };
 
-  if (!isAnnouncementForUser && !banner?.content)
+  if (!isAnnouncementUserView && !banner?.content)
     return (
-      <div className="AnnouncementMessage">
+      <div className={announcementMessageClasses}>
         <span className="AnnouncementMessage__default-text">
           No announcement
         </span>
@@ -73,18 +78,16 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       <div className={containerClasses} onClick={handleBannerModalClose} />
 
       <div className={announcementMessageClasses}>
-        {banner?.title && (
-          <h2 className="AnnouncementMessage__title">{banner.title}</h2>
-        )}
+        <h2 className="AnnouncementMessage__title">{banner?.title}</h2>
 
         <div className="AnnouncementMessage__content">
           <RenderMarkdown text={banner?.content} />
         </div>
 
-        {isActiveButton && banner?.buttonUrl && (
+        {isWithButton && banner?.buttonUrl && (
           <LinkButton
-            href={banner.buttonUrl}
-            className="AnnouncementMessage__action-button"
+            href={banner?.buttonUrl}
+            className={actionButtonClasses}
             onClick={hideAnnouncementMessage}
           >
             {banner?.buttonDisplayText}
diff --git a/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx b/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
index e61f690bea..29d33d60dd 100644
--- a/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
+++ b/src/components/organisms/AdminVenueView/components/RunTabToolbar/RunTabToolbar.tsx
@@ -4,7 +4,7 @@ import { useHistory } from "react-router";
 import { useAsyncFn } from "react-use";
 import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
 
-import { makeUpdateBanner } from "api/bannerAdmin";
+import { updateBanner } from "api/bannerAdmin";
 
 import { venueInsideUrl } from "utils/url";
 
@@ -45,11 +45,11 @@ export const RunTabToolbar: React.FC<RunTabToolbarProps> = ({
 
   const [
     { loading: isUpdatingBanner, error },
-    updateBanner,
+    updateBannerAsync,
   ] = useAsyncFn(async () => {
     if (!venueId) return;
     const bannerMessage = getValues().message;
-    await makeUpdateBanner({ venueId, banner: { content: bannerMessage } });
+    await updateBanner({ venueId, banner: { content: bannerMessage } });
   }, [getValues, venueId]);
 
   return (
@@ -68,7 +68,7 @@ export const RunTabToolbar: React.FC<RunTabToolbarProps> = ({
           disabled={isUpdatingBanner}
           iconName={faPaperPlane}
           iconOnly={true}
-          onClick={updateBanner}
+          onClick={updateBannerAsync}
         />
         {error && <ErrorMessage name={error.message} message={error.message} />}
       </form>
diff --git a/src/components/organisms/AppRouter/AppRouter.tsx b/src/components/organisms/AppRouter/AppRouter.tsx
index 267bbef33d..e4b579f87f 100644
--- a/src/components/organisms/AppRouter/AppRouter.tsx
+++ b/src/components/organisms/AppRouter/AppRouter.tsx
@@ -103,7 +103,7 @@ export const AppRouter: React.FC = () => {
           </Route>
           <Route path="/e/:step/:venueId" component={VenueEntrancePage} />
           <Route path="/in/:venueId/admin">
-            <Provided withRelatedVenues withWorldUsers>
+            <Provided withWorldUsers withRelatedVenues>
               <VenueAdminPage />
             </Provided>
           </Route>
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index b9b81e666a..2acf1d842a 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { useAsyncFn } from "react-use";
 import classNames from "classnames";
 
-import { makeUpdateBanner } from "api/bannerAdmin";
+import { updateBanner } from "api/bannerAdmin";
 
 import { Banner } from "types/banner";
 import { AnyVenue } from "types/venues";
@@ -23,8 +23,6 @@ interface BannerAdminProps {
   onClose?: () => void;
 }
 
-// @debt This component is almost exactly the same as IframeAdmin, we should refactor them both to use the same generic base component
-//   BannerAdmin is the 'canonical example' to follow when we do this
 export const BannerAdmin: React.FC<BannerAdminProps> = ({
   venueId,
   venue,
@@ -56,7 +54,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
     async (banner?: Banner) => {
       if (!venueId) return;
 
-      await makeUpdateBanner({ venueId, banner });
+      await updateBanner({ venueId, banner });
       onClose && onClose();
     },
     [venueId, onClose]
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
index 6bcb285b46..7e0af96605 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
@@ -10,7 +10,7 @@
     margin-top: $spacing--xs;
   }
 
-  &.AnnouncementOptions__edit-button {
+  &__edit-button {
     height: $submit-button-diameter;
     width: $announce-button-width;
     background-color: $white;
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
index fe40baf6bc..7259e3acf6 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
@@ -2,9 +2,9 @@ import React from "react";
 
 import { Banner } from "types/banner";
 
-import { Button } from "components/atoms/Button";
+import { AnnouncementStatus } from "pages/Admin/Venue/AnnouncementStatus";
 
-import { AnnouncementStatus } from "../AnnouncementStatus";
+import { ButtonNG } from "components/atoms/ButtonNG";
 
 import "./AnnouncementOptions.scss";
 
@@ -23,9 +23,9 @@ export const AnnouncementOptions: React.FC<AnnouncementOptionsProps> = ({
         <AnnouncementStatus banner={banner} />
       </div>
       <div className="AnnouncementOptions__right-side">
-        <Button onClick={onEdit} customClass="AnnouncementOptions__edit-button">
+        <ButtonNG onClick={onEdit} className="AnnouncementOptions__edit-button">
           Edit
-        </Button>
+        </ButtonNG>
       </div>
     </div>
   );
diff --git a/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
index bed56d0069..e913473bc8 100644
--- a/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
+++ b/src/pages/Admin/Venue/AnnouncementStatus/AnnouncementStatus.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 
@@ -7,24 +6,17 @@ import { Banner } from "types/banner";
 
 import { isDefined } from "utils/types";
 
+import { getStatusIcon, getStatusText } from "./statusHelpers";
+
 import "./AnnouncementStatus.scss";
 
 export interface AnnouncementStatusProps {
   banner?: Banner;
 }
 
-const ENABLED__TEXT = "enabled";
-const DISABLED__TEXT = "disabled";
-
 export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
   banner,
 }) => {
-  const fullscreenImg = banner?.isFullScreen ? faCheck : faTimes;
-  const closeImg = banner?.isForceFunnel ? faCheck : faTimes;
-
-  const fullscreenText = banner?.isFullScreen ? ENABLED__TEXT : DISABLED__TEXT;
-  const forceText = banner?.isForceFunnel ? ENABLED__TEXT : DISABLED__TEXT;
-
   const urlText = banner?.isActionButton ? banner?.buttonUrl : "blank";
 
   const urlTextClasses = classNames("AnnouncementStatus__url-text", {
@@ -38,23 +30,26 @@ export const AnnouncementStatus: React.FC<AnnouncementStatusProps> = ({
       <div className="AnnouncementStatus__buttons">
         <span className="AnnouncementStatus__checkbox">
           <FontAwesomeIcon
-            icon={fullscreenImg}
+            icon={getStatusIcon(banner?.isFullScreen)}
             className="AnnouncementStatus__img"
           />
-          Fullscreen {fullscreenText}
+          Fullscreen {getStatusText(banner?.isFullScreen)}
         </span>
 
         <span className="AnnouncementStatus__checkbox">
           <FontAwesomeIcon
-            icon={closeImg}
+            icon={getStatusIcon(banner?.isForceFunnel)}
             className="AnnouncementStatus__img"
           />
-          Force funnel {forceText}
+          Force funnel {getStatusText(banner?.isForceFunnel)}
         </span>
       </div>
 
       <div className="AnnouncementStatus__url">
-        URL: <span className={urlTextClasses}>{urlText}</span>
+        URL:{" "}
+        <a className={urlTextClasses} href={urlText}>
+          {urlText}
+        </a>
       </div>
     </div>
   );
diff --git a/src/pages/Admin/Venue/AnnouncementStatus/statusHelpers.ts b/src/pages/Admin/Venue/AnnouncementStatus/statusHelpers.ts
new file mode 100644
index 0000000000..ed60958884
--- /dev/null
+++ b/src/pages/Admin/Venue/AnnouncementStatus/statusHelpers.ts
@@ -0,0 +1,8 @@
+import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+
+const ENABLED__TEXT = "enabled";
+const DISABLED__TEXT = "disabled";
+
+export const getStatusIcon = (status?: boolean) => (status ? faCheck : faTimes);
+export const getStatusText = (status?: boolean) =>
+  status ? ENABLED__TEXT : DISABLED__TEXT;
diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index 6625fc3375..dea0e57158 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -1,7 +1,6 @@
 @import "scss/constants";
 
 .VenueAdminPage {
-  position: relative;
   max-width: $announcement-container-width;
   margin: 0 auto;
 
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index 41965c8b6e..7df76cc3ba 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 
+import { IFRAME_TEMPLATES } from "settings";
+
 import {
   isCurrentVenueNGRequestedSelector,
   isCurrentVenueNGRequestingSelector,
@@ -13,10 +15,10 @@ import { useUser } from "hooks/useUser";
 import { useVenueId } from "hooks/useVenueId";
 
 import { BannerAdmin } from "components/organisms/BannerAdmin";
-import { NewProfileModal } from "components/organisms/NewProfileModal";
 import { WithNavigationBar } from "components/organisms/WithNavigationBar";
 
 import { AnnouncementMessage } from "components/molecules/AnnouncementMessage";
+import { IframeAdmin } from "components/molecules/IframeAdmin";
 import { LoadingPage } from "components/molecules/LoadingPage";
 
 import { AnnouncementOptions } from "./AnnouncementOptions";
@@ -34,7 +36,6 @@ export const VenueAdminPage: React.FC = () => {
     show: showBannerAdmin,
     hide: hideBannerAdmin,
   } = useShowHide();
-
   const isVenueOwner = useIsUserVenueOwner();
   const isVenueLoading = venueRequestingStatus || !venueRequestStatus;
   const isLoggedIn = profile && user;
@@ -57,6 +58,8 @@ export const VenueAdminPage: React.FC = () => {
     );
   }
 
+  const isIframeVenue = IFRAME_TEMPLATES.includes(venue.template);
+
   return (
     <WithNavigationBar>
       <div className="VenueAdminPage">
@@ -74,7 +77,7 @@ export const VenueAdminPage: React.FC = () => {
 
         {!isBannerAdminVisibile && (
           <>
-            <AnnouncementMessage banner={venue?.banner} />
+            <AnnouncementMessage banner={venue.banner} />
 
             <AnnouncementOptions
               banner={venue.banner}
@@ -83,7 +86,7 @@ export const VenueAdminPage: React.FC = () => {
           </>
         )}
       </div>
-      <NewProfileModal venue={venue} />
+      {isIframeVenue && <IframeAdmin venueId={venueId} venue={venue} />}
     </WithNavigationBar>
   );
 };
diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index fbbd220664..53321ea7bd 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -148,7 +148,7 @@ export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
       <RelatedVenuesProvider venueId={venue.id}>
         <ReactionsProvider venueId={venue.id}>
           <WithNavigationBar hasBackButton={hasBackButton}>
-            <AnnouncementMessage banner={venue.banner} announcementForUser />
+            <AnnouncementMessage banner={venue.banner} isAnnouncementUserView />
 
             <Suspense fallback={<LoadingPage />}>{template}</Suspense>
 
diff --git a/src/scss/constants.scss b/src/scss/constants.scss
index b5970b1553..c98f8780af 100644
--- a/src/scss/constants.scss
+++ b/src/scss/constants.scss
@@ -215,7 +215,6 @@ $z-layers: (
   // Announcement banner
   announcement-banner: $z-layer-announcement-banner,
   // Unsorted
-  announcement: $z-layer-sidebar,
   footer: $z-layer-sidebar,
   input-icon: 1,
   recipient-chat-breadcrumbs: 1,

From c8f54e75c6bb9c5b2590abb15a62d398b82a0acb Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Mon, 20 Sep 2021 13:00:58 +0300
Subject: [PATCH 40/46] removed comment

---
 src/components/molecules/IframeAdmin/IframeAdmin.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/molecules/IframeAdmin/IframeAdmin.tsx b/src/components/molecules/IframeAdmin/IframeAdmin.tsx
index 0c265818b9..773ad2668a 100644
--- a/src/components/molecules/IframeAdmin/IframeAdmin.tsx
+++ b/src/components/molecules/IframeAdmin/IframeAdmin.tsx
@@ -11,8 +11,6 @@ interface IframeAdminProps {
   venue: AnyVenue;
 }
 
-// @debt This component is almost exactly the same as BannerAdmin, we should refactor them both to use the same generic base component
-//   BannerAdmin is the 'canonical example' to follow when we do this
 export const IframeAdmin: React.FC<IframeAdminProps> = ({ venueId, venue }) => {
   const [iframeUrl, setIframeUrl] = useState("");
   const [error, setError] = useState<string | null>();

From a0b5de821f9fbe91409cc0c4a7c97cdc91562c6f Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Mon, 20 Sep 2021 14:37:36 +0300
Subject: [PATCH 41/46] removed banner message from venue creation

---
 functions/index.js                            |  2 +-
 functions/venue.js                            |  5 ----
 src/api/admin.ts                              |  1 -
 .../molecules/IframeAdmin/IframeAdmin.tsx     |  4 +--
 .../AdvancedSettings/AdvancedSettings.tsx     | 29 -------------------
 src/pages/Admin/Venue/DetailsForm.tsx         | 24 ---------------
 .../Admin/Venue/DetailsValidationSchema.ts    |  1 -
 src/pages/VenuePage/TemplateWrapper.tsx       |  2 +-
 src/types/venues.ts                           |  2 --
 9 files changed, 3 insertions(+), 67 deletions(-)

diff --git a/functions/index.js b/functions/index.js
index 18b71d43e9..9d8652fa67 100644
--- a/functions/index.js
+++ b/functions/index.js
@@ -34,7 +34,7 @@ const auth = require("./auth");
 const stats = require("./stats");
 const venue = require("./venue");
 const video = require("./video");
-const sheduled = require("./sheduled");
+const sheduled = require("./scheduled");
 const world = require("./world");
 
 exports.access = access;
diff --git a/functions/venue.js b/functions/venue.js
index 8d8d3a1bdb..7d1cb7b9f7 100644
--- a/functions/venue.js
+++ b/functions/venue.js
@@ -372,11 +372,6 @@ const createBaseUpdateVenueData = (data, doc) => {
     updated.mapBackgroundImageUrl = data.mapBackgroundImageUrl;
   }
 
-  // @debt do we need to be able to set this here anymore? I think we have a dedicated function for it?
-  if (data.bannerMessage) {
-    updated.bannerMessage = data.bannerMessage;
-  }
-
   if (data.parentId) {
     updated.parentId = data.parentId;
   }
diff --git a/src/api/admin.ts b/src/api/admin.ts
index eb896ce79e..b6422bc83d 100644
--- a/src/api/admin.ts
+++ b/src/api/admin.ts
@@ -92,7 +92,6 @@ export type VenueInput = AdvancedVenueInput &
     columns?: number;
     width?: number;
     height?: number;
-    bannerMessage?: string;
     parentId?: string;
     owners?: string[];
     chatTitle?: string;
diff --git a/src/components/molecules/IframeAdmin/IframeAdmin.tsx b/src/components/molecules/IframeAdmin/IframeAdmin.tsx
index 773ad2668a..fde8a16630 100644
--- a/src/components/molecules/IframeAdmin/IframeAdmin.tsx
+++ b/src/components/molecules/IframeAdmin/IframeAdmin.tsx
@@ -33,9 +33,7 @@ export const IframeAdmin: React.FC<IframeAdminProps> = ({ venueId, venue }) => {
         <div className="col">
           <form>
             <div className="form-group">
-              <label htmlFor="bannerMessage">
-                iframe URL for {venue?.name}:
-              </label>
+              <label>iframe URL for {venue?.name}:</label>
 
               <input
                 type="text"
diff --git a/src/pages/Admin/AdvancedSettings/AdvancedSettings.tsx b/src/pages/Admin/AdvancedSettings/AdvancedSettings.tsx
index c06b5d0010..3fd3bab4da 100644
--- a/src/pages/Admin/AdvancedSettings/AdvancedSettings.tsx
+++ b/src/pages/Admin/AdvancedSettings/AdvancedSettings.tsx
@@ -108,7 +108,6 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
       showNametags: venue.showNametags,
       showGrid: venue.showGrid,
       showRadio: venue.showRadio,
-      bannerMessage: venue.bannerMessage,
       attendeesTitle: venue.attendeesTitle,
       chatTitle: venue.chatTitle,
     },
@@ -124,7 +123,6 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
     updateVenue_v2(
       {
         name: venue.name,
-        // @deprecated + @debt probably need to change bannerMessage to banner
         ...data,
       },
       user
@@ -223,32 +221,6 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
     </S.ItemWrapper>
   );
 
-  const renderAnnouncementInput = () => (
-    <S.ItemWrapper>
-      <S.ItemHeader>
-        <S.TitleWrapper>
-          <S.ItemTitle>Venue announcement</S.ItemTitle>
-        </S.TitleWrapper>
-        <S.ItemSubtitle>
-          Show an announcement in the venue (or leave blank for none)
-        </S.ItemSubtitle>
-      </S.ItemHeader>
-
-      <S.ItemBody>
-        <Form.Control
-          name="bannerMessage"
-          placeholder="Enter your announcement"
-          ref={register}
-          custom
-          type="text"
-        />
-        {errors.bannerMessage && (
-          <span className="input-error">{errors.bannerMessage.message}</span>
-        )}
-      </S.ItemBody>
-    </S.ItemWrapper>
-  );
-
   const renderAttendeesTitleInput = () => (
     <S.ItemWrapper>
       <S.ItemHeader>
@@ -304,7 +276,6 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
       <h1>Advanced settings</h1>
 
       <Form onSubmit={handleSubmit(onSubmit)}>
-        {renderAnnouncementInput()}
         {renderAttendeesTitleInput()}
         {renderChatTitleInput()}
 
diff --git a/src/pages/Admin/Venue/DetailsForm.tsx b/src/pages/Admin/Venue/DetailsForm.tsx
index 6758820162..accffe0d88 100644
--- a/src/pages/Admin/Venue/DetailsForm.tsx
+++ b/src/pages/Admin/Venue/DetailsForm.tsx
@@ -14,7 +14,6 @@ import * as Yup from "yup";
 
 import {
   BACKGROUND_IMG_TEMPLATES,
-  BANNER_MESSAGE_TEMPLATES,
   DEFAULT_AUDIENCE_COLUMNS_NUMBER,
   DEFAULT_AUDIENCE_ROWS_NUMBER,
   DEFAULT_SHOW_SCHEDULE,
@@ -431,25 +430,6 @@ const DetailsFormLeft: React.FC<DetailsFormLeftProps> = ({
     </div>
   );
 
-  const renderAnnouncementInput = () => (
-    <>
-      <h4 className="italic input-header">
-        Show an announcement in the venue (or leave blank for none)
-      </h4>
-      <input
-        type="text"
-        disabled={disable}
-        name="bannerMessage"
-        ref={register}
-        className="wide-input-block input-centered align-left"
-        placeholder="Enter your announcement"
-      />
-      {errors.bannerMessage && (
-        <span className="input-error">{errors.bannerMessage.message}</span>
-      )}
-    </>
-  );
-
   const renderAttendeesTitleInput = () => (
     <div className="input-container">
       <h4 className="italic input-header">Title of your venues attendees</h4>
@@ -884,10 +864,6 @@ const DetailsFormLeft: React.FC<DetailsFormLeftProps> = ({
         {renderBannerPhotoInput()}
         {renderLogoInput()}
 
-        {templateID &&
-          BANNER_MESSAGE_TEMPLATES.includes(templateID) &&
-          renderAnnouncementInput()}
-
         {/* ATTENDEES (multiple) TITLE */}
         {renderAttendeesTitleInput()}
 
diff --git a/src/pages/Admin/Venue/DetailsValidationSchema.ts b/src/pages/Admin/Venue/DetailsValidationSchema.ts
index 905f6e62b6..a4d51f9669 100644
--- a/src/pages/Admin/Venue/DetailsValidationSchema.ts
+++ b/src/pages/Admin/Venue/DetailsValidationSchema.ts
@@ -155,7 +155,6 @@ export const validationSchema = Yup.object()
     owners: Yup.array<string>().notRequired(),
     placementRequests: Yup.string().notRequired(),
     adultContent: Yup.bool().required(),
-    bannerMessage: Yup.string().notRequired(),
     parentId: Yup.string().notRequired(),
     showReactions: Yup.bool().notRequired(),
     enableJukebox: Yup.bool().notRequired(),
diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index 53321ea7bd..eac6979323 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -145,7 +145,7 @@ export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
   // @debt remove backButton from Navbar
   return (
     <WorldUsersProvider venueId={venue.id}>
-      <RelatedVenuesProvider venueId={venue.id}>
+      <RelatedVenuesProvider venue={venue}>
         <ReactionsProvider venueId={venue.id}>
           <WithNavigationBar hasBackButton={hasBackButton}>
             <AnnouncementMessage banner={venue.banner} isAnnouncementUserView />
diff --git a/src/types/venues.ts b/src/types/venues.ts
index 7e815eba89..5a599f1e6c 100644
--- a/src/types/venues.ts
+++ b/src/types/venues.ts
@@ -106,7 +106,6 @@ export interface Venue_v2_Base {
 
 export interface Venue_v2_AdvancedConfig {
   attendeesTitle?: string;
-  bannerMessage?: string;
   chatTitle?: string;
   columns?: number;
   radioStations?: string | string[]; // single string on form, array in DB
@@ -151,7 +150,6 @@ export interface BaseVenue {
   radioTitle?: string;
   dustStorm?: boolean;
   activity?: string;
-  bannerMessage?: string; // @deprecated + @debt was used as banner message previously to banner
   banner?: Banner;
   playaIcon?: PlayaIcon;
   playaIcon2?: PlayaIcon;

From d93f7db5858f8c45cf7e30f23bc4d5c1dfafb59b Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Thu, 23 Sep 2021 15:12:49 +0300
Subject: [PATCH 42/46] mr fixes + announcement preview + ui redone

---
 .../ConfirmationModal/ConfirmationModal.scss  |  4 +-
 .../ConfirmationModal/ConfirmationModal.tsx   |  7 ++-
 .../AnnouncementMessage.scss                  | 48 +++++++++----------
 .../AnnouncementMessage.tsx                   | 38 +++++++--------
 .../organisms/BannerAdmin/BannerAdmin.scss    | 13 ++---
 .../organisms/BannerAdmin/BannerAdmin.tsx     | 36 +++++---------
 .../AnnouncementOptions.scss                  |  2 -
 .../AnnouncementOptions.tsx                   |  6 ++-
 src/pages/Admin/Venue/VenueAdminPage.scss     | 26 +++++++++-
 src/pages/Admin/Venue/VenueAdminPage.tsx      | 27 +++++++++--
 src/pages/VenuePage/TemplateWrapper.tsx       |  2 +-
 src/scss/constants.scss                       |  1 +
 src/types/banner.ts                           |  1 -
 13 files changed, 117 insertions(+), 94 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index ff8e10aec9..2ea0ff15ac 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -1,9 +1,7 @@
 @import "scss/constants.scss";
 
 .ConfirmationModal {
-  .modal-content {
-    background: $modal-background--confirm;
-  }
+  text-align: center;
 
   &__message {
     padding: 10px 0 30px 0;
diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
index b40bbf2f09..f91c54e251 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
@@ -29,7 +29,6 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   show,
   header,
   message,
-  centered = true,
   onConfirm,
   onCancel,
   cancelBtnLabel = "No",
@@ -79,7 +78,11 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
             <ButtonNG className={cancelButtonClasses} onClick={cancel}>
               {cancelBtnLabel}
             </ButtonNG>
-            <ButtonNG className={buttonClasses} onClick={confirm}>
+            <ButtonNG
+              className={buttonClasses}
+              variant="danger"
+              onClick={confirm}
+            >
               {saveBtnLabel}
             </ButtonNG>
           </div>
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index e9bae46f36..5536219b30 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -13,49 +13,44 @@ $announce-box-shadow: 0px 2px 20px 5px;
   background: $announcement-background;
   width: $announcement-container-width;
   height: auto;
+  min-height: 70px;
   transition: left 0.1s linear;
   padding: $spacing 0;
   backdrop-filter: blur(50px);
   text-align: center;
-
-  &--admin {
-    border-radius: $border-radius--xl;
-    background: $primary;
-  }
-
-  &--user {
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    position: absolute;
+  position: absolute;
+  border-radius: 0px 0px $border-radius--xl $border-radius--xl;
+  border: 1px solid opaque-white(0.4);
+  border-top: none;
+  box-sizing: border-box;
+  box-shadow: $announce-box-shadow opaque-white(0.35);
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: z(announcement-banner);
+
+  &--withButton {
     min-height: $announcement-container-height;
-    z-index: z(announcement-banner);
-    border-radius: 0px 0px $border-radius--xl $border-radius--xl;
-    border: 1px solid opaque-white(0.4);
-    border-top: none;
-    box-sizing: border-box;
-    box-shadow: $announce-box-shadow opaque-white(0.35);
   }
 
-  &--fullscreen {
+  &__fullscreen {
     position: fixed;
     border: 1px solid opaque-white(0.4);
     z-index: z(announcement-banner);
     border-radius: $border-radius--xl;
     top: 40%;
     border-radius: 16px;
+
+    &--admin {
+      top: 35%;
+      position: absolute;
+    }
   }
 
   &__default-text {
     opacity: 0.6;
   }
 
-  &__title {
-    font-size: $font-size--xl;
-    margin-bottom: 0px;
-    margin-top: $spacing--xl;
-  }
-
   &__content {
     font-size: $font-size--md;
     width: 90%;
@@ -116,7 +111,10 @@ $announce-box-shadow: 0px 2px 20px 5px;
     }
 
     &--admin {
-      position: initial;
+      position: relative;
+      position: absolute;
+      height: 210px;
+      top: 130px;
     }
 
     &--canceled {
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index a6df95e064..8ee96946c6 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect } from "react";
 import classNames from "classnames";
 
-import { Banner } from "types/banner";
-
 import { isDefined } from "utils/types";
 
+import { useConnectCurrentVenueNG } from "hooks/useConnectCurrentVenueNG";
 import { useShowHide } from "hooks/useShowHide";
+import { useVenueId } from "hooks/useVenueId";
 
 import { RenderMarkdown } from "components/organisms/RenderMarkdown";
 
@@ -14,42 +14,42 @@ import { LinkButton } from "components/atoms/LinkButton";
 import "./AnnouncementMessage.scss";
 
 export interface AnnouncementMessageProps {
-  banner?: Banner;
   isAnnouncementUserView?: boolean;
 }
 
 export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
-  banner,
   isAnnouncementUserView = false,
 }) => {
   const {
-    isShown: isAnnouncementMessageVisible,
     show: showAnnouncementMessage,
     hide: hideAnnouncementMessage,
   } = useShowHide();
 
+  const venueId = useVenueId();
+  const { currentVenue: venue } = useConnectCurrentVenueNG(venueId);
+
+  const { banner } = venue ?? {};
+
   useEffect(() => {
     if (isDefined(banner?.content)) {
       showAnnouncementMessage();
     }
   }, [banner, showAnnouncementMessage]);
 
-  const isWithButton =
-    banner?.buttonDisplayText && banner?.buttonUrl && banner?.isActionButton;
+  const isWithButton = banner?.buttonDisplayText && banner?.isActionButton;
 
-  const isAnnouncementCloseable =
-    isAnnouncementUserView && !banner?.isForceFunnel;
+  const isAnnouncementCloseable = !banner?.isForceFunnel;
 
   const containerClasses = classNames("AnnouncementMessage__container", {
     "AnnouncementMessage__container--centered": banner?.isFullScreen,
     "AnnouncementMessage__container--admin": !isAnnouncementUserView,
+    "AnnouncementMessage__container--withButton": isWithButton,
   });
 
   const announcementMessageClasses = classNames("AnnouncementMessage", {
-    "AnnouncementMessage--fullscreen":
-      banner?.isFullScreen && isAnnouncementUserView,
-    "AnnouncementMessage--user": isAnnouncementUserView,
-    "AnnouncementMessage--admin": !isAnnouncementUserView,
+    AnnouncementMessage__fullscreen: banner?.isFullScreen,
+    "AnnouncementMessage__fullscreen--admin":
+      banner?.isFullScreen && !isAnnouncementUserView,
   });
 
   const actionButtonClasses = classNames("AnnouncementMessage__action-button", {
@@ -71,26 +71,24 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       </div>
     );
 
-  if (!isAnnouncementMessageVisible) return null;
+  if (!banner?.content) return null;
 
   return (
     <>
       <div className={containerClasses} onClick={handleBannerModalClose} />
 
       <div className={announcementMessageClasses}>
-        <h2 className="AnnouncementMessage__title">{banner?.title}</h2>
-
         <div className="AnnouncementMessage__content">
-          <RenderMarkdown text={banner?.content} />
+          <RenderMarkdown text={banner.content} />
         </div>
 
-        {isWithButton && banner?.buttonUrl && (
+        {isWithButton && banner.buttonUrl && (
           <LinkButton
-            href={banner?.buttonUrl}
+            href={banner.buttonUrl}
             className={actionButtonClasses}
             onClick={hideAnnouncementMessage}
           >
-            {banner?.buttonDisplayText}
+            {banner.buttonDisplayText}
           </LinkButton>
         )}
 
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index c2df21804d..4f70ba6982 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -1,6 +1,8 @@
 @import "scss/constants.scss";
 
 .BannerAdmin {
+  width: 100%;
+
   &__input-text {
     text-align: start;
     padding: $spacing--sm $spacing--lg;
@@ -41,18 +43,11 @@
   &__checkbox__label {
     font-size: $font-size--lg;
   }
+
   &__checkbox__label__disabled {
     color: --white;
     opacity: 20%;
   }
-
-  & .BannerAdmin__button {
-    background-color: $primary--live;
-
-    &--close {
-      background-color: $red;
-    }
-  }
 }
 
 .BannerAdminModal {
@@ -77,7 +72,7 @@
     font-weight: $font-weight--500;
     background-color: $primary--live;
 
-    &--cancel.btn.btn-primary {
+    &--cancel.BannerAdminModal__button {
       background-color: opaque-white(0.2);
       border: none;
 
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 2acf1d842a..61bc682efa 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -10,7 +10,7 @@ import { AnyVenue } from "types/venues";
 
 import { useShowHide } from "hooks/useShowHide";
 
-import { Button } from "components/atoms/Button";
+import { ButtonNG } from "components/atoms/ButtonNG";
 import { Checkbox } from "components/atoms/Checkbox";
 import { ConfirmationModal } from "components/atoms/ConfirmationModal/ConfirmationModal";
 import { InputField } from "components/atoms/InputField";
@@ -84,23 +84,13 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
   return (
     <div className="BannerAdmin">
       <form onSubmit={handleSubmit(saveBanner)}>
-        <InputField
-          ref={register}
-          name="title"
-          placeholder="Please type your announcement title. (optional)"
-          defaultValue={venue?.banner?.title}
-          containerClassName="BannerAdmin__input-container"
-          inputClassName="BannerAdmin__input-text"
-          autoComplete="off"
-        />
-
         <div className="form-group">
           <textarea
             ref={register({ required: true })}
             name="content"
             defaultValue={venue?.banner?.content}
             className="BannerAdmin__input-text"
-            placeholder="Please type your announcement content"
+            placeholder="Please type your announcement"
           />
           {errors.content && errors.content.type === "required" && (
             <span className="input-error">Display content is required</span>
@@ -161,20 +151,21 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         />
 
         <div className="BannerAdmin__button-container">
-          <Button
-            customClass="BannerAdmin__button BannerAdmin__button--close"
+          <ButtonNG
+            className="BannerAdmin__button BannerAdmin__button--close"
             onClick={clearBanner}
             disabled={isUpdatingBanner}
           >
-            Clear
-          </Button>
-          <Button
-            customClass="BannerAdmin__button"
+            Clear banner
+          </ButtonNG>
+          <ButtonNG
+            className="BannerAdmin__button"
             type="submit"
             disabled={isUpdatingBanner}
+            variant="primary"
           >
             Save
-          </Button>
+          </ButtonNG>
         </div>
       </form>
 
@@ -184,16 +175,11 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         onCancel={hideBannerChangeModal}
         header={"Erase your beautiful work?"}
         message={"Are you sure?"}
-        saveBtnLabel="Clear & Save"
+        saveBtnLabel="Yes, clear"
         cancelBtnLabel="Cancel"
-        containerClassName={"ConfirmationModal"}
         headerClassName={"BannerAdminModal__header"}
         messageClassName={"BannerAdminModal__message"}
         buttonsContainerClassName={"BannerAdminModal__buttons"}
-        buttonClassName={"BannerAdminModal__button"}
-        cancelButtonClassName={
-          "BannerAdminModal__button BannerAdminModal__button--cancel"
-        }
         isCentered
       />
     </div>
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
index 7e0af96605..db283788bc 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.scss
@@ -13,7 +13,5 @@
   &__edit-button {
     height: $submit-button-diameter;
     width: $announce-button-width;
-    background-color: $white;
-    color: $primary--live;
   }
 }
diff --git a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
index 7259e3acf6..120930830a 100644
--- a/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
+++ b/src/pages/Admin/Venue/AnnouncementOptions/AnnouncementOptions.tsx
@@ -23,7 +23,11 @@ export const AnnouncementOptions: React.FC<AnnouncementOptionsProps> = ({
         <AnnouncementStatus banner={banner} />
       </div>
       <div className="AnnouncementOptions__right-side">
-        <ButtonNG onClick={onEdit} className="AnnouncementOptions__edit-button">
+        <ButtonNG
+          onClick={onEdit}
+          className="AnnouncementOptions__edit-button"
+          variant="white"
+        >
           Edit
         </ButtonNG>
       </div>
diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index dea0e57158..a184b12420 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -1,8 +1,11 @@
 @import "scss/constants";
 
 .VenueAdminPage {
-  max-width: $announcement-container-width;
   margin: 0 auto;
+  width: 1200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   &__title {
     text-align: center;
@@ -12,5 +15,26 @@
     background: $dark;
     border-radius: $border-radius--xl;
     opacity: 0.9;
+    width: 600px;
+  }
+
+  &__announcement {
+    &-wrapper {
+      display: flex;
+      justify-content: center;
+      height: 200px;
+      width: 100%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: top;
+    }
+  }
+
+  &__settings {
+    width: $announcement-container-width-admin;
+    display: flex;
+    justify-content: center;
+    align-self: center;
+    margin: $spacing--xxl auto;
   }
 }
diff --git a/src/pages/Admin/Venue/VenueAdminPage.tsx b/src/pages/Admin/Venue/VenueAdminPage.tsx
index 7df76cc3ba..48e72b88ed 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.tsx
+++ b/src/pages/Admin/Venue/VenueAdminPage.tsx
@@ -1,12 +1,15 @@
 import React from "react";
+import { useCss } from "react-use";
+import classNames from "classnames";
 
-import { IFRAME_TEMPLATES } from "settings";
+import { DEFAULT_MAP_BACKGROUND, IFRAME_TEMPLATES } from "settings";
 
 import {
   isCurrentVenueNGRequestedSelector,
   isCurrentVenueNGRequestingSelector,
 } from "utils/selectors";
 
+import { useValidImage } from "hooks/useCheckImage";
 import { useConnectCurrentVenueNG } from "hooks/useConnectCurrentVenueNG";
 import { useIsUserVenueOwner } from "hooks/useIsUserVenueOwner";
 import { useSelector } from "hooks/useSelector";
@@ -40,6 +43,15 @@ export const VenueAdminPage: React.FC = () => {
   const isVenueLoading = venueRequestingStatus || !venueRequestStatus;
   const isLoggedIn = profile && user;
 
+  const [mapBackground] = useValidImage(
+    venue?.mapBackgroundImageUrl,
+    DEFAULT_MAP_BACKGROUND
+  );
+
+  const announcementContainerVars = useCss({
+    background: `url("${mapBackground}")`,
+  });
+
   if (isVenueLoading) {
     return <LoadingPage />;
   }
@@ -60,13 +72,22 @@ export const VenueAdminPage: React.FC = () => {
 
   const isIframeVenue = IFRAME_TEMPLATES.includes(venue.template);
 
+  const announcementWrapperClasses = classNames(
+    "VenueAdminPage__announcement-wrapper",
+    announcementContainerVars
+  );
+
   return (
     <WithNavigationBar>
       <div className="VenueAdminPage">
         <h4 className="VenueAdminPage__title">
           Current Announcement in {venue?.name}
         </h4>
-
+        <div className={announcementWrapperClasses}>
+          <AnnouncementMessage />
+        </div>
+      </div>
+      <div className="VenueAdminPage__settings">
         {isBannerAdminVisibile && (
           <BannerAdmin
             venueId={venueId}
@@ -77,8 +98,6 @@ export const VenueAdminPage: React.FC = () => {
 
         {!isBannerAdminVisibile && (
           <>
-            <AnnouncementMessage banner={venue.banner} />
-
             <AnnouncementOptions
               banner={venue.banner}
               onEdit={showBannerAdmin}
diff --git a/src/pages/VenuePage/TemplateWrapper.tsx b/src/pages/VenuePage/TemplateWrapper.tsx
index eac6979323..c197585f42 100644
--- a/src/pages/VenuePage/TemplateWrapper.tsx
+++ b/src/pages/VenuePage/TemplateWrapper.tsx
@@ -148,7 +148,7 @@ export const TemplateWrapper: React.FC<TemplateWrapperProps> = ({ venue }) => {
       <RelatedVenuesProvider venue={venue}>
         <ReactionsProvider venueId={venue.id}>
           <WithNavigationBar hasBackButton={hasBackButton}>
-            <AnnouncementMessage banner={venue.banner} isAnnouncementUserView />
+            <AnnouncementMessage isAnnouncementUserView />
 
             <Suspense fallback={<LoadingPage />}>{template}</Suspense>
 
diff --git a/src/scss/constants.scss b/src/scss/constants.scss
index c98f8780af..840325b1cf 100644
--- a/src/scss/constants.scss
+++ b/src/scss/constants.scss
@@ -75,6 +75,7 @@ $reserved-page-height: $navbar-height + $footer-height;
 $chat-input-height: 114px;
 $announcement-banner-height: 50px;
 $admin-spaces-sidebar-width: 20%;
+$announcement-container-width-admin: 600px;
 $announcement-container-width: 470px;
 $announcement-container-height: 140px;
 $announcement-banner-admin-height: 55px;
diff --git a/src/types/banner.ts b/src/types/banner.ts
index 523f46375f..459af059a8 100644
--- a/src/types/banner.ts
+++ b/src/types/banner.ts
@@ -1,5 +1,4 @@
 export interface Banner {
-  title?: string;
   content: string;
   isActionButton?: boolean;
   buttonUrl?: string;

From f4d50ecf3dc8850a6a367b07c13e00613bffd10c Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Thu, 23 Sep 2021 15:25:08 +0300
Subject: [PATCH 43/46] removed unnecessary classes

---
 .../ConfirmationModal/ConfirmationModal.scss  | 15 +-------
 .../ConfirmationModal/ConfirmationModal.tsx   | 37 +++----------------
 .../organisms/BannerAdmin/BannerAdmin.scss    | 15 --------
 .../organisms/BannerAdmin/BannerAdmin.tsx     |  5 +--
 4 files changed, 9 insertions(+), 63 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index 2ea0ff15ac..60669cdd8e 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -9,18 +9,7 @@
 
   &__buttons {
     display: flex;
-    justify-content: space-around;
-
-    &-confirm {
-      width: 50%;
-    }
-
-    &-cancel {
-      background-image: none;
-      background-color: $black;
-      border: solid $white 1px;
-      border-color: $white;
-      width: 50%;
-    }
+    width: 70%;
+    margin: 0 auto;
   }
 }
diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
index f91c54e251..050c335f00 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
@@ -16,12 +16,6 @@ interface ConfirmationModalProps {
   centered?: boolean;
   onConfirm: () => void;
   onCancel?: () => void;
-  containerClassName?: string;
-  headerClassName?: string;
-  messageClassName?: string;
-  buttonsContainerClassName?: string;
-  buttonClassName?: string;
-  cancelButtonClassName?: string;
   isCentered?: boolean;
 }
 
@@ -33,12 +27,6 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   onCancel,
   cancelBtnLabel = "No",
   saveBtnLabel = "Yes",
-  containerClassName = "",
-  headerClassName = "",
-  messageClassName = "",
-  buttonsContainerClassName = "",
-  buttonClassName = "",
-  cancelButtonClassName = "",
   isCentered = false,
 }) => {
   const [isVisible, setIsVisible] = useState(true);
@@ -59,30 +47,17 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 
   const hasHeader = isTruthy(header);
 
-  const containerClasses = `ConfirmationModal ${containerClassName}`;
-  const headerClasses = `ConfirmationModal__header ${headerClassName}`;
-  const messageClasses = `ConfirmationModal__message ${messageClassName}`;
-  const buttonsContainerClasses = `ConfirmationModal__buttons ${buttonsContainerClassName}`;
-  const buttonClasses = `ConfirmationModal__button-confirm ${buttonClassName}`;
-  const cancelButtonClasses = `ConfirmationModal__button-cancel ${cancelButtonClassName}`;
-
   const isShown = show !== undefined ? show : isVisible;
 
   return (
     <Modal show={isShown} onHide={hide} centered={isCentered}>
       <Modal.Body>
-        <div className={containerClasses}>
-          {hasHeader && <h2 className={headerClasses}>{header}</h2>}
-          <div className={messageClasses}>{message}</div>
-          <div className={buttonsContainerClasses}>
-            <ButtonNG className={cancelButtonClasses} onClick={cancel}>
-              {cancelBtnLabel}
-            </ButtonNG>
-            <ButtonNG
-              className={buttonClasses}
-              variant="danger"
-              onClick={confirm}
-            >
+        <div className="ConfirmationModal">
+          {hasHeader && <h4>{header}</h4>}
+          <div className="ConfirmationModal__message">{message}</div>
+          <div className="ConfirmationModal__buttons">
+            <ButtonNG onClick={cancel}>{cancelBtnLabel}</ButtonNG>
+            <ButtonNG variant="danger" onClick={confirm}>
               {saveBtnLabel}
             </ButtonNG>
           </div>
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index 4f70ba6982..86c176f380 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -66,19 +66,4 @@
     display: flex;
     justify-content: space-around;
   }
-
-  &__button {
-    width: $announce-button-width;
-    font-weight: $font-weight--500;
-    background-color: $primary--live;
-
-    &--cancel.BannerAdminModal__button {
-      background-color: opaque-white(0.2);
-      border: none;
-
-      &:hover {
-        background-color: opaque-white(0.2);
-      }
-    }
-  }
 }
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 61bc682efa..585c6826c7 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -174,12 +174,9 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         onConfirm={confirmChangeBannerData}
         onCancel={hideBannerChangeModal}
         header={"Erase your beautiful work?"}
-        message={"Are you sure?"}
+        message={"Are you sure you want to clear this banner?"}
         saveBtnLabel="Yes, clear"
         cancelBtnLabel="Cancel"
-        headerClassName={"BannerAdminModal__header"}
-        messageClassName={"BannerAdminModal__message"}
-        buttonsContainerClassName={"BannerAdminModal__buttons"}
         isCentered
       />
     </div>

From 059ddbc0d6d1a410e8e4cb41e535e6eb124ec3d9 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Thu, 23 Sep 2021 16:04:24 +0300
Subject: [PATCH 44/46] fix height navbar

---
 .../organisms/WithNavigationBar/WithNavigationBar.scss          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/WithNavigationBar/WithNavigationBar.scss b/src/components/organisms/WithNavigationBar/WithNavigationBar.scss
index ce64c5e88d..26420505b6 100644
--- a/src/components/organisms/WithNavigationBar/WithNavigationBar.scss
+++ b/src/components/organisms/WithNavigationBar/WithNavigationBar.scss
@@ -1,7 +1,7 @@
 @import "scss/constants.scss";
 
 .navbar-margin {
-  height: 100%;
+  height: auto;
 
   padding-top: $navbar-height;
   padding-bottom: $footer-height;

From a4e73af43410eb1fd24451b404697a083d527091 Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Fri, 24 Sep 2021 13:46:57 +0300
Subject: [PATCH 45/46] mr fixes + announcement position fix for admin

---
 .../ConfirmationModal/ConfirmationModal.tsx   |  6 ++-
 .../AnnouncementMessage.scss                  |  9 ++--
 .../AnnouncementMessage.tsx                   | 49 ++++++++++---------
 .../organisms/BannerAdmin/BannerAdmin.scss    | 18 -------
 .../organisms/BannerAdmin/BannerAdmin.tsx     |  1 +
 src/pages/Admin/Venue/VenueAdminPage.scss     |  1 +
 6 files changed, 35 insertions(+), 49 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
index 050c335f00..ddfde95d27 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
@@ -4,6 +4,7 @@ import { Modal } from "react-bootstrap";
 import { isTruthy } from "utils/types";
 
 import { ButtonNG } from "components/atoms/ButtonNG";
+import { ButtonVariant } from "components/atoms/ButtonNG/ButtonNG";
 
 import "./ConfirmationModal.scss";
 
@@ -11,9 +12,9 @@ interface ConfirmationModalProps {
   show?: boolean;
   header?: string;
   message: string;
+  confirmVariant?: ButtonVariant;
   cancelBtnLabel?: string;
   saveBtnLabel?: string;
-  centered?: boolean;
   onConfirm: () => void;
   onCancel?: () => void;
   isCentered?: boolean;
@@ -28,6 +29,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   cancelBtnLabel = "No",
   saveBtnLabel = "Yes",
   isCentered = false,
+  confirmVariant = "primary",
 }) => {
   const [isVisible, setIsVisible] = useState(true);
 
@@ -57,7 +59,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           <div className="ConfirmationModal__message">{message}</div>
           <div className="ConfirmationModal__buttons">
             <ButtonNG onClick={cancel}>{cancelBtnLabel}</ButtonNG>
-            <ButtonNG variant="danger" onClick={confirm}>
+            <ButtonNG variant={confirmVariant} onClick={confirm}>
               {saveBtnLabel}
             </ButtonNG>
           </div>
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index 5536219b30..d93fb9eb08 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -9,7 +9,6 @@ $announce-box-shadow: 0px 2px 20px 5px;
 
 .AnnouncementMessage {
   display: block;
-  position: relative;
   background: $announcement-background;
   width: $announcement-container-width;
   height: auto;
@@ -42,8 +41,9 @@ $announce-box-shadow: 0px 2px 20px 5px;
     border-radius: 16px;
 
     &--admin {
-      top: 35%;
-      position: absolute;
+      position: relative;
+      left: 0;
+      top: 0;
     }
   }
 
@@ -112,9 +112,8 @@ $announce-box-shadow: 0px 2px 20px 5px;
 
     &--admin {
       position: relative;
-      position: absolute;
       height: 210px;
-      top: 130px;
+      top: 0;
     }
 
     &--canceled {
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index 8ee96946c6..a799d1d49a 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -21,6 +21,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   isAnnouncementUserView = false,
 }) => {
   const {
+    isShown,
     show: showAnnouncementMessage,
     hide: hideAnnouncementMessage,
   } = useShowHide();
@@ -58,7 +59,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
 
   const handleBannerModalClose = () => {
     if (banner?.isForceFunnel) return;
-
+    console.log("????");
     hideAnnouncementMessage();
   };
 
@@ -71,33 +72,33 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       </div>
     );
 
-  if (!banner?.content) return null;
+  if (!banner?.content || !isShown) return null;
 
   return (
     <>
-      <div className={containerClasses} onClick={handleBannerModalClose} />
-
-      <div className={announcementMessageClasses}>
-        <div className="AnnouncementMessage__content">
-          <RenderMarkdown text={banner.content} />
+      <div className={containerClasses} onClick={handleBannerModalClose}>
+        <div className={announcementMessageClasses}>
+          <div className="AnnouncementMessage__content">
+            <RenderMarkdown text={banner.content} />
+          </div>
+
+          {isWithButton && banner.buttonUrl && (
+            <LinkButton
+              href={banner.buttonUrl}
+              className={actionButtonClasses}
+              onClick={hideAnnouncementMessage}
+            >
+              {banner.buttonDisplayText}
+            </LinkButton>
+          )}
+
+          {isAnnouncementCloseable && (
+            <span
+              className="AnnouncementMessage__close-button"
+              onClick={handleBannerModalClose}
+            />
+          )}
         </div>
-
-        {isWithButton && banner.buttonUrl && (
-          <LinkButton
-            href={banner.buttonUrl}
-            className={actionButtonClasses}
-            onClick={hideAnnouncementMessage}
-          >
-            {banner.buttonDisplayText}
-          </LinkButton>
-        )}
-
-        {isAnnouncementCloseable && (
-          <span
-            className="AnnouncementMessage__close-button"
-            onClick={hideAnnouncementMessage}
-          />
-        )}
       </div>
     </>
   );
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.scss b/src/components/organisms/BannerAdmin/BannerAdmin.scss
index 86c176f380..aed4d4a0c4 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.scss
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.scss
@@ -49,21 +49,3 @@
     opacity: 20%;
   }
 }
-
-.BannerAdminModal {
-  text-align: center;
-
-  &__header {
-    font-size: $font-size--xl;
-    margin: 0;
-  }
-
-  &__message {
-    padding: $spacing--md 0 $spacing--xl;
-  }
-
-  &__buttons {
-    display: flex;
-    justify-content: space-around;
-  }
-}
diff --git a/src/components/organisms/BannerAdmin/BannerAdmin.tsx b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
index 585c6826c7..a27bdaf278 100644
--- a/src/components/organisms/BannerAdmin/BannerAdmin.tsx
+++ b/src/components/organisms/BannerAdmin/BannerAdmin.tsx
@@ -178,6 +178,7 @@ export const BannerAdmin: React.FC<BannerAdminProps> = ({
         saveBtnLabel="Yes, clear"
         cancelBtnLabel="Cancel"
         isCentered
+        confirmVariant="danger"
       />
     </div>
   );
diff --git a/src/pages/Admin/Venue/VenueAdminPage.scss b/src/pages/Admin/Venue/VenueAdminPage.scss
index a184b12420..50871363fc 100644
--- a/src/pages/Admin/Venue/VenueAdminPage.scss
+++ b/src/pages/Admin/Venue/VenueAdminPage.scss
@@ -22,6 +22,7 @@
     &-wrapper {
       display: flex;
       justify-content: center;
+      align-items: flex-start;
       height: 200px;
       width: 100%;
       background-size: cover;

From bf4ee6352e589b42762e5788c669f5c09efaa6ea Mon Sep 17 00:00:00 2001
From: Oleksii Petrov <oleksii.petrov@altexsoft.com>
Date: Fri, 24 Sep 2021 17:20:30 +0300
Subject: [PATCH 46/46] minor fixes

---
 .../atoms/ConfirmationModal/ConfirmationModal.scss     |  6 ++++--
 .../atoms/ConfirmationModal/ConfirmationModal.tsx      |  9 +++++++--
 .../AnnouncementMessage/AnnouncementMessage.scss       | 10 +++++-----
 .../AnnouncementMessage/AnnouncementMessage.tsx        |  6 +++---
 src/pages/Admin/Details/Form/DetailsForm.scss          |  2 +-
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
index 60669cdd8e..bbd9ed2b6c 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.scss
@@ -1,8 +1,6 @@
 @import "scss/constants.scss";
 
 .ConfirmationModal {
-  text-align: center;
-
   &__message {
     padding: 10px 0 30px 0;
   }
@@ -12,4 +10,8 @@
     width: 70%;
     margin: 0 auto;
   }
+
+  .modal-content {
+    text-align: center;
+  }
 }
diff --git a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
index ddfde95d27..9eccf81112 100644
--- a/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
+++ b/src/components/atoms/ConfirmationModal/ConfirmationModal.tsx
@@ -52,9 +52,14 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   const isShown = show !== undefined ? show : isVisible;
 
   return (
-    <Modal show={isShown} onHide={hide} centered={isCentered}>
+    <Modal
+      className="ConfirmationModal"
+      show={isShown}
+      onHide={hide}
+      centered={isCentered}
+    >
       <Modal.Body>
-        <div className="ConfirmationModal">
+        <div>
           {hasHeader && <h4>{header}</h4>}
           <div className="ConfirmationModal__message">{message}</div>
           <div className="ConfirmationModal__buttons">
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
index d93fb9eb08..6c1488b382 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.scss
@@ -17,7 +17,7 @@ $announce-box-shadow: 0px 2px 20px 5px;
   padding: $spacing 0;
   backdrop-filter: blur(50px);
   text-align: center;
-  position: absolute;
+  position: fixed;
   border-radius: 0px 0px $border-radius--xl $border-radius--xl;
   border: 1px solid opaque-white(0.4);
   border-top: none;
@@ -28,6 +28,10 @@ $announce-box-shadow: 0px 2px 20px 5px;
   margin: 0 auto;
   z-index: z(announcement-banner);
 
+  &__admin {
+    position: absolute;
+  }
+
   &--withButton {
     min-height: $announcement-container-height;
   }
@@ -70,10 +74,6 @@ $announce-box-shadow: 0px 2px 20px 5px;
     font-size: $font-size--md;
     font-weight: $font-weight--500;
     padding: $action-button-padding $spacing--lg;
-
-    &-admin {
-      background-color: $primary--darker;
-    }
   }
 
   &__close-button {
diff --git a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
index a799d1d49a..864d31a390 100644
--- a/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
+++ b/src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx
@@ -21,7 +21,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
   isAnnouncementUserView = false,
 }) => {
   const {
-    isShown,
+    isShown: isAnnouncementMessageShown,
     show: showAnnouncementMessage,
     hide: hideAnnouncementMessage,
   } = useShowHide();
@@ -49,6 +49,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
 
   const announcementMessageClasses = classNames("AnnouncementMessage", {
     AnnouncementMessage__fullscreen: banner?.isFullScreen,
+    AnnouncementMessage__admin: !isAnnouncementUserView,
     "AnnouncementMessage__fullscreen--admin":
       banner?.isFullScreen && !isAnnouncementUserView,
   });
@@ -59,7 +60,6 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
 
   const handleBannerModalClose = () => {
     if (banner?.isForceFunnel) return;
-    console.log("????");
     hideAnnouncementMessage();
   };
 
@@ -72,7 +72,7 @@ export const AnnouncementMessage: React.FC<AnnouncementMessageProps> = ({
       </div>
     );
 
-  if (!banner?.content || !isShown) return null;
+  if (!banner?.content || !isAnnouncementMessageShown) return null;
 
   return (
     <>
diff --git a/src/pages/Admin/Details/Form/DetailsForm.scss b/src/pages/Admin/Details/Form/DetailsForm.scss
index 5671d3d80b..f9065d134c 100644
--- a/src/pages/Admin/Details/Form/DetailsForm.scss
+++ b/src/pages/Admin/Details/Form/DetailsForm.scss
@@ -12,7 +12,7 @@
   &__footer {
     display: flex;
     padding: 1em 5em;
-    justify-content: end;
+    justify-content: flex-end;
 
     border-top: 1px solid rgba(255, 255, 255, 0.2);
   }