ofco/medicalalert-web-reloaded
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

plugin updates

Browse Source
This commit is contained in:
Tony Volpe
2024-06-17 15:33:26 -04:00
parent 3751a5a1a6
commit e4e274a9a7
2674 changed files with 0 additions and 507851 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
wp/wp-content/plugins/leadin/scripts/shared/UIComponents/UIAlert.tsx
View File

@@ -1,69 +0,0 @@
import React from 'react';
import { styled } from '@linaria/react';
import { MARIGOLD_LIGHT, MARIGOLD_MEDIUM, OBSIDIAN } from './colors';
const AlertContainer = styled.div`
background-color: ${MARIGOLD_LIGHT};
border-color: ${MARIGOLD_MEDIUM};
color: ${OBSIDIAN};
font-size: 14px;
align-items: center;
justify-content: space-between;
display: flex;
border-style: solid;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-width: 1px;
min-height: 60px;
padding: 8px 20px;
position: relative;
text-align: left;
`;
const Title = styled.p`
font-family: 'Lexend Deca';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
color: ${OBSIDIAN};
margin: 0;
padding: 0;
`;
const Message = styled.p`
font-family: 'Lexend Deca';
font-style: normal;
font-weight: 400;
font-size: 14px;
margin: 0;
padding: 0;
`;
const MessageContainer = styled.div`
display: flex;
flex-direction: column;
`;
interface IUIAlertProps {
titleText: string;
titleMessage: string;
}
export default function UIAlert({
titleText,
titleMessage,
children,
}: React.PropsWithChildren<IUIAlertProps>) {
return (
<AlertContainer>
<MessageContainer>
<Title>{titleText}</Title>
<Message>{titleMessage}</Message>
</MessageContainer>
{children}
</AlertContainer>
);
}

19
wp/wp-content/plugins/leadin/scripts/shared/UIComponents/UIButton.ts
View File

@@ -1,19 +0,0 @@
import { styled } from '@linaria/react';
import { HEFFALUMP, LORAX, OLAF } from './colors';
interface IButtonProps {
use?: string;
}
export default styled.button<IButtonProps>`
background-color:${props => (props.use === 'tertiary' ? HEFFALUMP : LORAX)};
border: 3px solid ${props => (props.use === 'tertiary' ? HEFFALUMP : LORAX)};
color: ${OLAF}
border-radius: 3px;
font-size: 14px;
line-height: 14px;
padding: 12px 24px;
font-family: 'Lexend Deca', Helvetica, Arial, sans-serif;
font-weight: 500;
white-space: nowrap;
`;

9
wp/wp-content/plugins/leadin/scripts/shared/UIComponents/UIContainer.ts
View File

@@ -1,9 +0,0 @@
import { styled } from '@linaria/react';
interface IUIContainerProps {
textAlign?: string;
}
export default styled.div<IUIContainerProps>`
text-align: ${props => (props.textAlign ? props.textAlign : 'inherit')};
`;

14
wp/wp-content/plugins/leadin/scripts/shared/UIComponents/UIOverlay.ts
View File

@@ -1,14 +0,0 @@
import { styled } from '@linaria/react';
export default styled.div`
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
`;

5
wp/wp-content/plugins/leadin/scripts/shared/UIComponents/UISpacer.ts
View File

@@ -1,5 +0,0 @@
import { styled } from '@linaria/react';
export default styled.div`
height: 30px;
`;

78
wp/wp-content/plugins/leadin/scripts/shared/UIComponents/UISpinner.tsx
View File

@@ -1,78 +0,0 @@
import React from 'react';
import { styled } from '@linaria/react';
import { CALYPSO_MEDIUM, CALYPSO } from './colors';
const SpinnerOuter = styled.div`
align-items: center;
color: #00a4bd;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
margin: '2px';
`;
const SpinnerInner = styled.div`
align-items: center;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
`;
interface IColorProp {
color: string;
}
const Circle = styled.circle<IColorProp>`
fill: none;
stroke: ${props => props.color};
stroke-width: 5;
stroke-linecap: round;
transform-origin: center;
`;
const AnimatedCircle = styled.circle<IColorProp>`
fill: none;
stroke: ${props => props.color};
stroke-width: 5;
stroke-linecap: round;
transform-origin: center;
animation: dashAnimation 2s ease-in-out infinite,
spinAnimation 2s linear infinite;
@keyframes dashAnimation {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -50;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -140;
}
}
@keyframes spinAnimation {
transform: rotate(360deg);
}
`;
export default function UISpinner({ size = 20 }) {
return (
<SpinnerOuter>
<SpinnerInner>
<svg height={size} width={size} viewBox="0 0 50 50">
<Circle color={CALYPSO_MEDIUM} cx="25" cy="25" r="22.5" />
<AnimatedCircle color={CALYPSO} cx="25" cy="25" r="22.5" />
</svg>
</SpinnerInner>
</SpinnerOuter>
);
}

9
wp/wp-content/plugins/leadin/scripts/shared/UIComponents/colors.ts
View File

@@ -1,9 +0,0 @@
export const CALYPSO = '#00a4bd';
export const CALYPSO_MEDIUM = '#7fd1de';
export const CALYPSO_LIGHT = '#e5f5f8';
export const LORAX = '#ff7a59';
export const OLAF = '#ffffff';
export const HEFFALUMP = '#425b76';
export const MARIGOLD_LIGHT = '#fef8f0';
export const MARIGOLD_MEDIUM = '#fae0b5';
export const OBSIDIAN = '#33475b';