feat: Color the 'partial correct dialog' yellow

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,
     };
 };
 

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)),

src/pages/review.tsx

@@ -25,20 +25,20 @@ interface IProps {
     levelId?: number;
     vocabByLevel?: (level: number) => Promise<IVocab[]>;
     vocabByQueue?: () => Promise<IVocab[]>;
+    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
+                // TODO: Set the text color to black
-                console.log("Partially correct");
+                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,
                                             }
                                         }}>
                                         <Typography

src/reducers/index.ts

@@ -43,7 +43,7 @@ interface IState {
         popoverOpen: boolean;
         popoverText: string;
         popoverColor: string;
-
+        popoverTextColor: string;
     };
 
     topTen: ILearner[];
@@ -169,6 +169,7 @@ export function LateinicusApp(state: IState = initialState, action: any) {
                     popoverText: action.text,
                     popoverOpen: action.state,
                     popoverColor: action.color,
+                    popoverTextColor: action.textColor,
                 }),
             });
         case Actions.SET_REVIEW: