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 {
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 {
);
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 @@
+
+
+