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/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)
@@ -31,7 +35,10 @@ export default function VotePage({ pageContext: { title } }) {
           />
         </GridItem>
         {currentMeeting && (
-          <>
+          <div className={currentMeetingContainer}>
+            <div className={votePanelContainer}>
+              <VotePanel meeting={currentMeeting} />
+            </div>
             <GridItem>
               <MeetingInfoPanel
                 currentMeeting={currentMeeting}
@@ -41,10 +48,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/scss/ui.module.scss

@@ -6,7 +6,6 @@
   border: none;
   background-color: $background-color-3;
   color: $foreground-color-3;
-  cursor: pointer;
   padding: $base-padding $base-padding * 2;
   margin-bottom: $base-padding;
 
@@ -16,8 +15,22 @@
   justify-content: center;
   gap: calc($base-padding / 2);
 
-  &:hover {
-    background-color: $dsek-blue;
+  > svg {
+    height: calc(1.5 * $base-padding);
+    width: calc(1.5 * $base-padding);
+  }
+
+  &:enabled {
+    cursor: pointer;
+
+    &:hover {
+      background-color: $dsek-blue;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
   }
 
   &:focus {
@@ -89,7 +102,6 @@
 .gridItem {
   background-color: rgba($background-color-2, 0.95);
   padding: $base-padding;
-  // z-index: 10;
   backdrop-filter: blur(5px);
 }
 
@@ -119,7 +131,7 @@
 
   h3 {
     margin: 0;
-    font-size: 1rem;
+    font-size: 1.2rem;
   }
   p {
     font-size: 0.9rem;
@@ -293,11 +305,8 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background: linear-gradient(
-        0deg,
-        rgba(0, 0, 0, 0.6) 0%,
-        rgba(0, 0, 0, 0) 100%
-      ),
+    background:
+      linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%),
       linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 30%);
   }
 }

src/scss/voteForm.module.scss

@@ -0,0 +1,53 @@
+@import 'vars';
+
+.votesContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $base-padding;
+
+  &:has(> :nth-child(3)) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.voteInput {
+  /* hide the radio button */
+  /* https://stackoverflow.com/questions/18078871/hide-check-radio-button-with-css */
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.voteLabel {
+  text-align: center;
+  font-size: 1.2em;
+  padding: $base-padding calc($base-padding / 2);
+  transition: all 100ms;
+  background-color: $background-color-4;
+  cursor: pointer;
+
+  word-break: normal;
+  overflow-wrap: anywhere;
+  hyphens: auto;
+
+  &:hover {
+    background-color: $dsek-blue;
+  }
+
+  &:has(.voteInput:checked) {
+    background-color: $dsek-green !important;
+    color: $background-color-2;
+    font-weight: 800;
+  }
+}
+
+.placeVoteContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: $base-padding;
+}
+
+.questionHeader {
+  text-align: center;
+}

src/scss/votePage.module.scss

@@ -0,0 +1,19 @@
+@import 'vars';
+
+.formError {
+  color: $red;
+}
+
+.currentMeetingContainer {
+  grid-column: 1 / -1;
+  background-color: transparent;
+  display: grid;
+  gap: $base-padding;
+  grid-template-columns: 1fr 1fr;
+}
+
+.votePanelContainer {
+  background-color: $background-color-2;
+  grid-column: 1 / -1;
+  padding: $base-padding;
+}

src/scss/votePanel.module.scss

@@ -0,0 +1,8 @@
+.votePanelHeader {
+  text-align: center;
+}
+
+.noActiveVoting {
+  text-align: center;
+  font-style: italic;
+}