From 0bf4d491662fa5c17f9587d72cdb447ee9eab3c6 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 9 Dec 2024 09:23:19 +0100
Subject: [PATCH] [Glitch] Fix various visual sign-up flow issues

Port ca45f896dd3d967521884d42b92d1a4844e16016 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/styles/about.scss   |  5 ++++-
 .../flavours/glitch/styles/components.scss         | 10 +++++-----
 app/javascript/flavours/glitch/styles/forms.scss   | 14 +++-----------
 .../glitch/styles/mastodon-light/diff.scss         |  6 ++++++
 .../flavours/glitch/styles/variables.scss          |  7 +++++++
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 9307c21883..4d53195606 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -21,7 +21,6 @@ $fluid-breakpoint: $maximum-width + 20px;
 .rules-list {
   font-size: 15px;
   line-height: 22px;
-  color: $primary-text-color;
   counter-reset: list-counter;
 
   li {
@@ -82,6 +81,10 @@ $fluid-breakpoint: $maximum-width + 20px;
     }
   }
 
+  &__text {
+    color: $primary-text-color;
+  }
+
   &__hint {
     font-size: 14px;
     font-weight: 400;
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index f8face1677..6ece85cf51 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -108,7 +108,7 @@
 
   &:disabled,
   &.disabled {
-    background-color: $ui-primary-color;
+    background-color: $ui-button-disabled-color;
     cursor: not-allowed;
   }
 
@@ -148,14 +148,14 @@
     &:disabled,
     &.disabled {
       opacity: 0.7;
-      border-color: $ui-primary-color;
-      color: $ui-primary-color;
+      border-color: $ui-button-disabled-color;
+      color: $ui-button-disabled-color;
 
       &:active,
       &:focus,
       &:hover {
-        border-color: $ui-primary-color;
-        color: $ui-primary-color;
+        border-color: $ui-button-disabled-color;
+        color: $ui-button-disabled-color;
       }
     }
   }
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 5d4162ead0..c20eb871f7 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -585,8 +585,9 @@ code {
       background-color: $ui-button-focus-background-color;
     }
 
+    &:disabled,
     &:disabled:hover {
-      background-color: $ui-primary-color;
+      background-color: $ui-button-disabled-color;
     }
 
     &.negative {
@@ -600,16 +601,6 @@ code {
     }
   }
 
-  .button.button-tertiary {
-    padding: 9px;
-
-    &:hover,
-    &:focus,
-    &:active {
-      padding: 10px;
-    }
-  }
-
   select {
     appearance: none;
     box-sizing: border-box;
@@ -1174,6 +1165,7 @@ code {
   align-items: center;
   padding-bottom: 30px;
   margin-bottom: 30px;
+  color: $white;
 
   li {
     flex: 0 0 auto;
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 67b2cd3224..caf702ddc8 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -3,6 +3,12 @@
 
 .simple_form .button.button-tertiary {
   color: $highlight-text-color;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: $white;
+  }
 }
 
 .status-card__actions button,
diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index c2faa24315..db4ef7e089 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Commonly used web colors
 $black: #000000; // Black
 $white: #ffffff; // White
@@ -46,6 +48,11 @@ $ui-button-focus-background-color: $blurple-600 !default;
 $ui-button-focus-outline-color: $blurple-400 !default;
 $ui-button-focus-outline: solid 2px $ui-button-focus-outline-color !default;
 
+$ui-button-disabled-color: color.adjust(
+  $ui-button-background-color,
+  $alpha: -0.3
+) !default;
+
 $ui-button-secondary-color: $blurple-500 !default;
 $ui-button-secondary-border-color: $blurple-500 !default;
 $ui-button-secondary-focus-border-color: $blurple-300 !default;