+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+
setPopoverOpen(!popoverOpen)}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
- elevation={hovered ? 4 : 1}
- className={classnames(classes.event, {
- [classes.passed]: isPassed(event),
+ className={classnames(styles.event, {
+ [styles.passed]: isPassed(event),
+ [styles.hovered]: hovered,
})}
data-testid="microsoft-calendar-event"
>
-
-
-
+
+
{event.subject}
-
+
{!isAllDay(event) && (
-
+
{getTimePeriod(event)}
-
+
)}
-
+
{event.isOnlineMeeting && (
-
+
{
e.stopPropagation();
}}
noTrack
>
- {/* we can use onlineMeetingProvider to show icon accordingly */}
![]()
{
alt="Online Meeting link"
/>
-
+ Join Online Meeting
+
)}
-
+
-
-
-
-
+ {popoverOpen && (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
e.stopPropagation()}>
+
+
+ )}
+ {popoverOpen && (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
setPopoverOpen(false)}
+ />
+ )}
+
);
};
diff --git a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.module.css b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.module.css
new file mode 100644
index 00000000000..0e62a676bd1
--- /dev/null
+++ b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.module.css
@@ -0,0 +1,43 @@
+@layer components {
+ .container {
+ display: flex;
+ flex-direction: column;
+ width: 400px;
+ padding: var(--bui-space-3);
+ gap: var(--bui-space-2);
+ }
+
+ .header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: var(--bui-space-2);
+ }
+
+ .headerContent {
+ display: flex;
+ flex-direction: column;
+ gap: var(--bui-space-1);
+ flex: 1;
+ }
+
+ .description {
+ word-break: break-word;
+ }
+
+ .description a {
+ color: var(--bui-fg-primary);
+ font-weight: 500;
+ text-decoration: underline;
+ }
+
+ .divider {
+ height: 1px;
+ background-color: var(--bui-border-neutral);
+ margin: var(--bui-space-3) 0;
+ }
+
+ .attendeeGap {
+ height: var(--bui-space-2);
+ }
+}
diff --git a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx
index a7ed2a38d00..ffff14d4e29 100644
--- a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx
+++ b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx
@@ -15,38 +15,16 @@
*/
import { sortBy } from 'lodash';
import DOMPurify from 'dompurify';
+import { TooltipTrigger, Tooltip } from 'react-aria-components';
import { Link } from '@backstage/core-components';
-import Box from '@material-ui/core/Box';
-import Divider from '@material-ui/core/Divider';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import { ButtonIcon, Text } from '@backstage/ui';
+import { RiArrowRightSLine } from '@remixicon/react';
import { AttendeeChip } from './AttendeeChip';
import { MicrosoftCalendarEvent } from '../api';
import { getTimePeriod, getOnlineMeetingLink } from './util';
-
-const useStyles = makeStyles(
- theme => ({
- description: {
- wordBreak: 'break-word',
- '& a': {
- color: theme.palette.primary.main,
- fontWeight: 500,
- },
- },
- divider: {
- marginTop: theme.spacing(2),
- marginBottom: theme.spacing(2),
- },
- }),
- {
- name: 'MicrosoftCalendarEventPopoverContent',
- },
-);
+import styles from './CalendarEventPopoverContent.module.css';
type CalendarEventPopoverProps = {
event: MicrosoftCalendarEvent;
@@ -55,31 +33,35 @@ type CalendarEventPopoverProps = {
export const CalendarEventPopoverContent = ({
event,
}: CalendarEventPopoverProps) => {
- const classes = useStyles();
const onlineMeetingLink = getOnlineMeetingLink(event);
return (
-
-
-
- {event.subject}
- {getTimePeriod(event)}
-
+
+
+
+ {event.subject}
+
+ {getTimePeriod(event)}
+
+
{event.webLink && (
-
+
{}}
noTrack
>
-
-
-
+ }
+ variant="secondary"
+ aria-label="Open in Calendar"
+ />
-
+
Open in Calendar
+
)}
-
+
{onlineMeetingLink && (
{}} noTrack>
Join Online Meeting
@@ -88,9 +70,9 @@ export const CalendarEventPopoverContent = ({
{event.bodyPreview && (
<>
-
-
+
-
-
- Attendees
-
+
+
+
+ Attendees
+
+
{sortBy(event.attendees || [], 'emailAddress').map(user => (
))}
-
+
+
);
};
diff --git a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarSelect.module.css b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarSelect.module.css
new file mode 100644
index 00000000000..75b90ebfade
--- /dev/null
+++ b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarSelect.module.css
@@ -0,0 +1,37 @@
+@layer components {
+ .select {
+ width: 120px;
+ padding: var(--bui-space-2);
+ border: 1px solid var(--bui-border-neutral);
+ border-radius: var(--bui-radius-1);
+ background-color: var(--bui-bg-surface-1);
+ color: var(--bui-fg-primary);
+ font-size: inherit;
+ font-family: inherit;
+ cursor: pointer;
+ transition: border-color 150ms ease-in-out,
+ background-color 150ms ease-in-out;
+ }
+
+ .select:hover:not(:disabled) {
+ border-color: var(--bui-border-emphasis);
+ }
+
+ .select:focus {
+ outline: none;
+ border-color: var(--bui-fg-primary);
+ box-shadow: 0 0 0 2px rgba(var(--bui-fg-primary-rgb), 0.1);
+ }
+
+ .select:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ background-color: var(--bui-bg-surface-1);
+ }
+
+ .select option {
+ padding: var(--bui-space-2);
+ background-color: var(--bui-bg-surface-1);
+ color: var(--bui-fg-primary);
+ }
+}
diff --git a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarSelect.tsx b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarSelect.tsx
index 64a6ea394f3..b8a192d863a 100644
--- a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarSelect.tsx
+++ b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/CalendarSelect.tsx
@@ -14,31 +14,8 @@
* limitations under the License.
*/
import { sortBy } from 'lodash';
-
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControl from '@material-ui/core/FormControl';
-import Input from '@material-ui/core/Input';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
import { MicrosoftCalendar } from '../api';
-
-const useStyles = makeStyles(
- {
- formControl: {
- width: 120,
- },
- selectedCalendars: {
- textOverflow: 'ellipsis',
- overflow: 'hidden',
- },
- },
- {
- name: 'MicrosoftCalendarSelect',
- },
-);
+import styles from './CalendarSelect.module.css';
type CalendarSelectProps = {
disabled: boolean;
@@ -53,37 +30,18 @@ export const CalendarSelect = ({
setSelectedCalendarId,
calendars,
}: CalendarSelectProps) => {
- const classes = useStyles();
return (
-
-
-
+
);
};
diff --git a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/SignInContent.module.css b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/SignInContent.module.css
new file mode 100644
index 00000000000..5eaf5ffee72
--- /dev/null
+++ b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/SignInContent.module.css
@@ -0,0 +1,24 @@
+@layer components {
+ .container {
+ position: relative;
+ height: 100%;
+ width: 100%;
+ }
+
+ .mockContent {
+ opacity: 0.3;
+ filter: blur(1.5px);
+ padding: var(--bui-space-1);
+ }
+
+ .overlay {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+}
diff --git a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/SignInContent.tsx b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/SignInContent.tsx
index b34bee62300..6c080194f33 100644
--- a/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/SignInContent.tsx
+++ b/workspaces/microsoft-calendar/plugins/microsoft-calendar/src/components/SignInContent.tsx
@@ -14,51 +14,30 @@
* limitations under the License.
*/
-import type { MouseEventHandler } from 'react';
-import Box from '@material-ui/core/Box';
-import Button from '@material-ui/core/Button';
-import { styled } from '@material-ui/core/styles';
+import { Button } from '@backstage/ui';
import { CalendarEvent } from './CalendarEvent';
import mockEvents from './eventMock.json';
import { MicrosoftCalendarEvent } from '../api';
+import styles from './SignInContent.module.css';
type Props = {
- handleAuthClick: MouseEventHandler
;
+ handleAuthClick: (e: any) => void;
};
-const TransparentBox = styled(Box)({
- opacity: 0.3,
- filter: 'blur(1.5px)',
-});
-
export const SignInContent = ({ handleAuthClick }: Props) => {
return (
-
-
+
+
{(mockEvents as MicrosoftCalendarEvent[]).map(event => (
))}
-
+
-
- 
-
+
{isSignedIn ? (
<>
-