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

lukepolo · May 17, 2021 · 2ef57e9 · 2ef57e9
1 parent 808ccf1
commit 2ef57e9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/components/Settings/SettingsUsers/index.tsx b/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">

diff --git a/src/i18n/locale/en.json b/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!",

diff --git a/src/styles/globals.css b/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;
 }