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
39 lines
879 B
TypeScript
39 lines
879 B
TypeScript
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import Flex from "./Flex";
|
|
|
|
type Props = {
|
|
size?: number;
|
|
color?: string;
|
|
};
|
|
|
|
const Squircle: React.FC<Props> = ({ color, size = 28, children }) => (
|
|
<Wrapper
|
|
style={{ width: size, height: size }}
|
|
align="center"
|
|
justify="center"
|
|
>
|
|
<svg width={size} height={size} viewBox="0 0 28 28">
|
|
<path
|
|
fill={color}
|
|
d="M0 11.1776C0 1.97285 1.97285 0 11.1776 0H16.8224C26.0272 0 28 1.97285 28 11.1776V16.8224C28 26.0272 26.0272 28 16.8224 28H11.1776C1.97285 28 0 26.0272 0 16.8224V11.1776Z"
|
|
/>
|
|
</svg>
|
|
<Content>{children}</Content>
|
|
</Wrapper>
|
|
);
|
|
|
|
const Wrapper = styled(Flex)`
|
|
position: relative;
|
|
`;
|
|
|
|
const Content = styled.div`
|
|
display: flex;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
`;
|
|
|
|
export default Squircle;
|