update unlock profile modal changes

push-protocol · Jul 29, 2024 · f12bdff · f12bdff
1 parent d912a62
commit f12bdff
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 79 deletions.
diff --git a/src/blocks/modal/Modal.tsx b/src/blocks/modal/Modal.tsx
@@ -8,7 +8,7 @@ import { ModalSize } from './Modal.types';
 type ButtonAlignment = 'end' | 'center';
 
 export type ModalProps = {
- acceptButtonProps?: ButtonProps;
+ acceptButtonProps?: ButtonProps | null;
  buttonAlignment?: ButtonAlignment;
  cancelButtonProps?: ButtonProps | null;
  children: ReactNode;
@@ -50,6 +50,7 @@ const ContentChildren = styled.div<{ size: ModalSize }>`
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
+ width: 100%;
  padding-top: var(--spacing-${({ size }) => (size === 'small' ? 'xxs' : 'xs')});
 `;
 
@@ -137,13 +138,15 @@ const Modal: FC<ModalProps> = ({
  {cancelButtonProps?.children}
  </Button>
  )}
- <Button
- size="small"
- variant="primary"
- {...acceptButtonProps}
- >
- {acceptButtonProps?.children || 'Accept'}
- </Button>
+ {acceptButtonProps && (
+ <Button
+ size="small"
+ variant="primary"
+ {...acceptButtonProps}
+ >
+ {acceptButtonProps?.children || 'Accept'}
+ </Button>
+ )}
  </ButtonsContainer>
  </ContentContainer>
  </Dialog.Portal>

diff --git a/src/components/chat/unlockProfile/UnlockProfile.tsx b/src/components/chat/unlockProfile/UnlockProfile.tsx
@@ -33,7 +33,6 @@ export enum PROFILESTATE {
 }
 
 // Interface
-
 type UnlockProfileModalProps = {
  InnerComponentProps: {
  type: UNLOCK_PROFILE_TYPE | undefined;
@@ -105,26 +104,6 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
 
  return (
  <Container type={type}>
- {onClose && (
- <Box
- width="-webkit-fill-available"
- display="flex"
- flexDirection="row"
- alignItems="flex-end"
- justifyContent="flex-end"
- >
- <HoverableSVG
- icon={
- <CrossFilled
- size={30}
- color="icon-primary"
- onClick={onClose}
- />
- }
- />
- </Box>
- )}
-
  <SubContainer type={type}>
  {/* Logo and Left Text */}
  <ItemHV2
@@ -144,15 +123,15 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
  {!isLoading ? (
  <>
  <SpanV2
- fontSize="24px"
+ fontSize={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? '20px' : '24px'}
  fontWeight="500"
  lineHeight="28.8px"
  color={theme.default.color}
  >
  {activeStatus.title}
  </SpanV2>
  <SpanV2
- fontSize={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? '16px' : '18px'}
+ fontSize={type === UNLOCK_PROFILE_TYPE.MODAL || isMobile ? '14px' : '18px'}
  fontWeight="400"
  lineHeight="22.4px"
  color={theme.default.secondaryColor}
@@ -264,7 +243,7 @@ const UnlockProfile = ({ InnerComponentProps, onClose }: UnlockProfileModalProps
  <ItemHV2
  gap="8px"
  justifyContent={type === UNLOCK_PROFILE_TYPE.MODAL ? 'center' : 'end'}
- margin={type === UNLOCK_PROFILE_TYPE.MODAL ? '12px 16px 0 40px' : '12px 16px 0 0px'}
+ margin={type === UNLOCK_PROFILE_TYPE.MODAL ? '24px 16px 0 40px' : '12px 16px 0 0px'}
  >
  <CustomCheckbox
  checked={rememberMe}
@@ -342,12 +321,12 @@ const RenderToolTip = ({ children, type }) => {
 const Container = styled(ItemHV2)`
  flex-direction: column;
  align-items: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? 'center' : 'end')};
- width: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '450px' : 'inherit')};
- padding: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '16px' : '0px')};
+ width: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '100%' : 'inherit')};
+ padding: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '0px' : '0px')};
 
  @media (${device.tablet}) {
- width: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '320px' : 'inherit')};
- padding: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '12px' : '0px')};
+ width: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '100%' : 'inherit')};
+ padding: ${(props) => (props.type === UNLOCK_PROFILE_TYPE.MODAL ? '0px' : '0px')};
  align-items: center;
  }
 `;

diff --git a/src/components/chat/unlockProfile/UnlockProfileWrapper.tsx b/src/components/chat/unlockProfile/UnlockProfileWrapper.tsx
@@ -1,8 +1,8 @@
-import { ItemVV2 } from 'components/reusables/SharedStylingV2';
-import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur';
-import { useEffect } from 'react';
+import { FC } from 'react';
 import styled from 'styled-components';
+import { ItemVV2 } from 'components/reusables/SharedStylingV2';
 import UnlockProfile from './UnlockProfile';
+import { Modal } from 'blocks';
 
 export enum UNLOCK_PROFILE_TYPE {
  BOTTOM_BAR = 'bottombar',
@@ -13,54 +13,51 @@ interface IntroContainerProps {
  type?: UNLOCK_PROFILE_TYPE;
  showConnectModal?: boolean;
  description?: string;
- onClose?: () => void;
+ onClose: () => void;
 }
 
 const DEFAULT_PROPS = {
  type: UNLOCK_PROFILE_TYPE.MODAL,
 };
 
-const UnlockProfileWrapper = ({
+const UnlockProfileWrapper: FC<IntroContainerProps> = ({
  type = DEFAULT_PROPS.type,
- showConnectModal,
+ showConnectModal = false,
  description,
  onClose,
-}: IntroContainerProps) => {
- const {
- isModalOpen: isProfileModalOpen,
- showModal: showProfileModal,
- ModalComponent: ProfileModalComponent,
- } = useModalBlur();
-
- useEffect(() => {
- if (type === UNLOCK_PROFILE_TYPE.MODAL && showConnectModal) {
- showProfileModal();
- }
- }, [type, showConnectModal]);
-
- if (type === UNLOCK_PROFILE_TYPE.MODAL) {
- return (
- <ProfileModalComponent
- InnerComponent={UnlockProfile}
- InnerComponentProps={{
- type,
- description,
- }}
- modalRadius="24px"
- modalBorder={false}
- modalPosition={MODAL_POSITION.ON_PARENT}
- />
- );
- } else {
- return (
- <Container className={type}>
- <UnlockProfile
- InnerComponentProps={{ type, description }}
+}) => {
+ return (
+ <>
+ {type === UNLOCK_PROFILE_TYPE.MODAL ? (
+ <Modal
+ isOpen={showConnectModal}
  onClose={onClose}
- />
- </Container>
- );
- }
+ size="small"
+ closeOnOverlayClick
+ cancelButtonProps={null}
+ acceptButtonProps={null}
+ >
+ <UnlockProfile
+ InnerComponentProps={{
+ type,
+ description,
+ }}
+ onClose={onClose}
+ />
+ </Modal>
+ ) : (
+ <Container className={type}>
+ <UnlockProfile
+ InnerComponentProps={{
+ type,
+ description,
+ }}
+ onClose={onClose}
+ />
+ </Container>
+ )}
+ </>
+ );
 };
 
 export default UnlockProfileWrapper;
@@ -70,7 +67,6 @@ const Container = styled(ItemVV2)`
  border-radius: 24px;
  padding: 24px;
  align-items: center;
- // overflow: hidden;
  backdrop-filter: blur(8px);
 
  &.bottombar {
@@ -81,7 +77,6 @@ const Container = styled(ItemVV2)`
  width: auto;
  bottom: 0;
  flex-direction: row;
- // overflow: hidden;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  }