Update schedule view UI

resources/scripts/components/elements/Button.tsx

@@ -57,8 +57,8 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
         `};
     `};
     
-    ${props => props.size === 'xsmall' && tw`p-2 text-xs`};
-    ${props => (!props.size || props.size === 'small') && tw`p-3`};
+    ${props => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
+    ${props => (!props.size || props.size === 'small') && tw`px-4 py-2`};
     ${props => props.size === 'large' && tw`p-4 text-sm`};
     ${props => props.size === 'xlarge' && tw`p-4 w-full`};
     

resources/scripts/components/elements/Icon.tsx

@@ -0,0 +1,31 @@
+import React, { CSSProperties } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import tw from 'twin.macro';
+
+interface Props {
+    icon: IconDefinition;
+    className?: string;
+    style?: CSSProperties;
+}
+
+const Icon = ({ icon, className, style }: Props) => {
+    let [ width, height, , , paths ] = icon.icon;
+
+    paths = Array.isArray(paths) ? paths : [ paths ];
+
+    return (
+        <svg
+            xmlns={'http://www.w3.org/2000/svg'}
+            viewBox={`0 0 ${width} ${height}`}
+            css={tw`fill-current inline-block`}
+            className={className}
+            style={style}
+        >
+            {paths.map((path, index) => (
+                <path key={`svg_path_${index}`} d={path}/>
+            ))}
+        </svg>
+    );
+};
+
+export default Icon;

resources/scripts/components/elements/Modal.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Spinner from '@/components/elements/Spinner';
 import tw from 'twin.macro';
 import styled, { css } from 'styled-components/macro';
 import { breakpoint } from '@/theme';
 import Fade from '@/components/elements/Fade';
+import { createPortal } from 'react-dom';
 
 export interface RequiredModalProps {
     visible: boolean;
@@ -124,4 +125,10 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
     );
 };
 
-export default Modal;
+const PortaledModal: React.FC<ModalProps> = ({ children, ...props }) => {
+    const element = useRef(document.getElementById('modal-portal'));
+
+    return createPortal(<Modal {...props}>{children}</Modal>, element.current!);
+};
+
+export default PortaledModal;