[web] adjust styles in notifications settings (#35143)

GitOrigin-RevId: 5867072acd6e38c1a00a252b13e4ef4169ef7b79

services/web/frontend/js/features/ide-settings/components/radio-button-setting.tsx

@@ -27,17 +27,18 @@ export default function RadioButtonSetting<T extends string = string>({
   return (
     <div className="ide-radio-setting-options">
       {options.map(option => (
-        <OLFormCheckbox
-          key={`${id}-${option.value}`}
-          type="radio"
-          id={`${id}-${option.value}`}
-          name={id}
-          value={option.value}
-          checked={value === option.value}
-          onChange={handleChange}
-          label={option.label}
-          description={option.description}
-        />
+        <div key={`${id}-${option.value}`} className="ide-setting">
+          <OLFormCheckbox
+            type="radio"
+            id={`${id}-${option.value}`}
+            name={id}
+            value={option.value}
+            checked={value === option.value}
+            onChange={handleChange}
+            label={option.label}
+            description={option.description}
+          />
+        </div>
       ))}
     </div>
   )

services/web/frontend/stylesheets/pages/editor/settings.scss

@@ -143,10 +143,29 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-06);
+
+  & .form-check {
+    margin: 0;
+  }
+
+  & .form-check-label {
+    color: var(--ide-settings-text-color);
+  }
+
+  & .form-check-label-description {
+    color: var(--ide-settings-description-color);
+  }
+
+  & .form-check-label,
+  & .form-check-label-description {
+    font-size: var(--font-size-02);
+  }
 }
 
 .global-notifications-link {
   font-size: var(--font-size-01);
+  padding: 0 var(--spacing-02);
+  margin: 0 var(--spacing-02);
 }
 
 .project-notifications-beta-note {