Update schedule page

resources/scripts/components/elements/ConfirmationModal.tsx

@@ -18,7 +18,7 @@ const ConfirmationModal = ({ title, appear, children, visible, buttonText, onCon
         showSpinnerOverlay={showSpinnerOverlay}
         onDismissed={() => onDismissed()}
     >
-        <h3 css={tw`mb-6`}>{title}</h3>
+        <h2 css={tw`text-2xl mb-6`}>{title}</h2>
         <p css={tw`text-sm`}>{children}</p>
         <div css={tw`flex items-center justify-end mt-8`}>
             <Button isSecondary onClick={() => onDismissed()}>

resources/scripts/components/elements/Select.tsx

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components/macro';
+import tw from 'twin.macro';
+
+interface Props {
+    hideDropdownArrow?: boolean;
+}
+
+const Select = styled.select<Props>`
+    ${tw`shadow-none block p-3 pr-8 rounded border w-full text-sm transition-colors duration-150 ease-linear`};
+
+    &, &:hover:not(:disabled), &:focus {
+        ${tw`outline-none`};
+    }
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-size: 1rem;
+    background-repeat: no-repeat;
+    background-position-x: calc(100% - 0.75rem);
+    background-position-y: center;
+
+    &::-ms-expand {
+        display: none;
+    }
+    
+    ${props => !props.hideDropdownArrow && css`
+        ${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
+    
+        &:hover:not(:disabled), &:focus {
+            ${tw`border-neutral-400`};
+        }
+    `};
+`;
+
+export default Select;

resources/scripts/components/elements/Switch.tsx

@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components/macro';
 import v4 from 'uuid/v4';
 import tw from 'twin.macro';
+import Label from '@/components/elements/Label';
+import Input from '@/components/elements/Input';
 
 const ToggleContainer = styled.div`
     ${tw`relative select-none w-12 leading-normal`};
@@ -50,7 +52,7 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
         <div css={tw`flex items-center`}>
             <ToggleContainer css={tw`flex-none`}>
                 {children
-                || <input
+                || <Input
                     id={uuid}
                     name={name}
                     type={'checkbox'}
@@ -58,21 +60,20 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
                     defaultChecked={defaultChecked}
                 />
                 }
-                <label htmlFor={uuid}/>
+                <Label htmlFor={uuid}/>
             </ToggleContainer>
             {(label || description) &&
             <div css={tw`ml-4 w-full`}>
                 {label &&
-                <label
+                <Label
                     css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
-                    className={'input-dark-label'}
                     htmlFor={uuid}
                 >
                     {label}
-                </label>
+                </Label>
                 }
                 {description &&
-                <p className={'input-help'}>
+                <p css={tw`text-neutral-400 text-sm mt-2`}>
                     {description}
                 </p>
                 }