Merge pull request #340 from BIDMCDigitalPsychiatry/issue-771

Design fixes QA
BIDMCDigitalPsychiatry · Sep 4, 2023 · 5c56c2e · 5c56c2e
2 parents 5cdd322 + 13e9054
commit 5c56c2e
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/Symbol_Digit_Substitution/src/components/SymbolDigitSubstitution.tsx b/Symbol_Digit_Substitution/src/components/SymbolDigitSubstitution.tsx
@@ -133,6 +133,7 @@ const useStyles = makeStyles((theme) => ({
 
     },
     btnstyle: {
+        fontSize: "22px",
         width: 64,
         height: 64,
         border: "#fff solid 3px",
@@ -144,10 +145,19 @@ const useStyles = makeStyles((theme) => ({
         [theme.breakpoints.down('sm')]: {
             width: 50,
             height: 50,
+
+        },
+        [theme.breakpoints.up('lg')]: {
+            '&:hover, &:active': {
+              color: 'white',
+              background: "#005ea9",
+            },
         },
-        '&:hover': {
-            color: 'white',
-            background: "#005ea9"
+    },
+    disabledButton: {
+        '&.MuiButtonBase-root.Mui-disabled': {
+            opacity: 1,
+            color: "white"
         },
     }
 }))
@@ -171,14 +181,14 @@ export default function SymbolDigitSubstitution() {
     const [temporalSlices, setTemporalSlices] = useState<string | null>(null);
     const [previousClickTime, setPreviousClickTime] = useState(new Date().getTime())
     const [textShow, setTextShow] = useState(true);
-const [displayedSymbol, setDisplayedSymbol] = useState<Array<string>>([]);
+    const [displayedSymbol, setDisplayedSymbol] = useState<Array<string>>([]);
     const { t } = useTranslation()
 
     const generateRandomSymbolNumberPair = (symbols: Array<string>) => {
         const randomIndex = Math.floor(Math.random() * SYMBOLS.length);
         setCurrentSymbol(symbols[randomIndex]);
         setCurrentNumber(randomIndex + 1);
-           setDisplayedSymbol((prevHistory) => [...prevHistory, symbols[randomIndex]]);
+        setDisplayedSymbol((prevHistory) => [...prevHistory, symbols[randomIndex]]);
     };
 
 
@@ -253,7 +263,8 @@ const [displayedSymbol, setDisplayedSymbol] = useState<Array<string>>([]);
                 falseDurationSum += d.duration;
             }
         });
-           parent.postMessage(
+
+        parent.postMessage(
             JSON.stringify({
                 timestamp: time,
                 static_data: {
@@ -372,7 +383,10 @@ const [displayedSymbol, setDisplayedSymbol] = useState<Array<string>>([]);
                         </div>
                         <div className={classes.btncontainer}>
                             {shuffledSymbols.map((value, index) => (
-                                <Button className={classes.btnstyle} disabled={flag !== 2} onClick={(event) => handleClick(index + 1)}>{index + 1}</Button>
+                                <Button 
+                                classes={{ disabled: classes.disabledButton }} 
+                                className={classes.btnstyle} disabled={flag !== 2} 
+                                onClick={(event) => handleClick(index + 1)}>{index + 1}</Button>
 
                             ))}
                         </div>