fix: Improved styles for diffs, closes #4430

app/typings/styled-components.d.ts

@@ -115,8 +115,10 @@ declare module "styled-components" {
     cursor: string;
     textSecondary: string;
     textTertiary: string;
-    textDeleted: string;
-    textDeletedBackground: string;
+    textDiffInserted: string;
+    textDiffInsertedBackground: string;
+    textDiffDeleted: string;
+    textDiffDeletedBackground: string;
     placeholder: string;
     sidebarBackground: string;
     sidebarActiveBackground: string;

shared/editor/components/Styles.ts

@@ -1291,20 +1291,22 @@ table {
   display: block;
 }
 
-ins {
-  background-color: #128a2929;
-  text-decoration: none;
-}
-
 del {
   color: ${props.theme.slate};
   text-decoration: strikethrough;
 }
 
+ins[data-operation-index] {
+  color: ${props.theme.textDiffInserted};
+  background-color: ${props.theme.textDiffInsertedBackground};
+  text-decoration: none;
+}
+
 del[data-operation-index] {
-  color: ${props.theme.textDeleted};
-  background-color: ${props.theme.textDeletedBackground};
-  
+  color: ${props.theme.textDiffDeleted};
+  background-color: ${props.theme.textDiffDeletedBackground};
+  text-decoration: none;
+
   img {
     opacity: .5;
   }

shared/styles/theme.ts

@@ -100,8 +100,10 @@ export const light = {
   text: colors.almostBlack,
   textSecondary: colors.slateDark,
   textTertiary: colors.slate,
-  textDeleted: colors.slate,
-  textDeletedBackground: colors.slateLight,
+  textDiffInserted: colors.almostBlack,
+  textDiffInsertedBackground: "rgba(18, 138, 41, 0.16)",
+  textDiffDeleted: colors.slateDark,
+  textDiffDeletedBackground: "#ffebe9",
   placeholder: "#a2b2c3",
   sidebarBackground: colors.warmGrey,
   sidebarActiveBackground: "#d7e0ea",
@@ -159,8 +161,10 @@ export const dark = {
   cursor: colors.almostWhite,
   textSecondary: lighten(0.1, colors.slate),
   textTertiary: colors.slate,
-  textDeleted: lighten(0.1, colors.slate),
-  textDeletedBackground: colors.black,
+  textDiffInserted: colors.almostWhite,
+  textDiffInsertedBackground: "rgba(63,185,80,0.3)",
+  textDiffDeleted: darken(0.1, colors.almostWhite),
+  textDiffDeletedBackground: "rgba(248,81,73,0.15)",
   placeholder: colors.slateDark,
   sidebarBackground: colors.veryDarkBlue,
   sidebarActiveBackground: lighten(0.02, colors.almostBlack),