From 86c0a34842310101a1ff42f29b005a14e2c353a2 Mon Sep 17 00:00:00 2001
From: daadaadaah <daadaadaah@gmail.com>
Date: Sun, 7 Feb 2021 13:35:54 +0900
Subject: [PATCH] Improve UX by marking changed lines

---
 src/slide.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/slide.js b/src/slide.js
index 7bcb734..beca216 100644
--- a/src/slide.js
+++ b/src/slide.js
@@ -37,6 +37,16 @@ function getLine(line, i, { styles }) {
   );
 }
 
+function getStyleWithMark(styles) {
+  return styles.map((item) => {
+    if(item.opacity && item.opacity === 1) {
+      item.borderLeft = "2px solid rgb(255 190 0 / 71%)";
+      item.paddingLeft = "6px";
+    }
+    return item
+  })
+}
+
 function Slide({ lines, styles, changes }) {
   return (
     <pre
@@ -64,5 +74,6 @@ function Slide({ lines, styles, changes }) {
 export default function SlideWrapper({ time, version }) {
   const { lines, changes } = version;
   const styles = animation((time + 1) / 2, lines);
-  return <Slide lines={lines} styles={styles} changes={changes} />;
+  const stylesWithMark = getStyleWithMark(styles);
+  return <Slide lines={lines} styles={stylesWithMark} changes={changes} />;
 }