Minor style adjustments

src/Components/Card.css

@@ -68,6 +68,7 @@
   flex-direction: row;
   justify-content: space-around;
   align-items: space-around;
+  font-size: 160%;
 }
 
 .rate-card {

src/Components/LoginModal.js

@@ -250,7 +250,7 @@ const LoginModal = (props) => {
 
                   <div className='login-player fb50'>
                     <div className='login-flex-player'>
-                      ?
+                      <strong>?</strong>
                       <AvatarGen
                         className='fb100'
                         i={props.game.debater1Avi}
@@ -262,7 +262,7 @@ const LoginModal = (props) => {
                   </div>
                   <div className='login-player fb50'>
                     <div className='login-flex-player'>
-                      ?
+                      <strong>?</strong>
                       <AvatarGen
                         className='fb100'
                         i={props.game.debater2Avi}

src/Components/Modal.css

@@ -21,8 +21,8 @@ sup {
   background: rgb(0, 0, 0);
   background: linear-gradient(
     332deg,
-    rgba(0, 0, 0, 0.5719421557685574) 0%,
-    rgba(0, 0, 0, 0.7960317916228992) 64%
+    rgba(0, 0, 0, 0.829) 0%,
+    rgba(0, 0, 0, 0.87) 64%
   );
   padding: 2rem;
   z-index: 999;
@@ -34,9 +34,9 @@ sup {
   grid-template-rows: 0.4fr 3.6fr 0.4fr;
   gap: 10px 10px;
   grid-template-areas:
-    'extra-panel login-title'
-    'login-card login-settings'
-    'extra-panel2 login-settings';
+    "extra-panel login-title"
+    "login-card login-settings"
+    "extra-panel2 login-settings";
 }
 .login-topic-carousel {
   grid-area: login-card;
@@ -109,9 +109,9 @@ sup {
   grid-template-rows: 0.2fr 1.8fr 1fr;
   gap: 0px 0px;
   grid-template-areas:
-    'round1-title round2-title round3-title round4-title'
-    'round1 round2 round3 round4'
-    'title-topic title-topic voting voting';
+    "round1-title round2-title round3-title round4-title"
+    "round1 round2 round3 round4"
+    "title-topic title-topic voting voting";
 }
 .round1-title {
   grid-area: round1-title;

src/Components/Modal.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import './Modal.css';
+import React from "react";
+import "./Modal.css";
 
-import { RiSwordFill } from 'react-icons/ri';
-import { GiBangingGavel } from 'react-icons/gi';
+import { RiSwordFill } from "react-icons/ri";
+import { GiBangingGavel } from "react-icons/gi";
 
-import AvatarGen from './AvatarGen.js';
+import AvatarGen from "./AvatarGen.js";
 
 const Modal = (props) => {
   return (
     <>
       <div
         className='modal-popup'
-        style={{ display: props.showModal ? 'block' : 'none' }}
+        style={{ display: props.showModal ? "block" : "none" }}
       >
         <div>
           <h3>{props.title}</h3>
@@ -24,31 +24,31 @@ const Modal = (props) => {
                   <AvatarGen
                     className='fb100'
                     i={props.game.judgeAvi}
-                    style={{ width: '3.8rem', height: '3.8rem' }}
+                    style={{ width: "3.8rem", height: "3.8rem" }}
                   />
                   <div>{props.game.judgeName}</div>
                 </div>
               </div>
 
               <div className='login-player fb50'>
                 <div className='login-flex-player'>
-                  Pro
+                  <strong>Pro</strong>{" "}
                   <AvatarGen
                     className='fb100'
                     i={props.game.affirmativeAvi}
-                    style={{ width: '3.8rem', height: '3.8rem' }}
+                    style={{ width: "3.8rem", height: "3.8rem" }}
                   />
                   <RiSwordFill className='big-icon' />
                   <div>{props.game.affirmativeName}</div>
                 </div>
               </div>
               <div className='login-player fb50'>
                 <div className='login-flex-player'>
-                  Contra
+                  <strong>Contra</strong>
                   <AvatarGen
                     className='fb100'
                     i={props.game.negativeAvi}
-                    style={{ width: '3.8rem', height: '3.8rem' }}
+                    style={{ width: "3.8rem", height: "3.8rem" }}
                   />
                   <RiSwordFill className='big-icon' />
                   <div>{props.game.negativeName}</div>

src/Components/Timer.js

@@ -4,7 +4,7 @@ import { propTypes } from "react-bootstrap/esm/Image";
 import "./Timer.css";
 
 const Timer = ({ playTick, startTimer, stopRound }) => {
-  const DEFAULT_TIME = 30;
+  const DEFAULT_TIME = 11;
   const [seconds, setSeconds] = useState(DEFAULT_TIME);
   const [isActive, setIsActive] = useState(false);
 

src/Components/VotingModal.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import Card from './Card.js';
-import './Modal.css';
+import React, { useState } from "react";
+import Card from "./Card.js";
+import "./Modal.css";
 
-import Player from './Player.js';
+import Player from "./Player.js";
 
 const VotingModal = (props) => {
-  const [yourWinner, setYourWinner] = useState('unset');
-  const [ruling, setRuling] = useState('');
+  const [yourWinner, setYourWinner] = useState("unset");
+  const [ruling, setRuling] = useState("");
 
   const handleRuling = (e) => {
     setRuling(e.target.value);
@@ -21,7 +21,7 @@ const VotingModal = (props) => {
   }
 
   const sendVote = () => {
-    if (props.role === 'judge') {
+    if (props.role === "judge") {
       sendRuling();
     }
     props.voteFor(yourWinner);
@@ -116,45 +116,45 @@ const VotingModal = (props) => {
               <div className='flex-row'>
                 <button
                   className={
-                    yourWinner === 'aff' ? 'select-highlight' : 'select-buttons'
+                    yourWinner === "aff" ? "select-highlight" : "select-buttons"
                   }
                   onClick={() => {
-                    selectVote('aff');
+                    selectVote("aff");
                   }}
                 >
                   <Player
                     avi={props.game.affirmativeAvi}
                     name={props.game.affirmativeName}
-                    role={'pro'}
+                    role={"pro"}
                   />
                 </button>
                 <button
                   className={
-                    yourWinner === 'tie' ? 'select-highlight' : 'select-buttons'
+                    yourWinner === "tie" ? "select-highlight" : "select-buttons"
                   }
                   onClick={() => {
-                    selectVote('tie');
+                    selectVote("tie");
                   }}
                 >
                   <h4 classname='center-flex'>Unentschieden</h4>
                 </button>
                 <button
                   className={
-                    yourWinner === 'neg' ? 'select-highlight' : 'select-buttons'
+                    yourWinner === "neg" ? "select-highlight" : "select-buttons"
                   }
                   onClick={() => {
-                    selectVote('neg');
+                    selectVote("neg");
                   }}
                 >
                   <Player
                     avi={props.game.negativeAvi}
-                    name={props.game.negativName}
-                    role={'contra'}
+                    name={props.game.negativeName}
+                    role={"contra"}
                   />
                 </button>
               </div>
               <div className='neo-box-outward flex-row'>
-                {props.role === 'judge' ? (
+                {props.role === "judge" ? (
                   <>
                     <h4>dein Urteil:</h4>
                     <textarea
@@ -163,7 +163,7 @@ const VotingModal = (props) => {
                     />
                   </>
                 ) : null}
-                {yourWinner !== 'unset' ? (
+                {yourWinner !== "unset" ? (
                   <button onClick={sendVote}>abstimmen</button>
                 ) : null}
               </div>