v2 about (#362)

* chore: remove unused assets * feat: about ontime * refactor: cleanup unused
2026-08-08 17:03:53 +00:00 · 2023-04-25 22:31:56 +02:00
parent 8f834fed35
commit 0b94fc71a4
39 changed files with 307 additions and 112 deletions
@@ -0,0 +1,21 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="256" height="256" rx="24" fill="#222222"/>
+<path d="M40.5 131.781V128.193C40.5 114.635 42.4369 102.159 46.3106 90.7659C50.1843 79.2587 55.8239 69.2896 63.2295 60.8586C70.6351 52.4277 79.7497 45.8765 90.5733 41.2053C101.397 36.4202 113.815 34.0276 127.829 34.0276C141.843 34.0276 154.318 36.4202 165.256 41.2053C176.193 45.8765 185.365 52.4277 192.771 60.8586C200.29 69.2896 205.987 79.2587 209.86 90.7659C213.734 102.159 215.671 114.635 215.671 128.193V131.781C215.671 145.226 213.734 157.701 209.86 169.208C205.987 180.601 200.29 190.571 192.771 199.115C185.365 207.546 176.25 214.098 165.427 218.769C154.603 223.44 142.185 225.776 128.171 225.776C114.157 225.776 101.682 223.44 90.7442 218.769C79.9206 214.098 70.7491 207.546 63.2295 199.115C55.8239 190.571 50.1843 180.601 46.3106 169.208C42.4369 157.701 40.5 145.226 40.5 131.781ZM89.7188 128.193V131.781C89.7188 139.529 90.4024 146.764 91.7696 153.486C93.1368 160.208 95.3015 166.132 98.2637 171.259C101.34 176.272 105.328 180.203 110.227 183.051C115.126 185.899 121.107 187.323 128.171 187.323C135.007 187.323 140.874 185.899 145.773 183.051C150.673 180.203 154.603 176.272 157.565 171.259C160.528 166.132 162.692 160.208 164.06 153.486C165.541 146.764 166.281 139.529 166.281 131.781V128.193C166.281 120.673 165.541 113.609 164.06 107.001C162.692 100.279 160.471 94.3547 157.395 89.2278C154.432 83.9869 150.502 79.8853 145.603 76.9231C140.703 73.9609 134.779 72.4797 127.829 72.4797C120.879 72.4797 114.955 73.9609 110.056 76.9231C105.271 79.8853 101.34 83.9869 98.2637 89.2278C95.3015 94.3547 93.1368 100.279 91.7696 107.001C90.4024 113.609 89.7188 120.673 89.7188 128.193Z" fill="#FFFFFA"/>
+<mask id="mask0_30_31" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="40" y="34" width="176" height="192">
+<path d="M40.5 131.781V128.193C40.5 114.635 42.4369 102.159 46.3106 90.7659C50.1843 79.2587 55.8239 69.2896 63.2295 60.8586C70.6351 52.4277 79.7497 45.8765 90.5733 41.2053C101.397 36.4202 113.815 34.0276 127.829 34.0276C141.843 34.0276 154.318 36.4202 165.256 41.2053C176.193 45.8765 185.365 52.4277 192.771 60.8586C200.29 69.2896 205.987 79.2587 209.86 90.7659C213.734 102.159 215.671 114.635 215.671 128.193V131.781C215.671 145.226 213.734 157.701 209.86 169.208C205.987 180.601 200.29 190.571 192.771 199.115C185.365 207.546 176.25 214.098 165.427 218.769C154.603 223.44 142.185 225.776 128.171 225.776C114.157 225.776 101.682 223.44 90.7442 218.769C79.9206 214.098 70.7491 207.546 63.2295 199.115C55.8239 190.571 50.1843 180.601 46.3106 169.208C42.4369 157.701 40.5 145.226 40.5 131.781ZM89.7188 128.193V131.781C89.7188 139.529 90.4024 146.764 91.7696 153.486C93.1368 160.208 95.3015 166.132 98.2637 171.259C101.34 176.272 105.328 180.203 110.227 183.051C115.126 185.899 121.107 187.323 128.171 187.323C135.007 187.323 140.874 185.899 145.773 183.051C150.673 180.203 154.603 176.272 157.565 171.259C160.528 166.132 162.692 160.208 164.06 153.486C165.541 146.764 166.281 139.529 166.281 131.781V128.193C166.281 120.673 165.541 113.609 164.06 107.001C162.692 100.279 160.471 94.3547 157.395 89.2278C154.432 83.9869 150.502 79.8853 145.603 76.9231C140.703 73.9609 134.779 72.4797 127.829 72.4797C120.879 72.4797 114.955 73.9609 110.056 76.9231C105.271 79.8853 101.34 83.9869 98.2637 89.2278C95.3015 94.3547 93.1368 100.279 91.7696 107.001C90.4024 113.609 89.7188 120.673 89.7188 128.193Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_30_31)">
+<path d="M17.7519 90.6278C32.2336 84.5548 31.0535 58.0568 38.3066 62.5986C47.3731 68.2758 38.3066 41.1095 50.9198 47.1825C71.1339 56.9152 40.7009 64.5389 62.3666 76.9778C84.0323 89.4167 171.756 99.642 202.839 160.802C214.766 184.27 220.843 191.199 223.166 192.958C224.57 192.837 224.823 194.214 223.166 192.958C222.812 192.989 222.385 193.115 221.898 193.401C216.763 196.422 122.406 273.336 83.6205 225.168C44.8346 177 2.09417 132.401 13.321 120.526C22.3025 111.025 14.6184 97.1566 17.7519 90.6278Z" fill="url(#paint0_linear_30_31)"/>
+<path d="M39.2409 66.8029C31.9877 62.2612 38.8572 79.7789 16.8175 87.8247C13.684 94.3536 21.1274 106.353 12.1459 115.854C0.919109 127.73 47.1703 180.27 85.9563 228.438C124.742 276.606 200.88 205.765 206.015 202.745C211.149 199.724 219.133 212.629 196.599 168.158C165.523 106.828 78.8569 98.1563 57.3454 76.3867C38.7095 57.5272 88.9205 36.7794 67.2701 41.1095C39.2409 46.7153 48.3073 72.4802 39.2409 66.8029Z" fill="url(#paint1_linear_30_31)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_30_31" x1="87.4684" y1="-29.7758" x2="62.9476" y2="328.852" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF0000" stop-opacity="0.74"/>
+<stop offset="1" stop-color="#FF0000" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_30_31" x1="82.3228" y1="-32.8735" x2="57.802" y2="325.754" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF005C" stop-opacity="0.74"/>
+<stop offset="1" stop-color="#FF005C" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
@@ -12,9 +12,6 @@ export const APP_SETTINGS = ['appSettings'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const RUNTIME = ['runtimeStore'];

-// external stuff
-export const githubURL = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
-
 export const serverPort = import.meta.env.DEV ? STATIC_PORT : window.location.port;
 export const serverURL = import.meta.env.DEV ? `http://localhost:${serverPort}` : window.location.origin;
 export const websocketUrl = `ws://${window.location.hostname}:${serverPort}/ws`;
@@ -1,9 +1,10 @@
 import axios from 'axios';
 import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types';

+import { apiRepoLatest } from '../../externals';
 import { InfoType } from '../models/Info';

-import { githubURL, ontimeURL } from './apiConstants';
+import { ontimeURL } from './apiConstants';

 /**
 * @description HTTP request to retrieve application settings
@@ -152,11 +153,19 @@ export const uploadData = async (file: string, setProgress: (value: number) => v
    .then((response) => response.data.id);
 };

+export type HasUpdate = {
+  url: string;
+  version: string;
+};
+
 /**
 * @description HTTP request to get the latest version and url from github
 * @return {Promise}
 */
-export async function getLatestVersion(): Promise<object> {
-  const res = await axios.get(`${githubURL}`);
-  return { url: res.data.html_url, version: res.data.tag_name };
+export async function getLatestVersion(): Promise<HasUpdate> {
+  const res = await axios.get(`${apiRepoLatest}`);
+  return {
+    url: res.data.html_url as string,
+    version: res.data.tag_name as string,
+  };
 }
@@ -18,6 +18,7 @@ import { useEmitLog } from '../../stores/logger';
 interface QuitIconBtnProps {
  clickHandler: () => void;
  size?: Size;
+  disabled?: boolean;
 }

 const quitBtnStyle = {
@@ -27,6 +28,10 @@ const quitBtnStyle = {
  _hover: {
    background: '#D20300', // $red-700
    color: 'white',
+    _disabled: {
+      color: '#D20300', // $red-700
+      background: 'none',
+    },
  },
  _active: {
    background: '#9A0000', // $red-1000
@@ -37,7 +42,7 @@ const quitBtnStyle = {
 };

 export default function QuitIconBtn(props: QuitIconBtnProps) {
-  const { clickHandler, size = 'lg', ...rest } = props;
+  const { clickHandler, size = 'lg', disabled, ...rest } = props;
  const [isOpen, setIsOpen] = useState(false);
  const { emitInfo } = useEmitLog();
  const onClose = () => setIsOpen(false);
@@ -65,6 +70,7 @@ export default function QuitIconBtn(props: QuitIconBtnProps) {
          size={size}
          icon={<FiPower />}
          onClick={() => setIsOpen(true)}
+          isDisabled={disabled}
          {...quitBtnStyle}
          {...rest}
        />
@@ -75,9 +81,7 @@ export default function QuitIconBtn(props: QuitIconBtnProps) {
            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
              Ontime Shutdown
            </AlertDialogHeader>
-            <AlertDialogBody>
-              This will shutdown the program and all running servers. Are you sure?
-            </AlertDialogBody>
+            <AlertDialogBody>This will shutdown the program and all running servers. Are you sure?</AlertDialogBody>
            <AlertDialogFooter>
              <Button ref={cancelRef} onClick={onClose} variant='ghost'>
                Cancel
@@ -0,0 +1,4 @@
+export const githubUrl = 'https://www.github.com/cpvalente/ontime';
+export const apiRepoLatest = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
+
+export const gitbookUrl = 'https://cpvalente.gitbook.io';
@@ -4,6 +4,7 @@ import { Box, useDisclosure } from '@chakra-ui/react';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import UploadModal from '../../common/components/upload-modal/UploadModal';
 import MenuBar from '../menu/MenuBar';
+import AboutModal from '../modals/about-modal/AboutModal';
 import IntegrationModal from '../modals/integration-modal/IntegrationModal';
 import ModalManager from '../modals/ModalManager';

@@ -23,6 +24,7 @@ export default function Editor() {
    onOpen: onIntegrationModalOpen,
    onClose: onIntegrationModalClose,
  } = useDisclosure();
+  const { isOpen: isAboutModalOpen, onOpen: onAboutModalOpen, onClose: onAboutModalClose } = useDisclosure();

  // Set window title
  useEffect(() => {
@@ -31,9 +33,10 @@ export default function Editor() {

  return (
    <>
-      <UploadModal onClose={onUploadModalClose} isOpen={isUploadModalOpen} />
-      <IntegrationModal onClose={onIntegrationModalClose} isOpen={isIntegrationModalOpen} />
      <ErrorBoundary>
+        <UploadModal onClose={onUploadModalClose} isOpen={isUploadModalOpen} />
+        <IntegrationModal onClose={onIntegrationModalClose} isOpen={isIntegrationModalOpen} />
+        <AboutModal onClose={onAboutModalClose} isOpen={isAboutModalOpen} />
        <ModalManager isOpen={isSettingsOpen} onClose={onSettingsClose} />
      </ErrorBoundary>
      <div className={styles.mainContainer} data-testid='event-editor'>
@@ -47,6 +50,8 @@ export default function Editor() {
              onUploadOpen={onUploadModalOpen}
              isIntegrationOpen={isIntegrationModalOpen}
              onIntegrationOpen={onIntegrationModalOpen}
+              isAboutOpen={isAboutModalOpen}
+              onAboutOpen={onAboutModalOpen}
            />
          </ErrorBoundary>
        </Box>
@@ -25,10 +25,10 @@ interface MenuBarProps {
  onUploadOpen: () => void;
  isIntegrationOpen: boolean;
  onIntegrationOpen: () => void;
+  isAboutOpen: boolean;
+  onAboutOpen: () => void;
 }

-type Actions = 'min' | 'max' | 'shutdown' | 'help';
-
 const buttonStyle = {
  fontSize: '1.5em',
  size: 'lg',
@@ -50,6 +50,8 @@ export default function MenuBar(props: MenuBarProps) {
    onUploadOpen,
    isIntegrationOpen,
    onIntegrationOpen,
+    isAboutOpen,
+    onAboutOpen,
  } = props;
  const { isElectron, sendToElectron } = useElectronEvent();

@@ -58,28 +60,11 @@ export default function MenuBar(props: MenuBarProps) {

  const setRunMode = () => setAppMode(AppMode.Run);
  const setEditMode = () => setAppMode(AppMode.Edit);
-
-  const actionHandler = useCallback(
-    (action: Actions) => {
-      if (!isElectron) {
-        if (action === 'help') {
-          window.open('https://cpvalente.gitbook.io/ontime/');
-        }
-      } else {
-        switch (action) {
-          case 'shutdown':
-            sendToElectron('shutdown', 'now');
-            break;
-          case 'help':
-            sendToElectron('send-to-link', 'help');
-            break;
-          default:
-            break;
-        }
-      }
-    },
-    [sendToElectron, isElectron],
-  );
+  const sendShutdown = () => {
+    if (isElectron) {
+      sendToElectron('shutdown', 'now');
+    }
+  };

  // Handle keyboard shortcuts
  const handleKeyPress = useCallback(
@@ -112,7 +97,7 @@ export default function MenuBar(props: MenuBarProps) {

  return (
    <VStack>
-      <QuitIconBtn clickHandler={() => actionHandler('shutdown')} />
+      <QuitIconBtn disabled={!isElectron} clickHandler={sendShutdown} />

      <div className={style.gap} />
      <TooltipActionBtn
@@ -169,10 +154,11 @@ export default function MenuBar(props: MenuBarProps) {
      <div className={style.gap} />
      <TooltipActionBtn
        {...buttonStyle}
+        className={isAboutOpen ? style.open : ''}
        icon={<IoHelpCircleOutline />}
-        clickHandler={() => actionHandler('help')}
-        tooltip='Help'
-        aria-label='Help'
+        clickHandler={onAboutOpen}
+        tooltip='About'
+        aria-label='About'
      />
    </VStack>
  );
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import {
-  Button,
  Checkbox,
  FormControl,
  FormLabel,
@@ -17,8 +16,7 @@ import { FiX } from '@react-icons/all-files/fi/FiX';

 import { useEmitLog } from '@/common/stores/logger';

-import { version } from '../../../package.json';
-import { getLatestVersion, postSettings } from '../../common/api/ontimeApi';
+import { postSettings } from '../../common/api/ontimeApi';
 import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
 import useSettings from '../../common/hooks-query/useSettings';
 import { ontimePlaceholderSettings } from '../../common/models/OntimeSettings';
@@ -42,9 +40,6 @@ export default function AppSettingsModal() {

  const [formSettings, setFormSettings] = useState(eventSettings);

-  const [updateMessage, setUpdateMessage] = useState(<a>Using ontime version: {version}</a>);
-  const [isFetching, setIsFetching] = useState(false);
-
  /**
   * Set formdata from server state
   */
@@ -55,9 +50,6 @@ export default function AppSettingsModal() {
      pinCode: data.pinCode,
      timeFormat: data.timeFormat,
    });
-    // getLatestVersion().then((data) => {
-    //   setVersionData(data);
-    // });
  }, [changed, data]);

  /**
@@ -137,32 +129,6 @@ export default function AppSettingsModal() {
    setChanged(true);
  };

-  /**
-   * Handles version comparison and returns component with message
-   */
-  const versionCheck = async () => {
-    let message = <a>Using latest version</a>;
-    setIsFetching(true);
-    getLatestVersion()
-      .then((data) => {
-        const remoteVersion = data;
-        if (!remoteVersion.version.includes(version)) {
-          message = (
-            <a href={remoteVersion.url} target='_blank' rel='noreferrer'>
-              Update to version {remoteVersion.version} available
-            </a>
-          );
-        }
-      })
-      .catch(function () {
-        message = <a>Error reaching server</a>;
-      })
-      .finally(function () {
-        setUpdateMessage(message);
-        setIsFetching(false);
-      });
-  };
-
  const disableModal = status !== 'success';

  return (
@@ -283,12 +249,6 @@ export default function AppSettingsModal() {
              Event default public
            </Checkbox>
          </div>
-          <div className={style.notes}>
-            {updateMessage}
-            <Button onClick={versionCheck} isLoading={isFetching}>
-              Check for updates
-            </Button>
-          </div>
        </div>
        <SubmitContainer revert={revert} submitting={submitting} changed={changed} status={status} />
      </form>
@@ -1,7 +1,17 @@
@use '../../theme/v2Styles' as *;
@use '../../theme/ontimeColours' as *;

-.headerNotes {
+@mixin modal-link {
+  color: $blue-500;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+  }
+}
+
+.headerNotes  {
  font-size: $text-body-size;
  width: 100%;
  padding: 0 $section-spacing;
@@ -10,13 +20,7 @@

  a {
    display: block;
-    color: $blue-500;
-    transition-property: color;
-    transition-duration: $transition-time-action;
-
-    &:hover {
-      color: $ontime-color;
-    }
+    @include modal-link
  }
 }

@@ -97,4 +101,33 @@

 .showPointer {
  cursor: pointer;
+}
+
+.twoColumn {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.padBottom {
+  padding-bottom: 8px;
+}
+
+.logo {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 16px;
+}
+
+.test {
+  padding-top: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 4px;
+
+  .error {
+    font-size: $error-red;
+  }
 }
@@ -0,0 +1,16 @@
+@use '../../theme/v2Styles' as *;
+@use '../../theme/ontimeColours' as *;
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  color: $blue-500;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+  }
+}
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
+
+import style from './ModalLink.module.scss';
+
+interface ModalLinkProps {
+  href: string;
+  children: ReactNode;
+}
+
+export default function ModalLink(props: ModalLinkProps) {
+  const { href, children } = props;
+  return (
+    <a href={href} target='_blank' rel='noreferrer' className={style.link}>
+      {children} <IoOpenOutline />
+    </a>
+  );
+}
@@ -5,10 +5,11 @@ interface ModalWrapperProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
+  size?: string;
 }

 export default function ModalWrapper(props: PropsWithChildren<ModalWrapperProps>) {
-  const { isOpen, onClose, title, children } = props;
+  const { isOpen, onClose, title, size = 'xl', children } = props;

  return (
    <Modal
@@ -16,7 +17,7 @@ export default function ModalWrapper(props: PropsWithChildren<ModalWrapperProps>
      isOpen={isOpen}
      closeOnOverlayClick={false}
      motionPreset='slideInBottom'
-      size='xl'
+      size={size}
      scrollBehavior='inside'
      preserveScrollBarGap
      variant='ontime'
@@ -1,6 +1,8 @@
@use '../../theme/ontimeColours' as *;
@use '../../theme/v2Styles' as *;

+// style file to be deprecated
+
 //////////////////////////////////// main

 .modalBody {
@@ -0,0 +1,68 @@
+import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+
+import { ReactComponent as OntimeLogo } from '@/assets/images/ontime-logo.svg';
+
+import { version } from '../../../../package.json';
+import { gitbookUrl, githubUrl } from '../../../externals';
+import ModalLink from '../ModalLink';
+
+import UpdateChecker from './UpdateChecker';
+
+import styles from '../Modal.module.scss';
+
+interface AboutModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function AboutModal(props: AboutModalProps) {
+  const { isOpen, onClose } = props;
+
+  return (
+    <Modal
+      size='sm'
+      isOpen={isOpen}
+      onClose={onClose}
+      closeOnOverlayClick={false}
+      motionPreset='slideInBottom'
+      scrollBehavior='inside'
+      preserveScrollBarGap
+      variant='ontime-small'
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          About Ontime
+          <ModalCloseButton />
+        </ModalHeader>
+
+        <ModalBody className={styles.body}>
+          <div className={styles.twoColumn}>
+            <OntimeLogo className={styles.logo} />
+            <div>
+              <div className={styles.padBottom}>
+                <span className={styles.sectionTitle}>Ontime</span>
+                Free Open Source Software for managing rundowns and event timers
+                <ModalLink href='www.getontime.no'>www.getontime.no</ModalLink>
+              </div>
+              <div className={styles.padBottom}>
+                <span className={styles.sectionTitle}>Current version</span>
+
+                {`You are currently using Ontime ${version}`}
+              </div>
+              <div className={styles.padBottom}>
+                <span className={styles.sectionTitle}>Docs</span>
+                <ModalLink href={gitbookUrl}>Read the docs over at GitBook</ModalLink>
+              </div>
+              <div>
+                <span className={styles.sectionTitle}>Github</span>
+                <ModalLink href={githubUrl}>Follow the project on GitHub</ModalLink>
+              </div>
+              <UpdateChecker version={version} />
+            </div>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { Button } from '@chakra-ui/react';
+
+import { getLatestVersion, HasUpdate } from '../../../common/api/ontimeApi';
+import ModalLink from '../ModalLink';
+
+import styles from '../Modal.module.scss';
+
+interface UpdateCheckerProps {
+  version: string;
+}
+
+type CheckFail = {
+  error: string;
+};
+
+type CheckIsLatest = {
+  latest: true;
+};
+
+type CheckRemote = CheckFail | CheckIsLatest | HasUpdate;
+
+export default function UpdateChecker(props: UpdateCheckerProps) {
+  const { version } = props;
+  const [updateMessage, setUpdateMessage] = useState<CheckRemote | null>(null);
+  const [isFetching, setIsFetching] = useState(false);
+
+  /**
+   * Handles version comparison and returns component with message
+   */
+  const versionCheck = async () => {
+    setIsFetching(true);
+
+    try {
+      const latest = await getLatestVersion();
+
+      if (!latest.version.includes(version)) {
+        // new version, pass data to component
+        setUpdateMessage(latest);
+      } else {
+        setUpdateMessage({ latest: true });
+      }
+    } catch {
+      setUpdateMessage({ error: 'Error reaching server' });
+    } finally {
+      setIsFetching(false);
+    }
+  };
+
+  const disableButton = Boolean(updateMessage && 'version' in updateMessage);
+
+  return (
+    <div className={styles.test}>
+      <Button onClick={versionCheck} variant='ontime-filled' isLoading={isFetching} isDisabled={disableButton}>
+        Check for updates
+      </Button>
+      <ResolveUpdateMessage updateMessage={updateMessage} />
+    </div>
+  );
+}
+
+function ResolveUpdateMessage(props: { updateMessage: CheckRemote | null }) {
+  const { updateMessage } = props;
+
+  if (updateMessage && 'error' in updateMessage) {
+    return <span className={styles.error}>{updateMessage.error}</span>;
+  }
+  if (updateMessage && 'url' in updateMessage) {
+    return <ModalLink href={updateMessage?.url}>{`New version available: ${updateMessage.version}`}</ModalLink>;
+  }
+  return null;
+}
@@ -20,3 +20,14 @@ export const ontimeModal = {
    color: '#202020', // $gray-50
  },
 };
+
+export const ontimeSmallModal = {
+  ...ontimeModal,
+  body: {
+    padding: '16px',
+    fontSize: '14px',
+  },
+  dialog: {
+    minHeight: 'min(200px, 10vh)',
+  },
+};
@@ -11,7 +11,7 @@ import {
 import { ontimeCheckboxOnDark } from './ontimeCheckbox';
 import { ontimeEditable } from './ontimeEditable';
 import { ontimeMenuOnDark } from './ontimeMenu';
-import { ontimeModal } from './ontimeModal';
+import { ontimeModal, ontimeSmallModal } from './ontimeModal';
 import { ontimeBlockRadio } from './ontimeRadio';
 import { ontimeSelect } from './ontimeSelect';
 import { lightSwitch, ontimeSwitch } from './ontimeSwitch';
@@ -61,9 +61,15 @@ const theme = extendTheme({
        'ontime-filled-on-light': { ...ontimeInputFilledOnLight },
      },
    },
+    Menu: {
+      variants: {
+        'ontime-on-dark': { ...ontimeMenuOnDark },
+      },
+    },
    Modal: {
      variants: {
        ontime: { ...ontimeModal },
+        'ontime-small': { ...ontimeSmallModal },
      },
    },
    Radio: {
@@ -99,11 +105,6 @@ const theme = extendTheme({
        ontime: { ...ontimeSelect },
      },
    },
-    Menu: {
-      variants: {
-        'ontime-on-dark': { ...ontimeMenuOnDark },
-      },
-    },
  },
 });

@@ -6,9 +6,6 @@ module.exports = {
    development: 'http://localhost:3000/editor',
    production: 'http://localhost:4001/editor',
  },
-  externalUrls: {
-    help: 'https://cpvalente.gitbook.io/ontime/',
-  },
  server: {
    pathToEntrypoint: '../extraResources/server/index.cjs'
  },
@@ -234,12 +234,6 @@ ipcMain.on('shutdown', () => {
 // Window manipulation
 ipcMain.on('set-window', (event, arg) => {
  switch (arg) {
-    case 'to-max':
-      win.maximize();
-      break;
-    case 'to-tray':
-      win.hide();
-      break;
    case 'show-dev':
      win.webContents.openDevTools({ mode: 'detach' });
      break;
@@ -250,9 +244,5 @@ ipcMain.on('set-window', (event, arg) => {

 // Open links external
 ipcMain.on('send-to-link', (event, arg) => {
-  if (arg === 'help') {
-    shell.openExternal(electronConfig.externalUrls.help);
-  } else {
-    shell.openExternal(arg);
-  }
+  shell.openExternal(arg);
 });