refactor(sign): autoFocus sign button, use mui/button for focus ripple effect

src/components/MarkFormField/index.tsx

@@ -1,5 +1,4 @@
 import { CurrentUserMark } from '../../types/mark.ts'
-import styles from './style.module.scss'
 import {
   findNextIncompleteCurrentUserMark,
   getToolboxLabelByMarkType,
@@ -10,6 +9,8 @@ import React, { useState } from 'react'
 import { MarkInput } from '../MarkTypeStrategy/MarkInput.tsx'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { Button } from '@mui/material'
+import styles from './style.module.scss'
 
 interface MarkFormFieldProps {
   currentUserMarks: CurrentUserMark[]
@@ -123,22 +124,23 @@ const MarkFormField = ({
                   userMark={selectedMark}
                 />
                 <div className={styles.actionsBottom}>
-                  <button type="submit" className={styles.submitButton}>
+                  <Button type="submit" className={styles.submitButton}>
                     NEXT
-                  </button>
+                  </Button>
                 </div>
               </form>
             )}
 
             {complete && (
               <div className={styles.actionsBottom}>
-                <button
+                <Button
                   onClick={handleSignAndComplete}
                   className={styles.submitButton}
                   disabled={!isReadyToSign()}
+                  autoFocus
                 >
                   SIGN AND COMPLETE
-                </button>
+                </Button>
               </div>
             )}
 
@@ -148,6 +150,7 @@ const MarkFormField = ({
                   return (
                     <div className={styles.pagination} key={index}>
                       <button
+                        type="button"
                         className={`${styles.paginationButton} ${isDone(mark) ? styles.paginationButtonDone : ''}`}
                         onClick={() => handleCurrentUserMarkClick(mark)}
                       >
@@ -161,8 +164,10 @@ const MarkFormField = ({
                 })}
                 <div className={styles.pagination}>
                   <button
+                    type="button"
                     className={`${styles.paginationButton} ${isReadyToSign() ? styles.paginationButtonDone : ''}`}
                     onClick={handleSelectCompleteMark}
+                    title="Complete"
                   >
                     <FontAwesomeIcon
                       className={styles.finishPage}

src/components/MarkFormField/style.module.scss

@@ -78,7 +78,8 @@
     color: rgba(0, 0, 0, 0.5);
   }
 
-  .paginationButton:hover {
+  .paginationButton:hover,
+  .paginationButton:focus {
     background: #447592;
     color: rgba(255, 255, 255, 0.5);
   }