From a04e06be757008c83d98c832d39fb8c909212844 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Thu, 18 Apr 2024 20:01:30 +0530 Subject: [PATCH 1/7] feat: fixes --- .changeset/flat-ways-fly.md | 6 ++ .../cysync-core/src/dialogs/HistoryDialog.tsx | 1 + .../Password/ChangePassword/context/index.tsx | 2 +- .../Password/RemovePassword/context/index.tsx | 2 +- .../Password/SetPassword/context/index.tsx | 2 +- .../src/dialogs/Send/Dialogs/Recipient.tsx | 5 +- .../atoms/CheckoutPrivacyPolicy.tsx | 61 +++++++++++++++++++ packages/ui/src/components/atoms/index.ts | 1 + .../stories/atoms/CheckoutPrivacyPolicy.tsx | 16 +++++ .../Layouts/OnboardingLayout.stories.tsx | 1 + 10 files changed, 92 insertions(+), 5 deletions(-) create mode 100644 .changeset/flat-ways-fly.md create mode 100644 packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx create mode 100644 packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.tsx diff --git a/.changeset/flat-ways-fly.md b/.changeset/flat-ways-fly.md new file mode 100644 index 000000000..753c751ee --- /dev/null +++ b/.changeset/flat-ways-fly.md @@ -0,0 +1,6 @@ +--- +'@cypherock/cysync-ui': patch +'@cypherock/cysync-desktop': patch +--- + +ui checkbox privacy policy component for inheritance diff --git a/packages/cysync-core/src/dialogs/HistoryDialog.tsx b/packages/cysync-core/src/dialogs/HistoryDialog.tsx index 64a754dce..f0c3e86cd 100644 --- a/packages/cysync-core/src/dialogs/HistoryDialog.tsx +++ b/packages/cysync-core/src/dialogs/HistoryDialog.tsx @@ -40,6 +40,7 @@ import { useAppDispatch, useAppSelector, } from '~/store'; + import { LoaderDialog } from '../components'; export interface IHistoryDialogProps { diff --git a/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx index 156413c6f..a5cad5db0 100644 --- a/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx @@ -18,8 +18,8 @@ import { useAppSelector, } from '~/store'; import { validatePassword } from '~/utils'; - import logger from '~/utils/logger'; + import { ChangePasswordSuccess, CreateNewPassword } from '../Dialogs'; export interface ChangePasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx index 8d8bdac6c..ce237301d 100644 --- a/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx @@ -17,8 +17,8 @@ import { useAppDispatch, useAppSelector, } from '~/store'; - import logger from '~/utils/logger'; + import { ConfirmPassword, RemovePasswordSuccess } from '../Dialogs'; export interface RemovePasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx index 4270ebc0d..04e6d0ab6 100644 --- a/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx @@ -18,8 +18,8 @@ import { useAppSelector, } from '~/store'; import { validatePassword } from '~/utils'; - import logger from '~/utils/logger'; + import { AddPassword, SetPasswordSuccess } from '../Dialogs'; export interface SetPasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx b/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx index 4aa2935c4..8d7c10c40 100644 --- a/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx +++ b/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx @@ -19,11 +19,12 @@ import React, { useCallback, useEffect, useState } from 'react'; import { LoaderDialog } from '~/components'; import { selectLanguage, useAppSelector } from '~/store'; - import logger from '~/utils/logger'; -import { useSendDialog } from '../context'; + import { AddressAndAmountSection, FeeSection } from './Components'; +import { useSendDialog } from '../context'; + export const Recipient: React.FC = () => { const { onNext, diff --git a/packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx b/packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx new file mode 100644 index 000000000..6ea50279f --- /dev/null +++ b/packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import { styled } from 'styled-components'; + +export const CheckoutPrivacyPolicy = () => { + const [isChecked, setIsChecked] = useState(false); + + 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: #1e1e1e; + `; + + 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: linear-gradient( + 90deg, + #e9b873 0.19%, + #fedd8f 37.17%, + #b78d51 100.19% + ); + &:hover { + border-color: #aaa; + } + `; + + const Text = styled.div` + margin-left: 10px; + font-family: Poppins; + font-size: 14px; + font-weight: 400; + line-height: 21px; + letter-spacing: 0.05em; + text-align: left; + color: #8b8682; + `; + + return ( + + setIsChecked(!isChecked)}> + {' '} + {!isChecked && }{' '} + + I have read and agree to Cypherock's privacy policy + + ); +}; diff --git a/packages/ui/src/components/atoms/index.ts b/packages/ui/src/components/atoms/index.ts index 1636f66d9..bec3ba806 100644 --- a/packages/ui/src/components/atoms/index.ts +++ b/packages/ui/src/components/atoms/index.ts @@ -33,3 +33,4 @@ export * from './MainAppStyles'; export * from './Tooltip'; export * from './Video'; export * from './AdvanceTextDiaplay'; +export * from './CheckoutPrivacyPolicy'; diff --git a/packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.tsx b/packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.tsx new file mode 100644 index 000000000..a6e0853e6 --- /dev/null +++ b/packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.tsx @@ -0,0 +1,16 @@ +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: {}, +}; diff --git a/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx b/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx index 785d6e1b9..5f8944c07 100644 --- a/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx +++ b/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; + import { LogoOutlinedAsideImage } from '../../../assets'; import { OnboardingLayout } from '../../../components'; From 898d2913683ac6621f97811142d890f51a05e3dd Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Wed, 5 Jun 2024 22:16:00 +0530 Subject: [PATCH 2/7] feat: pr review changes --- .../atoms/CheckoutPrivacyPolicy.tsx | 86 +++++++++---------- ....tsx => CheckoutPrivacyPolicy.stories.tsx} | 0 2 files changed, 43 insertions(+), 43 deletions(-) rename packages/ui/src/stories/atoms/{CheckoutPrivacyPolicy.tsx => CheckoutPrivacyPolicy.stories.tsx} (100%) diff --git a/packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx b/packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx index 6ea50279f..dbc404c17 100644 --- a/packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx +++ b/packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx @@ -1,53 +1,53 @@ import React, { useState } from 'react'; import { styled } from 'styled-components'; -export const CheckoutPrivacyPolicy = () => { - const [isChecked, setIsChecked] = useState(false); +const Container = styled.div` + display: flex; + align-items: center; +`; - 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: #1e1e1e; +`; - const InnerBox = styled.div` - width: 12px; - height: 12px; - z-index: 10; - border-radius: 3px; - background-color: #1e1e1e; - `; +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: linear-gradient( + 90deg, + #e9b873 0.19%, + #fedd8f 37.17%, + #b78d51 100.19% + ); + &:hover { + border-color: #aaa; + } +`; - 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: linear-gradient( - 90deg, - #e9b873 0.19%, - #fedd8f 37.17%, - #b78d51 100.19% - ); - &:hover { - border-color: #aaa; - } - `; +const Text = styled.div` + margin-left: 10px; + font-family: Poppins; + font-size: 14px; + font-weight: 400; + line-height: 21px; + letter-spacing: 0.05em; + text-align: left; + color: #8b8682; +`; - const Text = styled.div` - margin-left: 10px; - font-family: Poppins; - font-size: 14px; - font-weight: 400; - line-height: 21px; - letter-spacing: 0.05em; - text-align: left; - color: #8b8682; - `; +export const CheckoutPrivacyPolicy = () => { + const [isChecked, setIsChecked] = useState(false); return ( diff --git a/packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.tsx b/packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.stories.tsx similarity index 100% rename from packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.tsx rename to packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.stories.tsx From d8c628ee4218c91a0be29b759275f031add23d16 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Fri, 28 Jun 2024 17:25:27 +0530 Subject: [PATCH 3/7] feat: pr review changes --- packages/ui/src/components/atoms/index.ts | 1 - .../components/{atoms => molecules}/CheckoutPrivacyPolicy.tsx | 0 packages/ui/src/components/molecules/index.ts | 1 + .../{atoms => molecules}/CheckoutPrivacyPolicy.stories.tsx | 1 - 4 files changed, 1 insertion(+), 2 deletions(-) rename packages/ui/src/components/{atoms => molecules}/CheckoutPrivacyPolicy.tsx (100%) rename packages/ui/src/stories/{atoms => molecules}/CheckoutPrivacyPolicy.stories.tsx (99%) diff --git a/packages/ui/src/components/atoms/index.ts b/packages/ui/src/components/atoms/index.ts index bec3ba806..1636f66d9 100644 --- a/packages/ui/src/components/atoms/index.ts +++ b/packages/ui/src/components/atoms/index.ts @@ -33,4 +33,3 @@ export * from './MainAppStyles'; export * from './Tooltip'; export * from './Video'; export * from './AdvanceTextDiaplay'; -export * from './CheckoutPrivacyPolicy'; diff --git a/packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx similarity index 100% rename from packages/ui/src/components/atoms/CheckoutPrivacyPolicy.tsx rename to packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts index 242f21b15..c6b0489c7 100644 --- a/packages/ui/src/components/molecules/index.ts +++ b/packages/ui/src/components/molecules/index.ts @@ -39,3 +39,4 @@ export * from './Topbar'; export * from './UpdateBar'; export * from './WallectConnect'; export * from './WalletDialogMainContainer'; +export * from './CheckoutPrivacyPolicy'; diff --git a/packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.stories.tsx b/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx similarity index 99% rename from packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.stories.tsx rename to packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx index a6e0853e6..76051ee41 100644 --- a/packages/ui/src/stories/atoms/CheckoutPrivacyPolicy.stories.tsx +++ b/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from '@storybook/react'; - import { CheckoutPrivacyPolicy } from '../../components'; const meta: Meta = { From 04208971e0f78bc29c9d7238394fae403b8af76f Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Fri, 28 Jun 2024 17:55:06 +0530 Subject: [PATCH 4/7] feat: removed changeset --- .changeset/flat-ways-fly.md | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 .changeset/flat-ways-fly.md diff --git a/.changeset/flat-ways-fly.md b/.changeset/flat-ways-fly.md deleted file mode 100644 index 753c751ee..000000000 --- a/.changeset/flat-ways-fly.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@cypherock/cysync-ui': patch -'@cypherock/cysync-desktop': patch ---- - -ui checkbox privacy policy component for inheritance From f3294a733ebb130f481ad1a57b41789dda75db08 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Wed, 3 Jul 2024 00:14:21 +0530 Subject: [PATCH 5/7] feat: code clean --- .../components/molecules/CheckoutPrivacyPolicy.tsx | 13 +++++++++---- .../molecules/CheckoutPrivacyPolicy.stories.tsx | 4 +++- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx index dbc404c17..7eba4ba10 100644 --- a/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx +++ b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx @@ -46,16 +46,21 @@ const Text = styled.div` color: #8b8682; `; -export const CheckoutPrivacyPolicy = () => { +interface CheckoutPrivacyPolicyProps { + text: string; +} + +export const CheckoutPrivacyPolicy: React.FC = ({ + text, +}) => { const [isChecked, setIsChecked] = useState(false); return ( setIsChecked(!isChecked)}> - {' '} - {!isChecked && }{' '} + {!isChecked && } - I have read and agree to Cypherock's privacy policy + {text} ); }; diff --git a/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx b/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx index 76051ee41..3c357e0f7 100644 --- a/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx +++ b/packages/ui/src/stories/molecules/CheckoutPrivacyPolicy.stories.tsx @@ -11,5 +11,7 @@ export default meta; type Story = StoryObj; export const Info: Story = { - args: {}, + args: { + text: "I have read and agree to Cypherock's privacy policy", + }, }; From d3bd3674e2f7da31156e116293242186943ffba8 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Thu, 4 Jul 2024 00:55:45 +0530 Subject: [PATCH 6/7] feat: variable used from theme --- .../components/molecules/CheckoutPrivacyPolicy.tsx | 14 +++++--------- packages/ui/src/themes/color.styled.ts | 2 ++ 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx index 7eba4ba10..d703c2091 100644 --- a/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx +++ b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { styled } from 'styled-components'; +import { colors } from '../../themes/color.styled'; const Container = styled.div` display: flex; @@ -11,7 +12,7 @@ const InnerBox = styled.div` height: 12px; z-index: 10; border-radius: 3px; - background-color: #1e1e1e; + background-color: ${colors.background.checkBoxInner}; `; const StyledCheckbox = styled.div` @@ -24,14 +25,9 @@ const StyledCheckbox = styled.div` align-items: center; text-align: center; justify-content: center; - background: linear-gradient( - 90deg, - #e9b873 0.19%, - #fedd8f 37.17%, - #b78d51 100.19% - ); + background: ${colors.gradients.golden}; &:hover { - border-color: #aaa; + border-color: ${colors.border.checkBoxHover}; } `; @@ -43,7 +39,7 @@ const Text = styled.div` line-height: 21px; letter-spacing: 0.05em; text-align: left; - color: #8b8682; + color: ${colors.text.muted}; `; interface CheckoutPrivacyPolicyProps { 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', From c58cc2ba4b73fcddf6b05168dd1802c3f23d113b Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Wed, 10 Jul 2024 14:08:20 +0530 Subject: [PATCH 7/7] feat: gap fixed --- packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx index d703c2091..9c03b8956 100644 --- a/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx +++ b/packages/ui/src/components/molecules/CheckoutPrivacyPolicy.tsx @@ -32,7 +32,7 @@ const StyledCheckbox = styled.div` `; const Text = styled.div` - margin-left: 10px; + margin-left: 8px; font-family: Poppins; font-size: 14px; font-weight: 400;