From ef902c5bd9d35f4c48231f335e3f32ef1e06aa8c Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Fri, 8 Sep 2023 13:26:07 -0500 Subject: [PATCH 01/19] fix Accounts list to be scrollable --- packages/ui/src/accounts/components/Accounts.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/accounts/components/Accounts.tsx b/packages/ui/src/accounts/components/Accounts.tsx index d1f299bf66..a9839c6505 100644 --- a/packages/ui/src/accounts/components/Accounts.tsx +++ b/packages/ui/src/accounts/components/Accounts.tsx @@ -99,6 +99,7 @@ interface HeaderProps { } const AccountsWrap = styled.div` + overflow: auto; display: grid; grid-template-columns: 1fr; grid-template-rows: 16px auto; From 423e3c47ecdfbff2cd2726703c4e795a0313f3d0 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Fri, 8 Sep 2023 13:26:57 -0500 Subject: [PATCH 02/19] fix Statistics gap to be 16px when smaller than lg --- packages/ui/src/common/components/statistics/Statistics.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/common/components/statistics/Statistics.tsx b/packages/ui/src/common/components/statistics/Statistics.tsx index 5e09fe4b53..88a5534bdd 100644 --- a/packages/ui/src/common/components/statistics/Statistics.tsx +++ b/packages/ui/src/common/components/statistics/Statistics.tsx @@ -8,10 +8,13 @@ interface StatisticsLayoutProps { export const Statistics = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: ${({ gapSize }) => (gapSize === 's' ? '16px' : '24px')}; + gap: 16px; width: 100%; max-width: 100%; ${({ withMargin }) => (withMargin ? 'margin-top: 8px;' : null)}; + @media (min-width: 1440px) { + gap: ${({ gapSize }) => (gapSize === 's' ? '16px' : '24px')}; + } ` export const StatisticsThreeColumns = styled.div` From 34e84b2f3e5d049889475cf6db90fab9760c9b28 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 18 Sep 2023 01:37:38 -0500 Subject: [PATCH 03/19] fix Profile/Mymemberships header responsive --- .../src/app/pages/Profile/MyMemberships.tsx | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/app/pages/Profile/MyMemberships.tsx b/packages/ui/src/app/pages/Profile/MyMemberships.tsx index 75eebead9d..5e4800ef33 100644 --- a/packages/ui/src/app/pages/Profile/MyMemberships.tsx +++ b/packages/ui/src/app/pages/Profile/MyMemberships.tsx @@ -1,4 +1,5 @@ import React from 'react' +import styled from 'styled-components' import { PageLayout, PageHeaderWrapper, PageHeaderRow } from '@/app/components/PageLayout' import { ButtonsGroup } from '@/common/components/buttons' @@ -14,7 +15,7 @@ export const MyMemberships = () => ( - + My Profile Invite a member @@ -23,10 +24,32 @@ export const MyMemberships = () => ( Add Membership - + } main={} /> ) + +const MyMembershipsHeaderWrapper = styled(PageHeaderRow)` + @media (max-width: 768px) { + display: flex; + flex-direction: column; + gap: 16px; + + ${ButtonsGroup} { + grid-auto-flow: row; + grid-row-gap: 8px; + width: 100%; + + button { + width: 100%; + display: flex; + justify-content: center; + align-items: center: + gap: 4px; + } + } + } +` From f03312e3bf4e6606a889f928c144d902b6cdb648 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 18 Sep 2023 01:49:38 -0500 Subject: [PATCH 04/19] fix Mymembershiplist scrollable --- packages/ui/src/memberships/components/MembersSection.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/memberships/components/MembersSection.tsx b/packages/ui/src/memberships/components/MembersSection.tsx index 624bc03fe5..4177c10ba6 100644 --- a/packages/ui/src/memberships/components/MembersSection.tsx +++ b/packages/ui/src/memberships/components/MembersSection.tsx @@ -80,6 +80,7 @@ const MembershipsGroup = styled.div` 'accountslist'; grid-row-gap: 5px; width: 100%; + overflow: auto; ` const MembershipsHeaders = styled(ListHeaders)` From 24caa22ab9a6143500e64155a73e1f3ef698ad6b Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 18 Sep 2023 02:32:26 -0500 Subject: [PATCH 05/19] fix invite/add member modal --- packages/ui/src/common/components/Modal/Modal.tsx | 2 +- .../modals/BuyMembershipModal/BuyMembershipModal.tsx | 4 ++++ .../modals/InviteMemberModal/InviteMemberModal.tsx | 4 ++++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx index 731d068bc8..18217214e7 100644 --- a/packages/ui/src/common/components/Modal/Modal.tsx +++ b/packages/ui/src/common/components/Modal/Modal.tsx @@ -222,7 +222,7 @@ export const ModalWrap = styled.section` 'modalfooter'; grid-area: modal; background-color: ${Colors.White}; - width: 100%; + width: calc(100% - 32px); max-width: ${({ modalMaxSize }) => { switch (modalMaxSize) { case 'xs': diff --git a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx index 615a96f227..f705d8b411 100644 --- a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx +++ b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx @@ -4,6 +4,7 @@ import { useApi } from '@/api/hooks/useApi' import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue' import { useMachine } from '@/common/hooks/useMachine' import { useModal } from '@/common/hooks/useModal' +import { useResponsive } from '@/common/hooks/useResponsive' import { toMemberTransactionParams } from '@/memberships/modals/utils' import { BuyMembershipFormModal, MemberFormFields } from './BuyMembershipFormModal' @@ -12,12 +13,15 @@ import { BuyMembershipSuccessModal } from './BuyMembershipSuccessModal' import { buyMembershipMachine } from './machine' export const BuyMembershipModal = () => { + const { size } = useResponsive() const { hideModal } = useModal() const { api } = useApi() const membershipPrice = useFirstObservableValue(() => api?.query.members.membershipPrice(), [api?.isConnected]) const [state, send] = useMachine(buyMembershipMachine) + if (size === 'xxs' || size === 'xs') return null + if (state.matches('prepare')) { const onSubmit = (params: MemberFormFields) => send({ type: 'DONE', form: params }) diff --git a/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx b/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx index 2efa684e9a..340b6ea8a6 100644 --- a/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx +++ b/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx @@ -5,6 +5,7 @@ import { TextMedium } from '@/common/components/typography' import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue' import { useMachine } from '@/common/hooks/useMachine' import { useModal } from '@/common/hooks/useModal' +import { useResponsive } from '@/common/hooks/useResponsive' import { SignTransactionModal } from '@/common/modals/SignTransactionModal/SignTransactionModal' import { Address } from '@/common/types' import { toMemberTransactionParams } from '@/memberships/modals/utils' @@ -15,6 +16,7 @@ import { InviteMemberSuccessModal } from './InviteMemberSuccessModal' import { inviteMemberMachine } from './machine' export function InviteMemberModal() { + const { size } = useResponsive() const { api } = useApi() const { hideModal } = useModal() const workingGroupBudget = useFirstObservableValue( @@ -31,6 +33,8 @@ export function InviteMemberModal() { } }, [workingGroupBudget, membershipPrice]) + if (size === 'xxs' || size === 'xs') return null + if (state.matches('requirementsFailed')) { return } From b973237f8be4a023b9c0dcbaaf2274d01269339d Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Wed, 20 Sep 2023 17:42:29 -0500 Subject: [PATCH 06/19] fix members page filter --- .../components/MemberList/Members.tsx | 9 +- .../MemberListFilters/MemberListFilters.tsx | 121 +++++++++++------- 2 files changed, 79 insertions(+), 51 deletions(-) diff --git a/packages/ui/src/memberships/components/MemberList/Members.tsx b/packages/ui/src/memberships/components/MemberList/Members.tsx index e370cf3247..8dd2b8f672 100644 --- a/packages/ui/src/memberships/components/MemberList/Members.tsx +++ b/packages/ui/src/memberships/components/MemberList/Members.tsx @@ -1,4 +1,5 @@ import React from 'react' +import styled from 'styled-components' import { MembershipOrderByInput } from '@/common/api/queries' import { List, ListItem } from '@/common/components/List' @@ -30,7 +31,7 @@ export const MemberList = ({ isLoading, members, getSortProps, searchFilter }: M } return ( -
+ Memberships Roles @@ -48,6 +49,10 @@ export const MemberList = ({ isLoading, members, getSortProps, searchFilter }: M ))} -
+ ) } + +const MemberListWrapper = styled.div` + overflow: auto; +` diff --git a/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx b/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx index 4423a8abeb..ea1b8a881f 100644 --- a/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx +++ b/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx @@ -147,53 +147,54 @@ export const MemberListFilters = ({ memberCount, onApply }: MemberListFiltersPro All members - - { - dispatch({ type: 'change', field: 'roles', value }) - onApply({ ...filters, roles: value }) - }} - onApply={applyFilters} - onClear={() => { - dispatch({ type: 'change', field: 'roles', value: [] }) - onApply({ ...filters, roles: [] }) - }} - /> - - Member Type - - + { - dispatch({ type: 'change', field: 'onlyFounder', value }) - onApply({ ...filters, onlyFounder: value }) + dispatch({ type: 'change', field: 'roles', value }) + onApply({ ...filters, roles: value }) }} - > - - - { - dispatch({ type: 'change', field: 'onlyCouncil', value }) - onApply({ ...filters, onlyCouncil: value }) - }} - > - - - { - dispatch({ type: 'change', field: 'onlyVerified', value }) - onApply({ ...filters, onlyVerified: value }) + onApply={applyFilters} + onClear={() => { + dispatch({ type: 'change', field: 'roles', value: [] }) + onApply({ ...filters, roles: [] }) }} - > - - - + /> + + Member Type + + { + dispatch({ type: 'change', field: 'onlyFounder', value }) + onApply({ ...filters, onlyFounder: value }) + }} + > + + + { + dispatch({ type: 'change', field: 'onlyCouncil', value }) + onApply({ ...filters, onlyCouncil: value }) + }} + > + + + { + dispatch({ type: 'change', field: 'onlyVerified', value }) + onApply({ ...filters, onlyVerified: value }) + }} + > + + + + ) @@ -208,16 +209,20 @@ const Wrapper = styled.div` width: 440px; flex-direction: row-reverse; + @media (max-width: 768px) { + width: 100%; + flex-direction: column-reverse; + } + label { > *:first-child { - height: 100%; + height: 40px; } } } ` const MembersFilterBox = styled(FilterBox)` - height: 72px; margin-top: 8px; ${Fields} { @@ -226,10 +231,10 @@ const MembersFilterBox = styled(FilterBox)` gap: 16px; padding: 8px 16px; height: 100%; - } - ${SelectContainer} { - flex-basis: 220px; + @media (max-width: 768px) { + flex-direction: column; + } } ` @@ -240,11 +245,29 @@ const FieldsHeader = styled.div` margin-right: auto; ` +const FilterContentWrapper = styled.div` + display: flex; + gap: 16px; + + ${SelectContainer} { + width: 196px; + } + + @media (max-width: 425px) { + flex-direction: column; + } + + @media (max-width: 768px) { + margin-right: auto; + } +` + const ToggleContainer = styled.div` display: grid; gap: 4px 8px; grid-template-columns: auto 1fr; height: 48px; + width: fit-content; & > :first-child { grid-column: span 3; From df2e0608e484897a0aaf983ca801dbcd9cc63d66 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Fri, 22 Sep 2023 16:59:24 -0500 Subject: [PATCH 07/19] fix modals responsive, disable some --- packages/ui/src/common/components/Modal/Modal.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx index 18217214e7..4c1b2874f0 100644 --- a/packages/ui/src/common/components/Modal/Modal.tsx +++ b/packages/ui/src/common/components/Modal/Modal.tsx @@ -3,6 +3,7 @@ import styled, { ThemedStyledProps } from 'styled-components' import { ConnectionStatusDot } from '@/app/components/ConnectionStatusDot' import { useEscape } from '@/common/hooks/useEscape' +import { useResponsive } from '@/common/hooks/useResponsive' import { Animations, BorderRad, Colors, Fonts, RemoveScrollbar, Shadows, ZIndex } from '../../constants' import { CloseButton } from '../buttons' @@ -57,6 +58,7 @@ interface ModalProps { } export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark, className }: ModalProps) => { + const { size: screenSize } = useResponsive() function onBackgroundClick(e: React.MouseEvent) { if (e.target === e.currentTarget) { onClose() @@ -65,6 +67,8 @@ export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark, useEscape(() => onClose()) + if ((screenSize === 'xxs' || screenSize === 'xs') && modalSize !== 'xs') return null + return ( <> @@ -222,7 +226,7 @@ export const ModalWrap = styled.section` 'modalfooter'; grid-area: modal; background-color: ${Colors.White}; - width: calc(100% - 32px); + width: calc(100% - 64px); max-width: ${({ modalMaxSize }) => { switch (modalMaxSize) { case 'xs': From 8b16cd9b465b60342715365e74a183b9b9bd38d5 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Sun, 24 Sep 2023 07:11:12 -0500 Subject: [PATCH 08/19] fix sidebarSlider --- packages/ui/src/app/components/SideBarSlider.tsx | 10 ++++++++-- .../ui/src/common/components/SidePane/SidePane.tsx | 4 ++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/app/components/SideBarSlider.tsx b/packages/ui/src/app/components/SideBarSlider.tsx index 411f543d23..693eef50c2 100644 --- a/packages/ui/src/app/components/SideBarSlider.tsx +++ b/packages/ui/src/app/components/SideBarSlider.tsx @@ -25,7 +25,7 @@ export const SideBarSlider = React.memo(({ setOpen }: Props) => { useEscape(() => hideSideBarSlider()) return ( - + @@ -36,7 +36,7 @@ export const SideBarSlider = React.memo(({ setOpen }: Props) => { - + ) }) @@ -72,3 +72,9 @@ const CloseIconWrapper = styled.div` background-color: ${Colors.Black[600]}; } ` + +const SidePaneGlassWrapper = styled(SidePaneGlass)` + @media (max-width: 767px) { + display: flex; + } +` diff --git a/packages/ui/src/common/components/SidePane/SidePane.tsx b/packages/ui/src/common/components/SidePane/SidePane.tsx index 54a8cf66ba..bda3dd9218 100644 --- a/packages/ui/src/common/components/SidePane/SidePane.tsx +++ b/packages/ui/src/common/components/SidePane/SidePane.tsx @@ -99,6 +99,10 @@ export const SidePaneGlass = styled.div<{ onClick?: MouseEventHandler onClick ? css` From 90488201660c06e58f07520332c1ff0c407477df Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Sun, 24 Sep 2023 07:20:10 -0500 Subject: [PATCH 09/19] fix Pagination responsiveness --- packages/ui/src/common/components/Pagination/Pagination.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/common/components/Pagination/Pagination.tsx b/packages/ui/src/common/components/Pagination/Pagination.tsx index 5b47873796..7962ce3ecf 100644 --- a/packages/ui/src/common/components/Pagination/Pagination.tsx +++ b/packages/ui/src/common/components/Pagination/Pagination.tsx @@ -5,6 +5,7 @@ import styled from 'styled-components' import { Arrow } from '@/common/components/icons' import { BorderRad, Colors, Fonts, Transitions } from '@/common/constants/styles' +import { useResponsive } from '@/common/hooks/useResponsive' interface PaginationProps { pageCount?: number @@ -14,6 +15,7 @@ interface PaginationProps { export const Pagination: FC = ({ pageCount = 0, handlePageChange, page }) => { const history = useHistory() + const { size } = useResponsive() if (pageCount < 2) { return null @@ -27,8 +29,8 @@ export const Pagination: FC = ({ pageCount = 0, handlePageChang Date: Wed, 27 Sep 2023 01:49:03 -0500 Subject: [PATCH 10/19] fix memberlistitem min-width --- .../ui/src/memberships/components/MemberListItem/Fields.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/memberships/components/MemberListItem/Fields.tsx b/packages/ui/src/memberships/components/MemberListItem/Fields.tsx index 28f4b8342a..18b22e21f2 100644 --- a/packages/ui/src/memberships/components/MemberListItem/Fields.tsx +++ b/packages/ui/src/memberships/components/MemberListItem/Fields.tsx @@ -10,7 +10,7 @@ export const colLayoutByType = (kind: MemberItemKind) => { const roles = kind !== 'MyMember' ? 136 : 164 const created = 90 const referrer = 50 - const count = kind !== 'MyMember' ? 20 : 76 + const count = 76 const total = 120 switch (kind) { From 35a0603cb27956d4b2fd02a19f6e56d0974356ca Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Mon, 16 Oct 2023 13:30:50 -0500 Subject: [PATCH 11/19] fix width and padding of memberlistfilter box --- .../components/MemberListFilters/MemberListFilters.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx b/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx index ea1b8a881f..0002736d7a 100644 --- a/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx +++ b/packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx @@ -248,9 +248,10 @@ const FieldsHeader = styled.div` const FilterContentWrapper = styled.div` display: flex; gap: 16px; + padding: 8px 8px 12px 8px; ${SelectContainer} { - width: 196px; + width: 220px; } @media (max-width: 425px) { From b561188f87d32045006a4eb86ea586d864391c08 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 17 Oct 2023 00:37:13 -0500 Subject: [PATCH 12/19] fix modals --- packages/ui/src/common/components/Modal/Modal.tsx | 4 ---- .../modals/BuyMembershipModal/BuyMembershipModal.tsx | 4 ---- .../modals/InviteMemberModal/InviteMemberModal.tsx | 4 ---- 3 files changed, 12 deletions(-) diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx index 4c1b2874f0..b4048ca200 100644 --- a/packages/ui/src/common/components/Modal/Modal.tsx +++ b/packages/ui/src/common/components/Modal/Modal.tsx @@ -3,7 +3,6 @@ import styled, { ThemedStyledProps } from 'styled-components' import { ConnectionStatusDot } from '@/app/components/ConnectionStatusDot' import { useEscape } from '@/common/hooks/useEscape' -import { useResponsive } from '@/common/hooks/useResponsive' import { Animations, BorderRad, Colors, Fonts, RemoveScrollbar, Shadows, ZIndex } from '../../constants' import { CloseButton } from '../buttons' @@ -58,7 +57,6 @@ interface ModalProps { } export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark, className }: ModalProps) => { - const { size: screenSize } = useResponsive() function onBackgroundClick(e: React.MouseEvent) { if (e.target === e.currentTarget) { onClose() @@ -67,8 +65,6 @@ export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark, useEscape(() => onClose()) - if ((screenSize === 'xxs' || screenSize === 'xs') && modalSize !== 'xs') return null - return ( <> diff --git a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx index f705d8b411..615a96f227 100644 --- a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx +++ b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipModal.tsx @@ -4,7 +4,6 @@ import { useApi } from '@/api/hooks/useApi' import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue' import { useMachine } from '@/common/hooks/useMachine' import { useModal } from '@/common/hooks/useModal' -import { useResponsive } from '@/common/hooks/useResponsive' import { toMemberTransactionParams } from '@/memberships/modals/utils' import { BuyMembershipFormModal, MemberFormFields } from './BuyMembershipFormModal' @@ -13,15 +12,12 @@ import { BuyMembershipSuccessModal } from './BuyMembershipSuccessModal' import { buyMembershipMachine } from './machine' export const BuyMembershipModal = () => { - const { size } = useResponsive() const { hideModal } = useModal() const { api } = useApi() const membershipPrice = useFirstObservableValue(() => api?.query.members.membershipPrice(), [api?.isConnected]) const [state, send] = useMachine(buyMembershipMachine) - if (size === 'xxs' || size === 'xs') return null - if (state.matches('prepare')) { const onSubmit = (params: MemberFormFields) => send({ type: 'DONE', form: params }) diff --git a/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx b/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx index 340b6ea8a6..2efa684e9a 100644 --- a/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx +++ b/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberModal.tsx @@ -5,7 +5,6 @@ import { TextMedium } from '@/common/components/typography' import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue' import { useMachine } from '@/common/hooks/useMachine' import { useModal } from '@/common/hooks/useModal' -import { useResponsive } from '@/common/hooks/useResponsive' import { SignTransactionModal } from '@/common/modals/SignTransactionModal/SignTransactionModal' import { Address } from '@/common/types' import { toMemberTransactionParams } from '@/memberships/modals/utils' @@ -16,7 +15,6 @@ import { InviteMemberSuccessModal } from './InviteMemberSuccessModal' import { inviteMemberMachine } from './machine' export function InviteMemberModal() { - const { size } = useResponsive() const { api } = useApi() const { hideModal } = useModal() const workingGroupBudget = useFirstObservableValue( @@ -33,8 +31,6 @@ export function InviteMemberModal() { } }, [workingGroupBudget, membershipPrice]) - if (size === 'xxs' || size === 'xs') return null - if (state.matches('requirementsFailed')) { return } From ffcb87174c20f484dac24d45236a91b323420bbd Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 17 Oct 2023 04:34:07 -0500 Subject: [PATCH 13/19] replace window.innerWidth with screen.width --- packages/ui/src/app/GlobalModals.tsx | 2 ++ packages/ui/test/setup.ts | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/packages/ui/src/app/GlobalModals.tsx b/packages/ui/src/app/GlobalModals.tsx index 760aac41c3..3f4dd4a81c 100644 --- a/packages/ui/src/app/GlobalModals.tsx +++ b/packages/ui/src/app/GlobalModals.tsx @@ -217,6 +217,8 @@ export const GlobalModals = () => { const potentialFallback = useGlobalModalHandler(currentModalMachine, hideModal) + if (screen.width < 768) return null + if (modal && !GUEST_ACCESSIBLE_MODALS.includes(modal as ModalNames) && !activeMember) { showModal({ modal: 'SwitchMember', diff --git a/packages/ui/test/setup.ts b/packages/ui/test/setup.ts index a4eb8f6239..6494c99728 100644 --- a/packages/ui/test/setup.ts +++ b/packages/ui/test/setup.ts @@ -11,6 +11,12 @@ import { AddressToBalanceMap, Balances } from '@/accounts/types' import { BN_ZERO } from '@/common/constants' import { UseModal } from '@/common/providers/modal/types' +Object.defineProperty(window, 'screen', { + value: { + width: 1024 + } +}); + configure({ testIdAttribute: 'id' }) jest.mock('injectweb3-connect', () => { From bb8f7aaf4b3570eb93cc33c982ee3b413e5ca2d4 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 17 Oct 2023 04:46:28 -0500 Subject: [PATCH 14/19] mock width of the screen --- packages/ui/test/setup.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/test/setup.ts b/packages/ui/test/setup.ts index 6494c99728..29350fa48f 100644 --- a/packages/ui/test/setup.ts +++ b/packages/ui/test/setup.ts @@ -11,11 +11,11 @@ import { AddressToBalanceMap, Balances } from '@/accounts/types' import { BN_ZERO } from '@/common/constants' import { UseModal } from '@/common/providers/modal/types' -Object.defineProperty(window, 'screen', { +Object.defineProperty(global, 'screen', { value: { - width: 1024 - } -}); + width: 1024, + }, +}) configure({ testIdAttribute: 'id' }) From b9b048d13687cb40e7038116d41bfc1de49306bf Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 17 Oct 2023 05:34:08 -0500 Subject: [PATCH 15/19] hide modal when decreasing the width of the window --- packages/ui/src/common/components/Modal/Modal.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx index b4048ca200..e82ad4614b 100644 --- a/packages/ui/src/common/components/Modal/Modal.tsx +++ b/packages/ui/src/common/components/Modal/Modal.tsx @@ -76,6 +76,9 @@ export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark, } export const ModalGlass = styled.div` + @media (max-width: 767px) { + display: none; + } display: flex; justify-content: center; position: fixed; @@ -206,6 +209,9 @@ interface ModalWrapProps { } export const ModalWrap = styled.section` + @media (max-width: 767px) { + display: none; + } z-index: ${ZIndex.modal}; position: absolute; inset: 0; From 7ea6f34117628f021497ddbaea298dc64920d70c Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Tue, 17 Oct 2023 05:39:01 -0500 Subject: [PATCH 16/19] hide My Profile in the navigation slider in mobile --- packages/ui/src/app/components/SideBar.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/app/components/SideBar.tsx b/packages/ui/src/app/components/SideBar.tsx index 1cc91d5cec..3750f4d69c 100644 --- a/packages/ui/src/app/components/SideBar.tsx +++ b/packages/ui/src/app/components/SideBar.tsx @@ -32,6 +32,7 @@ import { NavigationHeader } from '@/common/components/page/Sidebar/NavigationHea import { NAVIGATION_LINK_GAP, NavigationLink } from '@/common/components/page/Sidebar/NavigationLink' import { Colors, RemoveScrollbar } from '@/common/constants' import { useNetworkEndpoints } from '@/common/hooks/useNetworkEndpoints' +import { useResponsive } from '@/common/hooks/useResponsive' import { useToggle } from '@/common/hooks/useToggle' import { CouncilRoutes, ElectionRoutes } from '@/council/constants' import { useElectionStage } from '@/council/hooks/useElectionStage' @@ -59,6 +60,7 @@ export const SideBar = () => { } export const SideBarContent = () => { + const { size } = useResponsive() const [comingSoonListActive, toggleComingSoonListActive] = useToggle(false) const { stage: electionStage } = useElectionStage() const [endpoints] = useNetworkEndpoints() @@ -75,11 +77,13 @@ export const SideBarContent = () => { {/* Overview*/} {/* */} {/**/} - - }> - My profile - - + {size !== 'xxs' && size !== 'xs' && ( + + }> + My profile + + + )} }> Working Groups From a2347a3022c3bbd5efc6c22d0c9b312d5ef61a29 Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Wed, 18 Oct 2023 13:04:33 -0500 Subject: [PATCH 17/19] update responsive provider, add not support mobile modal --- packages/ui/src/app/GlobalModals.tsx | 8 +++++++- packages/ui/src/app/components/SideBar.tsx | 4 ++-- .../ui/src/common/components/Modal/Modal.tsx | 6 ------ .../common/components/NotSupportMobileModal.tsx | 17 +++++++++++++++++ .../src/common/components/SidePane/SidePane.tsx | 4 ---- .../src/common/providers/responsive/context.ts | 2 ++ .../common/providers/responsive/provider.tsx | 1 + 7 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 packages/ui/src/common/components/NotSupportMobileModal.tsx diff --git a/packages/ui/src/app/GlobalModals.tsx b/packages/ui/src/app/GlobalModals.tsx index 3f4dd4a81c..f8af31e215 100644 --- a/packages/ui/src/app/GlobalModals.tsx +++ b/packages/ui/src/app/GlobalModals.tsx @@ -25,9 +25,11 @@ import { TransferModal, TransferModalCall } from '@/accounts/modals/TransferModa import { FailureModal } from '@/common/components/FailureModal' import { Loading } from '@/common/components/Loading' import { ModalGlass } from '@/common/components/Modal' +import { NotSupportMobileModal } from '@/common/components/NotSupportMobileModal' import { SearchResultsModal, SearchResultsModalCall } from '@/common/components/Search/SearchResultsModal' import { SuccessModal } from '@/common/components/SuccessModal' import { useModal } from '@/common/hooks/useModal' +import { useResponsive } from '@/common/hooks/useResponsive' import { useTransactionStatus } from '@/common/hooks/useTransactionStatus' import { ConfirmModal } from '@/common/modals/ConfirmModal/ConfirmModal' import { OnBoardingModal, OnBoardingModalCall } from '@/common/modals/OnBoardingModal' @@ -203,10 +205,13 @@ export const MODAL_WITH_CLOSE_CONFIRMATION: ModalNames[] = [ 'VoteForProposalModal', ] +const NON_TRANSACTIONAL_MODALS: ModalNames[] = ['Member', 'ApplicationDetails', 'VoteRationaleModal', 'SearchResults'] + export const GlobalModals = () => { const { modal, hideModal, currentModalMachine, showModal, modalData, isClosing } = useModal() const { active: activeMember } = useMyMemberships() const { status } = useTransactionStatus() + const { supportTransactions } = useResponsive() const Modal = useMemo(() => (modal && modal in modals ? memo(() => modals[modal as ModalNames]) : null), [modal]) const [container, setContainer] = useState(document.body) @@ -217,7 +222,8 @@ export const GlobalModals = () => { const potentialFallback = useGlobalModalHandler(currentModalMachine, hideModal) - if (screen.width < 768) return null + if (!supportTransactions && !NON_TRANSACTIONAL_MODALS.includes(modal as ModalNames)) + return if (modal && !GUEST_ACCESSIBLE_MODALS.includes(modal as ModalNames) && !activeMember) { showModal({ diff --git a/packages/ui/src/app/components/SideBar.tsx b/packages/ui/src/app/components/SideBar.tsx index 3750f4d69c..58662e5710 100644 --- a/packages/ui/src/app/components/SideBar.tsx +++ b/packages/ui/src/app/components/SideBar.tsx @@ -60,7 +60,7 @@ export const SideBar = () => { } export const SideBarContent = () => { - const { size } = useResponsive() + const { supportTransactions } = useResponsive() const [comingSoonListActive, toggleComingSoonListActive] = useToggle(false) const { stage: electionStage } = useElectionStage() const [endpoints] = useNetworkEndpoints() @@ -77,7 +77,7 @@ export const SideBarContent = () => { {/* Overview*/} {/* */} {/**/} - {size !== 'xxs' && size !== 'xs' && ( + {supportTransactions && ( }> My profile diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx index e82ad4614b..b4048ca200 100644 --- a/packages/ui/src/common/components/Modal/Modal.tsx +++ b/packages/ui/src/common/components/Modal/Modal.tsx @@ -76,9 +76,6 @@ export const Modal = ({ onClose, modalHeight = 'm', children, modalSize, isDark, } export const ModalGlass = styled.div` - @media (max-width: 767px) { - display: none; - } display: flex; justify-content: center; position: fixed; @@ -209,9 +206,6 @@ interface ModalWrapProps { } export const ModalWrap = styled.section` - @media (max-width: 767px) { - display: none; - } z-index: ${ZIndex.modal}; position: absolute; inset: 0; diff --git a/packages/ui/src/common/components/NotSupportMobileModal.tsx b/packages/ui/src/common/components/NotSupportMobileModal.tsx new file mode 100644 index 0000000000..040a0a7828 --- /dev/null +++ b/packages/ui/src/common/components/NotSupportMobileModal.tsx @@ -0,0 +1,17 @@ +import React from 'react' + +import { Modal, ModalBody, ModalHeader } from '@/common/components/Modal' +import { TextMedium } from '@/common/components/typography' + +interface Props { + onClose: () => void +} + +export const NotSupportMobileModal = ({ onClose }: Props) => ( + + + + This action requires a browser extension, please visit this page from a desktop browser. + + +) diff --git a/packages/ui/src/common/components/SidePane/SidePane.tsx b/packages/ui/src/common/components/SidePane/SidePane.tsx index bda3dd9218..54a8cf66ba 100644 --- a/packages/ui/src/common/components/SidePane/SidePane.tsx +++ b/packages/ui/src/common/components/SidePane/SidePane.tsx @@ -99,10 +99,6 @@ export const SidePaneGlass = styled.div<{ onClick?: MouseEventHandler onClick ? css` diff --git a/packages/ui/src/common/providers/responsive/context.ts b/packages/ui/src/common/providers/responsive/context.ts index 11e41b60f9..93712b2c34 100644 --- a/packages/ui/src/common/providers/responsive/context.ts +++ b/packages/ui/src/common/providers/responsive/context.ts @@ -3,9 +3,11 @@ import { createContext } from 'react' export interface UseResponsive { size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' isMobile: boolean + supportTransactions: boolean } export const ResponsiveContext = createContext({ size: 'lg', isMobile: false, + supportTransactions: true, }) diff --git a/packages/ui/src/common/providers/responsive/provider.tsx b/packages/ui/src/common/providers/responsive/provider.tsx index 58c3ac3332..9235d04275 100644 --- a/packages/ui/src/common/providers/responsive/provider.tsx +++ b/packages/ui/src/common/providers/responsive/provider.tsx @@ -32,6 +32,7 @@ export const ResponsiveProvider = (props: Props) => { ? 'xs' : 'xxs', isMobile: windowWidth < 1024, + supportTransactions: screen.width >= 768, }), [windowWidth] ) From d216159957d1368f5a73163c691a9621959c8897 Mon Sep 17 00:00:00 2001 From: eshark9312 <129978066+eshark9312@users.noreply.github.com> Date: Fri, 20 Oct 2023 19:13:48 -0500 Subject: [PATCH 18/19] Update packages/ui/src/app/GlobalModals.tsx Co-authored-by: Theophile Sandoz --- packages/ui/src/app/GlobalModals.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/app/GlobalModals.tsx b/packages/ui/src/app/GlobalModals.tsx index f8af31e215..0a79b353c1 100644 --- a/packages/ui/src/app/GlobalModals.tsx +++ b/packages/ui/src/app/GlobalModals.tsx @@ -222,10 +222,15 @@ export const GlobalModals = () => { const potentialFallback = useGlobalModalHandler(currentModalMachine, hideModal) - if (!supportTransactions && !NON_TRANSACTIONAL_MODALS.includes(modal as ModalNames)) + if (!modal) { + return null + } + + if (!supportTransactions && !NON_TRANSACTIONAL_MODALS.includes(modal as ModalNames)) { return + } - if (modal && !GUEST_ACCESSIBLE_MODALS.includes(modal as ModalNames) && !activeMember) { + if (!GUEST_ACCESSIBLE_MODALS.includes(modal as ModalNames) && !activeMember) { showModal({ modal: 'SwitchMember', data: { From a0cd48bb14259b6079c08959fb875fe25ba6480e Mon Sep 17 00:00:00 2001 From: eshark9312 Date: Sat, 21 Oct 2023 03:13:06 -0500 Subject: [PATCH 19/19] update GlobalModal --- packages/ui/src/app/GlobalModals.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/app/GlobalModals.tsx b/packages/ui/src/app/GlobalModals.tsx index 0a79b353c1..fb529ba0aa 100644 --- a/packages/ui/src/app/GlobalModals.tsx +++ b/packages/ui/src/app/GlobalModals.tsx @@ -222,15 +222,11 @@ export const GlobalModals = () => { const potentialFallback = useGlobalModalHandler(currentModalMachine, hideModal) - if (!modal) { - return null - } - - if (!supportTransactions && !NON_TRANSACTIONAL_MODALS.includes(modal as ModalNames)) { + if (modal && !supportTransactions && !NON_TRANSACTIONAL_MODALS.includes(modal as ModalNames)) { return } - if (!GUEST_ACCESSIBLE_MODALS.includes(modal as ModalNames) && !activeMember) { + if (modal && !GUEST_ACCESSIBLE_MODALS.includes(modal as ModalNames) && !activeMember) { showModal({ modal: 'SwitchMember', data: {