fix account selector, AnnounceCandidacyModal footer

Joystream · Nov 3, 2023 · 74790bc · 74790bc
1 parent 467ff14
commit 74790bc
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 23 deletions.
diff --git a/packages/ui/src/accounts/components/AccountLocks.tsx b/packages/ui/src/accounts/components/AccountLocks.tsx
@@ -72,8 +72,6 @@ export const AccountLocks = ({ locks }: AccountLocksProps) => {
 }
 
 export const AccountLocksWrapper = styled(ColumnGapBlock)`
-  position: absolute;
-  top: 15px;
   align-items: center;
 `
 

diff --git a/packages/ui/src/common/components/selects/components.tsx b/packages/ui/src/common/components/selects/components.tsx
@@ -61,10 +61,10 @@ export const SelectedOption = styled.div<{ isSmallVariant?: boolean }>`
     isSmallVariant
       ? css`
           display: flex;
-          flex-wrap: wrap;
+          flex-direction: column;
+          justify-content: center;
           row-gap: 8px;
-          justify-content: between;
-          height: fit-content;
+          height: 118px;
 
           > div {
             width: fit-content;
@@ -157,10 +157,10 @@ export const OptionComponent = styled.div<{ disabled?: boolean; isSmallVariant?:
     isSmallVariant
       ? css`
           display: flex;
-          flex-wrap: wrap;
+          flex-direction: column;
+          justify-content: center;
           row-gap: 8px;
-          justify-content: between;
-          height: fit-content;
+          height: 118px;
 
           > div {
             width: fit-content;

diff --git a/packages/ui/src/council/components/election/CandidateVote/CandidateVote.tsx b/packages/ui/src/council/components/election/CandidateVote/CandidateVote.tsx
@@ -153,7 +153,8 @@ const CandidateVoteWrapper = styled(ListItem)`
   grid-template-columns: 32px 224px minmax(224px, 1fr) 120px;
   align-items: center;
   grid-column-gap: 8px;
-  height: 116px;
+  min-height: 116px;
+  height: fit-content;
   padding: 16px 48px 16px 8px;
   cursor: pointer;
 
@@ -176,7 +177,6 @@ const CandidateVoteWrapper = styled(ListItem)`
     padding-left: 32px;
     display: flex;
     flex-direction: column;
-    height: fit-content;
 
     ${VoteIndex} {
       position: absolute;

diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/AnnounceCandidacyModal.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/AnnounceCandidacyModal.tsx
@@ -330,7 +330,16 @@ export const AnnounceCandidacyModal = () => {
                   )}
                 />
               )}
-              {state.matches('candidateProfile.summaryAndBanner') && <SummaryAndBannerStep />}
+              {state.matches('candidateProfile.summaryAndBanner') && (
+                <SummaryAndBannerStep
+                  previewButton={
+                    <PreviewButtons
+                      candidate={getCandidateForPreview(form.getValues() as AnnounceCandidacyFrom, activeMember)}
+                      disabled={!form.formState.isValid}
+                    />
+                  }
+                />
+              )}
             </FormProvider>
           </StepperBody>
         </StepperModalWrapper>
@@ -342,14 +351,6 @@ export const AnnounceCandidacyModal = () => {
           onClick: () => send('NEXT'),
         }}
         prev={state.matches('staking') ? { onClick: () => send('BACK') } : undefined}
-        extraButtons={
-          state.matches('candidateProfile.summaryAndBanner') && (
-            <PreviewButtons
-              candidate={getCandidateForPreview(form.getValues() as AnnounceCandidacyFrom, activeMember)}
-              disabled={!form.formState.isValid}
-            />
-          )
-        }
       />
     </Modal>
   )

diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/components/StakeStep.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/components/StakeStep.tsx
@@ -10,6 +10,7 @@ import { Info } from '@/common/components/Info'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { TextMedium, TokenValue } from '@/common/components/typography'
+import { useResponsive } from '@/common/hooks/useResponsive'
 import { formatJoyValue } from '@/common/model/formatters'
 import { ValidationHelpers } from '@/common/utils/validation'
 import { SelectedMember } from '@/memberships/components/SelectMember'
@@ -21,6 +22,7 @@ interface StakingStepProps extends ValidationHelpers {
 }
 
 export const StakeStep = ({ candidacyMember, minStake, errorChecker, errorMessageGetter }: StakingStepProps) => {
+  const { isMobile } = useResponsive()
   const form = useFormContext()
   const [stake] = form.watch(['staking.amount'])
   const balances = useMyBalances()
@@ -46,15 +48,20 @@ export const StakeStep = ({ candidacyMember, minStake, errorChecker, errorMessag
           <InputComponent
             label="Select account for Staking"
             required
-            inputSize="l"
+            inputSize={isMobile ? 'xxl' : 'l'}
             disabled={!isSomeBalanceGteStake}
             message={errorChecker('account') ? errorMessageGetter('account') : undefined}
             validation={errorChecker('account') ? 'invalid' : undefined}
             tooltipText="The account holding the stake for the candidate. After announcing the staking account will have locked up REQUIRED_CANDIDACY_STAKE under the relevant council lock. If the candidacy fails - either because the election cycle fails or the candidate receives too few votes, then this lock can be removed by the candidate, otherwise it remains on into the councilorship. Be aware that this stake contributed towards the candidacy does not contribute towards the final election outcome, hence exceeding the minimum bound would only be done for signaling or other social purposes."
             tooltipLinkText="Learn more"
             tooltipLinkURL="https://handbook.joystream.org/system/council#candidacy"
           >
-            <SelectStakingAccount name="staking.account" minBalance={minStake} lockType="Council Candidate" />
+            <SelectStakingAccount
+              name="staking.account"
+              minBalance={minStake}
+              lockType="Council Candidate"
+              isSmallVariant={isMobile}
+            />
           </InputComponent>
           <RowGapBlock gap={8}>
             <h4>2. Stake</h4>

diff --git a/packages/ui/src/council/modals/AnnounceCandidacy/components/SummaryAndBannerStep.tsx b/packages/ui/src/council/modals/AnnounceCandidacy/components/SummaryAndBannerStep.tsx
@@ -1,11 +1,15 @@
-import React from 'react'
+import React, { ReactNode } from 'react'
 
 import { CKEditor } from '@/common/components/CKEditor'
 import { InputComponent, InputText } from '@/common/components/forms'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 
-export const SummaryAndBannerStep = () => (
+interface Props {
+  previewButton: ReactNode
+}
+
+export const SummaryAndBannerStep = ({ previewButton }: Props) => (
   <RowGapBlock gap={24}>
     <Row>
       <RowGapBlock gap={8}>
@@ -20,6 +24,7 @@ export const SummaryAndBannerStep = () => (
         <InputComponent label="Banner" inputSize="s">
           <InputText placeholder="Image URL" name="summaryAndBanner.banner" />
         </InputComponent>
+        {previewButton}
       </RowGapBlock>
     </Row>
   </RowGapBlock>