diff --git a/src/actions/index.ts b/src/actions/index.ts index 245f8ea..390605e 100644 --- a/src/actions/index.ts +++ b/src/actions/index.ts @@ -93,12 +93,13 @@ export function setLevels(levels: ILevel[]) { }; export const REVIEW_SET_POPOVER = "REVIEW_SET_POPOVER"; -export function setReviewPopover(state: boolean, text: string, color: string) { +export function setReviewPopover(state: boolean, text: string, color: string, textColor: string) { return { type: REVIEW_SET_POPOVER, state, text, color, + textColor, }; }; diff --git a/src/containers/Review.ts b/src/containers/Review.ts index 495bde4..9404a63 100644 --- a/src/containers/Review.ts +++ b/src/containers/Review.ts @@ -17,13 +17,14 @@ const mapStateToProps = state => { popoverOpen: state.review.popoverOpen, popoverText: state.review.popoverText, popoverColor: state.review.popoverColor, + popoverTextColor: state.review.popoverTextColor, loading: state.review.loading, }; }; const mapDispatchToProps = dispatch => { return { drawerButtonState: (state: boolean) => dispatch(setDrawerButton(state)), - setPopover: (state: boolean, text: string, color: string) => dispatch(setReviewPopover(state, text, color)), + setPopover: (state: boolean, text: string, color: string, textColor: string) => dispatch(setReviewPopover(state, text, color, textColor)), setSummary: (state: boolean) => dispatch(setReviewSummary(state)), setReview: (current: IVocab, meta: IReviewMetadata) => dispatch(setReview(current, meta)), setLoading: (state: boolean) => dispatch(setReviewLoading(state)), diff --git a/src/pages/review.tsx b/src/pages/review.tsx index 6b1686d..676a375 100644 --- a/src/pages/review.tsx +++ b/src/pages/review.tsx @@ -25,20 +25,20 @@ interface IProps { levelId?: number; vocabByLevel?: (level: number) => Promise; vocabByQueue?: () => Promise; + reviewType: ReviewType; history: any; - reviewType: ReviewType; - loading: boolean; vocab: IVocab[]; current: IReviewCard; popoverOpen: boolean; popoverText: string; popoverColor: string; + popoverTextColor: string; setSummary: (state: boolean) => void; - setPopover: (state: boolean, text: string, color: string) => void; + setPopover: (state: boolean, text: string, color: string, textColor: string) => void; drawerButtonState: (state: boolean) => void; setLastReview: (meta: IReviewMetadata) => void; setReview: (curent: IReviewCard, meta: IReviewMetadata) => void; @@ -133,8 +133,8 @@ const ReviewPageWithRouter = withRouter( this.inputRef.value = ""; } } else if (minDist <= LEVENSHTEIN_MAX_DISTANCE) { - // TODO: Show a hint - console.log("Partially correct"); + // TODO: Set the text color to black + this.props.setPopover(true, "Das war fast richtig", "yellow", "black"); } else { // Find the IVocab item const vocab = this.vocabFromId(this.props.current.id); @@ -146,7 +146,7 @@ const ReviewPageWithRouter = withRouter( console.log("[ReviewPage::checkInput] Could not find IVocab item for wrong IReviewCard"); } - this.props.setPopover(true, "Das war nicht richtig", "red"); + this.props.setPopover(true, "Das war nicht richtig", "red", "white"); } // TODO(?): Show a snackbar for showing the updated score @@ -212,12 +212,12 @@ const ReviewPageWithRouter = withRouter( horizontal: "center" }} anchorEl={this.buttonRef} - onClose={() => this.props.setPopover(false, "", "")} + onClose={() => this.props.setPopover(false, "", "", "")} PaperProps={{ style: { backgroundColor: this.props.popoverColor, padding: 10, - color: "white" + color: this.props.popoverTextColor, } }}>