From 03205b05a9c7df798e59d5df064ced35abfa9665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zoe=CC=88=20Bijl?= <code@moiety.me>
Date: Mon, 13 Oct 2025 13:07:40 +0200
Subject: [PATCH] [feature] update follow request icons

---
 .../components/follow_request_note.jsx        |  4 +-
 .../components/account_authorize.jsx          |  4 +-
 .../glitch/styles/components/accounts.scss    | 52 ++++++++++++++++++-
 .../flavours/glitch/styles/gts/colors.scss    | 10 ++++
 public/icons.svg                              |  3 ++
 5 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
index bfbd2515c..0ba831a98 100644
--- a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
@@ -22,12 +22,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
 
         <div className='follow-request-banner__action'>
           <button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
-            <Icon id='check' fixedWidth />
+            <IconSVG id='check' fixedWidth />
             <FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
           </button>
 
           <button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
-            <Icon id='times' fixedWidth />
+            <IconSVG id='x' fixedWidth />
             <FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
           </button>
         </div>
diff --git a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
index fa654e49a..7f8349670 100644
--- a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
+++ b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
@@ -40,8 +40,8 @@ class AccountAuthorize extends ImmutablePureComponent {
         </div>
 
         <div className='account--panel'>
-          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
-          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
+          <div className='account--panel__button'><IconSVGButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
+          <div className='account--panel__button'><IconSVGButton title={intl.formatMessage(messages.reject)} icon='x' onClick={onReject} /></div>
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index a2e49e535..eed6235f6 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -322,12 +322,14 @@
 }
 
 .account--panel {
+  display: flex;
+  gap: 5px;
   background: lighten($ui-base-color, 4%);
   border-top: 1px solid lighten($ui-base-color, 8%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   display: flex;
   flex-direction: row;
-  padding: 10px 0;
+  padding: 5px;
 }
 
 .account--panel__button,
@@ -336,6 +338,43 @@
   text-align: center;
 }
 
+.account--panel__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  button {
+    width: 100%;
+    padding: 6px;
+  }
+
+  &:first-child button {
+    color: var(--color-success-fg);
+    background: var(--color-success-bg);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-success-bg);
+      background: var(--color-success-fg);
+    }
+  }
+
+  &:last-child button {
+    color: var(--color-destructive-fg);
+    background: var(--color-destructive-bg);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--color-destructive-bg);
+      background: var(--color-destructive-fg);
+    }
+  }
+
+  svg.gts-icon {
+    --size: 20px;
+  }
+}
+
 .relationship-tag {
   color: $white;
   margin-bottom: 4px;
@@ -829,7 +868,18 @@
 }
 
 .follow-request-banner .button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  justify-content: center;
   width: 100%;
+
+  svg.gts-icon {
+    --size: 20px;
+
+    width: var(--size);
+    height: var(--size);
+  }
 }
 
 .account-memorial-banner__message {
diff --git a/app/javascript/flavours/glitch/styles/gts/colors.scss b/app/javascript/flavours/glitch/styles/gts/colors.scss
index 801bca84c..fa1238c58 100644
--- a/app/javascript/flavours/glitch/styles/gts/colors.scss
+++ b/app/javascript/flavours/glitch/styles/gts/colors.scss
@@ -22,6 +22,16 @@
     --color-content-fg: var(--color-fg);
     --color-content-secondary-bg: var(--color-secondary-bg);
 
+    /* State */
+    --color-success-bg: #d1e3dd;
+    // --color-success-bg: rgba(121, 189, 154, 0.3);
+    --color-success-fg: #3a654e;
+    --color-success-lines: var(--color-success-bg);
+
+    --color-destructive-bg: #f8c6cd;
+    // --color-destructive-bg: rgba(223, 64, 90, 0.3);
+    --color-destructive-fg: #a11c32;
+
     /* UI */
     --color-ui-base: ;
     --color-ui-bg: ;
diff --git a/public/icons.svg b/public/icons.svg
index 97047dbf9..4ffb43202 100644
--- a/public/icons.svg
+++ b/public/icons.svg
@@ -91,6 +91,9 @@
         <path d="M160,168l-48,48H66.75L36.69,185.94a16,16,0,0,1,0-22.63L96,104Z" opacity="0.2"></path>
         <path d="M225,80.4,183.6,39a24,24,0,0,0-33.94,0L31,157.66a24,24,0,0,0,0,33.94l30.06,30.06A8,8,0,0,0,66.74,224H216a8,8,0,0,0,0-16h-84.7L225,114.34A24,24,0,0,0,225,80.4ZM108.68,208H70.05L42.33,180.28a8,8,0,0,1,0-11.31L96,115.31,148.69,168Zm105-105L160,156.69,107.31,104,161,50.34a8,8,0,0,1,11.32,0l41.38,41.38a8,8,0,0,1,0,11.31Z"></path>
     </symbol>
+    <symbol id="check" fill="currentcolor" viewBox="0 0 256 256">
+        <path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path>
+    </symbol>
     <symbol id="checks" fill="currentcolor" viewBox="0 0 256 256">
         <path d="M149.61,85.71l-89.6,88a8,8,0,0,1-11.22,0L10.39,136a8,8,0,1,1,11.22-11.41L54.4,156.79l84-82.5a8,8,0,1,1,11.22,11.42Zm96.1-11.32a8,8,0,0,0-11.32-.1l-84,82.5-18.83-18.5a8,8,0,0,0-11.21,11.42l24.43,24a8,8,0,0,0,11.22,0l89.6-88A8,8,0,0,0,245.71,74.39Z"></path>
     </symbol>