🩹 Fix the on boarding modal footer (#4730)

Fix the on boarding modal footer
Joystream · Jan 12, 2024 · 3a02284 · 3a02284 · vercel · Jan 12, 2024
1 parent 8d00cb4
commit 3a02284
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 67 deletions.
diff --git a/packages/ui/src/common/components/Modal/Modal.tsx b/packages/ui/src/common/components/Modal/Modal.tsx
@@ -149,14 +149,13 @@ export const ModalBody = styled.div`
 `
 
 interface ModalFooterProps {
-  twoColumns?: boolean
   children?: ReactNode
   className?: string
 }
 
-export const ModalFooter = ({ twoColumns = false, children, className }: ModalFooterProps) => {
+export const ModalFooter = ({ children, className }: ModalFooterProps) => {
   return (
-    <ModalFooterComponent twoColumns={twoColumns} className={className}>
+    <ModalFooterComponent className={className}>
       {children}
       <ModalConnectionStatusDot onlyPerformance />
     </ModalFooterComponent>
@@ -169,7 +168,7 @@ const ModalConnectionStatusDot = styled(ConnectionStatusDot)`
   top: calc(50% - 10px);
 `
 
-export const ModalFooterComponent = styled.footer<{ twoColumns?: boolean }>`
+export const ModalFooterComponent = styled.footer`
   display: inline-flex;
   flex-wrap: wrap;
   grid-area: modalfooter;
@@ -183,18 +182,10 @@ export const ModalFooterComponent = styled.footer<{ twoColumns?: boolean }>`
   padding: 12px 26px 12px 24px;
   border-radius: 0 0 2px 2px;
   position: relative;
-`
 
-export const ModalFooterGroup = styled.div<{ left?: boolean }>`
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  width: fit-content;
-  height: 100%;
-  justify-self: ${({ left }) => (left ? 'start' : 'end')};
-  grid-column-gap: 40px;
-  justify-items: ${({ left }) => (left ? 'start' : 'end')};
-  justify-content: ${({ left }) => (left ? 'start' : 'end')};
+  @media (min-width: ${BreakPoints.sm}px) {
+    flex-flow: nowrap;
+  }
 `
 
 interface ModalWrapProps {

diff --git a/packages/ui/src/common/components/Modal/ModalTransactionFooter.tsx b/packages/ui/src/common/components/Modal/ModalTransactionFooter.tsx
@@ -34,7 +34,7 @@ export const ModalTransactionFooter: FC<Props> = ({
 }) => {
   const { feeInfo } = useTransactionFee()
   return (
-    <ModalFooter className={className} twoColumns>
+    <ModalFooter className={className}>
       <ButtonsGroup align="left">
         {extraLeftButtons}
         {prev && !prev.disabled && (

diff --git a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
@@ -2,6 +2,7 @@ import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { BalanceOf } from '@polkadot/types/interfaces/runtime'
 import React, { useEffect, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
+import styled from 'styled-components'
 import * as Yup from 'yup'
 
 import { SelectAccount } from '@/accounts/components/SelectAccount'
@@ -24,7 +25,6 @@ import { Arrow } from '@/common/components/icons'
 import { Loading } from '@/common/components/Loading'
 import {
   ModalFooter,
-  ModalFooterGroup,
   ModalHeader,
   Row,
   ScrolledModal,
@@ -247,55 +247,52 @@ export const BuyMembershipForm = ({
           </ScrolledModalContainer>
         </FormProvider>
       </ScrolledModalBody>
-      <ModalFooter twoColumns>
-        <ModalFooterGroup left>
-          {type === 'onBoarding' && (
-            <ButtonGhost onClick={changeMembershipAccount} size="medium">
-              <Arrow direction="left" />
-              Change account
-            </ButtonGhost>
-          )}
-          <Checkbox
-            id="privacy-policy-agreement"
-            onChange={(hasTerms) => form.setValue('hasTerms', hasTerms, { shouldValidate: true })}
-          >
-            <TextMedium colorInherit>
-              I agree to the{' '}
-              <LabelLink to={TermsRoutes.termsOfService} target="_blank">
-                Terms of Service
-              </LabelLink>{' '}
-              and{' '}
-              <LabelLink to={TermsRoutes.privacyPolicy} target="_blank">
-                Privacy Policy
-              </LabelLink>
-              .
-            </TextMedium>
-          </Checkbox>
-        </ModalFooterGroup>
-        <ModalFooterGroup>
-          {type === 'general' && (
-            <TransactionInfoContainer>
-              <TransactionInfo
-                title="Creation fee:"
-                value={membershipPrice?.toBn()}
-                tooltipText="Creation fee is the price of membership, it is managed by council through the proposal system. It is inclusive of transaction fee."
-                tooltipLinkURL="https://joystream.gitbook.io/joystream-handbook/governance/proposals"
-                tooltipLinkText="Learn more"
-              />
-            </TransactionInfoContainer>
-          )}
-          <ButtonPrimary
-            size="medium"
-            onClick={() => {
-              const values = form.getValues()
-              uploadAvatarAndSubmit({ ...values, externalResources: { ...definedValues(values.externalResources) } })
-            }}
-            disabled={isDisabled}
-          >
-            {isUploading ? <Loading text="Uploading avatar" /> : 'Create a Membership'}
-          </ButtonPrimary>
-        </ModalFooterGroup>
-      </ModalFooter>
+
+      <StyledFooter>
+        {type === 'onBoarding' && (
+          <ButtonGhost onClick={changeMembershipAccount} size="medium">
+            <Arrow direction="left" />
+            Change account
+          </ButtonGhost>
+        )}
+        <Checkbox
+          id="privacy-policy-agreement"
+          onChange={(hasTerms) => form.setValue('hasTerms', hasTerms, { shouldValidate: true })}
+        >
+          <TextMedium colorInherit>
+            I agree to the{' '}
+            <LabelLink to={TermsRoutes.termsOfService} target="_blank">
+              Terms of Service
+            </LabelLink>{' '}
+            and{' '}
+            <LabelLink to={TermsRoutes.privacyPolicy} target="_blank">
+              Privacy Policy
+            </LabelLink>
+            .
+          </TextMedium>
+        </Checkbox>
+        {type === 'general' && (
+          <TransactionInfoContainer>
+            <TransactionInfo
+              title="Creation fee:"
+              value={membershipPrice?.toBn()}
+              tooltipText="Creation fee is the price of membership, it is managed by council through the proposal system. It is inclusive of transaction fee."
+              tooltipLinkURL="https://joystream.gitbook.io/joystream-handbook/governance/proposals"
+              tooltipLinkText="Learn more"
+            />
+          </TransactionInfoContainer>
+        )}
+        <ButtonPrimary
+          size="medium"
+          onClick={() => {
+            const values = form.getValues()
+            uploadAvatarAndSubmit({ ...values, externalResources: { ...definedValues(values.externalResources) } })
+          }}
+          disabled={isDisabled}
+        >
+          {isUploading ? <Loading text="Uploading avatar" /> : 'Create a Membership'}
+        </ButtonPrimary>
+      </StyledFooter>
     </>
   )
 }
@@ -308,3 +305,9 @@ export const BuyMembershipFormModal = ({ onClose, onSubmit, membershipPrice }: B
     </ScrolledModal>
   )
 }
+
+export const StyledFooter = styled(ModalFooter)`
+  & > label:first-child {
+    margin-right: auto;
+  }
+`
diff --git a/packages/ui/src/memberships/modals/SwitchMemberModal/SwitchMemberModal.tsx b/packages/ui/src/memberships/modals/SwitchMemberModal/SwitchMemberModal.tsx
@@ -135,8 +135,8 @@ const SwitchModalFooter = styled(ModalFooter)`
   width: 100%;
   height: auto;
   padding: 16px;
-  grid-auto-flow: row;
   justify-items: start;
+  flex-flow: wrap;
 `
 
 const MembersList = styled.ul<{ memberIndicatorOffset?: string }>`