fix statitics

Joystream · Nov 21, 2023 · 7682aeb · 7682aeb
1 parent 9312382
commit 7682aeb
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 24 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>

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
@@ -22,7 +22,7 @@ export const OptionListAccount = React.memo(({ options, onChange, className, isF
     <OptionsListComponent className={className}>
       {freeAccounts.map((option) => (
         <Option key={option.address} onClick={() => onChange && onChange(option)} variant={variant}>
-          <OptionAccount option={option} isForStaking={isForStaking} />
+          <OptionAccount option={option} isForStaking={isForStaking} variant={variant} />
         </Option>
       ))}
       {lockedAccounts.map((option) => (

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/WorkingGroups/MyRoles/MyRole.tsx b/packages/ui/src/app/pages/WorkingGroups/MyRoles/MyRole.tsx
@@ -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>
       }
@@ -256,3 +256,15 @@ export const PageHeaderWithButtons = styled(PageHeaderRow)`
     }
   }
 `
+
+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);
+  }
+`
diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx
@@ -148,7 +148,7 @@ export const WorkingGroupOpening = () => {
               </BadgeStatus>
               <StatusBadge />
             </BadgesRow>
-            <Statistics>
+            <StatisticsStyle>
               <DurationStatistics title="Time Left" value={opening.expectedEnding} />
               <TokenValueStat
                 title={`Reward per ${rewardPeriod?.toString()} blocks`}
@@ -166,7 +166,7 @@ export const WorkingGroupOpening = () => {
                 hiring={opening.hiring}
                 status={opening.status}
               />
-            </Statistics>
+            </StatisticsStyle>
           </RowGapBlock>
         </PageHeaderWrapper>
       }
@@ -226,7 +226,6 @@ const ApplicationStatsStyles = styled(StatsBlock).attrs({ centered: true })`
   justify-content: start;
 `
 
-
 const ResponsiveStyle = css`
   aside {
     > div {
@@ -255,3 +254,15 @@ const ResponsiveStyle = css`
     }
   }
 `
+
+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/WorkingGroupsOpenings.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpenings.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import styled from 'styled-components'
 
 import { PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { ActivitiesBlock } from '@/common/components/Activities/ActivitiesBlock'
@@ -60,11 +61,11 @@ export const WorkingGroupsOpenings = () => {
       }
       main={
         <MainPanel>
-          <Statistics>
+          <StatisticsStyle>
             <MyRolesStat />
             <MyStakeStat />
             <MyEarningsStat />
-          </Statistics>
+          </StatisticsStyle>
           <ContentWithTabs>
             <Tabs tabsSize="xs" tabs={openingsTabs} />
             {activeTab === 'OPENINGS' && (
@@ -84,3 +85,11 @@ export const WorkingGroupsOpenings = () => {
     />
   )
 }
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`
diff --git a/packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx b/packages/ui/src/council/components/election/CandidateCard/CandidateCard.tsx
@@ -210,6 +210,7 @@ const CandidateCardStakeAndControls = styled.div`
   width: fit-content;
   column-gap: 32px;
   margin-top: auto;
+  flex-wrap: wrap;
 `
 
 const CandidateCardStatistics = styled.div`

diff --git a/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx b/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx
@@ -51,5 +51,4 @@ const HeaderImage = styled(UserImage)`
   width: 100%;
 `
 
-const Title = styled.h4`
-`
+const Title = styled.h4``
diff --git a/packages/ui/src/council/modals/RestoreVotes/RestoreVotesModal.tsx b/packages/ui/src/council/modals/RestoreVotes/RestoreVotesModal.tsx
@@ -92,7 +92,7 @@ export const RestoreVotesModal = () => {
   }, [value, votingAttempts, setVotingAttempts])
 
   return (
-    <Modal modalSize="s" modalHeight="s" onClose={hideModal}>
+    <Modal modalSize="m" modalHeight="s" onClose={hideModal}>
       <ModalHeader title="Restore Votes" onClick={hideModal} />
 
       <ModalBody>

diff --git a/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx b/packages/ui/src/proposals/components/ProposalList/ProposalList.tsx
@@ -58,7 +58,7 @@ export const ProposalList = ({ proposals, getSortProps, isPast, isLoading }: Pro
 }
 
 const ProposalListWarpper = styled(List)`
-  media (max-width: 1439px) {
+  @media (max-width: 1439px) {
     row-gap: 16px;
   }
 `
diff --git a/packages/ui/src/proposals/modals/VoteForProposal/VoteForProposalModalForm.tsx b/packages/ui/src/proposals/modals/VoteForProposal/VoteForProposalModalForm.tsx
@@ -62,7 +62,7 @@ export const VoteForProposalModalForm = ({ proposal, send, context }: Props) =>
               </RowGapBlock>
             </Row>
             <Row>
-              <ButtonsGroup>
+              <ResponsiveButtonsGroup>
                 <ButtonPrimary
                   size="medium"
                   onClick={() => send('SET_VOTE_STATUS', { status: 'Approve' })}
@@ -87,7 +87,7 @@ export const VoteForProposalModalForm = ({ proposal, send, context }: Props) =>
                   <CrossIcon />
                   Abstain
                 </ButtonPrimary>
-              </ButtonsGroup>
+              </ResponsiveButtonsGroup>
             </Row>
             {isRejected && (
               <InlineToggleWrap>
@@ -136,3 +136,19 @@ const ProposalPreviewColumn = styled(ScrollableModalColumn)`
   flex-direction: column;
   gap: 24px;
 `
+
+const ResponsiveButtonsGroup = styled(ButtonsGroup)`
+  @media(max-width: 1023px){
+    grid-auto-flow: row;
+    grid-row-gap: 8px;
+    width: 100%;
+
+    button, a {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center:
+      gap: 4px;
+    }
+  }
+`
diff --git a/packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx b/packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx
@@ -39,7 +39,7 @@ export const OpeningDetails = ({ opening, onClick, past }: OpeningListItemProps)
           <OpenedItemTitle>{opening.title}</OpenedItemTitle>
         </OpenedTop>
         <TextBig light>{opening.shortDescription}</TextBig>
-        <Statistics withMargin gapSize="s">
+        <StatisticsStyle withMargin>
           <StatsBlock size="m" centered>
             <TextBig>
               <TokenValue value={rewardPeriod?.mul(opening.rewardPerBlock)} />
@@ -79,7 +79,7 @@ export const OpeningDetails = ({ opening, onClick, past }: OpeningListItemProps)
               </Tooltip>
             </MinStake>
           </StatsBlock>
-        </Statistics>
+        </StatisticsStyle>
         <ButtonsGroup align="right">
           <LinkButtonGhost to={openingRoute} size="medium">
             Learn more
@@ -104,3 +104,11 @@ const MinStake = styled(Subscription)`
   align-items: center;
   gap: 8px;
 `
+
+const StatisticsStyle = styled(Statistics)`
+  grid-template-columns: 1fr;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+`