PR fixes + minor css changes

Author: Oleksii Petrov

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);
+    }
   }
 }

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;

src/components/molecules/AnnouncementMessage/AnnouncementMessage.tsx

@@ -5,8 +5,10 @@ import classNames from "classnames";
 
 import { Banner } from "types/banner";
 import { isDefined } from "utils/types";
-import { RenderMarkdown } from "components/organisms/RenderMarkdown";
+
 import { useShowHide } from "hooks/useShowHide";
+
+import { RenderMarkdown } from "components/organisms/RenderMarkdown";
 import { LinkButton } from "components/atoms/LinkButton";
 
 import "./AnnouncementMessage.scss";
@@ -48,6 +50,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">
@@ -61,7 +68,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>
         )}

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;
+    }
   }
 }

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 { makeUpdateBanner } from "api/bannerAdmin";
@@ -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">

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;
+  }
 }

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;

src/scss/constants.scss

@@ -63,6 +63,8 @@ $navbar-height: 66px;
 $footer-height: 30px;
 $chat-input-height: 114px;
 $announcement-banner-height: 50px;
+$announcement-container-width: 640px;
+$announcement-container-width-fullscreen: 430px;
 
 $avatarSize: max(4vh, 3vw);
 $avatarSizeMin: 25px;
@@ -87,9 +89,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;

src/types/venues.ts

@@ -4,16 +4,16 @@ import { HAS_ROOMS_TEMPLATES } from "settings";
 
 import { WithVenueId } from "utils/id";
 
+import { Banner } from "./banner";
+import { Table } from "./Table";
 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 } from "./User";
 import { VenueAccessMode } from "./VenueAcccess";
 import { VideoAspectRatio } from "./VideoAspectRatio";
-import { Banner } from "./banner";
+import { UpcomingEvent } from "./UpcomingEvent";
+import { UsernameVisibility } from "./User";
 
 // 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