style: improve analysis ui

Author: kevinjosethomas

src/components/Analysis/ConfigureAnalysis.tsx

@@ -35,13 +35,13 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   autoSave,
 }: Props) => {
   return (
-    <div className="flex w-full flex-col items-start justify-start gap-2 rounded-md p-3 text-white/90">
+    <div className="flex w-full flex-col items-start justify-start gap-1.5 rounded-md p-3 text-white/90">
       <div className="flex w-full flex-col gap-0.5">
         <p className="text-xs text-white/70">Analyze using:</p>
         <div className="relative inline-flex w-full items-center">
           <select
             value={currentMaiaModel}
-            className="border-glassBorder bg-glass hover:bg-glass-hover w-full cursor-pointer appearance-none rounded-md border p-1 pr-6 text-xs text-white/90 outline-none transition duration-200"
+            className="w-full cursor-pointer appearance-none rounded border border-glassBorder bg-glass py-[5px] pl-2.5 pr-6 text-xs text-white/90 outline-none transition duration-200 hover:bg-glass-hover"
             onChange={(e) => setCurrentMaiaModel(e.target.value)}
           >
             {MAIA_MODELS.map((model) => (
@@ -61,13 +61,13 @@ export const ConfigureAnalysis: React.FC<Props> = ({
       </div>
       <ContinueAgainstMaia
         launchContinue={launchContinue}
-        background="!rounded-md border border-glassBorder bg-glass text-white/90 hover:bg-glass-hover !px-2 !py-1 !text-xs"
+        background="!rounded border border-glassBorder bg-glass text-white/90 hover:bg-glass-hover !px-2.5 !py-[5px] !text-xs"
       />
       {onAnalyzeEntireGame && (
         <button
           onClick={onAnalyzeEntireGame}
           disabled={isAnalysisInProgress || isLearnFromMistakesActive}
-          className="border-glassBorder bg-glass hover:bg-glass-hover flex w-full items-center gap-1.5 rounded-md border !px-2 !py-1 !text-sm text-white/90 transition duration-200 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex w-full items-center gap-1.5 rounded border border-glassBorder bg-glass !px-2.5 !py-[5px] !text-sm text-white/90 transition duration-200 hover:bg-glass-hover disabled:cursor-not-allowed disabled:opacity-50"
         >
           <div className="flex items-center justify-center gap-1.5">
             <span className="material-symbols-outlined !text-sm text-white/80">
@@ -85,7 +85,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <button
           onClick={onLearnFromMistakes}
           disabled={isAnalysisInProgress || isLearnFromMistakesActive}
-          className="border-glassBorder bg-glass hover:bg-glass-hover flex w-full items-center gap-1.5 rounded-md border !px-2 !py-1 !text-sm text-white/90 transition duration-200 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex w-full items-center gap-1.5 rounded border border-glassBorder bg-glass !px-2.5 !py-[5px] !text-sm text-white/90 transition duration-200 hover:bg-glass-hover disabled:cursor-not-allowed disabled:opacity-50"
         >
           <div className="flex items-center justify-center gap-1.5">
             <span className="material-symbols-outlined !text-sm text-white/80">

src/pages/analysis/[...id].tsx

@@ -634,7 +634,7 @@ const Analysis: React.FC<Props> = ({
           variants={itemVariants}
           style={{ willChange: 'transform, opacity' }}
         >
-          <div className="border-glassBorder bg-glass flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
+          <div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
             {/* Game info header */}
             <GameInfo
               title="Analysis"
@@ -667,7 +667,7 @@ const Analysis: React.FC<Props> = ({
             </div>
             {/* Moves + controller */}
             <div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
-              <div className="h-4" />
+              <div className="h-4 border-b border-glassBorder" />
               <MovesContainer
                 game={analyzedGame}
                 termination={analyzedGame.termination}
@@ -1282,13 +1282,13 @@ const Analysis: React.FC<Props> = ({
         />
       </Head>
       {/* Radial gradient backdrop to match new design language */}
-      {/* <div
+      <div
         className="pointer-events-none absolute inset-0"
         style={{
           background:
             'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
         }}
-      /> */}
+      />
       <AnimatePresence>
         {controller.maia.status === 'no-cache' ||
         controller.maia.status === 'downloading' ? (