From 9ccb295004394fe31f210ba69eea0afcc5b160b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 4 Nov 2021 16:37:16 +0100
Subject: [PATCH] Restyle actions modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/ui/components/actions_modal.js   | Bin 2638 -> 3264 bytes
 app/styles/components/modal.scss              |  26 ++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/ui/components/actions_modal.js b/app/soapbox/features/ui/components/actions_modal.js
index 4a103a28e66310c38cbad350b5806f80bb31dd85..69a5dce0530fddfceb5bf39dee52497dfc398e0d 100644
GIT binary patch
delta 694
zcmZ9KL5tHs7=}rUiw!CYUfc!w7Ak4MW~wJ?lVwp*JgkU{*KRtQc1I_fnE4{R8=`-}
zgD_YBf(Pwc*qbN)A>O?^O=fMob9}#fU*7MT`F->3*5{v-5+2Jui4a+Qz?6#S>@M*1
z4WsxpMFADea+!davxwq=8_65HJjrB^pt78&^NkCML@rYz_>?r$Z$H|OzUu5;<5Z?A
zt3Gpf?@tTFb@8A!+dSVV1#&@TwoHt~WErjhIHN23t9q{Pw!U@&Wco-*#YXTvm)Wb6
zj46Lsq}1o?1$$TUoW+Y@t=p{|fE)!2OJv7bfy(Kked)ThU7iP+bwj`-uKdgdsj<7b
zyhYouZLyfmqC((HJXvOxfHE7wz2OilleHl>yZ45DGum^(p0Zbapz1@o2R;31Ye%1U
zVE2Oguv?ns>dxVRv;NZA*55l%^xw{dk4;$cu!aXzL`pr25*B*qfea}%NMvkqP3V%y
zz%s5E<n(P=T2yPb&g%siKLYSL^aP(D;Zz>`b)E+wECu^nLa!$80a@*78<M8trXG+&
btSbSD`TLd7uPm*AG|-z-e{AH+bu0HD6WrZe

delta 136
zcmX>gc}`@)@yP~^KiQm0OG@(dCfhPfb7m&z=fx)h`IDD2SxtV;w083WW+^5Khzf<0
z%#xf`+v<|kijrCdkkZYsSp^t3E3ii}Pj+YLpZt<bfys_*vKF`0WDjoV$^G0WiZ=SC
ZId)tMU|^%4l351fXj%isYPq;-xd0ecD!>2$

diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index ca1bb16987..1f371e7751 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -339,7 +339,7 @@
   width: 480px;
   max-width: 90vw;
   border-radius: 10px;
-  border: 1px solid var(--primary-text-color--faint);
+  border: 1px solid var(--background-color);
   color: var(--primary-text-color--faint);
   background: var(--foreground-color);
 
@@ -543,8 +543,10 @@
 }
 
 .actions-modal {
-  width: calc(100% - 72px);
-  margin: 35px;
+  max-height: calc(100% - 16px);
+  width: calc(100% - 16px);
+  max-width: 500px;
+  margin: auto 0 8px;
 
   .status {
     overflow-y: auto;
@@ -565,7 +567,6 @@
 
     li:not(:empty) {
       &:first-of-type { margin: 10px 0 0; }
-      &:last-of-type { margin: 0 0 10px; }
 
       a {
         display: flex;
@@ -590,10 +591,25 @@
             box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
           }
         }
-        button:first-child { margin-right: 10px; }
+
+        .svg-icon:first-child { margin-right: 10px; }
       }
     }
   }
+
+  &__close-button {
+    width: calc(100% - 16px);
+    margin: 8px;
+    background: var(--accent-color);
+    font-size: 15px;
+    font-weight: 600;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background: var(--accent-color--bright);
+    }
+  }
 }
 
 .confirmation-modal__action-bar,