db73879918
* fix: Logic error in toast fix: Remove useless component * fix: Logout not clearing all stores * Add icons to notification settings * Add eslint rule to enforce spaced comment * Add eslint rule for arrow-body-style * Add eslint rule to enforce self-closing components * Add menu to api key settings Fix: Deleting webhook subscription does not remove from UI Split webhook subscriptions into active and inactive Styling updates
49 lines
893 B
TypeScript
49 lines
893 B
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { s } from "@shared/styles";
|
|
import Flex from "./Flex";
|
|
import Text from "./Text";
|
|
|
|
type Props = {
|
|
icon?: JSX.Element;
|
|
description?: JSX.Element;
|
|
};
|
|
|
|
const Notice: React.FC<Props> = ({ children, icon, description }) => (
|
|
<Container>
|
|
<Flex as="span" gap={8}>
|
|
{icon}
|
|
<span>
|
|
<Title>{children}</Title>
|
|
{description && (
|
|
<>
|
|
<br />
|
|
{description}
|
|
</>
|
|
)}
|
|
</span>
|
|
</Flex>
|
|
</Container>
|
|
);
|
|
|
|
const Title = styled.span`
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
`;
|
|
|
|
const Container = styled(Text)`
|
|
background: ${s("sidebarBackground")};
|
|
color: ${s("sidebarText")};
|
|
padding: 10px 12px;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
font-size: 14px;
|
|
margin: 1em 0 0;
|
|
|
|
svg {
|
|
flex-shrink: 0;
|
|
}
|
|
`;
|
|
|
|
export default Notice;
|