Address PR comments (hira-light-glyph-tab)

javascripts/core/constants.js

@@ -230,12 +230,12 @@ window.GlyphRarities = [
     minStrength: 3.5,
     name: "Celestial",
     darkColor: "#5151ec",
-    lightColor: "#5151ec"
+    lightColor: "#0000ee"
   }, {
     minStrength: 3.25,
     name: "Transcendent",
     darkColor: "#03ffec",
-    lightColor: "#00f5e0"
+    lightColor: "#00ad9f"
   }, {
     minStrength: 3,
     name: "Mythical",
@@ -245,7 +245,7 @@ window.GlyphRarities = [
     minStrength: 2.75,
     name: "Legendary",
     darkColor: "#ff9800",
-    lightColor: "#ff9800"
+    lightColor: "#d68100"
   }, {
     minStrength: 2.5,
     name: "Epic",
@@ -255,7 +255,7 @@ window.GlyphRarities = [
     minStrength: 2,
     name: "Rare",
     darkColor: "#2196f3",
-    lightColor: "#2196f3"
+    lightColor: "#1872f3"
   }, {
     minStrength: 1.5,
     name: "Uncommon",

javascripts/core/glyphs/glyph-core.js

@@ -682,6 +682,10 @@ export function getRarity(x) {
   return GlyphRarities.find(e => x >= e.minStrength);
 }
 
+export function getColor(strength) {
+  return getRarity(strength)[Theme.current().isDark() ? "darkColor" : "lightColor"];
+}
+
 export function getAdjustedGlyphLevel(glyph, realityGlyphBoost = Glyphs.levelBoost) {
   const level = glyph.level;
   if (Pelle.isDoomed) return Math.min(level, Pelle.glyphMaxLevel);

public/stylesheets/styles.css

@@ -743,7 +743,7 @@ button:focus {
   font-family: Typewriter;
   font-size: 1.2rem;
   font-weight: bold;
-  background: var(--color-background);
+  background: black;
   border-style: solid;
   border-width: var(--var-border-width, 0.2rem);
   border-radius: var(--var-border-radius, 0.4rem);
@@ -1431,6 +1431,7 @@ br {
   color: var(--color-text);
   background-color: var(--color-background);
   border-radius: var(--var-border-radius, 0.5rem);
+  border: 0.3rem solid var(--color-text);
   padding: 0.5rem;
 }
 

src/components/GlyphComponent.vue

@@ -1,4 +1,3 @@
-/* eslint-disable complexity */
 <script>
 import GlyphTooltip from "@/components/GlyphTooltip";
 
@@ -122,6 +121,7 @@ export default {
     },
     borderColor() {
       if (this.isRealityGlyph) return this.realityGlyphColor();
+      if (this.isCursedGlyph) return this.cursedColor;
       return this.glyph.color || this.typeConfig.color;
     },
     overStyle() {
@@ -151,9 +151,9 @@ export default {
       return Theme.current().isDark() ? "white" : "black";
     },
     innerStyle() {
-      const info = getRarity(this.glyph.strength);
-      const baseColor = Theme.current().isDark() ? info.darkColor : info.lightColor;
-      const rarityColor = this.isRealityGlyph ? this.realityGlyphColor() : this.glyph.color || baseColor;
+      const rarityColor = this.isRealityGlyph
+        ? this.realityGlyphColor()
+        : (this.glyph.color || getColor(this.glyph.strength));
       return {
         width: `calc(${this.size} - 0.2rem)`,
         height: `calc(${this.size} - 0.2rem)`,
@@ -435,10 +435,9 @@ export default {
       return { dx, dy };
     },
     glyphColor() {
-      if (this.isCursedGlyph) return "black";
+      if (this.isCursedGlyph) return this.cursedColor;
       if (this.isRealityGlyph) return this.realityGlyphColor();
-      const info = getRarity(this.glyph.strength);
-      return `${this.glyph.color || (Theme.current().isDark() ? info.darkColor : info.lightColor)}`;
+      return `${this.glyph.color || getColor(this.glyph.strength)}`;
     },
     // Note that the dot bigger for one of the mutually-exclusive effect pair (IDs of the only case are hardcoded)
     glyphEffectIcon(id) {

src/components/GlyphTooltip.vue

@@ -96,10 +96,13 @@ export default {
     cursedColorInverted() {
       return Theme.current().isDark() ? "white" : "black";
     },
+    mainBorderColor() {
+      if (this.type === "cursed") return this.cursedColor;
+      if (this.type === "companion") return GlyphTypes[this.type].color;
+      return getColor(this.strength);
+    },
     descriptionStyle() {
-      let color = Theme.current().isDark() ? this.rarityInfo.darkColor : this.rarityInfo.lightColor;
-      if (this.type === "cursed") color = this.cursedColor;
-      if (this.type === "companion") color = GlyphTypes[this.type].color;
+      const color = this.mainBorderColor;
       return {
         color,
         "text-shadow": this.type === "cursed"

src/components/modals/GlyphShowcasePanelEntry.vue

@@ -83,14 +83,8 @@ export default {
       };
     },
     rarityStyle() {
-      let color;
-      if (this.glyph.type === "companion") color = GlyphTypes[this.type].color;
-      else {
-        const info = getRarity(this.glyph.strength);
-        color = Theme.current().isDark() ? info.darkColor : info.lightColor;
-      }
       return {
-        "color": `${color}`,
+        "color": `${this.glyph.type === "companion" ? GlyphTypes[this.type].color : getColor(this.glyph.strength)}`,
         "font-weight": "bold"
       };
     },