fix(ui): add clarification to user settings (#1644)

src/components/Settings/SettingsUsers/index.tsx

@@ -19,11 +19,14 @@ const messages = defineMessages({
   toastSettingsSuccess: 'User settings saved successfully!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
   localLogin: 'Enable Local Sign-In',
-  newPlexLogin: 'Enable New Plex User Sign-In',
+  localLoginTip:
+    'Allow users to sign in using their email address and password, instead of Plex OAuth',
+  newPlexLogin: 'Enable New Plex Sign-In',
   newPlexLoginTip: 'Allow Plex users to sign in without first being imported',
   movieRequestLimitLabel: 'Global Movie Request Limit',
   tvRequestLimitLabel: 'Global Series Request Limit',
   defaultPermissions: 'Default Permissions',
+  defaultPermissionsTip: 'Initial permissions assigned to new users',
 });
 
 const SettingsUsers: React.FC = () => {
@@ -102,6 +105,9 @@ const SettingsUsers: React.FC = () => {
                 <div className="form-row">
                   <label htmlFor="localLogin" className="checkbox-label">
                     {intl.formatMessage(messages.localLogin)}
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.localLoginTip)}
+                    </span>
                   </label>
                   <div className="form-input">
                     <Field
@@ -170,6 +176,9 @@ const SettingsUsers: React.FC = () => {
                   <div className="form-row">
                     <span id="group-label" className="group-label">
                       {intl.formatMessage(messages.defaultPermissions)}
+                      <span className="label-tip">
+                        {intl.formatMessage(messages.defaultPermissionsTip)}
+                      </span>
                     </span>
                     <div className="form-input">
                       <div className="max-w-lg">

src/i18n/locale/en.json

@@ -480,9 +480,11 @@
   "components.Settings.SettingsLogs.showall": "Show All Logs",
   "components.Settings.SettingsLogs.time": "Timestamp",
   "components.Settings.SettingsUsers.defaultPermissions": "Default Permissions",
+  "components.Settings.SettingsUsers.defaultPermissionsTip": "Initial permissions assigned to new users",
   "components.Settings.SettingsUsers.localLogin": "Enable Local Sign-In",
+  "components.Settings.SettingsUsers.localLoginTip": "Allow users to sign in using their email address and password, instead of Plex OAuth",
   "components.Settings.SettingsUsers.movieRequestLimitLabel": "Global Movie Request Limit",
-  "components.Settings.SettingsUsers.newPlexLogin": "Enable New Plex User Sign-In",
+  "components.Settings.SettingsUsers.newPlexLogin": "Enable New Plex Sign-In",
   "components.Settings.SettingsUsers.newPlexLoginTip": "Allow Plex users to sign in without first being imported",
   "components.Settings.SettingsUsers.toastSettingsFailure": "Something went wrong while saving settings.",
   "components.Settings.SettingsUsers.toastSettingsSuccess": "User settings saved successfully!",

src/styles/globals.css

@@ -225,7 +225,8 @@ img.avatar-sm {
   @apply pt-5 mt-8 text-white border-t border-gray-700;
 }
 
-label {
+label,
+.group-label {
   @apply block mb-1 text-sm font-medium leading-5 text-gray-400;
 }
 
@@ -329,10 +330,6 @@ svg.icon-sm {
   @apply mt-6 text-white;
 }
 
-.group-label {
-  @apply block mb-1 text-sm font-medium leading-6 text-gray-400;
-}
-
 .toast {
   width: 360px;
 }