feat: prepare jitsi invite popup card

src/components/Button.jsx

@@ -4,6 +4,7 @@ import classNames from "classnames";
 
 const Button = ({
   className,
+  bodyClassName,
   icon,
   color = "black",
   hoverActive = true,
@@ -25,9 +26,11 @@ const Button = ({
     className
   );
 
+  const bodyClass = classNames("btn__body", bodyClassName);
+
   const inner = (
     <div className="btn__body-wrap">
-      <div className="btn__body">{children}</div>
+      <div className={bodyClass}>{children}</div>
       {!!icon && (
         <div className="btn__icon">
           <i className={icon}></i>

src/components/Navbar.jsx

@@ -36,6 +36,7 @@ const Navbar = () => {
   };
 
   const connectionIndicator = (
+    <div className="inline-flex items-center order-first md:order-last md:ml-8 lg:order-first lg:mr-8 lg:ml-0">
       <span
         className="relative inline-flex h-4 w-4 mr-4"
         title={connectionStateCaption}
@@ -53,6 +54,10 @@ const Navbar = () => {
           )}
         />
       </span>
+      <span className="hidden md:block text-grey-200">
+        {connectionStateCaption}
+      </span>
+    </div>
   );
 
   return (
@@ -113,7 +118,10 @@ const Navbar = () => {
                       alt="Avatar"
                     />
                   </div>
-                  <button onClick={logout}>
+                  <button
+                    onClick={logout}
+                    className="text-grey-200 hover:text-white"
+                  >
                     <i className="ico--log-out"></i>
                   </button>
                 </div>

src/components/annoucements/Announcement.jsx

@@ -105,13 +105,13 @@ const Announcement = ({
             {showEdit && (
               <DropdownMenuItem
                 onClick={onEdit}
-                icon="ico--edit-pencil"
+                icon="ico--pencil"
                 title="Upravit"
               />
             )}
             <DropdownMenuItem
               onClick={onDelete}
-              icon="ico--trashcan"
+              icon="ico--bin"
               title="Smazat"
             />
           </DropdownMenu>

src/components/annoucements/AnnouncementEditModal.jsx

@@ -72,7 +72,7 @@ const AnnouncementEditModal = ({
             <div className="flex items-center justify-between mb-4">
               <CardHeadline>Upravit oznámení</CardHeadline>
               <button onClick={onCancel} type="button">
-                <i className="ico--close"></i>
+                <i className="ico--cross"></i>
               </button>
             </div>
             <MarkdownEditor
@@ -104,7 +104,7 @@ const AnnouncementEditModal = ({
                   onChange={(evt) => onLinkInput(evt.target.value)}
                 />
                 <div className="text-input-addon text-input-addon--l order-first">
-                  <i className="ico--link1"></i>
+                  <i className="ico--link"></i>
                 </div>
               </div>
               {linkValid === false && (

src/components/annoucements/AnnouncementList.jsx

@@ -23,10 +23,23 @@ const AnnouncementList = ({
     onSeen(announcement);
   };
 
+  const getClassName = (idx) => {
+    if (idx === 0) {
+      return "pt-4 lg:pt-8";
+    }
+
+    if (idx === items.length - 1) {
+      return "pb-4 lg:pb-8";
+    }
+
+    return "";
+  };
+
   return (
     <div className={classNames("space-y-px", className)}>
-      {items.map((item) => (
+      {items.map((item, idx) => (
         <Announcement
+          className={getClassName(idx)}
           key={item.id}
           datetime={item.datetime}
           type={item.type}

src/components/modals/ModalConfirm.jsx

@@ -30,7 +30,7 @@ const ModalConfirm = ({
           <div className="flex items-center justify-between mb-4">
             <CardHeadline>{title}</CardHeadline>
             <button onClick={onCancel} type="button">
-              <i className="ico--close"></i>
+              <i className="ico--cross"></i>
             </button>
           </div>
           <CardBodyText>{children}</CardBodyText>

src/components/posts/PostEditModal.jsx

@@ -43,7 +43,7 @@ const PostEditModal = ({
             <div className="flex items-center justify-between mb-4">
               <CardHeadline>Upravit text příspěvku</CardHeadline>
               <button onClick={onCancel} type="button">
-                <i className="ico--close"></i>
+                <i className="ico--cross"></i>
               </button>
             </div>
             <MarkdownEditor

src/components/posts/PostList.jsx

@@ -6,6 +6,7 @@ import Post from "./Post";
 const PostList = ({
   className,
   items,
+  showAddPostCta,
   currentUser,
   canThumb,
   dimArchived,
@@ -83,7 +84,7 @@ const PostList = ({
             onSeen={onPostSeen(item)}
           />
         ))}
-      {!items.length && (
+      {showAddPostCta && !items.length && (
         <p className="p-4 lg:p-0 lg:py-3 leading-snug text-sm md:text-base">
           Nikdo zatím žádný odpovídající příspěvek do rozpravy nepřidal. Budeš
           první?

src/components/program/ProgramEntryEditModal.jsx

@@ -29,7 +29,7 @@ const ProgramEntryEditModal = ({
           <div className="flex items-center justify-between mb-4">
             <CardHeadline>Upravit název programového bodu</CardHeadline>
             <button onClick={onCancel}>
-              <i className="ico--close"></i>
+              <i className="ico--cross"></i>
             </button>
           </div>
           <div className="form-field">

src/containers/AddAnnouncementForm.jsx

@@ -135,7 +135,7 @@ const AddAnnouncementForm = ({ className }) => {
               onChange={(evt) => onLinkInput(evt.target.value)}
             />
             <div className="text-input-addon text-input-addon--l order-first">
-              <i className="ico--link1"></i>
+              <i className="ico--link"></i>
             </div>
           </div>
           {linkValid === false && (

src/containers/JitsiInviteCard.jsx

+import React from "react";
+
+import Button from "components/Button";
+import { Card, CardBody } from "components/cards";
+import { AuthStore } from "stores";
+
+const JitsiInviteCard = () => {
+  const { showJitsiInvitePopup } = AuthStore.useState();
+
+  if (!showJitsiInvitePopup) {
+    return null;
+  }
+
+  return (
+    <Card className="lg:card bg-violet-300 relative" elevation={16}>
+      <i className="ico--jitsi text-9xl mr-2 text-violet-500 absolute right-0 top-0 opacity-25 z-0" />
+      <CardBody className="text-white relative z-10">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="head-heavy-xs">
+            <span>Pozvánka do Jitsi</span>
+          </h2>
+          <button type="button">
+            <i className="ico--cross"></i>
+          </button>
+        </div>
+        <p className="leading-snug text-sm mb-4">
+          Někdo tě pozval do <strong>chráněného Jitsi kanálu</strong>{" "}
+          celeostátního fóra. Ke kanálu se připojíš kliknutím na tlačítko níže.
+        </p>
+        <Button color="violet-500" className="btn--fullwidth">
+          Otevřít Jitsi kanál
+        </Button>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default JitsiInviteCard;

src/containers/PostsContainer.jsx

@@ -22,7 +22,7 @@ import PostList from "components/posts/PostList";
 import { useActionState, useItemActionConfirm } from "hooks";
 import { AuthStore, PostStore } from "stores";
 
-const PostsContainer = ({ className }) => {
+const PostsContainer = ({ className, showAddPostCta }) => {
   const [postToEdit, setPostToEdit] = useState(null);
   const [confirmingEdit, setConfirmingEdit] = useState(false);
   const [editError, setEditError] = useState(null);
@@ -165,6 +165,7 @@ const PostsContainer = ({ className }) => {
       )}
       <PostList
         items={windowItems.slice(sliceStart, sliceEnd)}
+        showAddPostCta={showAddPostCta}
         canThumb={isAuthenticated}
         onLike={like.run}
         onDislike={dislike.run}

src/pages/Home.jsx

@@ -17,6 +17,7 @@ import AddAnnouncementForm from "containers/AddAnnouncementForm";
 import AddPostForm from "containers/AddPostForm";
 import AnnouncementsContainer from "containers/AnnoucementsContainer";
 import GlobalStats from "containers/GlobalStats";
+import JitsiInviteCard from "containers/JitsiInviteCard";
 import PostFilters from "containers/PostFilters";
 import PostsContainer from "containers/PostsContainer";
 import { useActionConfirm } from "hooks";
@@ -167,7 +168,7 @@ const Home = () => {
               >
                 <DropdownMenuItem
                   onClick={() => setShowProgramEditModal(true)}
-                  icon="ico--edit-pencil"
+                  icon="ico--pencil"
                   title="Přejmenovat bod programu"
                   titleSize="base"
                   iconSize="base"
@@ -225,12 +226,10 @@ const Home = () => {
           </div>
         </section>
 
-        <section className="cf2021__notifications">
-          <div className="lg:card lg:elevation-10">
-            <div className="lg:card__body pb-2 lg:py-6">
-              <h2 className="head-heavy-xs md:head-heavy-sm">Oznámení</h2>
-            </div>
+        <section className="cf2021__notifications space-y-8">
+          <JitsiInviteCard />
 
+          <div className="lg:card lg:elevation-10">
             <AnnouncementsContainer className="container-padding--zero lg:container-padding--auto" />
             {isAuthenticated && user.role === "chairman" && (
               <AddAnnouncementForm className="lg:card__body pt-4 lg:py-6" />
@@ -248,17 +247,21 @@ const Home = () => {
                   title="Rozprava je uzavřena"
                 />
               )}
-              {programEntry.discussionOpened && (
-                <i
-                  className="ico--lock-open text-black ml-1 opacity-50 hover:opacity-100 transition duration-500 text-xl"
-                  title="Probíhá rozprava"
-                />
-              )}
             </h2>
             <PostFilters />
           </div>
 
-          <PostsContainer className="container-padding--zero lg:container-padding--auto" />
+          <PostsContainer
+            className="container-padding--zero lg:container-padding--auto"
+            showAddPostCta={programEntry.discussionOpened}
+          />
+          {!programEntry.discussionOpened &&
+            isAuthenticated &&
+            !user.isBanned && (
+              <p className="leading-normal">
+                Rozprava je uzavřena - příspěvky teď nelze přidávat.
+              </p>
+            )}
           {programEntry.discussionOpened &&
             isAuthenticated &&
             !user.isBanned && <AddPostForm className="my-8 space-y-4" />}

src/stores.js

@@ -15,6 +15,7 @@ export const GlobalInfoStore = new Store(globalInfoStoreInitial);
 /** @type {CF2021.AuthStorePayload} */
 const authStoreInitial = {
   isAuthenticated: false,
+  showJitsiInvitePopup: false,
 };
 
 export const AuthStore = new Store(authStoreInitial);

typings/cf2021.d.ts

@@ -49,6 +49,8 @@ declare namespace CF2021 {
       group?: string;
       secret?: string;
     };
+    showJitsiInvitePopup: boolean;
+    jitsiInviteToken?: string;
   }
 
   export type AuthStorePayload =