More fixes from RWD QA round (#4636)

* update responsiveness * fix statitics * fix WorkingGroups page word-break * update word break, annouceCandidacyModal stepper layout * fix Tabs bottom line distance
Joystream · Nov 22, 2023 · 5be8f61 · 5be8f61 · vercel · Nov 22, 2023
1 parent 72b6b17
commit 5be8f61
Show file tree

Hide file tree

Showing 51 changed files with 377 additions and 167 deletions.
diff --git a/packages/ui/src/accounts/components/AccountInfo.tsx b/packages/ui/src/accounts/components/AccountInfo.tsx
@@ -16,16 +16,17 @@ import { Account } from '../types'
 interface AccountInfoProps {
   account: Account
   locked?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
-export const AccountInfo = React.memo(({ account, locked }: AccountInfoProps) => {
+export const AccountInfo = React.memo(({ account, locked, variant }: AccountInfoProps) => {
   const { active } = useMyMemberships()
 
   return (
     <AccountInfoWrap>
       <PhotoWrapper>
         <AccountPhoto>
-          <Identicon size={40} theme={'beachball'} value={account.address} />
+          <Identicon size={variant === 's' || variant === 'm' ? 28 : 40} theme={'beachball'} value={account.address} />
         </AccountPhoto>
         {locked && (
           <LockIconWrapper>
@@ -42,7 +43,7 @@ export const AccountInfo = React.memo(({ account, locked }: AccountInfoProps) =>
   )
 })
 
-const AccountInfoWrap = styled.div`
+export const AccountInfoWrap = styled.div`
   display: grid;
   grid-template-columns: 40px 1fr;
   grid-template-rows: min-content 24px 18px;

diff --git a/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/OptionAccount.tsx
@@ -12,9 +12,10 @@ import { Colors } from '@/common/constants'
 interface Props {
   option: AccountOption
   isForStaking?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
-export const OptionAccount = ({ option, isForStaking }: Props) => {
+export const OptionAccount = ({ option, isForStaking, variant }: Props) => {
   const balances = useBalance(option.address)
   const balance = isForStaking ? balances?.total : balances?.transferable
   const balanceType = isForStaking ? 'Total' : 'Transferable'
@@ -23,7 +24,7 @@ export const OptionAccount = ({ option, isForStaking }: Props) => {
 
   return (
     <>
-      <AccountInfo account={option} locked={isLocked} />
+      <AccountInfo account={option} locked={isLocked} variant={variant} />
       <BalanceInfoNarrow>
         <InfoTitle>{balanceType} balance</InfoTitle>
         <InfoValueWithLocks>

diff --git a/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/OptionListAccount.tsx
@@ -12,27 +12,22 @@ interface Props {
   onChange: (option: AccountOption) => void
   className?: string
   isForStaking?: boolean
-  isSmallVariant?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
-export const OptionListAccount = React.memo(({ options, onChange, className, isForStaking, isSmallVariant }: Props) => {
+export const OptionListAccount = React.memo(({ options, onChange, className, isForStaking, variant }: Props) => {
   const freeAccounts = options.filter((option) => (option.optionLocks ? option.optionLocks?.length === 0 : true))
   const lockedAccounts = options.filter((option) => !!option.optionLocks?.length)
   return (
     <OptionsListComponent className={className}>
       {freeAccounts.map((option) => (
-        <Option key={option.address} onClick={() => onChange && onChange(option)} isSmallVariant={isSmallVariant}>
-          <OptionAccount option={option} isForStaking={isForStaking} />
+        <Option key={option.address} onClick={() => onChange && onChange(option)} variant={variant}>
+          <OptionAccount option={option} isForStaking={isForStaking} variant={variant} />
         </Option>
       ))}
       {lockedAccounts.map((option) => (
         <AccountLockTooltip boundaryClassName={className} key={option.address} locks={option.optionLocks}>
-          <Option
-            key={option.address}
-            onClick={() => onChange && onChange(option)}
-            disabled
-            isSmallVariant={isSmallVariant}
-          >
+          <Option key={option.address} onClick={() => onChange && onChange(option)} disabled variant={variant}>
             <OptionAccount option={option} isForStaking={isForStaking} />
           </Option>
         </AccountLockTooltip>

diff --git a/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx b/packages/ui/src/accounts/components/SelectAccount/SelectAccount.tsx
@@ -25,7 +25,7 @@ interface SelectAccountProps extends Pick<SelectProps<AccountOption>, 'id' | 'se
   onChange?: (selected: AccountOption) => void
   filter?: (option: AccountOption) => boolean
   name?: string
-  isSmallVariant?: boolean
+  variant?: 's' | 'm' | 'l'
 }
 
 interface SelectStakingAccountProps extends SelectAccountProps {
@@ -40,17 +40,7 @@ interface BaseSelectAccountProps extends SelectAccountProps {
 }
 
 export const BaseSelectAccount = React.memo(
-  ({
-    id,
-    onChange,
-    accounts,
-    filter,
-    selected,
-    disabled,
-    onBlur,
-    isForStaking,
-    isSmallVariant,
-  }: BaseSelectAccountProps) => {
+  ({ id, onChange, accounts, filter, selected, disabled, onBlur, isForStaking, variant }: BaseSelectAccountProps) => {
     const options = accounts.filter(filter || (() => true))
 
     const [search, setSearch] = useState('')
@@ -78,15 +68,15 @@ export const BaseSelectAccount = React.memo(
         onChange={change}
         onBlur={onBlur}
         disabled={disabled}
-        renderSelected={renderSelected(isForStaking, isSmallVariant)}
+        renderSelected={renderSelected(isForStaking, variant)}
         placeholder="Select account or paste account address"
         renderList={(onOptionClick) => (
           <OptionListAccount
             className="select-account-boundary"
             onChange={onOptionClick}
             options={filteredOptions}
             isForStaking={isForStaking}
-            isSmallVariant={isSmallVariant}
+            variant={variant}
           />
         )}
         onSearch={(search) => setSearch(search)}
@@ -95,9 +85,9 @@ export const BaseSelectAccount = React.memo(
   }
 )
 
-const renderSelected = (isForStaking?: boolean, isSmallVariant?: boolean) => (option: AccountOption) =>
+const renderSelected = (isForStaking?: boolean, variant?: 's' | 'm' | 'l') => (option: AccountOption) =>
   (
-    <SelectedOption isSmallVariant={isSmallVariant}>
+    <SelectedOption variant={variant}>
       <OptionAccount option={option} isForStaking={isForStaking} />
     </SelectedOption>
   )

diff --git a/packages/ui/src/accounts/components/StakeStep.tsx b/packages/ui/src/accounts/components/StakeStep.tsx
@@ -36,7 +36,7 @@ export const StakeStep = ({
   state,
   errors,
 }: StakeStepProps) => {
-  const { isMobile } = useResponsive()
+  const { isMobile, size } = useResponsive()
   const selectAccountFilter = useCallback(
     (account: Account) => !accountsFilter || accountsFilter(account),
     [accountsFilter]
@@ -61,7 +61,7 @@ export const StakeStep = ({
               minBalance={minStake}
               lockType={stakeLock}
               filter={selectAccountFilter}
-              isSmallVariant={isMobile}
+              variant={isMobile ? 's' : size === 'md' ? 'm' : 'l'}
             />
           </InputComponent>
         </RowGapBlock>

diff --git a/packages/ui/src/app/pages/Council/Council.tsx b/packages/ui/src/app/pages/Council/Council.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react'
+import styled from 'styled-components'
 
 import { PageHeaderWithHint } from '@/app/components/PageHeaderWithHint'
 import { PageLayout } from '@/app/components/PageLayout'
@@ -43,7 +44,7 @@ export const Council = () => {
   const rewardPerDay = useMemo(() => reward?.period?.mul(reward?.amount ?? asBN(0)) ?? asBN(0), [reward])
   const main = (
     <MainPanel>
-      <Statistics>
+      <StatisticsStyle>
         {electionStage === 'inactive' ? (
           <BlockDurationStatistics title="Normal period remaining length" value={idlePeriodRemaining} />
         ) : (
@@ -64,7 +65,7 @@ export const Council = () => {
             { label: 'Per Week', value: rewardPerDay.mul(asBN(7)) },
           ]}
         />
-      </Statistics>
+      </StatisticsStyle>
 
       {!isCouncilorLoading && sortedCouncilors.length === 0 ? (
         <NotFoundText>There is no council member at the moment</NotFoundText>
@@ -92,3 +93,11 @@ const sortBy = ({ key, isDescending }: CouncilOrder): ((a: Councilor, b: Council
       return (a, b) => (asBN(a[key] ?? 0).gte(asBN(b[key] ?? 0)) ? 1 : -1) * direction
   }
 }
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`
diff --git a/packages/ui/src/app/pages/Forum/ForumWatchlist.tsx b/packages/ui/src/app/pages/Forum/ForumWatchlist.tsx
@@ -1,15 +1,14 @@
 import React from 'react'
-import styled from 'styled-components'
 
 import { PageLayout } from '@/app/components/PageLayout'
-import { HorizontalScroller } from '@/common/components/HorizontalScroller/HorizontalScroller'
 import { RowGapBlock } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { ForumPageHeader } from '@/forum/components/ForumPageHeader'
 import { ThreadCard } from '@/forum/components/ThreadCard/ThreadCard'
 import { ThreadCardSkeleton } from '@/forum/components/ThreadCard/ThreadCardSkeleton'
+import { ThreadCardsStyles } from '@/forum/components/threads/ThreadList'
 import { useWatchlistedThreads } from '@/forum/hooks/useWatchlistedThreads'
 
 import { ForumTabs } from './components/ForumTabs'
@@ -27,17 +26,15 @@ export const ForumWatchlist = () => {
     return (
       <RowGapBlock gap={20}>
         {!loading ? (
-          <HorizontalScroller
-            items={
-              threads.length ? (
-                threads.map((thread) => <StyledThreadCard thread={thread} watchlistButton />)
-              ) : (
-                <div>No threads found</div>
-              )
-            }
-          />
+          <ThreadCardsStyles>
+            {threads.length ? (
+              threads.map((thread) => <ThreadCard thread={thread} watchlistButton />)
+            ) : (
+              <div>No threads found</div>
+            )}
+          </ThreadCardsStyles>
         ) : (
-          <HorizontalScroller items={<ThreadCardSkeleton count={10} />} />
+          <ThreadCardsStyles>{<ThreadCardSkeleton count={10} />}</ThreadCardsStyles>
         )}
       </RowGapBlock>
     )
@@ -53,7 +50,3 @@ export const ForumWatchlist = () => {
     />
   )
 }
-
-const StyledThreadCard = styled(ThreadCard)`
-  min-width: 330px;
-`
diff --git a/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { useBalance } from '@/accounts/hooks/useBalance'
-import { PageLayout, PageHeaderWrapper, PageHeaderWithButtons } from '@/app/components/PageLayout'
+import { PageLayout, PageHeaderWrapper, PageHeaderRow } from '@/app/components/PageLayout'
 import { ActivitiesBlock } from '@/common/components/Activities/ActivitiesBlock'
 import { BadgesRow, BadgeStatus } from '@/common/components/BadgeStatus'
 import { BlockTime } from '@/common/components/BlockTime'
@@ -151,12 +151,12 @@ export const MyRole = () => {
                 </BadgeStatus>
               )}
             </BadgesRow>
-            <Statistics>
+            <StatisticsStyle>
               <MyEarningsStat />
               <StakeStat value={worker.stake} minStake={worker.minStake} />
               <TokenValueStat title="Owed reward" value={worker.owedReward} />
               <NextPayoutStat workers={[worker]} />
-            </Statistics>
+            </StatisticsStyle>
           </RowGapBlock>
         </PageHeaderWrapper>
       }
@@ -232,3 +232,39 @@ const RoleAccountHeader = styled.section`
   justify-content: space-between;
   align-items: flex-end;
 `
+
+export const PageHeaderWithButtons = styled(PageHeaderRow)`
+  @media (max-width: 1439px) {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  @media (max-width: 767px) {
+    ${ButtonsGroup} {
+      grid-auto-flow: row;
+      grid-row-gap: 8px;
+      width: 100%;
+
+      button, a {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center:
+        gap: 4px;
+      }
+    }
+  }
+`
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 1440px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`
diff --git a/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRoles.tsx b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRoles.tsx
@@ -1,5 +1,6 @@
 import BN from 'bn.js'
 import React from 'react'
+import styled from 'styled-components'
 
 import { PageLayout, PageHeaderWrapper } from '@/app/components/PageLayout'
 import { Loading } from '@/common/components/Loading'
@@ -58,15 +59,27 @@ export const MyRoles = () => {
       }
       main={
         <MainPanel>
-          <Statistics>
+          <StatisticsStyle>
             <MyEarningsStat />
             <MyStakeStat />
             <TokenValueStat title="Total owed reward" value={owedReward} />
             <NextPayoutStat workers={workers} />
-          </Statistics>
+          </StatisticsStyle>
           {displayRoles()}
         </MainPanel>
       }
     />
   )
 }
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 1440px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+`