meow: publish button is now an animated pride rainbow

based on the change sdomi made for her (akkoma) instance
arachnist · Aug 28, 2024 · 094f124 · 094f124
1 parent 0d2a94b
commit 094f124
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
@@ -335,6 +335,7 @@ class ComposeForm extends ImmutablePureComponent {
                 />
                 <Button
                   type='submit'
+                  className='pride-gradient'
                   text={intl.formatMessage(this.props.isEditing ? messages.saveChanges : (this.props.isInReply ? messages.reply : messages.publish))}
                   disabled={!this.canSubmit()}
                 />

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
@@ -198,6 +198,23 @@
   }
 }
 
+@keyframes gradient {
+  from {
+    background-position: 0% 0%;
+  }
+  to {
+    background-position: 200% 0%;
+  }
+}
+
+.pride-gradient {
+  animation: gradient 6s linear infinite;
+  background-size: 200% 200%;
+  background-position: 0% 100%;
+  background-image: linear-gradient(to left, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787, #e40303);
+  color: #000;
+}
+
 .column__wrapper {
   display: flex;
   flex: 1 1 auto;

diff --git a/app/javascript/mastodon/features/compose/components/compose_form.jsx b/app/javascript/mastodon/features/compose/components/compose_form.jsx
@@ -301,6 +301,7 @@ class ComposeForm extends ImmutablePureComponent {
               <div className='compose-form__submit'>
                 <Button
                   type='submit'
+                  className='pride-gradient'
                   text={intl.formatMessage(this.props.isEditing ? messages.saveChanges : (this.props.isInReply ? messages.reply : messages.publish))}
                   disabled={!this.canSubmit()}
                 />

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -198,6 +198,23 @@
   }
 }
 
+@keyframes gradient {
+  from {
+    background-position: 0% 0%;
+  }
+  to {
+    background-position: 200% 0%;
+  }
+}
+
+.pride-gradient {
+  animation: gradient 6s linear infinite;
+  background-size: 200% 200%;
+  background-position: 0% 100%;
+  background-image: linear-gradient(to left, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787, #e40303);
+  color: #000;
+}
+
 .column__wrapper {
   display: flex;
   flex: 1 1 auto;