Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix borked styling

Browse source
This commit is contained in:
Matthew Penner 2021-07-25 16:41:54 -06:00
parent 7f290c6e52
commit b8b481b57b
8 changed files with 68 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

11
resources/scripts/components/elements/Field.tsx
View file

@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
import { Field as FormikField, FieldProps } from 'formik';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import InputError from '@/components/elements/InputError';
interface OwnProps {
name: string;
@ -28,13 +29,9 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
isLight={light}
hasError={!!(touched[field.name] && errors[field.name])}
/>
{touched[field.name] && errors[field.name] ?
<p className={'input-help error'}>
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
</p>
:
description ? <p className={'input-help'}>{description}</p> : null
}
<InputError errors={errors} touched={touched} name={field.name}>
{description || null}
</InputError>
</div>
)
}

6
resources/scripts/components/elements/FormikFieldWrapper.tsx
View file

@ -17,7 +17,11 @@ const FormikFieldWrapper = ({ id, name, label, className, description, validate,
<Field name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
<div className={`${className} ${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`}>
<div className={className ?
`${className} ${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`
:
`${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`}
>
{label && <Label htmlFor={id}>{label}</Label>}
{children}
<InputError errors={errors} touched={touched} name={field.name}>

8
resources/scripts/components/elements/Input.tsx
View file

@ -77,7 +77,13 @@ const Input = styled.input<Props>`
}
}
`;
const Textarea = styled.textarea<Props>`${inputStyle}`;
const Textarea = styled.textarea<Props>`
${inputStyle};
& + .input-help {
${tw`mt-0`};
}
`;
export { Textarea };
export default Input;

5
resources/scripts/components/elements/InputError.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import { FormikErrors, FormikTouched } from 'formik';
import tw from 'twin.macro';
import { capitalize } from '@/helpers';
interface Props {
@ -12,7 +11,7 @@ interface Props {
const InputError = ({ errors, touched, name, children }: Props) => (
touched[name] && errors[name] ?
<p css={tw`text-xs text-red-400 pt-2`}>
<p className={'input-help error'}>
{typeof errors[name] === 'string' ?
capitalize(errors[name] as string)
:
@ -21,7 +20,7 @@ const InputError = ({ errors, touched, name, children }: Props) => (
</p>
:
<>
{children ? <p css={tw`text-xs text-neutral-400 pt-2`}>{children}</p> : null}
{children ? <p className={'input-help'}>{children}</p> : null}
</>
);