This is a simple bit of feedback so players can see which options are
being voted on by other players. I won't claim that there's anything
inspired about the stlying or color selection here. Maybe Karen will
have some suggestions to improve this later.
padding: 1em;
margin-top: 0.25em;
}
padding: 1em;
margin-top: 0.25em;
}
+
+.vote-choices {
+ display: flex;
+}
+
+.vote-choice {
+ font-size: 40%;
+ background-color: var(--accent-color-bright);
+ color: var(--text-fg-on-accent-bright);
+ border-radius: 4px;
+ padding-left: 4px;
+ padding-right: 4px;
+ margin-right: 0.5em;
+}
+
+@media (hover:hover) {
+ button:hover .vote-choice {
+ background-color: var(--accent-color);
+ color: var(--text-fg-on-accent);
+ }
+}
onClick={() => handle_click(p.id)}
>
{p.prompt}
onClick={() => handle_click(p.id)}
>
{p.prompt}
+ <div className="vote-choices">
+ {p.votes.map(v => {
+ return (
+ <div
+ key={v}
+ className="vote-choice"
+ >
+ {v}
+ </div>
+ );
+ })}
+ </div>