disable matomo necessary in settings

Author: Aniket-Engg

apps/remix-ide/src/app/tabs/locales/en/settings.json

@@ -57,7 +57,7 @@
   "settings.analyticsDescription": "Control how Remix uses AI and analytics to improve your experience.",
   "settings.aiDescription": "The Remix AI Assistant enhances your coding experience with smart suggestions and automated insights. Manage how AI interacts with your code and data.",
   "settings.servicesDescription": "Configure the settings for connected services, including Github, IPFS, Swarm, Sindri and Etherscan.",
-  "settings.matomoAnalyticsNoCookies": "Matomo Analytics (no cookies)",
+  "settings.matomoAnalyticsNoCookies": "Matomo Analytics (necessary, no cookies)",
   "settings.matomoAnalyticsNoCookiesDescription": "Help improve Remix with anonymous usage data.",
   "settings.matomoAnalyticsWithCookies": "Matomo Analytics (with cookies)",
   "settings.matomoAnalyticsWithCookiesDescription": "Enable tracking with cookies for more detailed insights.",

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -96,13 +96,9 @@ const settingsSections: SettingsSection[] = [
     { options: [{
       name: 'matomo-analytics',
       label: 'settings.matomoAnalyticsNoCookies',
+      headerClass: 'text-secondary',
       type: 'toggle',
       description: 'settings.matomoAnalyticsNoCookiesDescription',
-      footnote: {
-        text: 'Learn more about analytics',
-        link: 'https://matomo.org/',
-        styleClass: 'text-primary'
-      }
     }, {
       name: 'matomo-perf-analytics',
       label: 'settings.matomoAnalyticsWithCookies',

libs/remix-ui/settings/src/lib/settings-section.tsx

@@ -94,15 +94,15 @@ export const SettingsSectionUI: React.FC<SettingsSectionUIProps> = ({ plugin, se
                   return (
                     <div className={`card border-0 rounded-0 ${isLastOption ? 'pt-3 pb-0' : isFirstOption ? 'border-bottom pb-3' : 'border-bottom py-3'}`} key={optionIndex}>
                       <div className="d-flex align-items-center">
-                        <h5 data-id={`settingsTab${option.name}Label`} className={`${isDark ? 'text-white' : 'text-black'} m-0`}>
+                        <h5 data-id={`settingsTab${option.name}Label`} className={`${option.headerClass || (isDark ? 'text-white' : 'text-black')} m-0`}>
                           <FormattedMessage id={option.label} />
                           {option.labelIconTooltip ?
                             <CustomTooltip tooltipText={<FormattedMessage id={option.labelIconTooltip} />}><i className={option.labelIcon}></i></CustomTooltip> :
                             option.labelIcon && <i className={option.labelIcon}></i>
                           }
                         </h5>
                         <div className="ms-auto">
-                          {option.type === 'toggle' && <ToggleSwitch id={option.name} isOn={toggleValue} onClick={() => handleToggle(option.name)} />}
+                          {option.type === 'toggle' && <ToggleSwitch id={option.name} isOn={toggleValue} onClick={() => handleToggle(option.name)} disabled = {option.name === "matomo-analytics" ? true : false}/>}
                           {option.type === 'select' && <div style={{ minWidth: '110px' }}><SelectDropdown value={selectValue} options={option.selectOptions} name={option.name} dispatch={dispatch as any} /></div>}
                           {option.type === 'button' && <button className="btn btn-secondary btn-sm" onClick={() => handleButtonClick(option.buttonOptions)}><FormattedMessage id={option.buttonOptions.label} /></button>}
                         </div>

libs/remix-ui/settings/src/types/index.ts

@@ -47,6 +47,7 @@ export interface SettingsSection {
       name: keyof SettingsState,
       label: string,
       labelIcon?: string,
+      headerClass?: string,
       labelIconTooltip?: string,
       description?: string | JSX.Element,
       footnote?: {