fixed apps not enabled note formatting

Author: panuschek

apps/webapp/src/script/components/Modals/CreateConversation/CreateConversationSteps/Preference.tsx

@@ -20,6 +20,7 @@
 import {CONVERSATION_PROTOCOL} from '@wireapp/api-client/lib/team';
 import {container} from 'tsyringe';
 
+import {ConversationType} from 'Components/Modals/CreateConversation/types';
 import {AppsDisabledNote} from 'Components/Note/AppsDisabledNote/AppsDisabledNote';
 import {InfoToggle} from 'Components/toggle/InfoToggle';
 import {TeamState} from 'Repositories/team/TeamState';
@@ -64,7 +65,9 @@ export const Preference = () => {
 
   const isAppsFeatureAvailable =
     (defaultProtocol === CONVERSATION_PROTOCOL.MLS && isAppsEnabled) ||
-    (defaultProtocol === CONVERSATION_PROTOCOL.PROTEUS && hasWhitelistedServices);
+    (defaultProtocol === CONVERSATION_PROTOCOL.PROTEUS &&
+      hasWhitelistedServices &&
+      conversationType !== ConversationType.Channel);
 
   // Read receipts are temporarily disabled for MLS groups and channels until it is supported
   const areReadReceiptsEnabled = defaultProtocol !== CONVERSATION_PROTOCOL.MLS;
@@ -89,10 +92,9 @@ export const Preference = () => {
         isDisabled={!isAppsFeatureAvailable}
         name={t('servicesOptionsTitle')}
         isChecked={isServicesEnabled && isAppsFeatureAvailable}
+        label={!isAppsFeatureAvailable && <AppsDisabledNote />}
       />
 
-      {!isAppsFeatureAvailable && <AppsDisabledNote />}
-
       {areReadReceiptsEnabled && (
         <InfoToggle
           className="modal-style"

apps/webapp/src/script/components/Note/Note.styles.ts

@@ -31,8 +31,8 @@ export const ContainerStyle: CSSObject = {
   },
   border: '1px solid var(--accent-color-500)',
   borderRadius: '0.5rem',
-  color: '#000',
   lineHeight: '1.5',
+  marginTop: '0.3rem',
 };
 
 export const HeaderStyle: CSSObject = {

apps/webapp/src/script/components/toggle/InfoToggle.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {useId} from 'react';
+import React, {useId} from 'react';
 
 import cx from 'classnames';
 
@@ -29,6 +29,7 @@ interface InfoToggleProps {
   name: string;
   className?: string;
   setIsChecked: (checked: boolean) => void;
+  label?: React.ReactNode;
 }
 
 const InfoToggle = ({
@@ -39,6 +40,7 @@ const InfoToggle = ({
   isDisabled,
   name,
   setIsChecked,
+  label,
 }: InfoToggleProps) => {
   const dataUieNameInfoText = `status-info-toggle-${dataUieName}`;
   const dataUieNameLabelText = `do-toggle-${dataUieName}`;
@@ -77,6 +79,7 @@ const InfoToggle = ({
           </button>
         </div>
       </div>
+      {label}
     </div>
   );
 };