From 08caad3b9976c8b1f70fe7e8153bfca3542d43b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20V=C3=A9lez?= <pablovv2012@gmail.com>
Date: Thu, 15 May 2025 02:22:09 +0200
Subject: [PATCH] MM-64232 - adjust disabled styles channel settings modal
 (#30984)

* MM-64232 - adjust disabled styles channel settings modal

* fix styles

* adjust snapshot

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../src/components/__snapshots__/textbox.test.tsx.snap |  2 +-
 webapp/channels/src/components/textbox/textbox.tsx     |  2 +-
 .../widgets/advanced_textbox/advanced_textbox.scss     | 10 +++++++++-
 .../widgets/advanced_textbox/advanced_textbox.tsx      |  1 +
 .../src/components/widgets/inputs/input/input.scss     |  6 ++++++
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap b/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
index e0d7aa8bc4..dfc6237122 100644
--- a/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/TextBox should match snapshot with additional, optional props 1`] = `
 <div
-  className="textarea-wrapper textarea-wrapper-preview"
+  className="textarea-wrapper textarea-wrapper-preview textarea-wrapper-preview--disabled"
 >
   <div
     className="form-control custom-textarea textbox-preview-area"
diff --git a/webapp/channels/src/components/textbox/textbox.tsx b/webapp/channels/src/components/textbox/textbox.tsx
index a7c96f573f..e71a6fb488 100644
--- a/webapp/channels/src/components/textbox/textbox.tsx
+++ b/webapp/channels/src/components/textbox/textbox.tsx
@@ -285,7 +285,7 @@ export default class Textbox extends React.PureComponent<Props> {
         return (
             <div
                 ref={this.wrapper}
-                className={classNames('textarea-wrapper', {'textarea-wrapper-preview': this.props.preview})}
+                className={classNames('textarea-wrapper', {'textarea-wrapper-preview': this.props.preview, 'textarea-wrapper-preview--disabled': Boolean(this.props.preview && this.props.disabled)})}
             >
                 <div
                     tabIndex={this.props.tabIndex}
diff --git a/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss b/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss
index 45d2e9a330..03506600a6 100644
--- a/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss
+++ b/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.scss
@@ -52,6 +52,7 @@
         position: relative;
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
         border-radius: 4px;
+
         
         &:hover {
             border-color: rgba(var(--center-channel-color-rgb), 0.48);
@@ -61,7 +62,14 @@
             border-color: var(--button-bg);
             box-shadow: inset 0 0 0 1px var(--button-bg);
         }
-
+        
+        &.textarea-wrapper-preview--disabled {
+            cursor: not-allowed;
+            opacity: 0.6;
+            &:hover {
+                border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+            }
+        }
         // forcing this styles since textarea has ohter styles that affect the post input, so keeping it here isolated inside advanced textbox
         .textarea--has-errors{
             border-color: var(--error-text) !important;
diff --git a/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.tsx b/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.tsx
index 24b6cacf41..7caea0a3b9 100644
--- a/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.tsx
+++ b/webapp/channels/src/components/widgets/advanced_textbox/advanced_textbox.tsx
@@ -136,6 +136,7 @@ const AdvancedTextbox = ({
                     hasError={hasError}
                     onFocus={handleFocus}
                     onBlur={handleBlur}
+                    disabled={readOnly}
                 />
             </div>
             {!readOnly && value.trim().length > 0 && (
diff --git a/webapp/channels/src/components/widgets/inputs/input/input.scss b/webapp/channels/src/components/widgets/inputs/input/input.scss
index 07358cbd3a..ed85a6c48d 100644
--- a/webapp/channels/src/components/widgets/inputs/input/input.scss
+++ b/webapp/channels/src/components/widgets/inputs/input/input.scss
@@ -66,6 +66,12 @@
         textarea {
             margin-top: 6px;
         }
+
+        .form-control[disabled] {
+            background: none;
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
     }
 
     .Input_limit-exceeded {