style: improve transparency, colours, layout, padding, etc

Author: kevinjosethomas

src/components/Analysis/ConfigurableScreens.tsx

@@ -119,7 +119,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex w-full flex-1 flex-col overflow-hidden border-glass-border bg-glass md:w-auto md:rounded">
+    <div className="flex w-full flex-1 flex-col overflow-hidden border border-glass-border bg-glass md:w-auto md:rounded">
       <div className="flex flex-row border-b border-glass-border">
         {screens.map((s) => {
           const selected = s.id === screen.id

src/components/Analysis/ConfigureAnalysis.tsx

@@ -41,7 +41,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <div className="relative inline-flex w-full items-center">
           <select
             value={currentMaiaModel}
-            className="border-glass-border w-full cursor-pointer appearance-none rounded border bg-glass py-[5px] pl-2.5 pr-6 text-xs text-white/90 outline-none transition duration-200 hover:bg-glass-stronger"
+            className="w-full cursor-pointer appearance-none rounded border border-glass-border bg-glass py-[5px] pl-2.5 pr-6 text-xs text-white/90 outline-none transition duration-200 hover:bg-glass-stronger"
             onChange={(e) => setCurrentMaiaModel(e.target.value)}
           >
             {MAIA_MODELS.map((model) => (
@@ -63,7 +63,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <button
           onClick={onAnalyzeEntireGame}
           disabled={isAnalysisInProgress || isLearnFromMistakesActive}
-          className="border-glass-border flex w-full items-center gap-1.5 rounded border bg-glass !px-2.5 !py-[5px] !text-sm text-white/90 transition duration-200 hover:bg-glass-stronger disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex w-full items-center gap-1.5 rounded border border-glass-border bg-glass !px-2.5 !py-[5px] !text-sm text-white/90 transition duration-200 hover:bg-glass-stronger 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">
@@ -81,7 +81,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
         <button
           onClick={onLearnFromMistakes}
           disabled={isAnalysisInProgress || isLearnFromMistakesActive}
-          className="border-glass-border flex w-full items-center gap-1.5 rounded border bg-glass !px-2.5 !py-[5px] !text-sm text-white/90 transition duration-200 hover:bg-glass-stronger disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex w-full items-center gap-1.5 rounded border border-glass-border bg-glass !px-2.5 !py-[5px] !text-sm text-white/90 transition duration-200 hover:bg-glass-stronger 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/components/Common/Header.tsx

@@ -260,11 +260,11 @@ export const Header: React.FC = () => {
                   transition={{ duration: 0.2 }}
                   className="absolute left-0 top-[100%] z-30 w-32 overflow-hidden rounded-md border border-glass-border bg-backdrop"
                 >
-                  <div className="divide-y divide-white/5">
+                  <div className="divide-y divide-glass-border tracking-wide">
                     {isCompactDesktopNav && (
                       <Link
                         href="/broadcast"
-                        className={`flex w-full items-center justify-start px-3 py-2 text-sm transition-colors hover:bg-[rgba(255,255,255,0.04)] ${
+                        className={`flex w-full items-center justify-start px-3 py-2 text-sm transition-colors hover:bg-glass ${
                           router.pathname.startsWith('/broadcast')
                             ? 'text-primary'
                             : 'text-white/90'
@@ -276,7 +276,7 @@ export const Header: React.FC = () => {
                     {isCompactDesktopNav && (
                       <Link
                         href="/leaderboard"
-                        className={`flex w-full items-center justify-start px-3 py-2 text-sm transition-colors hover:bg-[rgba(255,255,255,0.04)] ${
+                        className={`flex w-full items-center justify-start px-3 py-2 text-sm transition-colors hover:bg-glass ${
                           router.pathname.startsWith('/leaderboard')
                             ? 'text-primary'
                             : 'text-white/90'
@@ -287,23 +287,23 @@ export const Header: React.FC = () => {
                     )}
                     <Link
                       href="/blog"
-                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-glass"
                     >
                       Blog
                     </Link>
                     <a
                       target="_blank"
                       rel="noreferrer"
                       href="https://twitch.tv/maiachess"
-                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-glass"
                     >
                       Watch
                     </a>
                     <a
                       target="_blank"
                       rel="noreferrer"
                       href="https://forms.gle/XYeoTJF4YgUu4Vq28"
-                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-[rgba(255,255,255,0.04)]"
+                      className="flex w-full items-center justify-start px-3 py-2 text-sm text-white/90 transition-colors hover:bg-glass"
                     >
                       Feedback
                     </a>

src/components/Common/Loading.tsx

@@ -14,14 +14,10 @@ const states = [
 ]
 
 interface LoadingProps {
-  // When true, shows loading UI (optionally after a delay); when false, shows children
   isLoading?: boolean
-  // Milliseconds to wait before showing the loading UI
   delay?: number
-  // Visual options for the loading UI
   transparent?: boolean
   message?: React.ReactNode
-  // Optional content to render when not loading
   children?: React.ReactNode
 }
 
@@ -32,7 +28,6 @@ export const Loading: React.FC<LoadingProps> = ({
   message,
   children,
 }) => {
-  // Delay handling for showing the loading UI
   const [showLoading, setShowLoading] = useState(false)
   useEffect(() => {
     let timer: NodeJS.Timeout
@@ -77,9 +72,9 @@ export const Loading: React.FC<LoadingProps> = ({
           className="my-auto"
         >
           <div
-            className={`my-40 flex w-screen items-center justify-center ${
+            className={`my-40 flex w-screen items-center justify-center md:my-auto ${
               transparent ? 'absolute left-0 top-0 h-screen' : ''
-            } md:my-auto`}
+            }`}
           >
             <div className="flex flex-col items-center gap-4">
               <div
@@ -101,7 +96,9 @@ export const Loading: React.FC<LoadingProps> = ({
                   />
                 </div>
               </div>
-              <h2 className="text-2xl font-medium">Loading...</h2>
+              <h2 className="text-lg font-medium uppercase tracking-wider">
+                Loading...
+              </h2>
               {message ? (
                 <p className="max-w-prose px-4 text-center text-secondary">
                   {message}

src/components/Settings/SettingsPage.tsx

@@ -49,7 +49,7 @@ export const SettingsPage: React.FC = () => {
       animate="visible"
       exit="exit"
       style={{ willChange: 'transform, opacity' }}
-      className="relative mx-auto flex w-full flex-col gap-6 px-4 py-8 md:w-[90%] md:gap-8 md:px-0"
+      className="relative mx-auto flex w-full flex-col gap-4 px-4 py-8 md:w-[90%] md:gap-6 md:px-0"
     >
       {/* Header */}
       <motion.div variants={itemVariants} className="flex flex-col gap-2">
@@ -66,7 +66,7 @@ export const SettingsPage: React.FC = () => {
       </motion.div>
 
       {/* Two-column layout */}
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:gap-8">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-4 lg:gap-6">
         {/* Left column: Sound + Model */}
         <div className="flex flex-col gap-4 md:gap-6">
           <motion.div variants={itemVariants}>

src/pages/analysis/stream/[gameId].tsx

@@ -185,23 +185,28 @@ const StreamAnalysisPage: NextPage = () => {
         {!streamController.game?.loaded &&
         streamController.game &&
         !streamController.streamState.gameEnded ? (
-          <div className="absolute left-0 top-0 z-50">
+          <div className="absolute left-0 top-0 z-40 h-full w-full bg-backdrop/90">
             <Loading
               transparent
               isLoading={true}
               message={
-                <>
-                  Connecting to Lichess game {gameId}...
-                  <br />
-                  Lichess intentionally adds a short delay to live move data to
-                  reduce engine-assisted cheating. The stream will start soon.
-                </>
+                <div className="flex flex-col items-center justify-center">
+                  <p className="text-center tracking-wide text-primary">
+                    Connecting to Lichess game {gameId}...
+                  </p>
+                  <p className="max-w-sm text-center text-sm text-secondary">
+                    Lichess intentionally adds a short delay to live move data
+                    to reduce engine-assisted cheating. The stream will start
+                    soon.
+                  </p>
+                </div>
               }
             >
               <></>
             </Loading>
           </div>
         ) : null}
+
         {analysisController && (
           <StreamAnalysis
             game={streamController.game || dummyGame}