Revamp numeric text field (#550)

This SHOULD fix bug #414, in a way that doesn't look too bad.

## ✅ Changes

<!-- Use prefixes: **chore**, **docs**, **feat**, **fix**, **refactor**,
**style** or **test** -->

- **refactor**: change the text display used for numeric text inputs.

## 🌄 Context

Per bug #414, the prior version had a limit on how large the value in
the field could be.

## 🔒Checklist

- I tested my work on the feature environment

---------

Co-authored-by: rpdeshaies <[email protected]>

cypress/e2e/route/Oracle.cy.ts

@@ -4,7 +4,7 @@ describe("/oracle", () => {
   describe("Given I want to ask a question to the oracle", () => {
     it("should ask questions to the oracle ", () => {
       Fari.start();
-      Fari.getByText("Consult the Oracle").click();
+      Fari.visit("/oracle");
 
       askOracle();
 

lib/components/Page/NavLink.tsx

@@ -23,7 +23,6 @@ export function NavLink(props: {
   endIcon?: React.ReactNode;
   children: React.ReactNode;
 }) {
-  const theme = useTheme();
   if (props.to) {
     return (
       <Tooltip title={props.tooltip ?? ""}>

lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx

@@ -6,12 +6,11 @@ import Fade from "@mui/material/Fade";
 import IconButton from "@mui/material/IconButton";
 import { useTheme } from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { ConditionalWrapper } from "../../../../../components/ConditionalWrapper/ConditionalWrapper";
 import { Delays } from "../../../../../constants/Delays";
 import { IDataCyProps } from "../../../../../domains/cypress/types/IDataCyProps";
 import { useLazyState } from "../../../../../hooks/useLazyState/useLazyState";
-import { MiniThemeContext } from "../MiniThemeContext";
 
 export function CircleTextField(
   props: {
@@ -27,8 +26,6 @@ export function CircleTextField(
     onContextMenu?(event: React.MouseEvent<HTMLElement, MouseEvent>): void;
   } & IDataCyProps
 ) {
-  const miniTheme = useContext(MiniThemeContext);
-
   const theme = useTheme();
   const [hover, setHover] = useState(false);
   const [focus, setFocus] = useState(false);
@@ -100,24 +97,18 @@ export function CircleTextField(
               setValue("");
             } else {
               const parsed = parseInt(e.target.value);
-              if (parsed > 999) {
-                setValue("999");
-              } else {
-                setValue(parsed.toString());
-              }
+              setValue(parsed.toString());
             }
           }}
           InputProps={{
             sx: {
               "cursor": cursor,
-              "width": "3rem",
+              "width": "5rem",
               "height": "3rem",
-              "borderRadius": "50%",
-              "border": `2px solid ${
-                props.borderColor ?? miniTheme.textPrimary
-              }`,
+              "px": "0.5rem",
+              "font-family": "monospace",
               "outline": "none",
-              "background": props.highlight ? miniTheme.textPrimary : "inherit",
+              "background": (theme) => theme.palette.action.hover,
               "&&": {
                 color: "inherit",
               },
@@ -164,7 +155,6 @@ export function CircleTextField(
       {!props.readonly && props.onDecrement && (
         <Fade in={areCounterButtonsVisible}>
           <IconButton
-            size="small"
             data-cy={`${props.dataCy}.decrement`}
             sx={{
               "position": "absolute",
@@ -177,15 +167,14 @@ export function CircleTextField(
             onClick={props.onDecrement}
           >
             <RemoveCircleOutlineOutlinedIcon
-              sx={{ width: "1.1rem", height: "1.1rem" }}
+              sx={{ width: "1.5rem", height: "1.5rem" }}
             />
           </IconButton>
         </Fade>
       )}
       {!props.readonly && props.onIncrement && (
         <Fade in={areCounterButtonsVisible}>
           <IconButton
-            size="small"
             data-cy={`${props.dataCy}.increment`}
             sx={{
               "position": "absolute",
@@ -198,7 +187,7 @@ export function CircleTextField(
             onClick={props.onIncrement}
           >
             <AddCircleOutlineOutlinedIcon
-              sx={{ width: "1.1rem", height: "1.1rem" }}
+              sx={{ width: "1.5rem", height: "1.5rem" }}
             />
           </IconButton>
         </Fade>