Change from stone gray to neural gray

iamlogand · Feb 24, 2024 · a709997 · a709997
1 parent 00e4305
commit a709997
Show file tree

Hide file tree

Showing 36 changed files with 144 additions and 144 deletions.
diff --git a/frontend/components/AttributeFlex.tsx b/frontend/components/AttributeFlex.tsx
@@ -17,7 +17,7 @@ const getAttributeItem = (item: Attribute, index?: number) => {
   const titleCaseName = capitalize(item.name)
   return (
     <Tooltip key={index} title={titleCaseName} arrow>
-      <div className="w-[64px] grid grid-cols-[30px_30px] items-center justify-center bg-white dark:bg-stone-650 shadow-[0px_0px_2px_2px_white] dark:shadow-stone-650 rounded">
+      <div className="w-[64px] grid grid-cols-[30px_30px] items-center justify-center bg-white dark:bg-neutral-650 shadow-[0px_0px_2px_2px_white] dark:shadow-neutral-650 rounded">
         <Image
           src={item.icon}
           height={28}

diff --git a/frontend/components/DetailSection.tsx b/frontend/components/DetailSection.tsx
@@ -83,9 +83,9 @@ const DetailSection = () => {
   }
 
   return (
-    <div className="box-border h-full flex flex-col bg-stone-50 dark:bg-stone-700 rounded shadow">
-      <div className="flex gap-2 justify-between items-center p-1 pl-2 border-0 border-b border-solid border-stone-200 dark:border-stone-750">
-        <h3 className="leading-none m-0 ml-2 text-base text-stone-600 dark:text-stone-100">
+    <div className="box-border h-full flex flex-col bg-neutral-50 dark:bg-neutral-700 rounded shadow">
+      <div className="flex gap-2 justify-between items-center p-1 pl-2 border-0 border-b border-solid border-neutral-200 dark:border-neutral-750">
+        <h3 className="leading-none m-0 ml-2 text-base text-neutral-600 dark:text-neutral-100">
           Selected {selectedDetail.id ? selectedDetail.type : "Term"}
         </h3>
         <div>
@@ -106,7 +106,7 @@ const DetailSection = () => {
       </div>
       <div
         ref={detailSectionRef}
-        className="box-border h-full flex-1 overflow-y-auto bg-white dark:bg-stone-600 rounded-b"
+        className="box-border h-full flex-1 overflow-y-auto bg-white dark:bg-neutral-600 rounded-b"
       >
         {selectedDetail.type === "Senator" && (
           <SenatorDetailSection detailSectionRef={detailSectionRef} />

diff --git a/frontend/components/DeveloperTools.tsx b/frontend/components/DeveloperTools.tsx
@@ -56,8 +56,8 @@ const DeveloperTools = () => {
         }}
       >
         <div className="py-2 flex flex-col">
-          <h4 className="px-4 mb-1 text-stone-500 text-sm">Developer Tools</h4>
-          <div className="w-full h-px bg-stone-200 dark:bg-stone-800 my-1"></div>
+          <h4 className="px-4 mb-1 text-neutral-500 text-sm">Developer Tools</h4>
+          <div className="w-full h-px bg-neutral-200 dark:bg-neutral-800 my-1"></div>
           <div className="px-4">
             <table>
               <tr>
@@ -90,7 +90,7 @@ const DeveloperTools = () => {
               ))}
             </table>
           </div>
-          <div className="w-full h-px bg-stone-200 dark:bg-stone-800 my-1"></div>
+          <div className="w-full h-px bg-neutral-200 dark:bg-neutral-800 my-1"></div>
           <FormControlLabel
             control={<Checkbox checked={debugShowEntityIds} />}
             label="Show Entity IDs"

diff --git a/frontend/components/EnemyLeaderPortrait.tsx b/frontend/components/EnemyLeaderPortrait.tsx
@@ -62,7 +62,7 @@ const EnemyLeaderPortrait = ({
     <div>
       <figure
         style={{ height: size, width: size }}
-        className="ms-0 me-0 m-0 p-0.5 box-border relative flex justify-center items-center bg-stone-700 dark:bg-black select-none rounded shadow"
+        className="ms-0 me-0 m-0 p-0.5 box-border relative flex justify-center items-center bg-neutral-700 dark:bg-black select-none rounded shadow"
       >
         <div
           className="absolute overflow-hidden left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] border-2 border-solid border-red-600 dark:border-red-700 rounded-[2px]"

diff --git a/frontend/components/FactionIcon.tsx b/frontend/components/FactionIcon.tsx
@@ -29,7 +29,7 @@ const FactionIcon = ({
   const svg = (
     <svg
       className={`overflow-visible mx-px my-[-2px] ${
-        muted ? "text-stone-500 dark:text-stone-700" : "text-stone-700 dark:text-black"
+        muted ? "text-neutral-500 dark:text-neutral-700" : "text-neutral-700 dark:text-black"
       }`}
       height={size}
       viewBox="0 0 0.9 1"

diff --git a/frontend/components/FactionList.tsx b/frontend/components/FactionList.tsx
@@ -44,7 +44,7 @@ const FactionList = () => {
   }
 
   return (
-    <div className="box-border h-full overflow-auto flex flex-col border border-solid border-stone-200 dark:border-stone-750 rounded m-4 bg-white dark:bg-stone-600">
+    <div className="box-border h-full overflow-auto flex flex-col border border-solid border-neutral-200 dark:border-neutral-750 rounded m-4 bg-white dark:bg-neutral-600">
       <div className={`${styles.list} shadow-inner`}>
         {sortedFactions.asArray.map((faction) => getRow(faction))}
       </div>

diff --git a/frontend/components/GamePage.tsx b/frontend/components/GamePage.tsx
@@ -633,16 +633,16 @@ const GamePage = (props: GamePageProps) => {
       <Head>
         <title>{`${game!.name} | Republic of Rome Online`}</title>
       </Head>
-      <main className="p-2 flex flex-col xl:overflow-auto xl:h-screen bg-stone-300 dark:bg-stone-800">
+      <main className="p-2 flex flex-col xl:overflow-auto xl:h-screen bg-neutral-300 dark:bg-neutral-800">
         <div className="flex flex-col gap-2 xl:overflow-auto xl:grow">
           <MetaSection />
           <div className="flex flex-col gap-2 xl:flex-row xl:overflow-auto xl:flex-1">
             <div className="xl:overflow-auto xl:flex-1 xl:max-w-[540px]">
               <DetailSection />
             </div>
-            <div className="xl:flex-1 xl:grow-[2] bg-stone-50 dark:bg-stone-700 rounded shadow overflow-auto">
+            <div className="xl:flex-1 xl:grow-[2] bg-neutral-50 dark:bg-neutral-700 rounded shadow overflow-auto">
               <section className="flex flex-col h-[75vh] xl:h-full">
-                <div className="border-0 border-b border-solid border-stone-200 dark:border-stone-750">
+                <div className="border-0 border-b border-solid border-neutral-200 dark:border-neutral-750">
                   <Tabs
                     value={mainTab}
                     onChange={handleMainTabChange}
@@ -681,7 +681,7 @@ const GamePage = (props: GamePageProps) => {
                 {mainTab === 2 && <WarfareTab />}
               </section>
             </div>
-            <div className="xl:flex-1 xl:max-w-[540px] bg-stone-50 dark:bg-stone-700 rounded shadow">
+            <div className="xl:flex-1 xl:max-w-[540px] bg-neutral-50 dark:bg-neutral-700 rounded shadow">
               <section className="flex flex-col h-[75vh] xl:h-full">
                 <ProgressSection latestActions={latestActions} />
               </section>

diff --git a/frontend/components/MetaSection.tsx b/frontend/components/MetaSection.tsx
@@ -87,7 +87,7 @@ const MetaSection = () => {
 
   if (game) {
     return (
-      <section className="flex flex-col-reverse lg:flex-row gap-2 align-center justify-between rounded bg-stone-200 dark:bg-stone-750">
+      <section className="flex flex-col-reverse lg:flex-row gap-2 align-center justify-between rounded bg-neutral-200 dark:bg-neutral-750">
         <div className="flex-1 flex flex-col lg:flex-row gap-3 items-center justify-start">
           {faction && (
             <div
@@ -107,7 +107,7 @@ const MetaSection = () => {
             </div>
           )}
           {hrao && (
-            <div className="p-3 border border-solid border-stone-300 dark:border-stone-800 rounded shadow-inner bg-stone-100 dark:bg-stone-700">
+            <div className="p-3 border border-solid border-neutral-300 dark:border-neutral-800 rounded shadow-inner bg-neutral-100 dark:bg-neutral-700">
               <span>
                 The{" "}
                 <TermLink
@@ -126,7 +126,7 @@ const MetaSection = () => {
           )}
           <DeveloperTools />
         </div>
-        <div className="self-stretch py-3 px-4 flex gap-6 justify-between bg-stone-50 dark:bg-stone-650 rounded shadow">
+        <div className="self-stretch py-3 px-4 flex gap-6 justify-between bg-neutral-50 dark:bg-neutral-650 rounded shadow">
           <div className="flex flex-col gap-2 justify-around">
             <h2 className="leading-tight m-0 text-lg">{game.name}</h2>
             <span

diff --git a/frontend/components/NotificationList.tsx b/frontend/components/NotificationList.tsx
@@ -63,7 +63,7 @@ const NotificationList = () => {
 
   return (
     <div className="flex-1 flex flex-col overflow-y-auto relative">
-      <h3 className="leading-lg m-2 ml-2 text-base text-stone-600 dark:text-stone-100">
+      <h3 className="leading-lg m-2 ml-2 text-base text-neutral-600 dark:text-neutral-100">
         Notifications
       </h3>
       {!isNearBottom && !hideButton && (
@@ -77,7 +77,7 @@ const NotificationList = () => {
       )}
       <div
         ref={notificationListRef}
-        className="h-full overflow-y-auto p-2 bg-white dark:bg-stone-600 border border-solid border-stone-200 dark:border-stone-750 rounded shadow-inner flex flex-col gap-2 scroll-smooth"
+        className="h-full overflow-y-auto p-2 bg-white dark:bg-neutral-600 border border-solid border-neutral-200 dark:border-neutral-750 rounded shadow-inner flex flex-col gap-2 scroll-smooth"
       >
         {notifications &&
           notifications.asArray

diff --git a/frontend/components/ProgressSection.tsx b/frontend/components/ProgressSection.tsx
@@ -89,10 +89,10 @@ const ProgressSection = ({ latestActions }: ProgressSectionProps) => {
       <div className="box-border h-full px-4 py-2 flex flex-col gap-4">
         <NotificationList />
         <div className="flex flex-col gap-2">
-          <h3 className="leading-none m-0 ml-2 text-base text-stone-600 dark:text-stone-100">
+          <h3 className="leading-none m-0 ml-2 text-base text-neutral-600 dark:text-neutral-100">
             Actions
           </h3>
-          <div className="p-2 bg-white dark:bg-stone-600 border border-solid border-stone-200 dark:border-stone-750 rounded shadow-inner flex flex-col gap-3 items-center">
+          <div className="p-2 bg-white dark:bg-neutral-600 border border-solid border-neutral-200 dark:border-neutral-750 rounded shadow-inner flex flex-col gap-3 items-center">
             <p className="text-center">{waitingForDesc}</p>
             <div className="h-full flex gap-3 justify-center">
               {allFactions.asArray.map((faction, index) => {

diff --git a/frontend/components/SecretList.tsx b/frontend/components/SecretList.tsx
@@ -16,7 +16,7 @@ const SecretList = ({ faction }: { faction: Faction }) => {
       {secrets.map((secret: Secret) => (
         <li
           key={secret.id}
-          className="list-none border-2 border-solid border-red-600 dark:border-red-500 rounded p-4 px-5 bg-stone-50 dark:bg-stone-600 shadow-[inset_0_0_10px_2px_hsla(0,72%,60%,0.6)]"
+          className="list-none border-2 border-solid border-red-600 dark:border-red-500 rounded p-4 px-5 bg-neutral-50 dark:bg-neutral-600 shadow-[inset_0_0_10px_2px_hsla(0,72%,60%,0.6)]"
         >
           <div className="flex flex-wrap justify-between gap-x-4 gap-y-2 text-sm">
             <div>{capitalize(secret.type as string)}</div>

diff --git a/frontend/components/SenatorList.tsx b/frontend/components/SenatorList.tsx
@@ -344,7 +344,7 @@ const SenatorList = ({
 
   return (
     <div
-      className="h-full box-border overflow-x-auto overflow-y-hidden flex flex-col rounded border border-solid border-stone-200 dark:border-stone-750 bg-white dark:bg-stone-600"
+      className="h-full box-border overflow-x-auto overflow-y-hidden flex flex-col rounded border border-solid border-neutral-200 dark:border-neutral-750 bg-white dark:bg-neutral-600"
       style={{
         height: height,
         minHeight: minHeight ?? DEFAULT_MIN_HEIGHT,
@@ -357,7 +357,7 @@ const SenatorList = ({
       >
         {statWidth > 0 && (
           <div
-            className="flex flex-wrap gap-y-2 user-select-none overflow-hidden shadow z-10 dark:border-0 dark:border-b dark:border dark:border-solid dark:border-stone-700"
+            className="flex flex-wrap gap-y-2 user-select-none overflow-hidden shadow z-10 dark:border-0 dark:border-b dark:border dark:border-solid dark:border-neutral-700"
             style={faction && { backgroundColor: darkMode ? faction.getColor(900) : faction.getColor(100) }}
           >
             <div
@@ -415,7 +415,7 @@ const SenatorList = ({
                 <h4 className="px-4 mb-1 text-sm">
                   Senator List Options
                 </h4>
-                <div className="w-full h-px bg-stone-200 dark:bg-stone-700 my-1"></div>
+                <div className="w-full h-px bg-neutral-200 dark:bg-neutral-700 my-1"></div>
                 {!faction && (
                   <FormControlLabel
                     control={<Checkbox checked={grouped} />}
@@ -424,7 +424,7 @@ const SenatorList = ({
                     className="px-4"
                   />
                 )}
-                <div className="w-full h-px bg-stone-200 dark:bg-stone-700 my-1"></div>
+                <div className="w-full h-px bg-neutral-200 dark:bg-neutral-700 my-1"></div>
                 <FormControlLabel
                   control={<Checkbox checked={filterAlive} />}
                   label="Show living senators"

diff --git a/frontend/components/SenatorListItem.tsx b/frontend/components/SenatorListItem.tsx
@@ -107,7 +107,7 @@ const SenatorListItem = ({ senator, ...props }: SenatorListItemProps) => {
   return (
     <div
       key={senator.id}
-      className="flex-1 h-[98px] mt-2 mx-2 mb-0 box-border bg-stone-100 dark:bg-stone-700 rounded flex gap-2 border border-solid border-stone-300 dark:border-stone-800"
+      className="flex-1 h-[98px] mt-2 mx-2 mb-0 box-border bg-neutral-100 dark:bg-neutral-700 rounded flex gap-2 border border-solid border-neutral-300 dark:border-neutral-800"
       style={
         props.radioSelected ||
         (selectedDetail?.type === "Senator" &&

diff --git a/frontend/components/SenatorPortrait.tsx b/frontend/components/SenatorPortrait.tsx
@@ -223,7 +223,7 @@ const SenatorPortrait = ({
     >
       <figure
         style={{ height: size, width: size }}
-        className="shadow bg-stone-700 dark:bg-black"
+        className="shadow bg-neutral-700 dark:bg-black"
       >
         <div
           className={`${styles.imageContainer}`}

diff --git a/frontend/components/WarList.tsx b/frontend/components/WarList.tsx
@@ -33,7 +33,7 @@ const WarList = ({ wars }: WarListProps) => {
         )
       case "imminent":
         return (
-          <p className="px-2 py-0.5 rounded-full bg-amber-400 text-stone-800">
+          <p className="px-2 py-0.5 rounded-full bg-amber-400 text-neutral-800">
             {capitalize(war.status)}
           </p>
         )
@@ -46,7 +46,7 @@ const WarList = ({ wars }: WarListProps) => {
         )
       case "defeated":
         return (
-          <p className="px-2 py-0.5 rounded-full bg-stone-500 text-white">
+          <p className="px-2 py-0.5 rounded-full bg-neutral-500 text-white">
             {capitalize(war.status)}
           </p>
         )
@@ -58,7 +58,7 @@ const WarList = ({ wars }: WarListProps) => {
       <ul className="w-full flex flex-col p-0 mb-4 gap-2">
         {sortedWars.map((war) => (
           <li key={war.id} className="list-none flex">
-            <div className="w-full flex gap-4 p-2 rounded border border-solid border-stone-300 dark:border-stone-800 bg-stone-100 dark:bg-stone-700">
+            <div className="w-full flex gap-4 p-2 rounded border border-solid border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700">
               <WarPortrait war={war} />
               <div className="w-full flex flex-col gap-2">
                 <div className="flex items-center justify-between">
@@ -87,7 +87,7 @@ const WarList = ({ wars }: WarListProps) => {
                   </div>
 
                   <div className="grow flex justify-end">
-                    <div className="flex flex-col gap-1 bg-stone-200 dark:bg-stone-750 px-4 py-2 rounded">
+                    <div className="flex flex-col gap-1 bg-neutral-200 dark:bg-neutral-750 px-4 py-2 rounded">
                       {war.fleetSupport > 0 && (
                         <p>
                           Requires <b>{war.fleetSupport}</b> Fleet Support

diff --git a/frontend/components/WarPortrait.tsx b/frontend/components/WarPortrait.tsx
@@ -49,7 +49,7 @@ const WarPortrait = ({ war }: WarPortraitProps) => {
 
   return (
     <div>
-      <div className="border-2 border-solid border-stone-700 dark:border-black rounded bg-red-600 dark:bg-red-700">
+      <div className="border-2 border-solid border-neutral-700 dark:border-black rounded bg-red-600 dark:bg-red-700">
         <div className="relative p-0.5 flex">
           <div className="absolute bg-black/75 h-[36px] w-[36px] flex justify-center items-center">
             <Image src={MilitaryIcon} alt="War Icon" height={30} width={30} />

diff --git a/frontend/components/WarfareTab.tsx b/frontend/components/WarfareTab.tsx
@@ -22,7 +22,7 @@ const WarfareTab = () => {
   )
 
   return (
-    <div className="m-4 overflow-auto border border-solid border-stone-200 dark:border-stone-750 rounded shadow-inner bg-white dark:bg-stone-600">
+    <div className="m-4 overflow-auto border border-solid border-neutral-200 dark:border-neutral-750 rounded shadow-inner bg-white dark:bg-neutral-600">
       <List>
         <ListSubheader>
           <h3 className="text-lg font-semibold py-1 px-4 bg-red-300 dark:bg-red-700 text-red-900 dark:text-white">
@@ -68,7 +68,7 @@ const WarfareTab = () => {
           </div>
         </ListItem>
         <ListSubheader>
-          <h3 className="text-lg font-semibold py-1 px-4 bg-stone-300 dark:bg-stone-700 text-stone-600 dark:text-white">
+          <h3 className="text-lg font-semibold py-1 px-4 bg-neutral-300 dark:bg-neutral-700 text-neutral-600 dark:text-white">
             Idle Leaders ({idleEnemyLeaders.allIds.length})
           </h3>
         </ListSubheader>

diff --git a/frontend/components/entityDetails/EntityDetail_Faction.tsx b/frontend/components/entityDetails/EntityDetail_Faction.tsx
@@ -200,7 +200,7 @@ const FactionDetails = () => {
         </div>
         {getFactionDescription()}
       </div>
-      <div className="border-0 border-b border-solid border-stone-200 dark:border-stone-750">
+      <div className="border-0 border-b border-solid border-neutral-200 dark:border-neutral-750">
         <Tabs
           value={factionDetailTab}
           onChange={handleTabChange}
@@ -213,7 +213,7 @@ const FactionDetails = () => {
           )}
         </Tabs>
       </div>
-      <div className="grow overflow-y-auto bg-stone-50 dark:bg-stone-700 shadow-inner">
+      <div className="grow overflow-y-auto bg-neutral-50 dark:bg-neutral-700 shadow-inner">
         {factionDetailTab === 0 && (
           <div className="p-4 flex flex-col gap-6">
             <div className="p-2">

diff --git a/frontend/components/entityDetails/EntityDetail_Senator.tsx b/frontend/components/entityDetails/EntityDetail_Senator.tsx
@@ -304,7 +304,7 @@ const SenatorDetails = (props: SenatorDetailsProps) => {
             style={{ userSelect: "none" }}
           />
           <div>{titleCaseName}</div>
-          <div className="text-center text-sm text-stone-500 dark:text-stone-300">
+          <div className="text-center text-sm text-neutral-500 dark:text-neutral-300">
             {item.description}
           </div>
           <div className="flex justify-center">
@@ -379,7 +379,7 @@ const SenatorDetails = (props: SenatorDetailsProps) => {
           <SenatorFactList senator={senator} selectable />
         </div>
       </div>
-      <div className="border-0 border-b border-solid border-stone-200 dark:border-stone-750">
+      <div className="border-0 border-b border-solid border-neutral-200 dark:border-neutral-750">
         <Tabs
           value={senatorDetailTab}
           onChange={handleTabChange}
@@ -389,7 +389,7 @@ const SenatorDetails = (props: SenatorDetailsProps) => {
           <Tab label="History" />
         </Tabs>
       </div>
-      <div className="flex-1 overflow-y-auto p-4 bg-stone-50 dark:bg-stone-650 shadow-inner">
+      <div className="flex-1 overflow-y-auto p-4 bg-neutral-50 dark:bg-neutral-650 shadow-inner">
         {senatorDetailTab === 0 && (
           <div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6 overflow-y-auto">
             <div className="flex flex-col gap-4 p-2">
@@ -417,7 +417,7 @@ const SenatorDetails = (props: SenatorDetailsProps) => {
             {matchingActionLogs &&
               matchingActionLogs.length === 0 &&
               senator.logsFetched && (
-                <div className="flex justify-center text-stone-500 dark:text-stone-300 text-sm">
+                <div className="flex justify-center text-neutral-500 dark:text-neutral-300 text-sm">
                   {senator.displayName} has not yet made his name
                 </div>
               )}

diff --git a/frontend/components/terms/Term_Faction.tsx b/frontend/components/terms/Term_Faction.tsx
@@ -13,7 +13,7 @@ const FactionTerm = () => {
           </div>
         </Avatar>
         <div>
-          <h5 className="text-sm text-stone-500 dark:text-stone-300">Game Terminology</h5>
+          <h5 className="text-sm text-neutral-500 dark:text-neutral-300">Game Terminology</h5>
           <h4 className="text-xl">
             <b>Faction</b>
           </h4>

diff --git a/frontend/components/terms/Term_Hrao.tsx b/frontend/components/terms/Term_Hrao.tsx
@@ -13,7 +13,7 @@ const HraoTerm = () => {
           <Image src={HRAOIcon} height={44} width={44} alt={`HRAO Icon`} />
         </Avatar>
         <div>
-          <h5 className="text-sm text-stone-500 dark:text-stone-300">Game Terminology</h5>
+          <h5 className="text-sm text-neutral-500 dark:text-neutral-300">Game Terminology</h5>
           <h4 className="text-lg">
             <b>HRAO: Highest Ranking Available Official</b> (Title)
           </h4>