Merge branch 'sara-feedback'

packages/frontend/src/components/Election/Voting/GenericBallotView/GenericBallotView.tsx

@@ -116,11 +116,17 @@ export default function GenericBallotView({
           />
 
           <Grid item xs={10} sx={{ p:5, px:4 }} className="footer">
-            {t(`ballot.methods.${methodKey}.footer_${ballotContext.race.num_winners == 1 ? 'single_winner' : 'multi_winner'}`,
-              {n: ballotContext.race.num_winners})
-            }
+            <Typography align='left' sx={{ typography: { sm: 'body1', xs: 'body2' } }}>
+              {t(`ballot.methods.${methodKey}.footer_${ballotContext.race.num_winners == 1 ? 'single_winner' : 'multi_winner'}`,
+                {n: ballotContext.race.num_winners})
+              }
+            </Typography>
             <br/>
-            {learnLink != '' && <Link href={learnLink} target='_blank'>{t('ballot.learn_more', {voting_method: methodName})}</Link>}
+            {learnLink != '' &&
+            <Typography align='left' sx={{ typography: { sm: 'body1', xs: 'body2' } }}>
+              <Link href={learnLink} target='_blank'>{t('ballot.learn_more', {voting_method: methodName})}</Link>
+            </Typography>
+            }
           </Grid>
 
           { ballotContext.warnings && ballotContext.warnings.map(({message, severity}, warningIndex) => 

packages/frontend/src/components/Election/Voting/VotePage.tsx

@@ -199,9 +199,9 @@ const VotePage = () => {
       </BallotContext.Provider>
 
       {pages.length > 1 &&
-        <Box sx={{ display: 'flex', justifyContent: "space-between" }}>
+        <Box sx={{ display: 'flex', justifyContent: "space-between", marginTop: '10px' }}>
           <Button
-            variant='outlined'
+            variant='contained'
             onClick={() => setCurrentPage(count => count - 1)}
             disabled={currentPage === 0}
             sx={{ maxHeight: '40px', minWidth: '100px', marginRight: {xs: '10px', md: '40px'}, visibility: (currentPage === 0) ? 'hidden' : 'visible' }}>
@@ -224,15 +224,14 @@ const VotePage = () => {
                       <polygon points="13,16 11,16 11,18 13,18"/>
                       <polygon points="13,10 11,10 11,15 13,15"/>
                       </>}
-
                     </SvgIcon>
                   </StepLabel>
                 </Step>
               </Box>
             ))}
           </Stepper>
           <Button
-            variant='outlined'
+            variant='contained'
             onClick={() => setCurrentPage(count => count + 1)}
             disabled={currentPage === pages.length - 1}
             sx={{ maxHeight: '40px', minWidth: '100px', marginLeft: {xs: '10px', md: '40px'}, visibility: (currentPage === pages.length - 1) ? 'hidden' : 'visible' }}>
@@ -246,8 +245,8 @@ const VotePage = () => {
           variant='contained'
           onClick={() => setIsOpen(true)}
           disabled={isPending || currentPage !== pages.length - 1 || pages[currentPage].candidates.every(candidate => candidate.score === null || pages.some(page => page.warnings))}//disable unless on last page and at least one candidate scored
-          style={{ marginLeft: "auto", minWidth: "150px", marginTop: "20px" }}>
-              {t('ballot.submit_ballot')}
+          style={{ margin: "auto", minWidth: "150px", marginTop: "40px" }}>
+              <Typography variant="h6">{t('ballot.submit_ballot')}</Typography>
         </Button>
       </Box>
       {isPending && <div> {t('ballot.submitting')} </div>}

packages/frontend/src/components/ElectionForm/Details/ElectionAuthForm.tsx

@@ -26,21 +26,15 @@ export default function ElectionAuthForm() {
                     p: 1,
                 }}
             >
-                <Grid xs={12}>
+                <Grid xs={12} sx={{marginBottom: 1}}>
                     <Typography gutterBottom variant="h4" component="h4">
                         {t('admin_home.voter_authentication.form_label')}
                     </Typography>
                 </Grid>
                 <FormControl>
-                    <FormLabel id="demo-radio-buttons-group-label">{t('admin_home.voter_authentication.help_text')}</FormLabel>
-                    <FormControlLabel control={
-                        <Radio
-                            disabled = {election.state !== 'draft'}
-                            checked={ip}
-                            onChange={() => handleUpdate({ ip_address: true })}
-                            value="ip"
-                        />}
-                        label={t('admin_home.voter_authentication.ip_label')} />
+                    <FormLabel id="demo-radio-buttons-group-label" sx={{marginBottom: 1}}>
+                        {t('admin_home.voter_authentication.help_text')}
+                    </FormLabel>
                     <FormControlLabel control={
                         <Radio
                             disabled = {election.state !== 'draft'}
@@ -49,7 +43,6 @@ export default function ElectionAuthForm() {
                             value="device_id"
                         />}
                         label={t('admin_home.voter_authentication.device_label')} />
-
                     <FormControlLabel control={
                         <Radio
                             disabled = {election.state !== 'draft'}
@@ -58,6 +51,14 @@ export default function ElectionAuthForm() {
                             value="email"
                         />}
                         label={t('admin_home.voter_authentication.email_label')} />
+                    <FormControlLabel control={
+                        <Radio
+                            disabled = {election.state !== 'draft'}
+                            checked={ip}
+                            onChange={() => handleUpdate({ ip_address: true })}
+                            value="ip"
+                        />}
+                        label={t('admin_home.voter_authentication.ip_label')} />
                     <FormControlLabel control={
                         <Radio
                             disabled = {election.state !== 'draft'}

packages/frontend/src/components/ElectionForm/ElectionSettings.tsx

@@ -87,7 +87,7 @@ export default function ElectionSettings() {
             >
                 <DialogTitle>{t('election_settings.dialog_title')}</DialogTitle>
                 <DialogContent>
-                    <Grid item xs={12} sx={{ m: 0, my: 1, p: 1 }}>
+                    <Grid item xs={12} sx={{ m: 0, my: 0, p: 1 }}>
                         <FormControl component="fieldset" variant="standard">
                             <FormGroup>
                                 <CheckboxSetting setting='random_candidate_order'/>

packages/frontend/src/components/ElectionForm/Races/RaceForm.tsx

@@ -11,13 +11,15 @@ import { Box, FormHelperText, Radio, RadioGroup, Stack } from "@mui/material"
 import IconButton from '@mui/material/IconButton'
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
+import { scrollToElement, useSubstitutedTranslation } from '../../util';
 import useElection from '../../ElectionContextProvider';
 import { v4 as uuidv4 } from 'uuid';
 import useConfirm from '../../ConfirmationDialogProvider';
 import useFeatureFlags from '../../FeatureFlagContextProvider';
 import { SortableList } from '~/components/DragAndDrop';
 
 export default function RaceForm({ race_index, editedRace, errors, setErrors, applyRaceUpdate }) {
+    const {t} = useSubstitutedTranslation();
     const flags = useFeatureFlags();
     const [showsAllMethods, setShowsAllMethods] = useState(false)
     const { election } = useElection()
@@ -175,7 +177,21 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                     flags.isSet('MULTI_WINNER') &&
                     <Grid item xs={12} sx={{ m: 0, p: 1 }}>
                         <Typography gutterBottom variant="h6" component="h6">
-                            Number of Winners
+                            Multi-Winner?
+                        </Typography>
+                        <RadioGroup
+                            aria-labelledby="voting-method-radio-group"
+                            name="voter-method-radio-buttons-group"
+                            value={editedRace.voting_method}
+                            onChange={(e) => applyRaceUpdate(race => { race.voting_method = e.target.value })}
+                        >
+                            <FormControlLabel value="Single-Winner" control={<Radio />} label={t('edit_race.single_winner')} sx={{ mb: 0, pb: 0 }} />
+                            <FormControlLabel value="Basic Multi-Winner" control={<Radio />} label={t('edit_race.bloc_multi_winner')} sx={{ mb: 0, pb: 0 }} />
+                            <FormControlLabel value="Proportional Multi-Winner" control={<Radio />} label={t('edit_race.proportional_multi_winner')} sx={{ mb: 0, pb: 0 }} />
+                        </RadioGroup>
+
+                        <Typography gutterBottom component="p" sx={{marginTop: 2}}>
+                            <b>Number of Winners?</b>
                         </Typography>
                         <TextField
                             id={`num-winners-${String(race_index)}`}
@@ -212,13 +228,13 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                         >
                             <FormControlLabel value="STAR" control={<Radio />} label="STAR" sx={{ mb: 0, pb: 0 }} />
                             <FormHelperText sx={{ pl: 4, mt: -1 }}>
-                                Score candidates 0-5, single winner or multi-winner
+                                Score candidates 0-5
                             </FormHelperText>
 
                             {flags.isSet('METHOD_STAR_PR') && <>
                                 <FormControlLabel value="STAR_PR" control={<Radio />} label="Proportional STAR" />
                                 <FormHelperText sx={{ pl: 4, mt: -1 }}>
-                                    Score candidates 0-5, proportional multi-winner
+                                    Score candidates 0-5
                                 </FormHelperText>
                             </>}
 

packages/frontend/src/components/Header.tsx

@@ -128,7 +128,7 @@ const Header = () => {
                 <IconButton
                     size="large"
                     href="/"
-                    sx={{display: 'flex', gap: 1, flexGrow: {xs: '1', md: '0'}}}>
+                    sx={{display: 'flex', gap: 1, flexGrow: {xs: '1', md: '0'}, marginRight: 5}}>
                         {
                             /* I thought the favicon looked a bit too busy */
                             /*<Avatar src='/favicon-local.png'/>*/
@@ -139,10 +139,10 @@ const Header = () => {
 
                 {/**** DESKTOP OPTIONS ****/}
                 <Box
-                    sx={{ flexGrow: 100, flexWrap: 'wrap', display: { xs: 'none', md: 'flex' }, gap: 2, rowGap: 0 }}>
+                    sx={{ flexGrow: 100, flexWrap: 'wrap', display: { xs: 'none', md: 'flex' }, gap: 4, rowGap: 0 }}>
                     {navItems.map((item, i) => 
                         <Button key={`desktop-nav-${i}`} href={item.href} target={item.target}>
-                            <Typography sx={navTextSx} color={headerTextColor}>
+                            <Typography variant="h6" sx={navTextSx} color={headerTextColor} textTransform={'none'}>
                                 {item.text}
                             </Typography>
                         </Button>
@@ -156,10 +156,10 @@ const Header = () => {
                 </Box>
 
                 {/**** ACCOUNT OPTIONS ****/}
-                <Box sx={{ flexGrow: 0, display: 'flex' }}>
+                <Box sx={{ flexGrow: 0, display: 'flex', gap: 4 }}>
                     {authSession.isLoggedIn() && <>
                         <Button color='inherit' onClick={() => createElectionContext.openDialog()} sx={{display: { xs: 'none', md: 'flex' }}}>
-                            <Typography sx={navTextSx} color={headerTextColor}>
+                            <Typography variant="h6" sx={navTextSx} color={headerTextColor} textTransform={'none'}>
                                 {t('nav.new_election')}
                             </Typography>
                         </Button>
@@ -175,7 +175,7 @@ const Header = () => {
                             <AccountCircleIcon />
                         </IconButton>
                         <Button color='inherit' onClick={handleOpenUserMenu} sx={{display: { xs: 'none', md: 'flex' }}}>
-                            <Typography sx={navTextSx} color={headerTextColor}>
+                            <Typography variant="h6" sx={navTextSx} color={headerTextColor} textTransform={'none'}>
                                 {t('nav.greeting', {name: authSession.getIdField('given_name')})}
                             </Typography>
                             <KeyboardArrowDownRoundedIcon sx={{transition: 'transform .2s', '&:hover': {transform: 'translateY(3px)'}}}/>

packages/frontend/src/components/styles.tsx

@@ -29,7 +29,9 @@ export const Tip = (props: {name: TipName, electionTermType: TermType | undefine
             componentsProps={{
                 tooltip: {
                     sx: {
-                        background: '#888888FF'
+                        background: '#2B344AFF', 
+                        border: '2px solid white',
+                        //boxShadow: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
                     }
                 }
             }}

packages/frontend/src/i18n/en.yaml

@@ -183,7 +183,7 @@ election_home:
 
 # Ballot
 ballot:
-  this_election_uses: This election uses {{voting_method}} to elect {{spelled_count}} $t(winner.winner).
+  this_election_uses: This {{lowercase_election}} will use {{voting_method}} to elect {{spelled_count}} $t(winner.winner).
   instructions_checkbox: I have read the instructions
   learn_more: Learn more about {{voting_method}}
   previous: Previous
@@ -257,7 +257,7 @@ ballot:
         - Equal ranks are allowed
         - '{{candidates}} left blank are ranked last'
       footer_single_winner: |
-        {{candidates}} are compared in 1-on-1 match-ups.
+        {{candidates}} are compared in one-on-one match-ups.
         A {{lowercase_candidate}} wins a match-up if they are ranked higher than the opponent by more voters
       left_title: ''
       right_title: ''
@@ -297,9 +297,9 @@ election_creation:
   demo_description: Great for demonstrations where multiple people are using the same device
 
   public_title: Public {{election}}
-  public_description: 1 person, 1 vote. {{election}} will be open to anyone via the "Browse Polls" page, as well as anyone who has been given a direct link
+  public_description: one person, one vote. {{election}} will be open to anyone via the "Browse Polls" page, as well as anyone who has been given a direct link
 
-  unlisted_title: 1 person, 1 vote 
+  unlisted_title: one person, one vote 
   unlisted_description: '{{election}} will be open to anyone who has been given the ballot link'
 
   email_list_title: Email List
@@ -565,15 +565,28 @@ election_state:
 
 # Info bubbles
 tips:
+  bloc_multi_winner:
+    title: Basic Multi-Winner
+    description: >
+      Elect the first winner as you would in single-winner, then repeat the process until all seats are filled.
+      Best for electing strong winners with as much support as possible.
+
+  proportional_multi_winner:
+    title: Proportional Multi-Winner
+    description: >
+      Use a proportional representation algorithm to determine a win quota and ensure that factions can win if they have a quotas worth of supporters.
+      Best for electing diversified winners that reflect the idealogical makeup of the electorate.
+      [Learn more](https://equal.vote/pr)
+
   no_auth:
     title: No Voting Limit
     description: Allows unlimited votes per device. Great for demos or where all your voters are sharing the same device.
 
   ip_auth:
     title: One vote per Network
     description: >
-      Only allows 1 vote per IP address. This makes it harder to vote multiple times on the same device, but it won't allow
-      for multiple voters if they're sharing the same WiFi network. Great for adding security in anonymous online polls,
+      Only allows one vote per IP address. This makes it harder to vote multiple times on the same device, but it won't allow
+      for multiple voters if they're sharing the same WiFi network. Great for adding security in anonymous public {{elections}},
       without impacting the user experience. 
 
   device_auth:
@@ -586,7 +599,7 @@ tips:
     title: One for per User
     description: >
       Only allow votes from people who have created a BetterVoting account and verified their email address. 
-      Great for maximizing security of anonymous elections election. 
+      Great for maximizing security for anonymous public {{elections}}. 
 
   election_title:
     title: Title
@@ -674,7 +687,7 @@ admin_home:
     form_label: Who can vote?
     help_text: Limit to one {{vote}} per...
     no_limit_label: No Limit !tip(no_auth)
-    ip_label: Network !tip(ip_auth)
+    ip_label: WiFi/Cellular Network !tip(ip_auth)
     device_label: Device !tip(device_auth)
     email_label: User (login required) !tip(login_auth)
 
@@ -709,11 +722,11 @@ election_settings:
     description: Randomizes the order of candidates on the ballots.
 
   ballot_updates:
-    label: Ballot Updates
+    label: Allow Voters To Edit Vote
     description: Allow voters to update their ballots while election is still open
 
   public_results:
-    label: Public Results
+    label: Show Preliminary Results
     description: Allow voters to view preliminary results. (Administrators can make results public at any time.)
 
   random_ties:
@@ -722,25 +735,29 @@ election_settings:
 
   voter_groups:
     label: Enable Voter Groups
-    description: Manage which races voters can vote in.
+    description: Allow different voter groups access to different races within a larger election (ex. districts within jurisdiction).
 
   custom_email_invite: 
-    label: Custom Email Invite Text
-    description: Set greetings and instructions for your email invitations.
+    label: Customize Emails To Voters
+    description: Customize the content for emails sent to your voters.
 
   require_instruction_confirmation:
-    label: Require Instruction Confirmations
-    description: Requires voters to confirm that they have read ballot instructions in order to vote.
+    label: Confirm That Voter Read Instructions
+    description: Requires voters to confirm that they have read the ballot instructions before voting.
 
   publicly_searchable:
-    label: Publicly Searchable
-    description: Allow election to be searchable in the public elections tab.
+    label: Make {{election}} Publicly Searchable
+    description: Allow {{election}} to be listed under the browse polls tab.
 
   max_rankings:
-    label: Rank Limit
-    description: Set a maximum number of rankings for ranked voting. (Must be between {{min_rankings}} and {{max_rankings}})
+    label: Set Number Of Rankings Allowed
+    description: Set a maximum number of rankings supported on ranked ballots. (Must be between {{min_rankings}} and {{max_rankings}})
 
 # Admin Home -> Add/Edit Race
+edit_race:
+  single_winner: Single-Winner
+  bloc_multi_winner:  Basic Multi-Winner !tip(bloc_multi_winner)
+  proportional_multi_winner:  Proportional Multi-Winner !tip(proportional_multi_winner)
 
 # Voters
 

packages/frontend/src/index.css

@@ -73,7 +73,7 @@
   border-width: 2px;
 }
 
-.styledTextField:hover > div > fieldset{
+styledTextField:hover > div > fieldset{
   opacity: .7; /* Hack to make the hover color less intense */
 }