Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed the scroll to modal in dashboard #1847

Merged
merged 6 commits into from
Sep 10, 2024
Merged

Fixed the scroll to modal in dashboard #1847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
56bc8a1
Fixed the scroll to modal in dashboard
abhishek-01k Sep 9, 2024
1a42d74
Added space between the settings
abhishek-01k Sep 9, 2024
dc83e64
Fixed the modal body height
abhishek-01k Sep 10, 2024
754d0e9
Added scrollbar to the manage settings modal
abhishek-01k Sep 10, 2024
5e71be4
Revert "Added scrollbar to the manage settings modal"
abhishek-01k Sep 10, 2024
29000e1
Added scrollbar to the manage settings modal too
abhishek-01k Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 56 additions & 11 deletions src/common/components/ManageSettingsDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import InputSlider from 'components/reusables/sliders/InputSlider';
import RangeSlider from 'components/reusables/sliders/RangeSlider';

import { UserSetting } from 'helpers/channel/types';
import { css } from 'styled-components';

type NotificationSettingsDropdownProps = {
userSetting: UserSetting[];
Expand All @@ -20,7 +21,7 @@ const ManageSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
updateNotificationSettings,
updatingNotificationSettings,
unsubscribing,
unsubscribe
unsubscribe,
}) => {
const [modifiedSettings, setModifiedSettings] = useState([...userSetting]);

Expand Down Expand Up @@ -72,11 +73,21 @@ const ManageSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
<Box
display="flex"
flexDirection="column"
padding="spacing-none spacing-xs"
gap="spacing-xxs"
alignItems="center"
>
<Box display="flex" flexDirection="column" width="-webkit-fill-available">
<Box
display="flex"
flexDirection="column"
width="-webkit-fill-available"
maxHeight="30vh"
padding="spacing-none spacing-xs"
overflow="scroll"
customScrollbar
css={css`
overflow-x: none;
`}
>
{modifiedSettings.map((setting, index) => {
return (
<Box key={index}>
Expand All @@ -88,8 +99,17 @@ const ManageSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
alignSelf="stretch"
alignItems="flex-start"
>
<Box display="flex" flexDirection="row" justifyContent="space-between" alignSelf="stretch">
<Text variant="h6-bold" color="text-primary" textTransform="capitalize">
<Box
display="flex"
flexDirection="row"
justifyContent="space-between"
alignSelf="stretch"
>
<Text
variant="h6-bold"
color="text-primary"
textTransform="capitalize"
>
{setting.description}
</Text>
<ToggleSwitch
Expand All @@ -105,7 +125,11 @@ const ManageSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
alignItems="flex-start"
alignSelf="stretch"
>
<Text variant="h6-bold" color="text-primary" textTransform="capitalize">
<Text
variant="h6-bold"
color="text-primary"
textTransform="capitalize"
>
{setting.user || setting.default}
</Text>
<InputSlider
Expand All @@ -127,7 +151,11 @@ const ManageSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
alignItems="flex-start"
alignSelf="stretch"
>
<Text variant="h6-bold" color="text-primary" textTransform="capitalize">
<Text
variant="h6-bold"
color="text-primary"
textTransform="capitalize"
>
{setting.user.lower || setting.default.lower} - {setting.user.upper || setting.default.upper}
</Text>
<RangeSlider
Expand Down Expand Up @@ -158,11 +186,21 @@ const ManageSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
alignItems="center"
justifyContent="flex-end"
flexDirection="column"
padding="spacing-none spacing-xs"
>
<Text color="text-tertiary" variant="bes-regular">
<Text
color="text-tertiary"
variant="bes-regular"
>
You will receive all important updates from this channel.
</Text>
<Box display="flex" flexDirection="column" gap="spacing-md" alignItems="center" width="100%">
<Box
display="flex"
flexDirection="column"
gap="spacing-md"
alignItems="center"
width="100%"
>
<Button
size="small"
variant="primary"
Expand All @@ -172,8 +210,15 @@ const ManageSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
>
{updatingNotificationSettings ? 'Updating' : 'Update Preferences'}
</Button>
<Box width="100%" cursor="pointer" onClick={handleOptOut}>
<Text textAlign="center" variant="bs-semibold">
<Box
width="100%"
cursor="pointer"
onClick={handleOptOut}
>
<Text
textAlign="center"
variant="bs-semibold"
>
{unsubscribing ? 'Unsubscribing' : 'Unsubscribe'}
</Text>
</Box>
Expand Down
78 changes: 65 additions & 13 deletions src/common/components/NotificationSettingsDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import InputSlider from 'components/reusables/sliders/InputSlider';
import RangeSlider from 'components/reusables/sliders/RangeSlider';

import { ChannelSetting } from 'helpers/channel/types';
import { css } from 'styled-components';

type NotificationSettingsDropdownProps = {
// TODO: Change this to the new channel Settings type
Expand All @@ -19,7 +20,7 @@ const NotificationSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
optInHandler,
channelSettings,
loading,
onClose
onClose,
}) => {
const [modifiedSettings, setModifiedSettings] = useState([...channelSettings]);

Expand Down Expand Up @@ -62,25 +63,45 @@ const NotificationSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
<Box
display="flex"
flexDirection="column"
padding="spacing-none spacing-xs"
// padding="spacing-none spacing-xs"
gap="spacing-xxs"
alignItems="center"
alignSelf="stretch"
>
<Box display="flex" flexDirection="column" width="-webkit-fill-available">
<Box
display="flex"
flexDirection="column"
width="-webkit-fill-available"
maxHeight="30vh"
padding="spacing-none spacing-xs"
overflow="scroll"
customScrollbar
css={css`
overflow-x: none;
`}
>
{modifiedSettings.map((setting, index) => {
return (
<Box key={index}>
<Box
display="flex"
flexDirection="column"
padding="spacing-xs spacing-none"
gap="spacing-xxs"
padding="spacing-xs spacing-none"
alignSelf="stretch"
alignItems="flex-start"
>
<Box display="flex" flexDirection="row" justifyContent="space-between" alignSelf="stretch">
<Text variant="h6-bold" color="text-primary" textTransform="capitalize">
<Box
display="flex"
flexDirection="row"
justifyContent="space-between"
alignSelf="stretch"
>
<Text
variant="h6-bold"
color="text-primary"
textTransform="capitalize"
>
{setting.description}
</Text>
<ToggleSwitch
Expand All @@ -96,7 +117,11 @@ const NotificationSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
alignItems="flex-start"
alignSelf="stretch"
>
<Text variant="h6-bold" color="text-primary" textTransform="capitalize">
<Text
variant="h6-bold"
color="text-primary"
textTransform="capitalize"
>
{setting.default}
</Text>
<InputSlider
Expand All @@ -118,7 +143,11 @@ const NotificationSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
alignItems="flex-start"
alignSelf="stretch"
>
<Text variant="h6-bold" color="text-primary" textTransform="capitalize">
<Text
variant="h6-bold"
color="text-primary"
textTransform="capitalize"
>
{setting.default.lower} - {setting.default.upper}
</Text>
<RangeSlider
Expand Down Expand Up @@ -149,16 +178,39 @@ const NotificationSettingsDropdown: FC<NotificationSettingsDropdownProps> = ({
alignItems="center"
justifyContent="flex-end"
flexDirection="column"
padding="spacing-none spacing-xs"
>
<Text color="text-tertiary" variant="bes-regular">
<Text
color="text-tertiary"
variant="bes-regular"
>
You will receive all important updates from this channel.
</Text>
<Box display="flex" flexDirection="column" gap="spacing-md" alignItems="center" width="100%">
<Button size="small" variant="primary" onClick={handleOptIn} block loading={loading}>
<Box
display="flex"
flexDirection="column"
gap="spacing-md"
alignItems="center"
width="100%"
>
<Button
size="small"
variant="primary"
onClick={handleOptIn}
block
loading={loading}
>
{loading ? 'Subscribing' : 'Subscribe'}
</Button>
<Box width="100%" cursor="pointer" onClick={onClose}>
<Text textAlign="center" variant="bs-semibold">
<Box
width="100%"
cursor="pointer"
onClick={onClose}
>
<Text
textAlign="center"
variant="bs-semibold"
>
Cancel
</Text>
</Box>
Expand Down
Loading