shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): uniform-size checkboxes, vertically-aligned form labels, and fixes for other UI imperfections/inconsistencies (#737)

Browse Source
This commit is contained in:
TheCatLady
2021-02-02 02:20:05 -05:00
committed by GitHub
parent bfe25d9755
commit e34fbf72fd
55 changed files with 1230 additions and 1542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/Settings/Notifications/NotificationsWebhook/index.tsx
View File

@@ -151,31 +151,20 @@ const NotificationsWebhook: React.FC = () => {
};
return (
<Form>
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200">
<label
htmlFor="enabled"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
>
<Form className="section">
<div className="form-row">
<label htmlFor="enabled" className="checkbox-label">
{intl.formatMessage(messages.agentenabled)}
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<Field
type="checkbox"
id="enabled"
name="enabled"
className="w-6 h-6 text-indigo-600 transition duration-150 ease-in-out rounded-md form-checkbox"
/>
<div className="form-input">
<Field type="checkbox" id="enabled" name="enabled" />
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
<label
htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
>
<div className="form-row">
<label htmlFor="name" className="text-label">
{intl.formatMessage(messages.webhookUrl)}
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<Field
id="webhookUrl"
@@ -184,40 +173,28 @@ const NotificationsWebhook: React.FC = () => {
placeholder={intl.formatMessage(
messages.webhookUrlPlaceholder
)}
className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
/>
</div>
{errors.webhookUrl && touched.webhookUrl && (
<div className="mt-2 text-red-500">{errors.webhookUrl}</div>
<div className="error">{errors.webhookUrl}</div>
)}
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
<label
htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
>
<div className="form-row">
<label htmlFor="name" className="text-label">
{intl.formatMessage(messages.authheader)}
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<Field
id="authHeader"
name="authHeader"
type="text"
className="flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
/>
<Field id="authHeader" name="authHeader" type="text" />
</div>
</div>
</div>
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800">
<label
htmlFor="name"
className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px"
>
<div className="form-row">
<label htmlFor="name" className="text-label">
{intl.formatMessage(messages.customJson)}
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<div className="form-input">
<div className="flex max-w-lg rounded-md shadow-sm">
<JSONEditor
name="webhook-json-payload"
@@ -227,7 +204,7 @@ const NotificationsWebhook: React.FC = () => {
/>
</div>
{errors.jsonPayload && touched.jsonPayload && (
<div className="mt-2 text-red-500">{errors.jsonPayload}</div>
<div className="error">{errors.jsonPayload}</div>
)}
<div className="mt-2">
<Button
@@ -275,18 +252,15 @@ const NotificationsWebhook: React.FC = () => {
</div>
</div>
</div>
<div className="mt-6">
<div role="group" aria-labelledby="label-permissions">
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-baseline">
<div className="mt-8">
<div role="group" aria-labelledby="group-label" className="group">
<div className="sm:grid sm:grid-cols-4 sm:gap-4">
<div>
<div
className="text-base font-medium leading-6 text-gray-400 sm:text-sm sm:leading-5"
id="label-types"
>
<div id="group-label" className="group-label">
{intl.formatMessage(messages.notificationtypes)}
</div>
</div>
<div className="mt-4 sm:mt-0 sm:col-span-2">
<div className="form-input">
<div className="max-w-lg">
<NotificationTypeSelector
currentTypes={values.types}
@@ -299,7 +273,7 @@ const NotificationsWebhook: React.FC = () => {
</div>
</div>
</div>
<div className="pt-5 mt-8 border-t border-gray-700">
<div className="actions">
<div className="flex justify-end">
<span className="inline-flex ml-3 rounded-md shadow-sm">
<Button