Skip to content
This repository has been archived by the owner on Sep 19, 2022. It is now read-only.

Alert component #1245

Draft
wants to merge 4 commits into
base: dev
Choose a base branch
from
Draft

Alert component #1245

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d401bab
feat(input-badge): added component
fritzschoff Aug 22, 2022
75f8795
feat(alert): added alert component
fritzschoff Aug 22, 2022
5134f97
feat(alert): added fade in animation
fritzschoff Aug 22, 2022
020a4db
feat(alert): fixed typo in interface
fritzschoff Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions components/Alert/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { InfoIcon } from '@chakra-ui/icons';
import { Container, Fade, Text } from '@chakra-ui/react';

interface AlterProps {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch, thanks

text: string;
}

export default function Alert({ text }: AlterProps) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good start on this. Looking at this design here, it looks like we have primary, secondary, tertiary variants and success, info, warning and error states.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also haven't had a convo with @bachstatter or @noisekit about it, but it would be good by default if we have the option to pass a style object to all our primitives

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah didn't knew that this file existed! I was doing the component based of the burn flow in a different file. Well there is plenty to add here. Will do, thanks!

return (
<Fade in={true}>
<Container
borderLeftWidth={5}
borderLeftStyle="solid"
borderLeftColor="cyan.500"
borderRadius={5}
display="flex"
alignItems="center"
padding={1}
paddingLeft={3}
bg="blue.900"
>
<InfoIcon w={4} h={4} color="cyan.500" marginRight={3} />
<Text fontSize="sm" fontFamily="body">
{text}
</Text>
</Container>
</Fade>
);
}
38 changes: 38 additions & 0 deletions components/InputBadge/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { InfoIcon } from '@chakra-ui/icons';
import { Badge, BadgeProps, Flex, Text } from '@chakra-ui/react';
import { PropsWithChildren } from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';

interface InputBadgeProps {
colorScheme?: BadgeProps['colorScheme'];
text: string;
onClickIcon?: () => void;
onClick?: () => void;
}

export default function InputBadge({
colorScheme,
text,
onClickIcon,
onClick,
}: PropsWithChildren<InputBadgeProps>) {
return (
<StyledAnimatedWrapper animate={{ x: 100 }} transition={{ ease: 'easeOut', duration: 1 }}>
<Badge colorScheme={colorScheme} padding="1.5" onClick={onClick} minW={170}>
<Flex justify="space-between" align="center">
<Text fontSize="xs" color="cyan.500" fontFamily="body">
{text}
</Text>
{onClickIcon && <InfoIcon w={4} h={4} color="cyan.500" onClick={onClickIcon} />}
</Flex>
</Badge>
</StyledAnimatedWrapper>
);
}

const StyledAnimatedWrapper = styled(motion.div)`
min-width: 170px;
border: 1px solid black;
cursor: pointer;
`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comments as on the last PR, lets figure out how to style this without styled components

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed it in the last PR. Will be resolved here as well when merged. This branch is branched off the other one.

1 change: 0 additions & 1 deletion content/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ const InnerApp: FC<AppProps> = ({ Component, pageProps }) => {

const App: FC<AppProps> = (props) => {
const { t } = useTranslation();

return (
<>
<Head>
Expand Down
13 changes: 13 additions & 0 deletions content/BurnPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Head from 'next/head';
import { useTranslation } from 'react-i18next';

export default function BurnDebt() {
const { t } = useTranslation();
return (
<>
<Head>
<title>{t('burn.title')}</title>
</Head>
</>
);
}
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
},
"dependencies": {
"@artsy/fresnel": "^1.8.0",
"@chakra-ui/icons": "^2.0.8",
"@chakra-ui/react": "^2.2.8",
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
Expand Down
9 changes: 9 additions & 0 deletions pages/burn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import dynamic from 'next/dynamic';
import GlobalLoader from 'components/GlobalLoader';

const BurnPage = dynamic(() => import('content/BurnPage'), {
ssr: false,
loading: GlobalLoader,
});

export default BurnPage;
3 changes: 3 additions & 0 deletions translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1542,5 +1542,8 @@
"pools": "pools",
"bridge": "bridge",
"migrate-escrow": "migrate escrow"
},
"burn": {
"title": "Burn Debt"
}
}
13 changes: 13 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1701,6 +1701,18 @@ __metadata:
languageName: node
linkType: hard

"@chakra-ui/icons@npm:^2.0.8":
version: 2.0.8
resolution: "@chakra-ui/icons@npm:2.0.8"
dependencies:
"@chakra-ui/icon": 3.0.8
peerDependencies:
"@chakra-ui/system": ">=2.0.0"
react: ">=18"
checksum: b94a9a2db439d35566874d1c14cec79402b88edd83ce05d8bf962d99550315d87766ae8c277f5e1c4f20672c21d511a1b08f168535ced6e272d84823c84d241a
languageName: node
linkType: hard

"@chakra-ui/image@npm:2.0.9":
version: 2.0.9
resolution: "@chakra-ui/image@npm:2.0.9"
Expand Down Expand Up @@ -14678,6 +14690,7 @@ __metadata:
resolution: "staking@workspace:."
dependencies:
"@artsy/fresnel": ^1.8.0
"@chakra-ui/icons": ^2.0.8
"@chakra-ui/react": ^2.2.8
"@emotion/react": ^11.10.0
"@emotion/styled": ^11.10.0
Expand Down