Merge pull request #253 from unslothai/feature/theme-fix

feat: fix dark mode support and refine UI assets

studio/frontend/src/features/recipe-studio/components/block-sheet.tsx

@@ -121,7 +121,7 @@ function BlockSheetButton({
     <button
       type="button"
       onClick={onClick}
-      className={`flex w-full items-center gap-3 bg-white px-3 py-3 text-left transition border-l-2 ${
+      className={`flex w-full items-center gap-3 border-l-2 bg-background px-3 py-3 text-left transition hover:bg-muted/35 ${
         isActive
           ? "border-emerald-500"
           : "border-transparent hover:border-border/60"

studio/frontend/src/features/recipe-studio/components/executions/executions-view.tsx

@@ -344,8 +344,8 @@ export function ExecutionsView({
                 className={cn(
                   "space-y-3 rounded-xl border p-3",
                   progressComplete
-                    ? "border-emerald-200 bg-emerald-50/50"
-                    : "border-amber-200 bg-amber-50/50",
+                    ? "border-emerald-200 bg-emerald-50/50 dark:border-emerald-900/50 dark:bg-emerald-950/25"
+                    : "border-amber-200 bg-amber-50/50 dark:border-amber-900/50 dark:bg-amber-950/25",
                 )}
               >
                 <div className="flex items-center justify-between">
@@ -354,13 +354,17 @@ export function ExecutionsView({
                       icon={progressComplete ? CheckmarkCircle02Icon : Flag02Icon}
                       className={cn(
                         "size-4",
-                        progressComplete ? "text-emerald-700" : "text-amber-700",
+                        progressComplete
+                          ? "text-emerald-700 dark:text-emerald-300"
+                          : "text-amber-700 dark:text-amber-300",
                       )}
                     />
                     <p
                       className={cn(
                         "text-sm font-semibold",
-                        progressComplete ? "text-emerald-900" : "text-amber-900",
+                        progressComplete
+                          ? "text-emerald-900 dark:text-emerald-100"
+                          : "text-amber-900 dark:text-amber-100",
                       )}
                     >
                       {progressComplete ? "Run completed" : "Run in progress"}
@@ -369,7 +373,9 @@ export function ExecutionsView({
                   <p
                     className={cn(
                       "text-xs",
-                      progressComplete ? "text-emerald-800" : "text-amber-800",
+                      progressComplete
+                        ? "text-emerald-800 dark:text-emerald-200"
+                        : "text-amber-800 dark:text-amber-200",
                     )}
                   >
                     {formatPercent(progressPercent)}
@@ -379,7 +385,9 @@ export function ExecutionsView({
                 <div
                   className={cn(
                     "grid gap-2 text-xs md:grid-cols-4",
-                    progressComplete ? "text-emerald-900" : "text-amber-900",
+                    progressComplete
+                      ? "text-emerald-900 dark:text-emerald-100"
+                      : "text-amber-900 dark:text-amber-100",
                   )}
                 >
                   <p>Done: {selectedExecution.progress?.done ?? "--"}</p>
@@ -391,7 +399,9 @@ export function ExecutionsView({
                   <p
                     className={cn(
                       "text-xs",
-                      progressComplete ? "text-emerald-900" : "text-amber-900",
+                      progressComplete
+                        ? "text-emerald-900 dark:text-emerald-100"
+                        : "text-amber-900 dark:text-amber-100",
                     )}
                   >
                     Column {selectedExecution.current_column}:{" "}
@@ -404,7 +414,9 @@ export function ExecutionsView({
                   <p
                     className={cn(
                       "text-xs",
-                      progressComplete ? "text-emerald-900" : "text-amber-900",
+                      progressComplete
+                        ? "text-emerald-900 dark:text-emerald-100"
+                        : "text-amber-900 dark:text-amber-100",
                     )}
                   >
                     Processed batch: {batchIdx ?? "--"}/{batchTotal}

studio/frontend/src/features/studio/training-start-overlay.tsx

@@ -43,9 +43,9 @@ export function TrainingStartOverlay({
     <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center rounded-2xl bg-background/45 backdrop-blur-[1px]">
       <div className="pointer-events-auto relative flex w-[860px] max-w-[calc(100%-2rem)] flex-col items-center gap-4">
         <img
-          src="/Sloth emojis/large sloth wave.png"
+          src="/unsloth-gem.png"
           alt="Unsloth mascot"
-          className="size-24 animate-bounce object-contain"
+          className="size-24 object-contain"
         />
         <div className="relative w-full">
           <AlertDialog open={cancelDialogOpen} onOpenChange={setCancelDialogOpen}>
@@ -106,9 +106,6 @@ O^O/ \\_/ \\
           <TypingAnimation duration={44}>
             {"> We are getting everything ready for your run..."}
           </TypingAnimation>
-          <TypingAnimation duration={44}>
-            {"> Did you know, Mugi is actually short for \"Mugiwara\" xd"}
-          </TypingAnimation>
           <AnimatedSpan className="mt-2 text-muted-foreground">
             {`> ${message || "starting training..."} | waiting for first step... (${currentStep})`}
           </AnimatedSpan>