Förbättra användarupplevelse på d-cide

src/components/ui/buttons.js

@@ -18,7 +18,15 @@ const IconButton = ({ onClick, iconComponent: Icon, text, disabled }) => {
   )
 }
 
-const Button = ({ onClick, to, href, target, children, type = 'button' }) => {
+const Button = ({
+  onClick,
+  to,
+  href,
+  target,
+  children,
+  disabled,
+  type = 'button',
+}) => {
   if (to)
     return (
       <Link className={button} to={to} onClick={onClick}>
@@ -34,7 +42,12 @@ const Button = ({ onClick, to, href, target, children, type = 'button' }) => {
     )
 
   return (
-    <button className={button} type={type} onClick={onClick}>
+    <button
+      className={button}
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+    >
       {children}
     </button>
   )

src/components/ui/titleChooser.js

@@ -15,6 +15,7 @@ const TitleChooser = ({
   choice = null,
   setChoice = () => {},
   label = '',
+  hintLabel = 'Välj ett objekt',
   action = null,
   actionLabel = '',
   noChoicesLabel = '',
@@ -91,7 +92,7 @@ const TitleChooser = ({
                   </optgroup>
                 ))}
             </select>
-            {choice === null && <div className={hint}>Välj ett objekt</div>}
+            {choice === null && <div className={hint}>{hintLabel}</div>}
           </div>
         ) : (
           <span>{noChoicesLabel}</span>

src/components/vote/meetingInfoPanel.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Button } from '../ui/buttons'
 import { post, del } from '../request'
+import { FiLogOut, FiLogIn } from 'react-icons/fi'
 
 export default function MeetingInfoPanel({
   currentMeeting,
@@ -34,6 +35,7 @@ export default function MeetingInfoPanel({
                 }
               }}
             >
+              <FiLogOut />
               Lämna röstlängden
             </Button>
           ) : (
@@ -49,6 +51,7 @@ export default function MeetingInfoPanel({
                 }
               }}
             >
+              <FiLogIn />
               Gå med i röstlängden
             </Button>
           )}

src/components/vote/page.js

@@ -7,6 +7,10 @@ import TitleChooser from '../ui/titleChooser'
 import SpeakerPanel from './speakerPanel'
 import MeetingInfoPanel from './meetingInfoPanel'
 import VotePanel from './votePanel'
+import {
+  currentMeetingContainer,
+  votePanelContainer,
+} from '../../scss/votePage.module.scss'
 
 export default function VotePage({ pageContext: { title } }) {
   const [currentMeeting, setCurrentMeeting] = useState(null)
@@ -27,11 +31,15 @@ export default function VotePage({ pageContext: { title } }) {
             setChoice={setCurrentMeeting}
             choices={meetings}
             label="name"
+            hintLabel="Välj ett möte"
             noChoicesLabel="Det finns inga möten just nu."
           />
         </GridItem>
         {currentMeeting && (
-          <>
+          <div className={currentMeetingContainer}>
+            <div className={votePanelContainer}>
+              <VotePanel meeting={currentMeeting} />
+            </div>
             <GridItem>
               <MeetingInfoPanel
                 currentMeeting={currentMeeting}
@@ -41,10 +49,7 @@ export default function VotePage({ pageContext: { title } }) {
             <GridItem>
               <SpeakerPanel meeting={currentMeeting} />
             </GridItem>
-            <GridItem>
-              <VotePanel meeting={currentMeeting} />
-            </GridItem>
-          </>
+          </div>
         )}
       </GridContainer>
     </BigPixels>

src/components/vote/speakerPanel.js

@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useContext } from 'react'
 
+import { MdOutlineFrontHand } from 'react-icons/md'
+import { RiMegaphoneLine } from 'react-icons/ri'
 import { FiTrash2 } from 'react-icons/fi'
 import { List, ListButton, ListItem } from '../ui/list'
 import { Button, ButtonGroup } from '../ui/buttons'
 import { UserContext } from '../layout/layout'
-import { speakerPanelList } from '../../scss/vote.module.scss'
+import { speakerPanelList } from '../../scss/voteSpeakerPanel.module.scss'
 
 import socket, { joinRoom, leaveRoom } from '../request/socket'
 import backendService from '../request/backendService'
@@ -80,6 +82,7 @@ const SpeakerPanel = ({ meeting }) => {
               })
             }}
           >
