style: clean up learn fro mmistakes component

Author: kevinjosethomas

src/components/Analysis/LearnFromMistakes.tsx

@@ -35,8 +35,8 @@ export const LearnFromMistakes: React.FC<Props> = ({
   // Show player selection dialog
   if (state.showPlayerSelection) {
     return (
-      <div className="flex h-full w-full flex-col border-white/10 bg-gradient-to-br text-white">
-        <div className="flex items-center justify-between border-b border-white/10 px-4 py-2">
+      <div className="flex h-full w-full flex-col border-white/10 text-white">
+        <div className="flex items-center justify-between border-b border-glassBorder px-4 py-2">
           <div className="flex items-center gap-2">
             <span className="material-symbols-outlined !text-sm text-white/80">
               school
@@ -136,8 +136,8 @@ export const LearnFromMistakes: React.FC<Props> = ({
   }
 
   return (
-    <div className="to-white/4 flex h-full w-full flex-col justify-between gap-4 rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 text-white backdrop-blur-lg">
-      <div className="flex items-center justify-between border-b border-white/10 pb-3">
+    <div className="flex h-full w-full flex-col justify-between text-white">
+      <div className="flex items-center justify-between border-b border-glassBorder px-4 py-2">
         <div className="flex items-center gap-2">
           <span className="material-symbols-outlined !text-sm text-white/80">
             school
@@ -149,60 +149,59 @@ export const LearnFromMistakes: React.FC<Props> = ({
         </div>
         <button
           onClick={onStop}
-          className="flex items-center gap-1 rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xxs text-white/70 transition duration-200 hover:border-white/20 hover:bg-white/10 hover:text-white"
+          title="Stop learning"
+          className="flex items-center gap-1 rounded border border-white/10 bg-white/5 px-2 py-1 text-xxs text-white/70 transition duration-200 hover:border-white/20 hover:bg-white/10 hover:text-white"
         >
           <span className="material-symbols-outlined !text-xxs">close</span>
           Stop
         </button>
       </div>
-
-      <div className="flex flex-1 flex-col gap-3">
+      <div className="flex flex-1 flex-col items-start justify-start gap-6 p-3">
         <p className="text-sm text-white/75">{getPromptText()}</p>
         {getFeedbackText() && (
           <p
             className={`text-sm ${
               state.showSolution
-                ? 'text-green-300'
+                ? 'text-green-400'
                 : lastMoveResult === 'incorrect'
-                  ? 'text-orange-300/80'
+                  ? 'text-orange-400'
                   : 'text-white'
             }`}
           >
             {getFeedbackText()}
           </p>
         )}
       </div>
-
-      <div className="flex w-full gap-3 pt-1">
+      <div className="flex w-full gap-3 p-3">
         {!state.showSolution && lastMoveResult !== 'correct' ? (
           <>
-            <button
-              onClick={onShowSolution}
-              className="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-human-4/40 bg-human-4/80 px-3 py-2 text-sm font-medium text-white/90 transition duration-200 hover:bg-human-4"
-            >
-              <span className="material-symbols-outlined !text-sm">
-                lightbulb
-              </span>
-              See solution
-            </button>
             {!isLastMistake && (
               <button
                 onClick={onNext}
-                className="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm font-medium text-white/75 transition duration-200 hover:border-white/20 hover:bg-white/10 hover:text-white"
+                className="flex flex-1 items-center justify-center gap-1.5 rounded border border-glassBorder bg-glass px-3 py-2 text-sm font-medium text-white/75 transition duration-200 hover:bg-glass-strong"
               >
                 <span className="material-symbols-outlined !text-sm">
                   skip_next
                 </span>
                 Skip
               </button>
             )}
+            <button
+              onClick={onShowSolution}
+              className="flex flex-1 items-center justify-center gap-1.5 rounded border border-human-4/40 bg-human-4/80 px-3 py-2 text-sm font-medium text-white/90 transition duration-200 hover:bg-human-4"
+            >
+              <span className="material-symbols-outlined !text-sm">
+                lightbulb
+              </span>
+              See solution
+            </button>
           </>
         ) : (
           <button
             onClick={onNext}
-            className="flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-human-4/40 bg-human-4/70 px-3 py-2 text-sm font-semibold text-white transition duration-200 hover:bg-human-4/90"
+            className="flex flex-1 items-center justify-center gap-1.5 rounded border border-human-4/40 bg-human-4/70 px-3 py-2 text-sm text-white transition duration-200 hover:bg-human-4/90"
           >
-            <span className="material-symbols-outlined !text-base">
+            <span className="material-symbols-outlined !text-sm">
               {isLastMistake ? 'check' : 'arrow_forward'}
             </span>
             {isLastMistake ? 'Finish' : 'Next mistake'}