hints

kubk · Dec 7, 2023 · a0f7ff0 · a0f7ff0
1 parent fa8be28
commit a0f7ff0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/screens/deck-form/card-form-view.tsx b/src/screens/deck-form/card-form-view.tsx
@@ -4,6 +4,7 @@ import { Label } from "../../ui/label.tsx";
 import { Input } from "../../ui/input.tsx";
 import React from "react";
 import { CardFormType } from "../../store/deck-form-store.ts";
+import { HintTransparent } from "../../ui/hint-transparent.tsx";
 
 type Props = {
   cardForm: CardFormType;
@@ -17,22 +18,25 @@ export const CardFormView = observer((props: Props) => {
       className={css({
         display: "flex",
         flexDirection: "column",
-        gap: 6,
+        gap: 16,
         marginBottom: 16,
         position: "relative",
       })}
     >
       <h3 className={css({ textAlign: "center" })}>Add card</h3>
-      <Label text={"Front"} isRequired>
-        <Input field={cardForm.front} rows={5} type={"textarea"} />
+      <Label text={"Front side"} isRequired>
+        <Input field={cardForm.front} rows={3} type={"textarea"} />
+        <HintTransparent>The prompt or question you'll see</HintTransparent>
       </Label>
 
-      <Label text={"Back"} isRequired>
-        <Input field={cardForm.back} rows={5} type={"textarea"} />
+      <Label text={"Back side"} isRequired>
+        <Input field={cardForm.back} rows={3} type={"textarea"} />
+        <HintTransparent>The response you need to provide</HintTransparent>
       </Label>
 
-      <Label text={"Example / Note"}>
-        <Input field={cardForm.example} rows={3} type={"textarea"} />
+      <Label text={"Example"}>
+        <Input field={cardForm.example} rows={2} type={"textarea"} />
+        <HintTransparent>Optional additional information</HintTransparent>
       </Label>
     </div>
   );

diff --git a/src/screens/deck-form/deck-form.tsx b/src/screens/deck-form/deck-form.tsx
@@ -12,6 +12,7 @@ import { useTelegramProgress } from "../../lib/telegram/use-telegram-progress.ts
 import { assert } from "../../lib/typescript/assert.ts";
 import { SettingsRow } from "../user-settings/settings-row.tsx";
 import { Button } from "../../ui/button.tsx";
+import { HintTransparent } from "../../ui/hint-transparent.tsx";
 
 export const DeckForm = observer(() => {
   const deckFormStore = useDeckFormStore();
@@ -73,6 +74,15 @@ export const DeckForm = observer(() => {
         </SettingsRow>
       )}
 
+      <SettingsRow>
+        <span>Speaking cards</span>
+      </SettingsRow>
+      <HintTransparent>
+        Play spoken audio for each flashcard to enhance pronunciation
+      </HintTransparent>
+
+      <div className={css({ marginTop: 18 })}/>
+
       <Button
         onClick={() => {
           deckFormStore.openNewCardForm();