[Privacy, UI, Port: glitch-soc@b8b6f1d] Change secondary and primary toot button color when it may reduce privacy

Co-authored-by: Fire Demon <firedemon@creature.cafe>

4 files changed, 27 insertions, 4 deletions

diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index ad1878115..adaf063ee 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -63,6 +63,8 @@ class ComposeForm extends ImmutablePureComponent {
     layout: PropTypes.string,
     media: ImmutablePropTypes.list,
     sideArm: PropTypes.string,
+    sideArmWarning: PropTypes.bool,
+    privacyWarning: PropTypes.bool,
     sensitive: PropTypes.bool,
     spoilersAlwaysOn: PropTypes.bool,
     mediaDescriptionConfirmation: PropTypes.bool,
@@ -273,9 +275,11 @@ class ComposeForm extends ImmutablePureComponent {
       onFetchSuggestions,
       onPaste,
       privacy,
+      privacyWarning,
       sensitive,
       showSearch,
       sideArm,
+      sideArmWarning,
       spoiler,
       spoilerText,
       suggestions,
@@ -357,7 +361,9 @@ class ComposeForm extends ImmutablePureComponent {
           onSecondarySubmit={handleSecondarySubmit}
           onSubmit={handleSubmit}
           privacy={privacy}
+          privacyWarning={privacyWarning}
           sideArm={sideArm}
+          sideArmWarning={sideArmWarning}
         />
       </div>
     );
diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.js b/app/javascript/flavours/glitch/features/compose/components/publisher.js
index 97890f40d..107c7fa91 100644
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.js
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.js
@@ -35,7 +35,9 @@ class Publisher extends ImmutablePureComponent {
     onSecondarySubmit: PropTypes.func,
     onSubmit: PropTypes.func,
     privacy: PropTypes.oneOf(['direct', 'private', 'unlisted', 'public']),
+    privacyWarning: PropTypes.bool,
     sideArm: PropTypes.oneOf(['none', 'direct', 'private', 'unlisted', 'public']),
+    sideArmWarning: PropTypes.bool,
   };
 
   handleSubmit = () => {
@@ -43,7 +45,7 @@ class Publisher extends ImmutablePureComponent {
   };
 
   render () {
-    const { countText, disabled, intl, onSecondarySubmit, privacy, sideArm } = this.props;
+    const { countText, disabled, intl, onSecondarySubmit, privacy, privacyWarning, sideArm, sideArmWarning } = this.props;
 
     const diff = maxChars - length(countText || '');
     const computedClass = classNames('composer--publisher', {
@@ -55,7 +57,7 @@ class Publisher extends ImmutablePureComponent {
       <div className={computedClass}>
         {sideArm && sideArm !== 'none' ? (
           <Button
-            className='side_arm'
+            className={classNames('side_arm', {privacy_warning: sideArmWarning})}
             disabled={disabled || diff < 0}
             onClick={onSecondarySubmit}
             style={{ padding: null }}
@@ -75,7 +77,7 @@ class Publisher extends ImmutablePureComponent {
           />
         ) : null}
         <Button
-          className='primary'
+          className={classNames('primary', {privacy_warning: privacyWarning})}
           text={function () {
             switch (true) {
             case !!sideArm && sideArm !== 'none':
diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
index fcd2caf1b..aec383161 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
@@ -18,7 +18,7 @@ import {
 } from 'flavours/glitch/actions/modal';
 import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
 
-import { privacyPreference } from 'flavours/glitch/util/privacy_preference';
+import { privacyPreference, order as privacyOrder } from 'flavours/glitch/util/privacy_preference';
 
 const messages = defineMessages({
   missingDescriptionMessage: {  id: 'confirmations.missing_media_description.message',
@@ -57,7 +57,9 @@ function mapStateToProps (state) {
     media: state.getIn(['compose', 'media_attachments']),
     preselectDate: state.getIn(['compose', 'preselectDate']),
     privacy: state.getIn(['compose', 'privacy']),
+    privacyWarning: replyPrivacy && privacyOrder.indexOf(state.getIn(['compose', 'privacy'])) < privacyOrder.indexOf(replyPrivacy),
     sideArm: sideArmPrivacy,
+    sideArmWarning: sideArmPrivacy && sideArmRestrictedPrivacy && privacyOrder.indexOf(sideArmPrivacy) < privacyOrder.indexOf(sideArmRestrictedPrivacy),
     sensitive: state.getIn(['compose', 'sensitive']),
     showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
     spoiler: spoilersAlwaysOn || state.getIn(['compose', 'spoiler']),
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index 460f75c1f..7db2dd2aa 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -654,6 +654,19 @@
     text-align: center;
   }
 
+  & > .privacy_warning {
+    background-color: $error-value-color;
+
+    &:hover {
+      background-color: lighten($error-value-color, 5%);
+    }
+
+    &:active,
+    &:focus {
+      background-color: darken($error-value-color, 5%);
+    }
+  }
+
   &.over {
     & > .count { color: $warning-red }
   }