Minor Play page aesthetic tweaks

online-go · Nov 20, 2024 · d6ce128 · d6ce128
1 parent 0dd9ea9
commit d6ce128
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/src/views/Play/QuickMatch.styl b/src/views/Play/QuickMatch.styl
@@ -45,11 +45,14 @@
 
 
 #FindGame {
-    margin-top: 2rem;
+    margin-top: 1rem;
+    margin-right: 2rem;
+    margin-left: 2rem;
     display: grid;
     // 2x2 grid
     grid-template-columns: 1fr 1fr;
     user-select: none;
+    column-gap: 4rem;
 
     .GameOption-cell {
         display: flex;
@@ -254,11 +257,11 @@
         }
 
 
-        .MiniGoban {
-            width: 10rem;
-            height: 10rem;
-        }
 
+    }
+    .MiniGoban {
+        width: 22rem !important;
+        height: 22rem !important;
     }
     .subtext {
         font-size: 0.9rem;
@@ -354,14 +357,18 @@
     }
 
     .game-speed-buttons {
-        //padding-left: 2rem;
+        //padding-bottom: 0.5rem;
         display: flex;
         justify-content: space-around;
         align-items: center;
+        //border-bottom: 0.15rem solid transparent;
+
+        &.flexible-active {
+            //themed-important border-color shade3
+        }
+
         .time-control-button {
             min-width: 10rem;
-
-
         }
 
         .or {
@@ -390,8 +397,8 @@
             flex-direction: column;
             flex-grow: 1;
             height: 6rem;
-            margin-left: 1.0rem;
-            margin-right: 1.0rem;
+            margin-left: 0.5rem;
+            margin-right: 0.5rem;
             transition: background-color 0.3s ease;
             box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
             border: 1px solid transparent;
@@ -529,7 +536,10 @@
     #FindGame {
         display: flex;
         flex-direction: column;
+        margin-right: 0rem;
+        margin-left: 0rem;
         margin-bottom: 4rem;
+        column-gap: 0rem;
     }
 
     .GameOption-cell {

diff --git a/src/views/Play/QuickMatch.tsx b/src/views/Play/QuickMatch.tsx
@@ -84,7 +84,7 @@ const handicap_options: OptionWithDescription[] = [
         value: "enabled",
         label: pgettext(
             "Matchmaking handicap option: require handicaps for games between players with different ranks",
-            "Always on",
+            "Required",
         ),
         description: _("Require handicaps between players with different ranks"),
     },
@@ -670,7 +670,14 @@ export function QuickMatch(): JSX.Element {
                                         )}
                                         */}
                                     </div>
-                                    <div className="game-speed-buttons">
+                                    <div
+                                        className={
+                                            "game-speed-buttons " +
+                                            (game_speed === speed && game_clock === "flexible"
+                                                ? "flexible-active"
+                                                : "")
+                                        }
+                                    >
                                         <button
                                             className={
                                                 "time-control-button" +
@@ -754,7 +761,7 @@ export function QuickMatch(): JSX.Element {
                         }}
                     >
                         <div className="opponent-title">
-                            {pgettext("Play a random human opponent", "Random Human")}
+                            {pgettext("Play a human opponent", "Human")}
                         </div>
                         <div className="opponent-rank-range">
                             <select
@@ -834,7 +841,7 @@ export function QuickMatch(): JSX.Element {
                 </div>
             </div>
 
-            {/* Balancing and Play Button */}
+            {/* Play Button */}
             <div className="GameOption-cell">
                 <div className="GameOption">
                     <span>{_("Handicap")}</span>