Merge pull request #338 from tallycash/logger-fixes

Use custom styles instead of relying on browser behavior

background/lib/logger.ts

@@ -9,8 +9,54 @@ enum LogLevel {
   error = "error",
 }
 
+interface LogStyle {
+  icon: string
+  css: string[]
+}
+
+interface LogStyles {
+  log: LogStyle
+  info: LogStyle
+  warn: LogStyle
+  error: LogStyle
+}
+
+const styles: LogStyles = {
+  log: {
+    icon: "🪵",
+    css: [],
+  },
+  info: {
+    icon: "💡",
+    css: ["color: blue"],
+  },
+  warn: {
+    icon: "⚠️",
+    css: [
+      "color: #63450b",
+      "background-color: #fffbe5",
+      "border: 1px solid #fff5c2",
+      "padding: 0.5em",
+    ],
+  },
+  error: {
+    icon: "❌",
+    css: [
+      "color: #ff1a1a",
+      "background-color: #fff0f0",
+      "border: 1px solid #ffd6d6",
+      "padding: 0.5em",
+    ],
+  },
+}
+
 function genericLogger(level: LogLevel, input: unknown[]) {
-  console[level](...input)
+  console.group(
+    `%c ${styles[level].icon} Tally ${level}`,
+    styles[level].css.join(";")
+  )
+
+  console.log(...input)
 
   const stackTrace = new Error().stack.split("\n").filter((line) => {
     // Remove empty lines from the output
@@ -25,7 +71,8 @@ function genericLogger(level: LogLevel, input: unknown[]) {
 
   // The first two lines of the stack trace will always be generated by this
   // file, so let's ignore them.
-  console[level](stackTrace.slice(2))
+  console.log(stackTrace.slice(2).join("\n"))
+  console.groupEnd()
 }
 
 const logger = {