anagrams: Bring claim area into our color scheme

By preferring --accent-color and existing button styling wherever
possible, and add a new --accent-color-muted. Avoid bright red for
actions like cancelling the claim or returning a word, using subtle
gray instead.

diff --git a/anagrams/anagrams.css b/anagrams/anagrams.css
index 22e27ba50bfea4f89e8f0f664d367d52069b80d9..a9e2c2c7cbe9885e778bf4f59182f6d944fb311d 100644 (file)
--- a/anagrams/anagrams.css
+++ b/anagrams/anagrams.css
@@ -89,8 +89,8 @@
 .claim-area {
   margin-bottom: 1em;
   padding: 0.5em;
-  background: #e8f5e9;
-  border: 2px solid #27ae60;
+  background: var(--accent-color-muted);
+  border: 2px solid var(--accent-color);
   border-radius: 6px;
 }
 
@@ -112,8 +112,8 @@
 }
 
 .claim-rack.drag-over {
-  background: #d5f5e3;
-  border-color: #27ae60;
+  background: var(--accent-color-muted);
+  border-color: var(--accent-color);
 }
 
 .claim-actions {
@@ -122,38 +122,21 @@
   align-items: center;
 }
 
-.claim-actions .submit-btn {
-  background: #27ae60;
-  border: 2px solid #27ae60;
-  color: white;
-  padding: 0.3em 1em;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.claim-actions .submit-btn:disabled {
-  background: #95a5a6;
-  border-color: #95a5a6;
-  cursor: default;
-}
-
-.claim-actions .cancel-btn {
-  background: #e74c3c;
-  border: 2px solid #e74c3c;
-  color: white;
-  padding: 0.3em 1em;
-  border-radius: 4px;
+.claim-actions .cancel-link {
+  font-size: 0.85em;
+  color: #888;
   cursor: pointer;
+  text-decoration: underline;
 }
 
 .claim-timer {
   font-size: 0.9em;
-  color: #e74c3c;
+  color: var(--warning-color);
   font-weight: bold;
 }
 
 .claim-error {
-  color: #e74c3c;
+  color: #c00;
   font-size: 0.9em;
   margin-top: 0.3em;
 }

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index a5e520a681fa77d92296120bb3c171759d65eb0d..58dc96488620106e82bd7b6c48fad433c83c7262 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -897,12 +897,11 @@ class Game extends React.Component {
                   <Tile key={i} letter={ch} />
                 ))}
                 <span className="separator">+</span>
-                <button onClick={() => this.return_word(cw.word_id)}
-                        style={{ cursor: "pointer", background: "none",
-                                 border: "none", fontSize: "1.2em",
-                                 color: "#e74c3c" }}>
+                <span style={{ cursor: "pointer", fontSize: "0.9em",
+                               color: "#888" }}
+                      onClick={() => this.return_word(cw.word_id)}>
                   &#x2715;
-                </button>
+                </span>
               </span>
             ))}
           </div>
@@ -918,15 +917,14 @@ class Game extends React.Component {
         </div>
 
         <div className="claim-actions">
-          <button className="submit-btn"
-                  disabled={!can_submit}
+          <button disabled={!can_submit}
                   onClick={() => this.submit_word()}>
             Submit
           </button>
-          <button className="cancel-btn"
-                  onClick={() => this.cancel_claim()}>
-            Cancel
-          </button>
+          <span className="cancel-link"
+                onClick={() => this.cancel_claim()}>
+            cancel
+          </span>
           {claim_warning ? (
             <span className="claim-timer">
               {Math.ceil(claim_remaining_ms / 1000)}s

diff --git a/style.css b/style.css
index bc611e5a16587f895e37be0864c5f6cc2b483454..bb3ef22b87cc8f2a85d6030791fd9d39e51c287f 100644 (file)
--- a/style.css
+++ b/style.css
@@ -22,6 +22,7 @@
     /* A little color to avoid a fully monochromatic theme. */
     --accent-color: #287789;
     --accent-color-bright: #44c7ef;
+    --accent-color-muted: #d0e8ef;
     --text-fg-on-accent: white;
     --text-fg-on-accent-bright: #333738;