Merge pull request #519 from makerdao/fix/mobile-updates

Style updates for mobile

modules/app/components/StatusText.tsx

@@ -0,0 +1,17 @@
+import { Text } from 'theme-ui';
+
+type Props = {
+  children: string | JSX.Element;
+  testId?: string;
+};
+
+export const StatusText = (props: Props): JSX.Element => (
+  <Text
+    as="p"
+    variant="caps"
+    datatest-id={props.testId}
+    sx={{ textAlign: 'center', px: [3, 4], wordBreak: 'break-word' }}
+  >
+    {props.children}
+  </Text>
+);

modules/comments/components/CommentItem.tsx

@@ -96,7 +96,7 @@ export default function CommentItem({
         mt={2}
         variant="text"
         color="secondaryEmphasis"
-        sx={{ overflowWrap: 'break-word', wordBreak: 'break-word' }}
+        sx={{ overflowWrap: 'break-word', wordBreak: 'break-word', fontSize: [2, 3] }}
         dangerouslySetInnerHTML={{ __html: comment.comment.comment }}
       ></Text>
     </Box>

modules/comments/components/ExecutiveComments.tsx

@@ -88,15 +88,16 @@ export default function ExecutiveComments({
         <Box>
           {sortedComments && sortedComments.length > 0 ? (
             <Box>
-              {sortedComments.map(comment => (
+              {sortedComments.map((comment, i) => (
                 <Box
-                  sx={{ borderBottom: '1px solid', borderColor: 'secondaryMuted', py: 4 }}
+                  sx={{
+                    borderBottom: sortedComments.length - 1 !== i ? '1px solid' : 'none',
+                    borderColor: 'secondaryMuted',
+                    py: 4
+                  }}
                   key={comment.address.address}
                 >
-                  <CommentItem
-                    comment={comment}
-                    //  twitterUrl=""
-                  />
+                  <CommentItem comment={comment} />
                 </Box>
               ))}
             </Box>

modules/comments/components/PollCommentItem.tsx

@@ -25,16 +25,15 @@ export default function PollCommentItem({
       return 'Voted';
     }
 
-    const voteOptionText =
-      isResultDisplaySingleVoteBreakdown(poll.parameters) ? (
-        <Text sx={{ color: getVoteColor(commentVote.optionId, poll.parameters.inputFormat) }}>
-          {poll.options[commentVote.optionId]}
-        </Text>
-      ) : (
-        <Box>
-          <RankedChoiceVoteSummary choices={commentVote.rankedChoiceOption || []} poll={poll} />
-        </Box>
-      );
+    const voteOptionText = isResultDisplaySingleVoteBreakdown(poll.parameters) ? (
+      <Text sx={{ color: getVoteColor(commentVote.optionId, poll.parameters.inputFormat) }}>
+        {poll.options[commentVote.optionId]}
+      </Text>
+    ) : (
+      <Box>
+        <RankedChoiceVoteSummary choices={commentVote.rankedChoiceOption || []} poll={poll} />
+      </Box>
+    );
 
     return (
       <Text>

modules/delegates/components/DelegateMKRChart.tsx

@@ -78,6 +78,10 @@ export function DelegateMKRChart({ delegate }: { delegate: Delegate }): React.Re
     return format(new Date(tickItem.toISOString()), dateFormat);
   };
 
+  const formatYAxis = tickItem => {
+    return tickItem.toLocaleString();
+  };
+
   return (
     <Box>
       <Flex
@@ -151,6 +155,7 @@ export function DelegateMKRChart({ delegate }: { delegate: Delegate }): React.Re
               viewBox: { height: 10, width: 10, x: 20, y: 300 }
             }}
             tickMargin={5}
+            tickFormatter={formatYAxis}
           />
 
           <CartesianGrid stroke="#D5D9E0" strokeDasharray="5 5" />

modules/delegates/components/DelegatedByAddress.tsx

@@ -278,7 +278,7 @@ const DelegatedByAddress = ({ delegators, totalDelegated }: DelegatedByAddressPr
                 variant="caps"
                 onClick={() => changeSort('mkr')}
               >
-                {bpi < 1 ? 'Weight' : 'Voting Weight'}
+                {bpi < 1 ? '%' : 'Voting Weight'}
                 {sortBy.type === 'mkr' ? (
                   sortBy.order === 1 ? (
                     <Icon name="chevron_down" size={2} ml={1} />

modules/executive/components/ExecutiveOverviewCard.tsx

@@ -18,6 +18,7 @@ import { ZERO_ADDRESS } from 'modules/web3/constants/addresses';
 import { StatBox } from 'modules/app/components/StatBox';
 import { useExecutiveComments } from 'modules/comments/hooks/useExecutiveComments';
 import CommentCount from 'modules/comments/components/CommentCount';
+import { StatusText } from 'modules/app/components/StatusText';
 
 type Props = {
   proposal: Proposal;
@@ -192,18 +193,9 @@ export default function ExecutiveOverviewCard({
       <Flex sx={{ flexDirection: 'column', justifySelf: 'flex-end' }}>
         <Divider my={0} />
         <Flex sx={{ py: 2, justifyContent: 'center' }}>
-          <Text
-            data-testid="proposal-status"
-            as="p"
-            variant="caps"
-            sx={{
-              textAlign: 'center',
-              px: [3, 4],
-              wordBreak: 'break-word'
-            }}
-          >
+          <StatusText testId="proposal-status">
             {getStatusText({ proposalAddress: proposal.address, spellData: proposal.spellData, mkrOnHat })}
-          </Text>
+          </StatusText>
         </Flex>
       </Flex>
     </Card>

modules/executive/components/SpellEffectsTab.tsx

@@ -111,31 +111,35 @@ export function SpellEffectsTab({
         <Box
           sx={theme => ({
             background: theme.colors?.background,
-            p: 3,
+            mt: 3,
             transition: 'all 300ms linear',
             overflow: 'hidden',
             borderRadius: '3px'
           })}
         >
           <Flex
             sx={{
-              justifyContent: 'space-between'
+              justifyContent: 'space-between',
+              flexDirection: ['column', 'row']
             }}
           >
             {spellData?.executiveHash && (
-              <Text sx={{ mr: 2, fontWeight: 'semiBold', wordBreak: 'break-all' }}>
+              <Text sx={{ mr: [0, 2], fontWeight: 'semiBold', wordBreak: 'break-all', fontSize: [2, 3] }}>
                 {spellData?.executiveHash}
               </Text>
             )}
-            <Box sx={{ cursor: 'pointer', ml: 2, minWidth: '99px' }} onClick={() => setExpanded(!expanded)}>
+            <Box
+              sx={{ cursor: 'pointer', mt: [2, 0], ml: [0, 2], minWidth: '99px', fontSize: [2, 3] }}
+              onClick={() => setExpanded(!expanded)}
+            >
               <Text color={'textMuted'}>
                 What&apos;s this? <DaiUIIcon name={expanded ? 'chevron_up' : 'chevron_down'} size={2} />
               </Text>
             </Box>
           </Flex>
 
           {expanded && (
-            <Box sx={{ mt: 3 }}>
+            <Box sx={{ mt: 3, fontSize: [2, 3] }}>
               <Text as="p" color="textMuted">
                 This hash allows for manually verifying that the spell belongs to the correct Executive
                 Proposal. It can be reproduced by hashing the raw markdown text of this Executive Proposal.
@@ -170,7 +174,7 @@ export function SpellEffectsTab({
             </Text>
             <Box>
               <ExternalLink href={proposal.proposalLink} title="View in GitHub">
-                <Text sx={{ color: 'accentBlue', ':hover': { color: 'blueLinkHover' } }}>
+                <Text sx={{ fontSize: [2, 3], color: 'accentBlue', ':hover': { color: 'blueLinkHover' } }}>
                   View in GitHub
                   <DaiUIIcon ml={2} name="arrowTopRight" size="2" />
                 </Text>
@@ -186,12 +190,13 @@ export function SpellEffectsTab({
                 <Text
                   as="p"
                   sx={{
+                    fontSize: [2, 3],
                     fontWeight: 'semiBold'
                   }}
                 >
                   Expiration
                 </Text>
-                <Text as="p" color="textMuted">
+                <Text as="p" color="textMuted" sx={{ fontSize: [2, 3] }}>
                   {formatDateWithoutTime(spellData?.expiration)}
                 </Text>
               </Box>
@@ -204,12 +209,13 @@ export function SpellEffectsTab({
                 <Text
                   as="p"
                   sx={{
+                    fontSize: [2, 3],
                     fontWeight: 'semiBold'
                   }}
                 >
                   Office Hours Only
                 </Text>
-                <Text as="p" color="textMuted">
+                <Text as="p" color="textMuted" sx={{ fontSize: [2, 3] }}>
                   Spell will only be executed Monday through Friday between 14:00 and 21:00 UTC
                 </Text>
               </Box>

modules/polling/components/PollOverviewCard.tsx

@@ -215,10 +215,10 @@ export default function PollOverviewCard({
                     >
                       <Box sx={{ mt: 3 }}>
                         <ErrorBoundary componentName="Poll Results">
-                          {isResultDisplaySingleVoteBreakdown(poll.parameters)  && (
+                          {isResultDisplaySingleVoteBreakdown(poll.parameters) && (
                             <PollVotePluralityResultsCompact tally={tally} showTitles={false} />
                           )}
-                          {isResultDisplayInstantRunoffBreakdown(poll.parameters)  && (
+                          {isResultDisplayInstantRunoffBreakdown(poll.parameters) && (
                             <RankedChoiceVoteSummary
                               choices={tally.results.map(i => parseInt(i.optionId))}
                               poll={poll}

modules/polling/components/PollVoteHistoryItem.tsx

@@ -8,10 +8,16 @@ import { formatDateWithTime } from 'lib/datetime';
 import { usePollTally } from '../hooks/usePollTally';
 import SkeletonThemed from 'modules/app/components/SkeletonThemed';
 import { getVoteColor } from '../helpers/getVoteColor';
-import { isInputFormatRankFree, isPluralityVictoryConditionPoll, isResultDisplayInstantRunoffBreakdown } from '../helpers/utils';
+import {
+  isInputFormatRankFree,
+  isPluralityVictoryConditionPoll,
+  isResultDisplayInstantRunoffBreakdown
+} from '../helpers/utils';
 import { RankedChoiceVoteSummary } from './RankedChoiceVoteSummary';
+import { useBreakpointIndex } from '@theme-ui/match-media';
 
 export function PollVoteHistoryItem({ vote }: { vote: PollVoteHistory }): React.ReactElement {
+  const bpi = useBreakpointIndex();
   const voteDate = formatDateWithTime(vote.blockTimestamp);
   const { tally } = usePollTally(vote.pollId);
   const isPluralityVote = isPluralityVictoryConditionPoll(vote.poll.parameters);
@@ -46,8 +52,8 @@ export function PollVoteHistoryItem({ vote }: { vote: PollVoteHistory }): React.
 
         <Box mt={2} sx={{ display: 'flex', alignItems: 'center' }}>
           {vote.poll.discussionLink && (
-            <ExternalLink title="Discussion" href={vote.poll.discussionLink} styles={{ mr: 2 }}>
-              <Text sx={{ fontSize: 3, fontWeight: 'semiBold' }}>
+            <ExternalLink title="Discussion" href={vote.poll.discussionLink} styles={{ mr: 2, mb: [2, 0] }}>
+              <Text sx={{ fontSize: [2, 3], fontWeight: 'semiBold' }}>
                 Discussion
                 <Icon ml={2} name="arrowTopRight" size={2} />
               </Text>
@@ -94,7 +100,11 @@ export function PollVoteHistoryItem({ vote }: { vote: PollVoteHistory }): React.
             }}
           >
             {isResultDisplayInstantRunoffBreakdown(vote.poll.parameters) ? (
-              <RankedChoiceVoteSummary choices={vote.rankedChoiceOption || []} poll={vote.poll} />
+              <RankedChoiceVoteSummary
+                choices={vote.rankedChoiceOption || []}
+                poll={vote.poll}
+                align={bpi < 1 ? 'left' : 'right'}
+              />
             ) : (
               vote.optionValue[0]
             )}

modules/polling/components/PollWinningOptionBox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PluralityResult, Poll, PollTally, RankedChoiceResult } from '../types';
-import { Text, Flex } from 'theme-ui';
+import { Flex } from 'theme-ui';
 import {
   isActivePoll,
   isInputFormatChooseFree,
@@ -11,6 +11,7 @@ import SkeletonThemed from 'modules/app/components/SkeletonThemed';
 import { getVoteColor } from '../helpers/getVoteColor';
 import { formatValue } from 'lib/string';
 import { parseUnits } from 'ethers/lib/utils';
+import { StatusText } from 'modules/app/components/StatusText';
 
 export default function PollWinningOptionBox({
   tally,
@@ -23,36 +24,36 @@ export default function PollWinningOptionBox({
   return (
     <Flex sx={{ py: 2, justifyContent: 'center' }}>
       {tally && tally.winningOptionName && tally.totalMkrParticipation > 0 ? (
-        <Text as="p" variant="caps" sx={{ textAlign: 'center', px: [3, 4], wordBreak: 'break-word' }}>
-          {textWin}:{' '}
-          <span sx={{ color: getVoteColor(parseInt(tally?.winner || '0'), poll.parameters.inputFormat) }}>
-            {tally?.winningOptionName}
-          </span>{' '}
-          {isInputFormatSingleChoice(poll.parameters) &&
-            'with ' +
-              formatValue(
-                parseUnits(
-                  (tally.results as PluralityResult[])
-                    .find(({ optionId }) => optionId === tally.winner)
-                    ?.mkrSupport.toString() || '0'
-                )
-              ) +
-              ' MKR supporting.'}
-          {(isInputFormatRankFree(poll.parameters) || isInputFormatChooseFree(poll.parameters)) &&
-            'with ' +
-              formatValue(
-                parseUnits(
-                  (tally.results as RankedChoiceResult[])
-                    .find(({ optionId }) => optionId === tally.winner)
-                    ?.firstChoice.toString() || '0'
-                )
-              ) +
-              ' MKR supporting as first choice.'}
-        </Text>
+        <StatusText>
+          <>
+            {textWin}:{' '}
+            <span sx={{ color: getVoteColor(parseInt(tally?.winner || '0'), poll.parameters.inputFormat) }}>
+              {tally?.winningOptionName}
+            </span>{' '}
+            {isInputFormatSingleChoice(poll.parameters) &&
+              'with ' +
+                formatValue(
+                  parseUnits(
+                    (tally.results as PluralityResult[])
+                      .find(({ optionId }) => optionId === tally.winner)
+                      ?.mkrSupport.toString() || '0'
+                  )
+                ) +
+                ' MKR supporting.'}
+            {(isInputFormatRankFree(poll.parameters) || isInputFormatChooseFree(poll.parameters)) &&
+              'with ' +
+                formatValue(
+                  parseUnits(
+                    (tally.results as RankedChoiceResult[])
+                      .find(({ optionId }) => optionId === tally.winner)
+                      ?.firstChoice.toString() || '0'
+                  )
+                ) +
+                ' MKR supporting as first choice.'}
+          </>
+        </StatusText>
       ) : tally && !tally.winningOptionName ? (
-        <Text as="p" variant="caps" sx={{ textAlign: 'center', px: [3, 4], wordBreak: 'break-word' }}>
-          {isActivePoll(poll) ? 'No leading option' : 'No winning option'}
-        </Text>
+        <StatusText>{isActivePoll(poll) ? 'No leading option' : 'No winning option'}</StatusText>
       ) : (
         <SkeletonThemed />
       )}

modules/polling/components/RankedChoiceVoteSummary.tsx

@@ -5,11 +5,13 @@ import { Poll } from '../types';
 export function RankedChoiceVoteSummary({
   choices,
   poll,
-  limit = 0
+  limit = 0,
+  align = 'right'
 }: {
   choices: number[];
   poll: Poll;
   limit?: number;
+  align?: 'right' | 'left';
 }): React.ReactElement {
   return (
     <Box>
@@ -26,11 +28,14 @@ export function RankedChoiceVoteSummary({
             key={`voter-${poll.pollId}-option-${choice}-${index}`}
             sx={{
               fontSize: index === 0 ? 2 : 1,
+              fontWeight: index === 0 ? 'semiBold' : 'normal',
               color: index === 0 ? 'text' : '#708390',
-              textAlign: 'right'
+              textAlign: align
             }}
           >
-            {limitString(poll.options[choice], 30, '...')} - {index + 1}
+            {align === 'right'
+              ? `${limitString(poll.options[choice], 30, '...')} - ${index + 1}`
+              : `${index + 1} - ${limitString(poll.options[choice], 30, '...')}`}
           </Box>
         ))}
     </Box>