Added new UI for notification settings page

src/blocks/icons/components/Pencil.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const Pencil: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="Pencil"
+ icon={
+ <svg
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M8.47489 20.25H4.46739C4.27712 20.25 4.09465 20.1744 3.96012 20.0399C3.82558 19.9053 3.75 19.7229 3.75 19.5326V15.5251C3.75009 15.3351 3.82555 15.1529 3.95984 15.0185L15.0183 3.95995C15.1529 3.82552 15.3353 3.75 15.5254 3.75C15.7156 3.75 15.898 3.82552 16.0325 3.95995L20.04 7.96476C20.1745 8.09928 20.25 8.28168 20.25 8.47186C20.25 8.66204 20.1745 8.84444 20.04 8.97896L8.98154 20.0402C8.84711 20.1744 8.66489 20.2499 8.47489 20.25Z"
+ stroke="currentColor"
+ stroke-width="1.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M12.3589 6.61963L17.3806 11.6413"
+ stroke="currentColor"
+ stroke-width="1.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default Pencil;

src/blocks/icons/index.ts

@@ -98,6 +98,8 @@ export { default as NotificationMobile } from './components/NotificationMobile';
 
 export { default as OptOut } from './components/OptOut';
 
+export { default as Pencil } from './components/Pencil';
+
 export { default as PlusCircle } from './components/PlusCircle';
 export { default as PlusCircleFilled } from './components/PlusCircleFilled';
 

src/blocks/modal/Modal.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Button, ButtonProps } from '../button';
 import { Back, Cross } from '../icons';
 import { ModalSize } from './Modal.types';
+import { deviceMediaQ } from 'blocks/theme';
 
 type ButtonAlignment = 'end' | 'center';
 
@@ -27,7 +28,7 @@ const Overlay = styled(Dialog.Overlay)`
  z-index: 1000;
 `;
 
-const ContentContainer = styled(Dialog.Content)<{ size: ModalSize }>`
+const ContentContainer = styled(Dialog.Content) <{ size: ModalSize }>`
  display: flex;
  border-radius: var(--radius-sm);
  border: var(--border-sm) solid var(--stroke-secondary);
