From d11231a420cf80c3f924233d398002639cac0f8b Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Thu, 24 Oct 2024 09:28:22 +0200
Subject: [PATCH] Change design of rich text elements in web UI (#32633)

---
 app/javascript/images/quote.svg               |  3 +
 .../styles/mastodon-light/variables.scss      |  3 +
 app/javascript/styles/mastodon/rich_text.scss | 74 +++++++++++++++++--
 app/javascript/styles/mastodon/variables.scss |  3 +
 4 files changed, 75 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/images/quote.svg

diff --git a/app/javascript/images/quote.svg b/app/javascript/images/quote.svg
new file mode 100644
index 000000000..ae6fbbe04
--- /dev/null
+++ b/app/javascript/images/quote.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.933 2.82414C22.324 4.07931 21.0726 5.3569 20.1788 6.6569C19.3296 7.91207 18.905 9.1 18.905 10.2207C19.0838 10.131 19.3073 10.0862 19.5754 10.0862C19.8883 10.0414 20.1564 10.019 20.3799 10.019C21.4078 10.019 22.257 10.4448 22.9274 11.2966C23.6425 12.1034 24 13.1121 24 14.3224C24 15.8017 23.5084 17.0345 22.5251 18.0207C21.5419 19.0069 20.3129 19.5 18.838 19.5C17.2737 19.5 16.0447 18.9397 15.1508 17.819C14.257 16.6535 13.8101 15.1069 13.8101 13.1793C13.8101 10.8931 14.5028 8.62931 15.8883 6.38793C17.2737 4.14655 19.3073 2.01724 21.9888 0L23.933 2.82414ZM10.1229 2.82414C8.51397 4.07931 7.26257 5.3569 6.36872 6.6569C5.51955 7.91207 5.09497 9.1 5.09497 10.2207C5.27374 10.131 5.49721 10.0862 5.76536 10.0862C6.07821 10.0414 6.34637 10.019 6.56983 10.019C7.59777 10.019 8.44693 10.4448 9.11732 11.2966C9.8324 12.1034 10.1899 13.1121 10.1899 14.3224C10.1899 15.8017 9.69832 17.0345 8.71508 18.0207C7.73184 19.0069 6.50279 19.5 5.02793 19.5C3.46369 19.5 2.23464 18.9397 1.34078 17.819C0.446927 16.6535 0 15.1069 0 13.1793C0 10.8931 0.692738 8.62931 2.07821 6.38793C3.46369 4.14655 5.49721 2.01724 8.17877 0L10.1229 2.82414Z" fill="currentColor" />
+</svg>
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index 76bdc4022..777c622ac 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -76,4 +76,7 @@ body {
   --background-color-tint: rgba(255, 255, 255, 80%);
   --background-filter: blur(10px);
   --on-surface-color: #{transparentize($ui-base-color, 0.65)};
+  --rich-text-container-color: rgba(255, 216, 231, 100%);
+  --rich-text-text-color: rgba(114, 47, 83, 100%);
+  --rich-text-decorations-color: rgba(255, 175, 212, 100%);
 }
diff --git a/app/javascript/styles/mastodon/rich_text.scss b/app/javascript/styles/mastodon/rich_text.scss
index c57db26e0..52412274b 100644
--- a/app/javascript/styles/mastodon/rich_text.scss
+++ b/app/javascript/styles/mastodon/rich_text.scss
@@ -2,9 +2,29 @@
 .e-content,
 .edit-indicator__content,
 .reply-indicator__content {
+  code {
+    background: var(--rich-text-container-color);
+    padding: 4px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+    font-size: 0.85em;
+  }
+
+  pre {
+    background: var(--rich-text-container-color);
+    padding: 8px;
+    border-radius: 4px;
+    color: var(--rich-text-text-color);
+
+    code {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
   pre,
   blockquote {
-    margin-bottom: 20px;
+    margin-bottom: 22px;
     white-space: pre-wrap;
     unicode-bidi: plaintext;
 
@@ -14,19 +34,45 @@
   }
 
   blockquote {
-    padding-inline-start: 10px;
-    border-inline-start: 3px solid $darker-text-color;
-    color: $darker-text-color;
+    padding-inline-start: 32px;
+    color: var(--rich-text-text-color);
     white-space: normal;
+    position: relative;
 
-    p:last-child {
+    &::before {
+      display: block;
+      content: '';
+      width: 24px;
+      height: 20px;
+      mask-image: url('../images/quote.svg');
+      background-color: var(--rich-text-decorations-color);
+      position: absolute;
+      inset-inline-start: 0;
+      top: 0;
+    }
+
+    blockquote {
+      margin-top: 4px;
+      border-inline-start: 3px solid var(--rich-text-decorations-color);
+      padding-inline-start: 16px;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    p:last-of-type {
       margin-bottom: 0;
     }
   }
 
   & > ul,
   & > ol {
-    margin-bottom: 20px;
+    margin-bottom: 22px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   b,
@@ -41,7 +87,15 @@
 
   ul,
   ol {
-    margin-inline-start: 2em;
+    padding-inline-start: 24px;
+
+    li {
+      padding-inline-start: 8px;
+
+      &::marker {
+        text-align: end;
+      }
+    }
 
     p {
       margin: 0;
@@ -49,7 +103,11 @@
   }
 
   ul {
-    list-style-type: disc;
+    list-style-type: '•';
+
+    li::marker {
+      text-align: start;
+    }
   }
 
   ol {
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index baaec5f58..fe36e1663 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -116,4 +116,7 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --error-background-color: #{darken($error-red, 16%)};
   --error-active-background-color: #{darken($error-red, 12%)};
   --on-error-color: #fff;
+  --rich-text-container-color: rgba(87, 24, 60, 100%);
+  --rich-text-text-color: rgba(255, 175, 212, 100%);
+  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
 }