From 3ce7186b2fe501edf3c05a0f2515080699d797ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Sat, 16 Mar 2024 17:10:48 +0100
Subject: [PATCH] Add support for the new Report and Block modals

---
 TangerineUI-cherry.css | 78 +++++++++++++++++++++++++++++++++++++++---
 TangerineUI-purple.css | 78 +++++++++++++++++++++++++++++++++++++++---
 TangerineUI.css        | 77 ++++++++++++++++++++++++++++++++++++++---
 3 files changed, 218 insertions(+), 15 deletions(-)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 981803d..3464199 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -800,7 +800,8 @@ body.app-body  {
         .icon-eraser,
         .icon-pencil,
         .app-form__header-input .icon,
-        .account__domain-pill__popout__parts__icon .icon
+        .account__domain-pill__popout__parts__icon .icon,
+        .safety-action-modal__bullet-points__icon .icon
     )
     path {
         display: none;
@@ -861,7 +862,8 @@ body.app-body  {
         .icon-eraser,
         .icon-pencil,
         .app-form__header-input .icon,
-        .account__domain-pill__popout__parts__icon .icon
+        .account__domain-pill__popout__parts__icon .icon,
+        .safety-action-modal__bullet-points__icon .icon
     ) {
         background-repeat: no-repeat;
         background-size: 100%;
@@ -3217,6 +3219,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
    ----------------- */
 .app-body .tabs-bar__wrapper {
     background-color: transparent;
+    box-shadow: inset 0 10px var(--color-bg);
 }
 .app-body .column-header__wrapper.active:before {
     background: none;
@@ -5364,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     color: var(--color-content-fg);
 }
 .app-body .radio-button__input,
-.app-body .poll__input {
+.app-body .poll__input,
+.app-body .check-box__input {
     border-width: 4px;
     border-color: var(--color-content-bg);
     background-color: var(--color-accent-bg);
     outline: 1px solid var(--color-accent) !important;
     outline-offset: -1px;
     transition: transform .3s;
+    width: 20px;
+    height: 20px;
 }
 .app-body .radio-button:active .radio-button__input,
-.app-body .poll__option:active .poll__input {
+.app-body .poll__option:active .poll__input,
+.app-body .check-box:active .check-box__input {
     transform: scale(.9);
 }
 .app-body .radio-button__input.checked,
 .app-body .poll__input.active {
     background-color: var(--color-accent);
 }
+.app-body .check-box__input.checked:before,
+.app-body .radio-button__input.checked:before {
+    display: none;
+}
+.app-body .check-box__input.checked,
+.app-body .radio-button__input.checked {
+    background-color: var(--color-accent);
+}
+.app-body .check-box__input.checked .icon-check {
+    transform: scale(.5);
+}
 
 .app-body .dropdown-menu {
     border: 1px solid var(--color-lines);
@@ -5540,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 /* 🖱️ Interaction modals
    --------------------- */
 .app-body .modal-root__modal:not(.media-modal) {
-    border: 1px solid var(--color-lines);
+    border: 0;
+    outline: 1px solid var(--color-lines-translucent);
 }
 .app-body .compare-history-modal {
     background-color: var(--color-content-bg);
@@ -5549,6 +5568,55 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .compare-history-modal .report-modal__target {
     border-color: var(--color-lines);
 }
+.app-body .safety-action-modal {
+    border: 1px solid var(--color-lines);
+    background-color: var(--color-content-bg);
+    border-radius: 8px;
+}
+.app-body .safety-action-modal__header__icon {
+    background-color: var(--color-accent);
+}
+.app-body .safety-action-modal__header,
+.app-body .safety-action-modal__header h1,
+.app-body .safety-action-modal__caveats,
+.app-body .safety-action-modal__bullet-points {
+    color: var(--color-content-fg);
+}
+.app-body .safety-action-modal__header h1 {
+    font-weight: 600;
+}
+.app-body .safety-action-modal__header h1 + div {
+    opacity: .6;
+}
+.app-body .safety-action-modal__top {
+    background-color: transparent;
+    border: 0;
+}
+.app-body .safety-action-modal__bottom {
+    background-color: var(--color-content-secondary-bg);
+    padding-top: 24px;
+    border: 0;
+    border-radius: 0 0 8px 8px;
+}
+.app-body .safety-action-modal__bullet-points__icon .icon {
+    transform: scale(1.3);
+}
+.app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-megaphone);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-eye-shut);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-direct-messages);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-reply);
+    transform: scale(1);
+}
+.app-body .safety-action-modal__field-group label {
+    color: var(--color-content-fg);
+}
 .app-body .report-modal {
     background-color: var(--color-content-bg);
 }
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 83dcb64..1c18ac9 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -800,7 +800,8 @@ body.app-body  {
         .icon-eraser,
         .icon-pencil,
         .app-form__header-input .icon,
-        .account__domain-pill__popout__parts__icon .icon
+        .account__domain-pill__popout__parts__icon .icon,
+        .safety-action-modal__bullet-points__icon .icon
     )
     path {
         display: none;
@@ -861,7 +862,8 @@ body.app-body  {
         .icon-eraser,
         .icon-pencil,
         .app-form__header-input .icon,
-        .account__domain-pill__popout__parts__icon .icon
+        .account__domain-pill__popout__parts__icon .icon,
+        .safety-action-modal__bullet-points__icon .icon
     ) {
         background-repeat: no-repeat;
         background-size: 100%;
@@ -3217,6 +3219,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
    ----------------- */
 .app-body .tabs-bar__wrapper {
     background-color: transparent;
+    box-shadow: inset 0 10px var(--color-bg);
 }
 .app-body .column-header__wrapper.active:before {
     background: none;
@@ -5364,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     color: var(--color-content-fg);
 }
 .app-body .radio-button__input,
-.app-body .poll__input {
+.app-body .poll__input,
+.app-body .check-box__input {
     border-width: 4px;
     border-color: var(--color-content-bg);
     background-color: var(--color-accent-bg);
     outline: 1px solid var(--color-accent) !important;
     outline-offset: -1px;
     transition: transform .3s;
+    width: 20px;
+    height: 20px;
 }
 .app-body .radio-button:active .radio-button__input,
-.app-body .poll__option:active .poll__input {
+.app-body .poll__option:active .poll__input,
+.app-body .check-box:active .check-box__input {
     transform: scale(.9);
 }
 .app-body .radio-button__input.checked,
 .app-body .poll__input.active {
     background-color: var(--color-accent);
 }
+.app-body .check-box__input.checked:before,
+.app-body .radio-button__input.checked:before {
+    display: none;
+}
+.app-body .check-box__input.checked,
+.app-body .radio-button__input.checked {
+    background-color: var(--color-accent);
+}
+.app-body .check-box__input.checked .icon-check {
+    transform: scale(.5);
+}
 
 .app-body .dropdown-menu {
     border: 1px solid var(--color-lines);
@@ -5540,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 /* 🖱️ Interaction modals
    --------------------- */
 .app-body .modal-root__modal:not(.media-modal) {
-    border: 1px solid var(--color-lines);
+    border: 0;
+    outline: 1px solid var(--color-lines-translucent);
 }
 .app-body .compare-history-modal {
     background-color: var(--color-content-bg);
@@ -5549,6 +5568,55 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .compare-history-modal .report-modal__target {
     border-color: var(--color-lines);
 }
+.app-body .safety-action-modal {
+    border: 1px solid var(--color-lines);
+    background-color: var(--color-content-bg);
+    border-radius: 8px;
+}
+.app-body .safety-action-modal__header__icon {
+    background-color: var(--color-accent);
+}
+.app-body .safety-action-modal__header,
+.app-body .safety-action-modal__header h1,
+.app-body .safety-action-modal__caveats,
+.app-body .safety-action-modal__bullet-points {
+    color: var(--color-content-fg);
+}
+.app-body .safety-action-modal__header h1 {
+    font-weight: 600;
+}
+.app-body .safety-action-modal__header h1 + div {
+    opacity: .6;
+}
+.app-body .safety-action-modal__top {
+    background-color: transparent;
+    border: 0;
+}
+.app-body .safety-action-modal__bottom {
+    background-color: var(--color-content-secondary-bg);
+    padding-top: 24px;
+    border: 0;
+    border-radius: 0 0 8px 8px;
+}
+.app-body .safety-action-modal__bullet-points__icon .icon {
+    transform: scale(1.3);
+}
+.app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-megaphone);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-eye-shut);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-direct-messages);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-reply);
+    transform: scale(1);
+}
+.app-body .safety-action-modal__field-group label {
+    color: var(--color-content-fg);
+}
 .app-body .report-modal {
     background-color: var(--color-content-bg);
 }
diff --git a/TangerineUI.css b/TangerineUI.css
index 09471af..127d1c4 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -800,7 +800,8 @@ body.app-body  {
         .icon-eraser,
         .icon-pencil,
         .app-form__header-input .icon,
-        .account__domain-pill__popout__parts__icon .icon
+        .account__domain-pill__popout__parts__icon .icon,
+        .safety-action-modal__bullet-points__icon .icon
     )
     path {
         display: none;
@@ -861,7 +862,8 @@ body.app-body  {
         .icon-eraser,
         .icon-pencil,
         .app-form__header-input .icon,
-        .account__domain-pill__popout__parts__icon .icon
+        .account__domain-pill__popout__parts__icon .icon,
+        .safety-action-modal__bullet-points__icon .icon
     ) {
         background-repeat: no-repeat;
         background-size: 100%;
@@ -5365,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     color: var(--color-content-fg);
 }
 .app-body .radio-button__input,
-.app-body .poll__input {
+.app-body .poll__input,
+.app-body .check-box__input {
     border-width: 4px;
     border-color: var(--color-content-bg);
     background-color: var(--color-accent-bg);
     outline: 1px solid var(--color-accent) !important;
     outline-offset: -1px;
     transition: transform .3s;
+    width: 20px;
+    height: 20px;
 }
 .app-body .radio-button:active .radio-button__input,
-.app-body .poll__option:active .poll__input {
+.app-body .poll__option:active .poll__input,
+.app-body .check-box:active .check-box__input {
     transform: scale(.9);
 }
 .app-body .radio-button__input.checked,
 .app-body .poll__input.active {
     background-color: var(--color-accent);
 }
+.app-body .check-box__input.checked:before,
+.app-body .radio-button__input.checked:before {
+    display: none;
+}
+.app-body .check-box__input.checked,
+.app-body .radio-button__input.checked {
+    background-color: var(--color-accent);
+}
+.app-body .check-box__input.checked .icon-check {
+    transform: scale(.5);
+}
 
 .app-body .dropdown-menu {
     border: 1px solid var(--color-lines);
@@ -5541,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 /* 🖱️ Interaction modals
    --------------------- */
 .app-body .modal-root__modal:not(.media-modal) {
-    border: 1px solid var(--color-lines);
+    border: 0;
+    outline: 1px solid var(--color-lines-translucent);
 }
 .app-body .compare-history-modal {
     background-color: var(--color-content-bg);
@@ -5550,6 +5568,55 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .compare-history-modal .report-modal__target {
     border-color: var(--color-lines);
 }
+.app-body .safety-action-modal {
+    border: 1px solid var(--color-lines);
+    background-color: var(--color-content-bg);
+    border-radius: 8px;
+}
+.app-body .safety-action-modal__header__icon {
+    background-color: var(--color-accent);
+}
+.app-body .safety-action-modal__header,
+.app-body .safety-action-modal__header h1,
+.app-body .safety-action-modal__caveats,
+.app-body .safety-action-modal__bullet-points {
+    color: var(--color-content-fg);
+}
+.app-body .safety-action-modal__header h1 {
+    font-weight: 600;
+}
+.app-body .safety-action-modal__header h1 + div {
+    opacity: .6;
+}
+.app-body .safety-action-modal__top {
+    background-color: transparent;
+    border: 0;
+}
+.app-body .safety-action-modal__bottom {
+    background-color: var(--color-content-secondary-bg);
+    padding-top: 24px;
+    border: 0;
+    border-radius: 0 0 8px 8px;
+}
+.app-body .safety-action-modal__bullet-points__icon .icon {
+    transform: scale(1.3);
+}
+.app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-megaphone);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-eye-shut);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-direct-messages);
+}
+.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon {
+    background-image: var(--icon-reply);
+    transform: scale(1);
+}
+.app-body .safety-action-modal__field-group label {
+    color: var(--color-content-fg);
+}
 .app-body .report-modal {
     background-color: var(--color-content-bg);
 }