sigit/sigit.io
7
2
Fork 0
Code Issues 44 Pull Requests 5 Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
enes 2024-12-13 13:36:44 +01:00
parent e1e5ae7f1a
commit 2a23912c08
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/MarkFormField/index.tsx
View File

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

3
src/components/MarkFormField/style.module.scss
View File

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