diff --git a/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx new file mode 100644 index 000000000..9c03b8956 --- /dev/null +++ b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx @@ -0,0 +1,62 @@ +import React, { useState } from 'react'; +import { styled } from 'styled-components'; +import { colors } from '../../themes/color.styled'; + +const Container = styled.div` + display: flex; + align-items: center; +`; + +const InnerBox = styled.div` + width: 12px; + height: 12px; + z-index: 10; + border-radius: 3px; + background-color: ${colors.background.checkBoxInner}; +`; + +const StyledCheckbox = styled.div` + width: 12px; + height: 12px; + border: 1.5px solid transparent; + border-radius: 3px; + overflow: hidden; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + background: ${colors.gradients.golden}; + &:hover { + border-color: ${colors.border.checkBoxHover}; + } +`; + +const Text = styled.div` + margin-left: 8px; + font-family: Poppins; + font-size: 14px; + font-weight: 400; + line-height: 21px; + letter-spacing: 0.05em; + text-align: left; + color: ${colors.text.muted}; +`; + +interface CheckoutPrivacyPolicyProps { + text: string; +} + +export const CheckoutPrivacyPolicy: React.FC = ({ + text, +}) => { + const [isChecked, setIsChecked] = useState(false); + + return ( + + setIsChecked(!isChecked)}> + {!isChecked && } + + {text} + + ); +}; diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts index 5890307f7..3f8f66eb6 100644 --- a/packages/ui/src/components/molecules/index.ts +++ b/packages/ui/src/components/molecules/index.ts @@ -40,4 +40,5 @@ export * from './Topbar'; export * from './UpdateBar'; export * from './WallectConnect'; export * from './WalletDialogMainContainer'; +export * from './CheckoutPrivacyPolicy'; export * from './SimpleJsonView'; diff --git a/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx b/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx new file mode 100644 index 000000000..3c357e0f7 --- /dev/null +++ b/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { CheckoutPrivacyPolicy } from '../../components'; + +const meta: Meta = { + component: CheckoutPrivacyPolicy, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + text: "I have read and agree to Cypherock's privacy policy", + }, +}; diff --git a/packages/ui/src/themes/color.styled.ts b/packages/ui/src/themes/color.styled.ts index 9ae764c25..25a071fa8 100644 --- a/packages/ui/src/themes/color.styled.ts +++ b/packages/ui/src/themes/color.styled.ts @@ -82,6 +82,7 @@ export const colors = { filterItem: `#1F1C19`, calendar: '#342F2C', calendarHeader: '#211C18', + checkBoxInner: '#1e1e1e', }, border: { popup: '#2C2520', @@ -108,6 +109,7 @@ export const colors = { subMenuLeft: '#534B44', topbar: '#342C26', card: '#534A44', + checkBoxHover: '#aaa', }, shadow: { dropdown: '#0f0d0b',