changed flex property

ut-code · Feb 25, 2024 · bae19a2 · bae19a2
1 parent 0032cb5
commit bae19a2
Showing 1 changed file with 23 additions and 25 deletions.
diff --git a/learn/src/components/TouchMain.tsx b/learn/src/components/TouchMain.tsx
@@ -46,37 +46,35 @@ export default function TouchMain({
   return (
     <>
       <div
-        className={`float-left mb-auto mt-40 ${showBrailleChart ? "w-3/4" : "w-full"}`}
+        className={`float-left my-auto mt-40 ${showBrailleChart ? "w-3/4" : "w-full"}`}
       >
         <div className="w-200 mx-auto mt-auto max-w-full pb-1.5 pt-2 font-sans text-3xl font-bold">
           「{question}」を点字に直してください。
         </div>
-        <div className="w-200 mx-auto flex max-w-full pb-1.5 pt-2">
+        <div className="w-200 mx-auto flex max-w-full flex-wrap pb-1.5 pt-2">
           {brailleStrings.map((brailleChar, i) => (
-            <div>
-              <EdittableBraille
-                key={i}
-                height="150"
-                width="90"
-                braille={brailleChar}
-                setBraille={(braille) => {
-                  setBrailleStrings(
-                    new BrailleArray(
-                      brailleStrings.map((_, j) => (j === i ? braille : _)),
-                    ),
-                  );
-                }}
-              />
-            </div>
+            <EdittableBraille
+              key={i}
+              height="150"
+              width="90"
+              braille={brailleChar}
+              setBraille={(braille) => {
+                setBrailleStrings(
+                  new BrailleArray(
+                    brailleStrings.map((_, j) => (j === i ? braille : _)),
+                  ),
+                );
+              }}
+            />
           ))}
         </div>
 
-        <div className="w-200 mx-auto flex h-60 max-w-full">
+        <div className="w-200 h-15 mx-auto flex max-w-full">
           {(() => {
             if (afterJudgeAnswer === true && rightOrWrong === true) {
               return (
                 <div className="flex basis-3/4">
-                  <CheckCircleOutlineIcon className="my-auto bg-green-500 pl-5 text-6xl" />
+                  <CheckCircleOutlineIcon className="my-auto pl-5 text-6xl" />
                   <p className="my-auto pl-2.5 font-sans text-3xl font-bold">
                     正解!!
                   </p>
@@ -86,7 +84,7 @@ export default function TouchMain({
             if (afterJudgeAnswer === true && rightOrWrong === false) {
               return (
                 <div className="flex basis-3/4">
-                  <CancelOutlinedIcon className="my-auto bg-red-500 pl-5 text-6xl" />
+                  <CancelOutlinedIcon className="my-auto pl-5 text-6xl" />
                   <p className="my-auto pl-2.5 font-sans text-3xl font-bold">
                     不正解
                   </p>
@@ -98,9 +96,9 @@ export default function TouchMain({
           {(() => {
             if (afterJudgeAnswer === true) {
               return (
-                <div className="flex basis-10 justify-center">
+                <div className="flex basis-1/4 justify-center">
                   <button
-                    // className={`rounded-md text-white border-t-0 border-l-0 transition duration-300 shadow-md hover:shadow-lg w-48 h-16 font-bold font-sans text-lg`}
+                    className="mb-2 me-2 rounded-lg border border-blue-700 px-5 py-2.5 text-center text-sm font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white dark:focus:ring-blue-800"
                     type="button"
                     onClick={() => {
                       setQuestion(makeQuestion(typeOfQuestions));
@@ -120,9 +118,9 @@ export default function TouchMain({
               );
             }
             return (
-              <div className="flex basis-10 justify-center">
+              <div className="flex basis-1/4 justify-center">
                 <button
-                  className="btn judge_btn"
+                  className="mb-2 me-2 rounded-lg border border-blue-700 px-5 py-2.5 text-center text-sm font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white dark:focus:ring-blue-800"
                   type="button"
                   onClick={() => {
                     judgeAnswer(
@@ -146,7 +144,7 @@ export default function TouchMain({
         <HiraganaTableDialog />
       </div>
       <button
-        className="fixed right-10"
+        className="fixed right-10 mb-2 me-2 rounded-lg border border-blue-700 px-5 py-2.5 text-center text-sm font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white dark:focus:ring-blue-800"
         type="button"
         onClick={() => {
           setShowBrailleChart(!showBrailleChart);