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>

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"

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}

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;

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 && (

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 {