touchup(indicators): soften indicators

trying to make the UI feel less-cluttered.
indicators feel like they don't need to stand out as much as they
currently do.

includes using a lighter gray for filled indicators,
for their borders, and
removing shadow for button indicators.

src/web/common/theme.ts

@@ -173,7 +173,7 @@ const sharedPalette = {
   primary: { main: "#4AB84E" }, // apple (green): good, optimistic, let's solve things; different from solution because this is too dark for contrasting with black small node text, but solution color is too light from using for text on white background
   info: { main: infoColor },
 
-  neutral: augmentColor({ color: { main: "#BDBDBD" } }), // gray is very neutral, somewhat arbitrarily chosen, no particular relation to the other colors
+  neutral: augmentColor({ color: { main: oklchToHex("oklch(91% 0 0)") } }), // gray is very neutral, light-ish to not stand out too much, no particular relation to the other colors
   neutralContrast: augmentColor({ color: { main: "#000000" } }), // black contrasts with gray, separate from neutral.contrastText so that it gets its own augments I guess
   paper: augmentColor({ color: { main: "#fff" } }), // used for neutral-but-chosen score
 

src/web/topic/components/Indicator/Indicator.tsx

@@ -36,8 +36,11 @@ export const Indicator = ({
         variant="contained"
         color={filled ? color : "paper"}
         onClick={onClickHandler}
-        // text-base seems to fit more snuggly than the default 14px
-        className={`border border-solid text-base ${!onClick ? "pointer-events-none" : ""}`}
+        className={
+          // text-base seems to fit more snuggly than the default 14px
+          "border border-solid border-neutral-main text-base shadow-none" +
+          ` ${!onClick ? "pointer-events-none" : ""}`
+        }
       >
         <Icon color="neutralContrast" fontSize="inherit" />
       </StyledButton>

src/web/topic/components/Score/ScoreButton.tsx

@@ -1,4 +1,4 @@
-import { Box, type ButtonProps } from "@mui/material";
+import { type ButtonProps } from "@mui/material";
 import { MutableRefObject } from "react";
 
 import { StyledButton } from "@/web/topic/components/Score/ScoreButton.styles";
@@ -42,27 +42,19 @@ export const ScoreButton = ({
         onMouseLeave={onMouseLeave}
         buttonDiameter={buttonDiameterRem}
         zoomRatio={zoomRatio}
-        sx={
-          onClick
-            ? isComparing
-              ? {
-                  backgroundColor: "rgba(0,0,0,0)", // transparent so that pie appears as a background
-                  zIndex: "0", // allow the pie to show behind the button (while allow the score label to be in front of the pie)
-                  pointerEvents: "none", // prevent score label from taking pointer events; pie can handle hover effects
-                }
-              : {}
-            : { pointerEvents: "none" }
+        className={
+          "shadow-none border border-solid border-neutral-main" +
+          ` ${isComparing ? "pointer-events-none z-0 bg-transparent" : ""}` +
+          ` ${onClick ? "" : "pointer-events-none"}`
         }
       >
         {isComparing && (
-          <Box
-            position="absolute"
-            width="100%"
-            height="100%"
-            zIndex="-1" // behind the button so the score shows in front of the pie
+          <div
+            // behind the button so the score shows in front of the pie
+            className="absolute z-[-1] size-full"
           >
             <ScoreCompare userScores={userScores} type="button" />
-          </Box>
+          </div>
         )}
 
         {buttonScore}