From 1123fce089b86251dcafebf77743d60a6e396bee Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Mon, 3 May 2021 20:37:51 -0400
Subject: [PATCH] fix(ui): apply rounded-l-only to SensitiveInput textareas and
 increase visible text input area (#1561)

---
 src/components/RegionSelector/index.tsx       | 256 +++++++++---------
 src/components/Settings/SettingsMain.tsx      |  12 +-
 .../UserGeneralSettings/index.tsx             |  14 +-
 src/styles/globals.css                        |  10 +-
 4 files changed, 146 insertions(+), 146 deletions(-)

diff --git a/src/components/RegionSelector/index.tsx b/src/components/RegionSelector/index.tsx
index da4c30c54..3decff733 100644
--- a/src/components/RegionSelector/index.tsx
+++ b/src/components/RegionSelector/index.tsx
@@ -76,112 +76,145 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
   }, [onChange, selectedRegion, name, regions]);
 
   return (
-    <div className="relative z-40 flex max-w-lg">
-      <div className="w-full">
-        <Listbox as="div" value={selectedRegion} onChange={setSelectedRegion}>
-          {({ open }) => (
-            <div className="relative">
-              <span className="inline-block w-full rounded-md shadow-sm">
-                <Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
-                  {((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
-                    (isUserSetting &&
-                      !selectedRegion &&
-                      currentSettings.region &&
-                      hasFlag(currentSettings.region))) && (
-                    <span className="h-4 mr-2 overflow-hidden text-base leading-4">
-                      <span
-                        className={`flag:${
-                          selectedRegion
-                            ? selectedRegion.iso_3166_1
-                            : currentSettings.region
-                        }`}
-                      />
-                    </span>
-                  )}
-                  <span className="block truncate">
-                    {selectedRegion && selectedRegion.iso_3166_1 !== 'all'
-                      ? regionName(selectedRegion.iso_3166_1)
-                      : isUserSetting && selectedRegion?.iso_3166_1 !== 'all'
-                      ? intl.formatMessage(messages.regionServerDefault, {
-                          region: currentSettings.region
-                            ? regionName(currentSettings.region)
-                            : intl.formatMessage(messages.regionDefault),
-                        })
-                      : intl.formatMessage(messages.regionDefault)}
-                  </span>
-                  <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
-                    <ChevronDownIcon className="w-5 h-5" />
+    <div className="w-full">
+      <Listbox as="div" value={selectedRegion} onChange={setSelectedRegion}>
+        {({ open }) => (
+          <div className="relative">
+            <span className="inline-block w-full rounded-md shadow-sm">
+              <Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
+                {((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
+                  (isUserSetting &&
+                    !selectedRegion &&
+                    currentSettings.region &&
+                    hasFlag(currentSettings.region))) && (
+                  <span className="h-4 mr-2 overflow-hidden text-base leading-4">
+                    <span
+                      className={`flag:${
+                        selectedRegion
+                          ? selectedRegion.iso_3166_1
+                          : currentSettings.region
+                      }`}
+                    />
                   </span>
-                </Listbox.Button>
-              </span>
+                )}
+                <span className="block truncate">
+                  {selectedRegion && selectedRegion.iso_3166_1 !== 'all'
+                    ? regionName(selectedRegion.iso_3166_1)
+                    : isUserSetting && selectedRegion?.iso_3166_1 !== 'all'
+                    ? intl.formatMessage(messages.regionServerDefault, {
+                        region: currentSettings.region
+                          ? regionName(currentSettings.region)
+                          : intl.formatMessage(messages.regionDefault),
+                      })
+                    : intl.formatMessage(messages.regionDefault)}
+                </span>
+                <span className="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500 pointer-events-none">
+                  <ChevronDownIcon className="w-5 h-5" />
+                </span>
+              </Listbox.Button>
+            </span>
 
-              <Transition
-                show={open}
-                leave="transition ease-in duration-100"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-                className="absolute w-full mt-1 bg-gray-800 rounded-md shadow-lg"
+            <Transition
+              show={open}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+              className="absolute w-full mt-1 bg-gray-800 rounded-md shadow-lg"
+            >
+              <Listbox.Options
+                static
+                className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
               >
-                <Listbox.Options
-                  static
-                  className="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5"
-                >
-                  {isUserSetting && (
-                    <Listbox.Option value={null}>
-                      {({ selected, active }) => (
-                        <div
+                {isUserSetting && (
+                  <Listbox.Option value={null}>
+                    {({ selected, active }) => (
+                      <div
+                        className={`${
+                          active ? 'text-white bg-indigo-600' : 'text-gray-300'
+                        } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
+                      >
+                        <span className="mr-2 text-base">
+                          <span
+                            className={
+                              hasFlag(currentSettings.region)
+                                ? `flag:${currentSettings.region}`
+                                : 'pr-6'
+                            }
+                          />
+                        </span>
+                        <span
                           className={`${
-                            active
-                              ? 'text-white bg-indigo-600'
-                              : 'text-gray-300'
-                          } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
+                            selected ? 'font-semibold' : 'font-normal'
+                          } block truncate`}
                         >
-                          <span className="mr-2 text-base">
-                            <span
-                              className={
-                                hasFlag(currentSettings.region)
-                                  ? `flag:${currentSettings.region}`
-                                  : 'pr-6'
-                              }
-                            />
-                          </span>
+                          {intl.formatMessage(messages.regionServerDefault, {
+                            region: currentSettings.region
+                              ? regionName(currentSettings.region)
+                              : intl.formatMessage(messages.regionDefault),
+                          })}
+                        </span>
+                        {selected && (
                           <span
                             className={`${
-                              selected ? 'font-semibold' : 'font-normal'
-                            } block truncate`}
+                              active ? 'text-white' : 'text-indigo-600'
+                            } absolute inset-y-0 left-0 flex items-center pl-1.5`}
                           >
-                            {intl.formatMessage(messages.regionServerDefault, {
-                              region: currentSettings.region
-                                ? regionName(currentSettings.region)
-                                : intl.formatMessage(messages.regionDefault),
-                            })}
+                            <CheckIcon className="w-5 h-5" />
                           </span>
-                          {selected && (
-                            <span
-                              className={`${
-                                active ? 'text-white' : 'text-indigo-600'
-                              } absolute inset-y-0 left-0 flex items-center pl-1.5`}
-                            >
-                              <CheckIcon className="w-5 h-5" />
-                            </span>
-                          )}
-                        </div>
+                        )}
+                      </div>
+                    )}
+                  </Listbox.Option>
+                )}
+                <Listbox.Option value={isUserSetting ? allRegion : null}>
+                  {({ selected, active }) => (
+                    <div
+                      className={`${
+                        active ? 'text-white bg-indigo-600' : 'text-gray-300'
+                      } cursor-default select-none relative py-2 pl-8 pr-4`}
+                    >
+                      <span
+                        className={`${
+                          selected ? 'font-semibold' : 'font-normal'
+                        } block truncate pl-8`}
+                      >
+                        {intl.formatMessage(messages.regionDefault)}
+                      </span>
+                      {selected && (
+                        <span
+                          className={`${
+                            active ? 'text-white' : 'text-indigo-600'
+                          } absolute inset-y-0 left-0 flex items-center pl-1.5`}
+                        >
+                          <CheckIcon className="w-5 h-5" />
+                        </span>
                       )}
-                    </Listbox.Option>
+                    </div>
                   )}
-                  <Listbox.Option value={isUserSetting ? allRegion : null}>
+                </Listbox.Option>
+                {sortedRegions?.map((region) => (
+                  <Listbox.Option key={region.iso_3166_1} value={region}>
                     {({ selected, active }) => (
                       <div
                         className={`${
                           active ? 'text-white bg-indigo-600' : 'text-gray-300'
-                        } cursor-default select-none relative py-2 pl-8 pr-4`}
+                        } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
                       >
+                        <span className="mr-2 text-base">
+                          <span
+                            className={
+                              hasFlag(region.iso_3166_1)
+                                ? `flag:${region.iso_3166_1}`
+                                : 'pr-6'
+                            }
+                          />
+                        </span>
                         <span
                           className={`${
                             selected ? 'font-semibold' : 'font-normal'
-                          } block truncate pl-8`}
+                          } block truncate`}
                         >
-                          {intl.formatMessage(messages.regionDefault)}
+                          {regionName(region.iso_3166_1)}
                         </span>
                         {selected && (
                           <span
@@ -195,51 +228,12 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
                       </div>
                     )}
                   </Listbox.Option>
-                  {sortedRegions?.map((region) => (
-                    <Listbox.Option key={region.iso_3166_1} value={region}>
-                      {({ selected, active }) => (
-                        <div
-                          className={`${
-                            active
-                              ? 'text-white bg-indigo-600'
-                              : 'text-gray-300'
-                          } cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
-                        >
-                          <span className="mr-2 text-base">
-                            <span
-                              className={
-                                hasFlag(region.iso_3166_1)
-                                  ? `flag:${region.iso_3166_1}`
-                                  : 'pr-6'
-                              }
-                            />
-                          </span>
-                          <span
-                            className={`${
-                              selected ? 'font-semibold' : 'font-normal'
-                            } block truncate`}
-                          >
-                            {regionName(region.iso_3166_1)}
-                          </span>
-                          {selected && (
-                            <span
-                              className={`${
-                                active ? 'text-white' : 'text-indigo-600'
-                              } absolute inset-y-0 left-0 flex items-center pl-1.5`}
-                            >
-                              <CheckIcon className="w-5 h-5" />
-                            </span>
-                          )}
-                        </div>
-                      )}
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </Transition>
-            </div>
-          )}
-        </Listbox>
-      </div>
+                ))}
+              </Listbox.Options>
+            </Transition>
+          </div>
+        )}
+      </Listbox>
     </div>
   );
 };
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index 03794c3c1..fb81a1db6 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -322,11 +322,13 @@ const SettingsMain: React.FC = () => {
                     </span>
                   </label>
                   <div className="form-input">
-                    <RegionSelector
-                      value={values.region ?? ''}
-                      name="region"
-                      onChange={setFieldValue}
-                    />
+                    <div className="form-input-field">
+                      <RegionSelector
+                        value={values.region ?? ''}
+                        name="region"
+                        onChange={setFieldValue}
+                      />
+                    </div>
                   </div>
                 </div>
                 <div className="form-row">
diff --git a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
index 1c905ff6e..b6f1286d5 100644
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -232,12 +232,14 @@ const UserGeneralSettings: React.FC = () => {
                   </span>
                 </label>
                 <div className="form-input">
-                  <RegionSelector
-                    name="region"
-                    value={values.region ?? ''}
-                    isUserSetting
-                    onChange={setFieldValue}
-                  />
+                  <div className="form-input-field">
+                    <RegionSelector
+                      name="region"
+                      value={values.region ?? ''}
+                      isUserSetting
+                      onChange={setFieldValue}
+                    />
+                  </div>
                 </div>
               </div>
               <div className="form-row">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 9102ea5a8..1774af9cb 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -218,7 +218,7 @@ img.avatar-sm {
 }
 
 .form-input-field {
-  @apply flex max-w-lg rounded-md shadow-sm;
+  @apply flex max-w-xl rounded-md shadow-sm;
 }
 
 .actions {
@@ -268,12 +268,14 @@ textarea {
 }
 
 input.rounded-l-only,
-select.rounded-l-only {
+select.rounded-l-only,
+textarea.rounded-l-only {
   @apply rounded-r-none;
 }
 
 input.rounded-r-only,
-select.rounded-r-only {
+select.rounded-r-only,
+textarea.rounded-r-only {
   @apply rounded-l-none;
 }
 
@@ -286,7 +288,7 @@ select.short {
 }
 
 button.input-action {
-  @apply relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
+  @apply relative inline-flex items-center px-3 sm:px-3.5 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
 }
 
 .button-md svg,