Updated the support modal

frontend/src/Call/CallPlayer.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import { useParams } from 'react-router-dom';
 import MediaPlayer from "./components/MediaPlayer";
-import SupportModal from "./components/SupportModal";
+import SupportModal from "../Common/SupportModal";
 import CallInfo from "./components/CallInfo";
 import ListCalls from "./components/ListCalls";
 import { useSelector, useDispatch } from 'react-redux'
@@ -16,7 +16,9 @@ import {
   Icon,
   Sidebar,
   Message,
-  MessageHeader
+  MessageHeader,
+  Button,
+  ButtonContent
 } from "semantic-ui-react";
 import "./CallPlayer.css";
 import queryString from '../query-string';
@@ -205,7 +207,12 @@ useEffect(() => {
         <Menu.Item active={autoPlay} onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
         <MediaPlayer call={currentCall} playSilence={silenceCount} onEnded={callEnded} onPlayPause={handlePlayPause} />
         <Menu.Menu position="right" className="desktop-only">
-          <Menu.Item><SupportModal /></Menu.Item>
+          <Menu.Item><SupportModal trigger={<Button color='grey' animated='fade'>
+    <ButtonContent visible color="red">
+      <Icon name='heart' /> Donate
+    </ButtonContent>
+    <ButtonContent hidden>Thank You</ButtonContent>
+  </Button>} /></Menu.Item>
           <Menu.Item><a href={callDownload}><Icon name="download" />Download</a></Menu.Item>
           <Menu.Item><a href={callLink}><Icon name="at" />Link</a></Menu.Item>
         </Menu.Menu>

frontend/src/Common/SupportModal.js

@@ -2,9 +2,11 @@ import {useState} from 'react';
 import {
   Modal,
   Button,
+  ButtonContent,
+  ButtonGroup,
+  Divider,
   Icon
 } from "semantic-ui-react";
-import "./FilterModal.css";
 
 
 function SupportModal(props) {
@@ -14,16 +16,18 @@ function SupportModal(props) {
   const handleClose = () => props.onClose();
 
   return (
-    <Modal open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)} trigger={<div><Icon name="coffee" />Support OpenMHz</div>} size='tiny' >
+    <Modal open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)} trigger={props.trigger} size='tiny' >
       <Modal.Header>Support OpenMHz</Modal.Header>
       <Modal.Content image>
         <Icon size='massive' name="coffee" />
         <Modal.Description>
           <p>If OpenMHz brings you joy, think about becoming a supporter! It will cover hosting costs and help keep me focused on development.</p>
-          <p>No worries if not, I am not having problems keeping it going.</p>
-          <a href="https://github.com/sponsors/robotastic"><Button>
-            Support
-          </Button></a>
+
+          <Divider horizontal>Donate</Divider>
+          <a href="https://github.com/sponsors/robotastic"><Button ><Icon name="github"/>GitHub Sponsors</Button></a>
+          
+          <a href="https://patreon.com/OpenMHz"><Button ><Icon name="patreon"/>Patreon </Button></a>
+
         </Modal.Description>
 
       </Modal.Content>

frontend/src/Event/EventPlayer.js

@@ -1,21 +1,21 @@
-import React, { useEffect, useLayoutEffect, useState, useRef } from "react";
-import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
-import { skipToken } from '@reduxjs/toolkit/query'
+import React, { useEffect, useState, useRef } from "react";
+import {  useNavigate } from 'react-router-dom';
 import MediaPlayer from "../Call/components/MediaPlayer";
 
-import SupportModal from "../Call/components/SupportModal";
+import SupportModal from "../Common/SupportModal";
 import EventCallInfo from "./EventCallInfo";
 import ListEventCalls from "./ListEventCalls";
-import { useSelector, useDispatch } from 'react-redux'
+import { useDispatch } from 'react-redux'
 
 import {
   Container,
-  Label,
   Rail,
   Sticky,
   Menu,
   Icon,
-  Sidebar
+  Sidebar,
+  Button,
+  ButtonContent
 } from "semantic-ui-react";
 
 
@@ -118,7 +118,12 @@ function EventPlayer(props) {
         <Menu.Item active={autoPlay} onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
         <MediaPlayer call={currentCall} onEnded={callEnded} onPlayPause={handlePlayPause} />
         <Menu.Menu position="right" className="desktop-only">
-          <Menu.Item><SupportModal /></Menu.Item>
+          <Menu.Item><SupportModal trigger={<Button color='grey' animated='fade'>
+    <ButtonContent visible color="red">
+      <Icon name='heart' /> Donate
+    </ButtonContent>
+    <ButtonContent hidden>Thank You</ButtonContent>
+  </Button>} /></Menu.Item>
           <Menu.Item><a href={callDownload}><Icon name="download" />Download</a></Menu.Item>
           <Menu.Item><a href={callLink}><Icon name="at" />Link</a></Menu.Item>
         </Menu.Menu>

frontend/src/Main/Main.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Link, useNavigate } from 'react-router-dom'
 import SystemCard from "../System/SystemCard";
+import SupportModal from "../Common/SupportModal";
 import "./Main.css";
 import { createMedia } from "@artsy/fresnel";
 import {
@@ -295,12 +296,14 @@ const Main = (props) => {
               <Grid.Row textAlign='center'>
                 <Grid.Column style={{ paddingBottom: '4em', paddingTop: '2em', maxWidth: 450 }}>
                   <ButtonGroup size='large'>
-                    <Button color='red' animated='fade' href="https://patreon.com/OpenMHz">
+                    <SupportModal trigger={
+                    <Button color='red' animated='fade'>
                       <ButtonContent visible>
                         <Icon name='heart' /> Donate
                       </ButtonContent>
                       <ButtonContent hidden>Thank You</ButtonContent>
                     </Button>
+                    } />
                     <Button href="https://podcasts.apple.com/us/podcast/openmhz/id1675187518">
                     <Icon name='podcast' /> Events Podcast
                     </Button>

frontend/src/System/SystemCard.js

@@ -123,12 +123,10 @@ function SystemCard(props) {
                 {description}
               </Grid.Column>
             </Grid.Row>
-            {statusMessage.length &&
+            {statusMessage &&
               <Grid.Row>
                 <Grid.Column>
-  
                 <Popup content={system.status} trigger={<Button icon labelPosition='left' size='mini'><Icon name="info"/>{statusMessage}</Button>} />
-
                 </Grid.Column>
               </Grid.Row>
             }