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

src/components/ui/buttons.js

@@ -18,23 +18,47 @@ 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}>
+      <Link
+        className={button}
+        to={to}
+        onClick={onClick}
+        aria-disabled={disabled}
+      >
         {children}
       </Link>
     )
 
   if (href)
     return (
-      <a className={button} href={href} target={target} onClick={onClick}>
+      <a
+        className={button}
+        href={href}
+        target={target}
+        onClick={onClick}
+        aria-disabled={disabled}
+      >
         {children}
       </a>
     )
 
   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,11 @@ import TitleChooser from '../ui/titleChooser'
 import SpeakerPanel from './speakerPanel'
 import MeetingInfoPanel from './meetingInfoPanel'
 import VotePanel from './votePanel'
+import {
+  currentMeetingContainer,
+  votePanelContainer,
+  othersContainer,
+} from '../../scss/votePage.module.scss'
 
 export default function VotePage({ pageContext: { title } }) {
   const [currentMeeting, setCurrentMeeting] = useState(null)
@@ -27,24 +32,23 @@ 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 && (
-          <>
-            <GridItem>
+          <div className={currentMeetingContainer}>
+            <div className={votePanelContainer}>
+              <VotePanel meeting={currentMeeting} />
+            </div>
+            <div className={othersContainer}>
               <MeetingInfoPanel
                 currentMeeting={currentMeeting}
                 setCurrentMeeting={setCurrentMeeting}
               />
-            </GridItem>
-            <GridItem>
               <SpeakerPanel meeting={currentMeeting} />
-            </GridItem>
-            <GridItem>
-              <VotePanel meeting={currentMeeting} />
-            </GridItem>
-          </>
+            </div>
+          </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 React, { useState } from 'react'
 import { post } from '../request'
+import { Button } 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,52 @@ 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 ?? 'Ett fel uppstod vid röstningen.',
+        })
+      })
   }
   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: <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)}
+                  className={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/votePanel.module.scss'
 
 const VotePanel = ({ meeting }) => {
   const [votes, setVotes] = useState([])
@@ -116,11 +120,13 @@ const VotePanel = ({ meeting }) => {
 
   return (
     <div>
-      <h2>Rösta</h2>
-      {errors && <div className={formError}>{errors.voteError}</div>}
+      <h2 className={votePanelHeader}>Rösta</h2>
+      {errors.voteError && <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/addVote.js

@@ -14,8 +14,11 @@ const AddVote = ({ currentMeeting, create, updateData, update }) => {
   )
   const [alternatives, setAlternatives] = useState(
     updateData
-      ? updateData.alternatives.map(alt => createAlternative(alt))
-      : [createAlternative({text: 'Vakant'}), createAlternative({text: 'Blankt'})]
+      ? updateData.alternatives.map((alt) => createAlternative(alt))
+      : [
+          createAlternative({ text: 'Vakant' }),
+          createAlternative({ text: 'Blankt' }),
+        ]
   )
   const [currentQuestion, setCurrentQuestion] = useState(
     updateData ? updateData.open : true
@@ -27,7 +30,7 @@ const AddVote = ({ currentMeeting, create, updateData, update }) => {
         Fråga
         <input
           value={question}
-          onChange={e => {
+          onChange={(e) => {
             setQuestion(e.target.value)
           }}
         />
@@ -38,9 +41,9 @@ const AddVote = ({ currentMeeting, create, updateData, update }) => {
           <li key={alt.key}>
             <input
               value={alt.text}
-              onChange={e => {
+              onChange={(e) => {
                 const newVal = e.target.value
-                setAlternatives(prev => [
+                setAlternatives((prev) => [
                   ...prev.slice(0, i),
                   { ...prev[i], text: newVal },
                   ...prev.slice(i + 1),
@@ -50,7 +53,7 @@ const AddVote = ({ currentMeeting, create, updateData, update }) => {
             <button
               type="button"
               onClick={() => {
-                setAlternatives(prev => [
+                setAlternatives((prev) => [
                   ...prev.slice(0, i),
                   ...prev.slice(i + 1),
                 ])
@@ -64,7 +67,7 @@ const AddVote = ({ currentMeeting, create, updateData, update }) => {
       <button
         type="button"
         onClick={() => {
-          setAlternatives(prev => [...prev, createAlternative()])
+          setAlternatives((prev) => [...prev, createAlternative()])
         }}
       >
         Lägg till alternativ
@@ -74,7 +77,7 @@ const AddVote = ({ currentMeeting, create, updateData, update }) => {
         <input
           type="checkbox"
           checked={currentQuestion}
-          onChange={() => setCurrentQuestion(prev => !prev)}
+          onChange={() => setCurrentQuestion((prev) => !prev)}
         />
         Nuvarande frågan
       </label>