diff --git a/client/packages/components/src/components/app-group/AppGroup.tsx b/client/packages/components/src/components/app-group/AppGroup.tsx index 897adffd2..02a75ccf1 100644 --- a/client/packages/components/src/components/app-group/AppGroup.tsx +++ b/client/packages/components/src/components/app-group/AppGroup.tsx @@ -54,7 +54,6 @@ export const Styles = { margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0; - /* gap: 1rem; */ `, }; @@ -72,7 +71,7 @@ export const AppGroup = ({ group, onFavorite, dark, onClick }: AppGroupProps) => return ( - + {group.name} diff --git a/client/packages/service-message/components/ServiceMessageCard.tsx b/client/packages/service-message/components/ServiceMessageCard.tsx index 18a582728..7039764cb 100644 --- a/client/packages/service-message/components/ServiceMessageCard.tsx +++ b/client/packages/service-message/components/ServiceMessageCard.tsx @@ -1,65 +1,87 @@ -import { Button, Card, Icon } from "@equinor/eds-core-react"; -import { tokens } from "@equinor/eds-tokens"; +import { Button, Card, Icon } from '@equinor/eds-core-react'; +import { tokens } from '@equinor/eds-tokens'; +import { FC, useRef, useState } from 'react'; +import styled from 'styled-components'; +import { ServiceMessage } from '../types/types'; -import { FC, useRef, useState } from "react"; -import styled from "styled-components"; -import { ServiceMessage } from "../types/types" - -import MarkdownViewer from "./MarkdownViewer"; -import { StyledCard, StyledCardIndicator, StyledContentWrapper, StyledHeader, StyledHeaderItem, StyledHeaderWrapper, StyledTime } from "./ServiceMessageCardStyles"; -import { TimeStamp } from "./TimeStamp"; - +import MarkdownViewer from './MarkdownViewer'; +import { + StyledCard, + StyledCardIndicator, + StyledContentWrapper, + StyledHeader, + StyledHeaderItem, + StyledHeaderWrapper, + StyledTime, +} from './ServiceMessageCardStyles'; +import { TimeStamp } from './TimeStamp'; const StyledContent = styled(Card.Content)``; -const getIconVariant = (type: "Issue" | "Maintenance" | "Info") => { - const variant = { - Issue: { name: "warning_filled", color: tokens.colors.interactive.danger__resting.rgba }, - Maintenance: { name: "error_filled", color: tokens.colors.interactive.warning__resting.rgba }, - Info: { name: "error_filled", color: tokens.colors.infographic.primary__moss_green_100.rgba } - } - return variant[type] -} - -const getIconName = (active: boolean) => active ? "chevron_up" : "chevron_down" - - -export const ServiceMessageCard: FC<{ message: ServiceMessage, onClose?: VoidFunction, compact?: boolean }> = ({ message, onClose, compact = true }) => { - const variant = getIconVariant(message.type); - const [showContent, setShowContent] = useState(compact || message.type === "Issue" && message.content !== null); - const ref = useRef(null); +const getIconVariant = (type: 'Issue' | 'Maintenance' | 'Info') => { + const variant = { + Issue: { name: 'warning_filled', color: tokens.colors.interactive.danger__resting.rgba }, + Maintenance: { name: 'error_filled', color: tokens.colors.interactive.warning__resting.rgba }, + Info: { name: 'error_filled', color: tokens.colors.infographic.primary__moss_green_100.rgba }, + }; + return variant[type]; +}; - return ( - - - - - - {message.title} - - - - - - - {onClose ? : } - +const getIconName = (active: boolean) => (active ? 'chevron_up' : 'chevron_down'); - +export const ServiceMessageCard: FC<{ message: ServiceMessage; onClose?: VoidFunction; compact?: boolean }> = ({ + message, + onClose, + compact = true, +}) => { + const variant = getIconVariant(message.type); + const [showContent, setShowContent] = useState(compact || (message.type === 'Issue' && message.content !== null)); + const ref = useRef(null); - {showContent && message.content && - - - - } + return ( + + + + + + + + {message.title} + + + + + + + {onClose ? ( + + ) : ( + + )} + + - - ) -} \ No newline at end of file + {showContent && message.content && ( + + + + )} + + + ); +};