feat: ui for checkbox privacy poilicy

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<CheckoutPrivacyPolicyProps> = ({
+  text,
+}) => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <Container>
+      <StyledCheckbox onClick={() => setIsChecked(!isChecked)}>
+        {!isChecked && <InnerBox />}
+      </StyledCheckbox>
+      <Text>{text}</Text>
+    </Container>
+  );
+};

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';

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<typeof CheckoutPrivacyPolicy> = {
+  component: CheckoutPrivacyPolicy,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    text: "I have read and agree to Cypherock's privacy policy",
+  },
+};

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',