Improve 'Add to dictionary' UI

ui/src/Game.tsx

@@ -107,7 +107,6 @@ export function Game(props: {
 
     function addWordFn(word: string) {
         props.wasm.add_word(word);
-        logDispatch(<div><em>{word} was added to dictionary.</em></div>);
     }
 
     const [playerLetters, trayDispatch] = useReducer(movePlayableLetters, []);
@@ -359,7 +358,7 @@ export function Game(props: {
                         if (message.endsWith("is not a valid word")) {
                             // extract out word
                             const word = message.split(" ")[0];
-                            logDispatch(<div><em>{message}</em><AddWordButton word={word} addWordFn={addWordFn} /></div>);
+                            logDispatch(<AddWordButton word={word} addWordFn={addWordFn} />);
                         } else {
                             logDispatch(<div><em>{message}</em></div>);
                         }
@@ -410,7 +409,11 @@ export function Game(props: {
 function AddWordButton(props: {word: string, addWordFn: (x: string) => void}) {
     const [isClicked, setIsClicked] = useState<boolean>(false);
 
-    return <button
+    if (!isClicked) {
+        return <div>
+            <em>{props.word} is not a valid word.</em>
+            <button
+                className="add-to-dictionary"
                 disabled={isClicked}
                 onClick={() => {
                     setIsClicked(true);
@@ -418,4 +421,12 @@ function AddWordButton(props: {word: string, addWordFn: (x: string) => void}) {
                 }}>
                 Add to dictionary
             </button>
+        </div>;
+    } else {
+        return <div>
+            <em>{props.word} was added to dictionary.</em>
+        </div>;
+    }
+
 }
+

ui/src/style.less

@@ -271,3 +271,12 @@ dialog {
   }
 
 }
+
+button.add-to-dictionary {
+  padding: 0;
+  margin: 0 0 0 1em;
+}
+
+div.log {
+    line-height: 1.5em;
+}