LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

colors

This commit is contained in:
Karol Wypchlo 2021-02-09 15:12:51 +01:00
parent 96b28518ea
commit 8806adf216
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/dashboard/src/components/Form/Message.js
View File

@ -1,6 +1,9 @@
const types = { const types = {
error: { error: {
color: "red", backgroundColor: "bg-red-50",
titleColor: "text-red-800",
detailsColor: "text-red-700",
iconColor: "text-red-400",
icon: ( icon: (
<path <path
fillRule="evenodd" fillRule="evenodd"
@ -10,7 +13,10 @@ const types = {
), ),
}, },
info: { info: {
color: "blue", backgroundColor: "bg-blue-50",
titleColor: "text-blue-800",
detailsColor: "text-blue-700",
iconColor: "text-blue-400",
icon: ( icon: (
<path <path
fillRule="evenodd" fillRule="evenodd"
@ -25,11 +31,11 @@ export default function Message({ type, title, items = [] }) {
const { color, icon } = types[type]; const { color, icon } = types[type];
return ( return (
<div className={`rounded-md bg-${color}-50 p-4`}> <div className={`rounded-md ${backgroundColor} p-4`}>
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<svg <svg
className={`h-5 w-5 text-${color}-400`} className={`h-5 w-5 ${iconColor}`}
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
@ -39,9 +45,9 @@ export default function Message({ type, title, items = [] }) {
</svg> </svg>
</div> </div>
<div className="ml-3"> <div className="ml-3">
{title && <h3 className={`text-sm font-medium text-${color}-800`}>{title}</h3>} {title && <h3 className={`text-sm font-medium ${titleColor}`}>{title}</h3>}
{items.length > 0 && ( {items.length > 0 && (
<div className={`${title ? "mt-2" : ""} text-sm text-${color}-700`}> <div className={`${title ? "mt-2" : ""} text-sm ${detailsColor}`}>
<ul className={`${items.length > 1 ? "list-disc pl-5 space-y-1" : ""}`}> <ul className={`${items.length > 1 ? "list-disc pl-5 space-y-1" : ""}`}>
{items.map((item, index) => ( {items.map((item, index) => (
<li key={index}>{item}</li> <li key={index}>{item}</li>