@@ -43,12 +44,15 @@ const ContentContainer = styled(Dialog.Content)<{ size: ModalSize }>`
  width: ${({ size }) => (size === 'small' ? '360px' : size === 'medium' ? '500px' : '700px')};
  gap: var(--spacing-sm);
  z-index: 1100;
+ @media ${deviceMediaQ.mobileL}{
+ width:80%;
+ }
 `;
 
 const ContentChildren = styled.div<{ size: ModalSize }>`
  display: flex;
  flex-direction: column;
- align-items: flex-start;
+ align-items: flex-start; 
  flex: 1 0 0;
  width: 100%;
  padding-top: var(--spacing-${({ size }) => (size === 'small' ? 'xxs' : 'xs')});

src/blocks/textInput/TextInput.tsx

@@ -9,7 +9,7 @@ export type TextInputProps = {
  disabled?: boolean;
  icon?: ReactNode;
  error?: boolean;
- type?: 'text' | 'password';
+ type?: 'text' | 'password' | 'number';
  errorMessage?: string;
  label?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -18,7 +18,7 @@ export type TextInputProps = {
  required?: boolean;
  success?: boolean;
  totalCount?: number;
- value: string;
+ value: string | number;
 };
 
 const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
@@ -168,7 +168,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
  color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-secondary'}
  variant="c-regular"
  >
- {`${value?.length || 0} / ${totalCount}`}
+ {`${(typeof value === 'string' && value?.length) || 0} / ${totalCount}`}
  </InputText>
  )}
  </LabelContainer>
@@ -199,8 +199,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
  success || error
  ? 'components-inputs-text-default'
  : disabled
-  ? 'components-inputs-text-disabled'
-  : 'components-inputs-text-placeholder'
+ ? 'components-inputs-text-disabled'
+ : 'components-inputs-text-placeholder'
  }
  variant="c-regular"
  >

src/common/Common.form.ts

@@ -3,3 +3,7 @@ export const URLRegex = /^(http:\/\/|https:\/\/|www\.)?([\w-]+\.)+[\w-]{2,}(\/[\
 export const getRequiredFieldMessage = (name: string) => `${name} is required.`;
 
 export const getMaxCharLimitFieldMessage = (limit: number) => `Maximum ${limit} characters allowed.`;
+
+export const getMinNumValueMessage = (limit: number | string) => `Must be greater than ${limit}`;
+
+export const getRangeValueMessage = (name: string) => `${name} must be within the defined range limits.`;

src/common/Common.types.ts

@@ -0,0 +1,5 @@
+export type ModalResponse = {
+ isOpen: boolean;
+ onClose: () => void;
+ open: () => void;
+};

src/common/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useIsVisible } from './useIsVisible';
 export { usePushStakingStats } from './usePushStakingStats';
+export { useDisclosure } from './useDisclosure';

src/common/hooks/useDisclosure.ts

@@ -0,0 +1,17 @@
+import { ModalResponse } from 'common/Common.types';
+import { useState, useCallback } from 'react';
+
+const useDisclosure = (): ModalResponse => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const open = useCallback(() => setIsOpen(true), []);
+ const onClose = useCallback(() => setIsOpen(false), []);
+
+ return {
+ isOpen,
+ onClose,
+ open,
+ };
+};
+
+export { useDisclosure };

src/common/index.ts

@@ -3,3 +3,4 @@ export * from './components';
 export * from './Common.constants';
 export * from './Common.utils';
 export * from './Common.form';
+export * from './Common.types';

src/components/reusables/checkbox/Checkbox.tsx

@@ -25,7 +25,7 @@ const CheckboxInput = styled.input`
 
  /* Change the color of the checkbox */
  &:checked {
- accent-color: #D53A94;
+ accent-color: #C742DD;
  }
 `;
 

src/components/reusables/sliders/InputSlider.tsx

@@ -153,7 +153,7 @@ const Container = styled.div`
 const PreviewContainer = styled.div`
  display: none;
  position: absolute;
- bottom: -48px;
+ top: -48px;
  border-radius: 4px;
  border: 1px solid ${(props) => props.theme.default.border};
  background: ${(props) => props.theme.default.bg};

src/components/reusables/sliders/RangeSlider.tsx

@@ -243,7 +243,7 @@ const Container = styled.div`
 const PreviewContainer = styled.div`
  display: none;
  position: absolute;
- bottom: -48px;
+ top: -48px;
  border-radius: 4px;
  border: 1px solid ${(props) => props.theme.default.border};
  background: ${(props) => props.theme.default.bg};

src/modules/channelDashboard/ChannelDashboard.types.ts

@@ -1,18 +1,18 @@
 export type ChannelSetting = {
- type: 1 | 2 | 3;
+ type: number;
  default:
  | boolean
  | number
  | {
  lower: number;
  upper: number;
  };
- enabled: boolean;
+ enabled?: boolean;
  description: string;
- index: number;
- lowerLimit: number;
- upperLimit: number;
- ticker: number;
+ index?: number;
+ lowerLimit?: number;
+ upperLimit?: number;
+ ticker?: number;
 };
 
 export type DashboardActiveState =

src/modules/channelDashboard/components/ChannelDashboardNullState.tsx

@@ -1,6 +1,6 @@
-import { Box, Button, CrownSimple, ReceiveNotification, Text } from "blocks";
-import { FC } from "react";
+import { FC } from 'react';
 
+import { Box, Button, CrownSimple, ReceiveNotification, Text } from 'blocks';
 
 type ChannelDashboardNullStateProps = {
  state: 'notificationSettings' | 'delegatee';
@@ -9,12 +9,7 @@ type ChannelDashboardNullStateProps = {
  onClick?: any;
 };
 
-const ChannelDashboardNullState: FC<ChannelDashboardNullStateProps> = ({
- state,
- title,
- subTitle,
- onClick
-}) => {
+const ChannelDashboardNullState: FC<ChannelDashboardNullStateProps> = ({ state, title, subTitle, onClick }) => {
  return (
  <Box
  display="flex"
@@ -24,26 +19,52 @@ const ChannelDashboardNullState: FC<ChannelDashboardNullStateProps> = ({
  gap="spacing-sm"
  height="200px"
  >
- {state == 'delegatee' && <CrownSimple size={48} color="icon-tertiary" />}
- {state == 'notificationSettings' && <ReceiveNotification size={48} color="icon-tertiary" />}
+ {state == 'delegatee' && (
+ <CrownSimple
+ size={48}
+ color="icon-tertiary"
+ />
+ )}
+ {state == 'notificationSettings' && (
+ <ReceiveNotification
+ size={48}
+ color="icon-tertiary"
+ />
+ )}
 
- <Box display="flex" flexDirection="column" alignItems="center">
- <Text textAlign="center" variant="h6-semibold" color="text-secondary">
+ <Box
+ display="flex"
+ flexDirection="column"
+ alignItems="center"
+ >
+ <Text
+ textAlign="center"
+ variant="h6-semibold"
+ color="text-secondary"
+ >
  {title}
  </Text>
 
- <Text textAlign="center" variant="bes-regular" color="text-tertiary">
+ <Text
+ textAlign="center"
+ variant="bes-regular"
+ color="text-tertiary"
+ >
  {subTitle}
  </Text>
  </Box>
 
  {onClick && (
- <Button variant="primary" size="small" onClick={onClick}>
+ <Button
+ variant="primary"
+ size="small"
+ onClick={onClick}
+ >
  Add Setting
  </Button>
  )}
  </Box>
  );
 };
 
-export { ChannelDashboardNullState };
+export { ChannelDashboardNullState };