refactor(ui): css refinements for a more unified look (#1816)

This commit is contained in:
TheCatLady
2021-06-20 00:32:05 -04:00
committed by GitHub
parent 409236f976
commit db781bfc35
19 changed files with 73 additions and 60 deletions

View File

@@ -13,7 +13,7 @@ interface AlertProps {
const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
let design = {
bgColor: 'bg-yellow-600',
titleColor: 'text-yellow-200',
titleColor: 'text-yellow-100',
textColor: 'text-yellow-300',
svg: <ExclamationIcon className="w-5 h-5" />,
};
@@ -22,7 +22,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
case 'info':
design = {
bgColor: 'bg-indigo-600',
titleColor: 'text-indigo-200',
titleColor: 'text-indigo-100',
textColor: 'text-indigo-300',
svg: <InformationCircleIcon className="w-5 h-5" />,
};
@@ -30,7 +30,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
case 'error':
design = {
bgColor: 'bg-red-600',
titleColor: 'text-red-200',
titleColor: 'text-red-100',
textColor: 'text-red-300',
svg: <XCircleIcon className="w-5 h-5" />,
};

View File

@@ -10,7 +10,7 @@ const ListItem: React.FC<ListItemProps> = ({ title, className, children }) => {
return (
<div>
<div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
<dt className="block text-sm font-medium text-gray-400">{title}</dt>
<dt className="block text-sm font-bold text-gray-400">{title}</dt>
<dd className="flex text-sm text-white sm:mt-0 sm:col-span-2">
<span className={`flex-grow ${className}`}>{children}</span>
</dd>

View File

@@ -137,7 +137,7 @@ const Modal: React.FC<ModalProps> = ({
>
{title && (
<span
className="text-lg font-medium leading-6 text-white"
className="text-lg font-bold leading-6 text-white"
id="modal-headline"
>
{title}

View File

@@ -73,7 +73,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
<div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
<header className="px-4 space-y-1 bg-indigo-600 slideover">
<div className="flex items-center justify-between space-x-3">
<h2 className="text-lg font-medium leading-7 text-white">
<h2 className="text-lg font-bold leading-7 text-white">
{title}
</h2>
<div className="flex items-center h-7">