feat: change title colors and formatting (#209)

also indent `action` line
LogRocket · Mar 21, 2017 · ca681e9 · ca681e9
1 parent eda2ba4
commit ca681e9
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/src/core.js b/src/core.js
@@ -31,9 +31,9 @@ function defaultTitleFormatter(options) {
   return (action, time, took) => {
     const parts = [`action`];
 
-    if (timestamp) parts.push(`@ ${time}`);
-    parts.push(String(action.type));
-    if (duration) parts.push(`(in ${took.toFixed(2)} ms)`);
+    parts.push(`%c${String(action.type)}`);
+    if (timestamp) parts.push(`%c@ ${time}`);
+    if (duration) parts.push(`%c(in ${took.toFixed(2)} ms)`);
 
     return parts.join(` `);
   };
@@ -65,16 +65,20 @@ export function printBuffer(buffer, options) {
     const isCollapsed = (typeof collapsed === `function`) ? collapsed(() => nextState, action, logEntry) : collapsed;
 
     const formattedTime = formatTime(startedTime);
-    const titleCSS = colors.title ? `color: ${colors.title(formattedAction)};` : null;
+    const titleCSS = colors.title ? `color: ${colors.title(formattedAction)};` : ``;
+    const headerCSS = [`color: gray; font-weight: lighter;`];
+    headerCSS.push(titleCSS);
+    if (options.timestamp) headerCSS.push(`color: gray; font-weight: lighter;`);
+    if (options.duration) headerCSS.push(`font-style: italic; color: gray; font-weight: lighter;`);
     const title = titleFormatter(formattedAction, formattedTime, took);
 
     // Render
     try {
       if (isCollapsed) {
-        if (colors.title) logger.groupCollapsed(`%c ${title}`, titleCSS);
+        if (colors.title) logger.groupCollapsed(`%c ${title}`, ...headerCSS);
         else logger.groupCollapsed(title);
       } else {
-        if (colors.title) logger.group(`%c ${title}`, titleCSS);
+        if (colors.title) logger.group(`%c ${title}`, ...headerCSS);
         else logger.group(title);
       }
     } catch (e) {
@@ -92,12 +96,12 @@ export function printBuffer(buffer, options) {
     }
 
     if (actionLevel) {
-      if (colors.action) logger[actionLevel](`%c action`, `color: ${colors.action(formattedAction)}; font-weight: bold`, formattedAction);
+      if (colors.action) logger[actionLevel](`%c action    `, `color: ${colors.action(formattedAction)}; font-weight: bold`, formattedAction);
       else logger[actionLevel](`action    `, formattedAction);
     }
 
     if (error && errorLevel) {
-      if (colors.error) logger[errorLevel](`%c error`, `color: ${colors.error(error, prevState)}; font-weight: bold`, error);
+      if (colors.error) logger[errorLevel](`%c error     `, `color: ${colors.error(error, prevState)}; font-weight: bold;`, error);
       else logger[errorLevel](`error     `, error);
     }