style: line count display improvement

Author: utkuakyuz

src/components/DiffViewer/components/LineCountDisplay.tsx

@@ -17,35 +17,40 @@ export const LineCountDisplay: React.FC<LineCountDisplayProps> = ({ stats }) =>
 
  return (
  <div className="line-count-display">
- {stats.added > 0 && (
- <span className="line-count-item added">
- +
- {stats.added}
- {" "}
- added
- </span>
- )}
- {stats.removed > 0 && (
- <span className="line-count-item removed">
- -
- {stats.removed}
- {" "}
- removed
- </span>
- )}
- {stats.modified > 0 && (
- <span className="line-count-item modified">
- ~
- {stats.modified}
+ <div className="line-count-item-sub-holder">
+ {stats.added > 0 && (
+ <span className="line-count-item added">
+ +
+ {stats.added}
+ {" "}
+ added
+ </span>
+ )}
+
+ {stats.removed > 0 && (
+ <span className="line-count-item removed">
+ -
+ {stats.removed}
+ {" "}
+ removed
+ </span>
+ )}
+ </div>
+ <div className="line-count-item-sub-holder">
+ {stats.modified > 0 && (
+ <span className="line-count-item modified">
+ ~
+ {stats.modified}
+ {" "}
+ modified
+ </span>
+ )}
+ <span className="line-count-item total">
+ {stats.total}
  {" "}
- modified
+ total changes
  </span>
- )}
- <span className="line-count-item total">
- {stats.total}
- {" "}
- total changes
- </span>
+ </div>
  </div>
  );
 };

src/components/DiffViewer/components/VirtualizedDiffViewer.tsx

@@ -148,7 +148,6 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
  <div><span>{leftTitle}</span></div>
  <div><span>{rightTitle}</span></div>
  </div>
-
  {showLineCount && (
  <LineCountDisplay stats={lineCountStats} />
  )}

src/components/DiffViewer/styles/JsonDiffCustomTheme.css

@@ -46,10 +46,18 @@
 .line-count-display {
  display: flex;
  gap: 12px;
+ margin-top: 5px;
  align-items: center;
  font-size: 11px;
  color: #f8f8f2;
  margin-left: auto;
+ justify-content: space-between;
+}
+
+.line-count-item-sub-holder {
+ display: flex;
+ align-items: center;
+ gap: 4px;
 }
 
 .line-count-item {