From 2ef57e9b1a5b4d0a1499921f4e26b0b0712d7ded Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Sun, 16 May 2021 20:02:55 -0400
Subject: [PATCH] fix(ui): add clarification to user settings (#1644)

---
 src/components/Settings/SettingsUsers/index.tsx | 11 ++++++++++-
 src/i18n/locale/en.json                         |  4 +++-
 src/styles/globals.css                          |  7 ++-----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings/SettingsUsers/index.tsx b/src/components/Settings/SettingsUsers/index.tsx
index 36fcaccdf..5ab6c0ffd 100644
--- 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
index 3699d0155..75fc0a951 100644
--- 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
index c18260b92..08e76b6e2 100644
--- 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;
 }