+            <MdOutlineFrontHand />
             Jag vill tala!
           </Button>
           <Button
@@ -90,6 +93,7 @@ const SpeakerPanel = ({ meeting }) => {
               })
             }}
           >
+            <RiMegaphoneLine />
             Replik!
           </Button>
         </ButtonGroup>
@@ -101,7 +105,7 @@ const SpeakerPanel = ({ meeting }) => {
           speakers.map((s) => (
             <ListItem
               title={s.user.pretty_name}
-              subtitle={s.prioritized ? 'Replik' : null}
+              subtitle={s.prioritized ? 'Replik' : 'Tala'}
               key={s.id}
               buttons={[
                 <ListButton

src/components/vote/voteForm.js

@@ -1,5 +1,14 @@
 import React, { Component, useState } from 'react'
 import { post } from '../request'
+import { IconButton, Button, ButtonGroup } from '../ui/buttons'
+import { MdOutlineHowToVote } from 'react-icons/md'
+import {
+  questionHeader,
+  votesContainer,
+  voteInput,
+  voteLabel,
+  placeVoteContainer,
+} from '../../scss/voteForm.module.scss'
 
 const VoteForm = ({ vote, setErrors }) => {
   const [checkedId, setCheckedId] = useState(-1)
@@ -17,42 +26,50 @@ const VoteForm = ({ vote, setErrors }) => {
     }
 
     await post('/voting/made_votes/', voteData)
-    .then(() => setSuccessfullyVoted(true))
-    .catch(err => {
-      setSentVote(false)
-      setErrors({ voteError: err.response.data.error })
-    })
+      .then(() => setSuccessfullyVoted(true))
+      .catch((err) => {
+        setSentVote(false)
+        setErrors({ voteError: err.response.data.error })
+      })
   }
   const votingDisabled = checkedId === -1
-  const buttonText = votingDisabled ? 'Välj ett alternativ' : 'Rösta'
+  const placeVoteButtonText = votingDisabled ? 'Välj ett alternativ' : 'Rösta'
   const alreadyVotedText = successfullyVoted
     ? 'Tack för din röst!'
     : 'Du har röstat i omröstningen.'
 
   return (
     <div>
-      <strong>{vote.question}</strong>
+      <h3 className={questionHeader}>
+        Fråga:&nbsp;
+        <strong>{vote.question}</strong>
+      </h3>
       {vote.has_voted || successfullyVoted ? (
         <p>{alreadyVotedText}</p>
       ) : (
         <>
-          <ul>
+          <div className={votesContainer}>
             {vote.alternatives.map(({ text, id }) => (
-              <li key={id}>
-                <label>
-                  <input
-                    type="radio"
-                    checked={checkedId === id}
-                    onChange={() => setCheckedId(id)}
-                  />
-                  {` ${text}`}
-                </label>
-              </li>
+              <label key={id} className={voteLabel}>
+                <input
+                  type="radio"
+                  checked={checkedId === id}
+                  onChange={() => setCheckedId(id)}
+                  class={voteInput}
+                />
+                {` ${text}`}
+              </label>
             ))}
-          </ul>
-          <button type="button" disabled={votingDisabled || successfullyVoted || sentVote} onClick={placeVote}>
-            {buttonText}
-          </button>
+          </div>
+          <div className={placeVoteContainer}>
+            <Button
+              disabled={votingDisabled || successfullyVoted || sentVote}
+              onClick={placeVote}
+            >
+              <MdOutlineHowToVote />
+              {placeVoteButtonText}
+            </Button>
+          </div>
         </>
       )}
     </div>

src/components/vote/votePanel.js

@@ -1,8 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import VoteForm from './voteForm'
-import { formError } from '../../scss/vote.module.scss'
 import backendService from '../request/backendService'
 import socket, { joinRoom, leaveRoom } from '../request/socket'
+import {
+  formError,
+  votePanelHeader,
+  noActiveVoting,
+} from '../../scss/votePage.module.scss'
 
 const VotePanel = ({ meeting }) => {
   const [votes, setVotes] = useState([])
@@ -116,11 +120,13 @@ const VotePanel = ({ meeting }) => {
 
   return (
     <div>
-      <h2>Rösta</h2>
+      <h2 className={votePanelHeader}>Rösta</h2>
       {errors && <div className={formError}>{errors.voteError}</div>}
       {votes && (
         <>
-          {votes.length === 0 && <p>Det finns ingen aktiv omröstning</p>}
+          {votes.length === 0 && (
+            <h3 className={noActiveVoting}>Det finns ingen aktiv omröstning</h3>
+          )}
           {votes.map((vote) => (
             <VoteForm key={vote.id} vote={vote} setErrors={setFormErrors} />
           ))}

src/components/votingAdmin/page.js

@@ -19,18 +19,20 @@ const VotingAdminPage = ({ pageContext: { title } }) => {
   const [openCreateModal] = useModal(AddMeeting)
   const closeModal = useCloseModal()
 
-  const create = async data => {
+  const create = async (data) => {
     const { data: newMeeting } = await post('/voting/admin-meetings/', data)
     mutate([...unorderedMeetings, newMeeting])
   }
 
-  const updatePatch = async data => {
+  const updatePatch = async (data) => {
     const { data: updatedMeeting } = await patch(
       `/voting/admin-meetings/${currentMeeting.id}/`,
       data
     )
     mutate([
-      ...unorderedMeetings.filter(meeting => meeting.id !== currentMeeting.id),
+      ...unorderedMeetings.filter(
+        (meeting) => meeting.id !== currentMeeting.id
+      ),
       updatedMeeting,
     ])
   }
@@ -40,7 +42,7 @@ const VotingAdminPage = ({ pageContext: { title } }) => {
   // sync currentMeeting with updated meetings
   useEffect(() => {
     if (currentMeeting)
-      setCurrentMeeting(meetings.find(m => m.id === currentMeeting.id))
+      setCurrentMeeting(meetings.find((m) => m.id === currentMeeting.id))
   }, [meetings])
 
   return (
@@ -53,9 +55,10 @@ const VotingAdminPage = ({ pageContext: { title } }) => {
             setChoice={setCurrentMeeting}
             choices={meetings}
             label="name"
+            hintLabel="Välj ett möte"
             action={() => {
               openCreateModal('Nytt möte', {
-                create: async data => {
+                create: async (data) => {
                   await create(data)
                   closeModal()
                 },

src/components/votingCounter/page.js

@@ -17,32 +17,31 @@ const VotingAdminPage = ({ pageContext: { title } }) => {
   const { data: unorderedMeetings, mutate } = useSWR('/voting/admin-meetings/')
   const closeModal = useCloseModal()
 
-  const create = async data => {
+  const create = async (data) => {
     const { data: newMeeting } = await post('/voting/admin-meetings/', data)
     mutate([...unorderedMeetings, newMeeting])
   }
 
-  const updatePatch = async data => {
+  const updatePatch = async (data) => {
     const { data: updatedMeeting } = await patch(
       `/voting/admin-meetings/${currentMeeting.id}/`,
       data
     )
     mutate([
-      ...unorderedMeetings.filter(meeting => meeting.id !== currentMeeting.id),
+      ...unorderedMeetings.filter(
+        (meeting) => meeting.id !== currentMeeting.id
+      ),
       updatedMeeting,
     ])
   }
 
   const meetings = unorderedMeetings ? [...unorderedMeetings].reverse() : null
 
   // sync currentMeeting with updated meetings
-  useEffect(
-    () => {
-      if (currentMeeting)
-        setCurrentMeeting(meetings.find(m => m.id === currentMeeting.id))
-    },
-    [meetings]
-  )
+  useEffect(() => {
+    if (currentMeeting)
+      setCurrentMeeting(meetings.find((m) => m.id === currentMeeting.id))
+  }, [meetings])
 
   return (
     <BigPixels>
@@ -54,6 +53,7 @@ const VotingAdminPage = ({ pageContext: { title } }) => {
             setChoice={setCurrentMeeting}
             choices={meetings}
             label="name"
+            hintLabel="Välj ett möte"
             noChoicesLabel="Det finns inga möten just nu."
           />
         </GridItem>