Added new UI for notification settings page (#1826)

* Added new UI for notification settings page * Added validation and other comments also removed * Fixed the validation error * Added responsiveness for the modal * Added check for refresh of setting page * Fixed the changes for edge cases * Fixed some comments * Fixed all the comments related to settings * Fixed the Notification Modal Button issue and other minor UI fixed * Fixed the UI breaking issue on modal * Fixed the validation for range toggle * Fixed the validation for multi ranges * Fixed the add settings button and also multi range issue
push-protocol · Sep 9, 2024 · a2ca195 · a2ca195
1 parent 88c66f4
commit a2ca195
Show file tree

Hide file tree

Showing 38 changed files with 1,474 additions and 32 deletions.
diff --git a/src/blocks/icons/components/Pencil.tsx b/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;
diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts
@@ -103,6 +103,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';
 

diff --git a/src/blocks/modal/Modal.tsx b/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')});

diff --git a/src/blocks/textInput/TextInput.tsx b/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"
           >

diff --git a/src/common/Common.form.ts b/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.`;
diff --git a/src/common/Common.types.ts b/src/common/Common.types.ts
@@ -0,0 +1,5 @@
+export type ModalResponse = {
+  isOpen: boolean;
+  onClose: () => void;
+  open: () => void;
+};
diff --git a/src/common/hooks/index.ts b/src/common/hooks/index.ts
@@ -1,2 +1,3 @@
 export { useIsVisible } from './useIsVisible';
 export { usePushStakingStats } from './usePushStakingStats';
+export { useDisclosure } from './useDisclosure';
diff --git a/src/common/hooks/useDisclosure.ts b/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 };
diff --git a/src/common/index.ts b/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';
diff --git a/src/components/reusables/checkbox/Checkbox.tsx b/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;
   }
 `;
 

diff --git a/src/components/reusables/sliders/InputSlider.tsx b/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};

diff --git a/src/components/reusables/sliders/RangeSlider.tsx b/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};

diff --git a/src/modules/channelDashboard/ChannelDashboard.types.ts b/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 =

diff --git a/src/modules/channelDashboard/components/ChannelDashboardNullState.tsx b/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 };