text input dark mode, header height

freirart · May 1, 2024 · 6749202 · 6749202
1 parent 260cedd
commit 6749202
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -45,7 +45,7 @@ export default function Header({
   };
 
   return (
-    <header className="flex justify-center md:pt-10">
+    <header className="flex flex-col justify-center items-center h-1/5">
       <div
         className="flex justify-between flex-nowrap dark:bg-dark-blue bg-white-blue
           md:min-w-[500px] w-[350px] rounded-3xl p-2 md:text-xl shadow-md"
@@ -68,7 +68,7 @@ export default function Header({
               >
                 {signMap[playerId]}
                 {isEditingPlayer ? (
-                  <TextInput defaultValue={name} onBlur={onBlur} />
+                  <TextInput onBlur={onBlur} defaultValue={name} />
                 ) : (
                   <span
                     onClick={() => setPlayerBeingEdited(playerId)}

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -1,4 +1,4 @@
-import { FocusEventHandler, useState } from 'react';
+import { useState } from 'react';
 
 interface TextInputProps {
   onBlur: Function;
@@ -9,15 +9,16 @@ export default function TextInput({
   onBlur,
   defaultValue
 }: TextInputProps) {
-  const [inputValue, setInputValue] = useState<string>(defaultValue);
+  const [inputValue, setInputValue] = useState<string>('');
 
   return (
     <input
       autoFocus
-      onBlur={() => onBlur(inputValue)}
+      onBlur={() => onBlur(inputValue || defaultValue)}
       onKeyDown={(e) => (e.key === 'Enter' ? onBlur(inputValue) : {})}
       type="text"
-      className="md:w-36 w-24 text-center bg-light-blue"
+      className="md:w-36 w-24 text-center dark:bg-special-black bg-light-blue
+        dark:text-white-blue"
       value={inputValue}
       onChange={(e) => setInputValue(e.target.value)}
     />