Skip to content

Commit

Permalink
set colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@gpelouze
gpelouze committed Sep 19, 2023
1 parent 4f6ac3f commit 029a89b
Show file tree
Hide file tree
Showing 9 changed files with 55 additions and 39 deletions.
2 changes: 1 addition & 1 deletion vre-panel/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const Footer: React.FC = () => {

return (
<div className="flex flex-col w-full items-center mb-2">
<p className="text-xs text-gray-700">
<p className="text-xs text-onSurface">
Powered by NaaVRE / LifeWatch ERIC VLIC (
<Link
href="/about"
Expand Down
2 changes: 1 addition & 1 deletion vre-panel/components/VLAbAssets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const VLabAssets: React.FC<Props> = ({slug, isAuthenticated, token}) => {
<button
className={clsx(
"py-1 px-8 max-h-16",
selected ? "bg-gray-500 text-white" : "text-gray-500 hover:text-black",
selected ? "bg-secondary text-onSecondary" : "bg-surface text-primaryMuted hover:text-black",
)}
>
{tab.title}
Expand Down
10 changes: 5 additions & 5 deletions vre-panel/components/VLabAssets/DataProducts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const DataProducts: React.FC<Props> = ({slug, isAuthenticated, token}) => {
return (
<div>
<button type="button"
className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded cursor-pointer"
className="bg-primary hover:bg-primaryDark text-white font-bold py-2 px-4 rounded cursor-pointer"
onClick={() => Promise.all([fetchAssets()])}>
<svg xmlns="http://www.w3.org/2000/svg" className={clsx("h-5", "w-5", loadingAssets && "animate-spin")}
viewBox="0 0 20 20" fill="currentColor">
Expand All @@ -70,16 +70,16 @@ const DataProducts: React.FC<Props> = ({slug, isAuthenticated, token}) => {
<table className="table-auto bg-white mt-5">
<thead>
<tr>
<th className="bg-blue-200 border text-left px-4 py-2">Title</th>
<th className="bg-blue-200 border text-left px-4 py-2">Description</th>
<th className="bg-primaryContainer border text-left px-4 py-2">Title</th>
<th className="bg-primaryContainer border text-left px-4 py-2">Description</th>
</tr>
</thead>
<tbody>
{assets.map((dataProduct) => {
return (
<tr key={dataProduct['uuid']} className="odd:bg-gray-100">
<tr key={dataProduct['uuid']} className="odd:bg-surfaceContainer">
<td className={"border py-2 px-4 text-left"}>
<a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
<a className="text-primary hover:underline"
target="blank"
href={dataProduct['data_url']}>
{dataProduct['title']}
Expand Down
12 changes: 6 additions & 6 deletions vre-panel/components/VLabAssets/WorkflowRuns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const WorkflowRuns: React.FC<Props> = ({slug, isAuthenticated, token}) => {
return (
<div>
<button type="button"
className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded cursor-pointer"
className="bg-primary hover:bg-primaryDark text-white font-bold py-2 px-4 rounded cursor-pointer"
onClick={() => Promise.all([fetchAssets()])}>
<svg xmlns="http://www.w3.org/2000/svg" className={clsx("h-5", "w-5", loadingAssets && "animate-spin")}
viewBox="0 0 20 20" fill="currentColor">
Expand All @@ -72,18 +72,18 @@ const WorkflowRuns: React.FC<Props> = ({slug, isAuthenticated, token}) => {
<table className="table-auto bg-white mt-5">
<thead>
<tr>
<th className="bg-blue-200 border text-left px-4 py-2">Name</th>
<th className="bg-blue-200 border text-left px-4 py-2">Status</th>
<th className="bg-blue-200 border text-left px-4 py-2">Progress</th>
<th className="bg-primaryContainer border text-left px-4 py-2">Name</th>
<th className="bg-primaryContainer border text-left px-4 py-2">Status</th>
<th className="bg-primaryContainer border text-left px-4 py-2">Progress</th>
</tr>
</thead>
{slug != null ? (
<tbody>
{assets.map((workflow) => {
return (
<tr key={workflow['argo_id']} className="odd:bg-gray-100">
<tr key={workflow['argo_id']} className="odd:bg-surfaceContainer">
<td className={"border text-left py-2 px-4"}>
{/*<a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"*/}
{/*<a className="text-primary hover:underline"*/}
{/* target="blank"*/}
{/* href={workflow['argo_url']}>*/}
{/* {workflow['argo_id']}*/}
Expand Down
2 changes: 1 addition & 1 deletion vre-panel/components/VLabDescription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const VLabDescription: React.FC<Props> = ({slug, isAuthenticated, token}) => {
<>
<p className="text-4xl font-sans">{vlab.title}</p>
<a target="blank" href={vlab.endpoint}>
<button className="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded mt-5">
<button className="bg-primary hover:bg-primaryDark text-onPrimary font-bold py-2 px-4 rounded mt-5">
Launch
</button>
</a>
Expand Down
32 changes: 16 additions & 16 deletions vre-panel/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,24 +41,24 @@ const VLabs = ({}) => {
}, []);

return (
<div className="min-h-screen flex flex-col mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
<div className="min-h-screen flex flex-col mx-auto bg-surfaceContainer">
<Nav/>
<div className="grow">
<div className="container mx-auto space-y-10 py-10">
<div className="max-w-full rounded shadow-lg bg-white p-8">
<h1 className="text-2xl text-gray-800 mb-8">
<div className="max-w-full rounded shadow-lg bg-surface p-8">
<h1 className="text-2xl text-onSurface mb-8">
{paasConfigLoading ? (
<span className="animate-pulse">
<span className="inline-block min-h-[1em] w-3/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
<span className="inline-block min-h-[1em] w-3/12 flex-auto cursor-wait bg-onSurface align-middle opacity-50"></span>
</span>
) : (
paasConfig.title
)}
</h1>
<p className="text-l text-gray-800">
<p className="text-l text-onSurface">
{paasConfigLoading ? (
<span className="animate-pulse">
<span className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-current align-middle opacity-50"></span>
<span className="inline-block min-h-[1em] w-full flex-auto cursor-wait bg-onSurface align-middle opacity-50"></span>
</span>
) : (
paasConfig.description
Expand All @@ -69,7 +69,7 @@ const VLabs = ({}) => {
<p className="mt-4">
<a
href={paasConfig.documentation_url}
className="text-blue-800 hover:underline"
className="text-primary hover:underline"
>
Documentation
</a>
Expand All @@ -79,17 +79,17 @@ const VLabs = ({}) => {
</div>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10'>
{vlabsLoading ? (
<div className="rounded overflow-hidden shadow-lg bg-white animate">
<div className="rounded overflow-hidden shadow-lg bg-surface animate">
<div>
<img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
<div className="font-bold text-l mb-2 bg-gray-300 text-white p-5">
<div className="font-bold text-l mb-2 bg-primaryMuted text-onPrimary p-5">
<p className="animate-pulse">
<span className="inline-block min-h-[1em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
<span className="inline-block min-h-[1em] w-6/12 flex-auto cursor-wait bg-onPrimary align-middle opacity-50"></span>
</p>
</div>
<div className="px-3 py-2">
<p className="text-gray-700 text-base truncate animate-pulse ...">
<span className="inline-block min-h-[0.6em] w-6/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
<p className="text-base truncate animate-pulse ...">
<span className="inline-block min-h-[0.6em] w-6/12 flex-auto cursor-wait bg-onSurface align-middle opacity-50"></span>
</p>
</div>
</div>
Expand All @@ -98,7 +98,7 @@ const VLabs = ({}) => {
vlabs.length > 0 ? (
vlabs.map((vlab: any) => {
return (
<div key={getSlug(vlab.title)} className="rounded overflow-hidden shadow-lg bg-white">
<div key={getSlug(vlab.title)} className="rounded overflow-hidden shadow-lg bg-surface">
<Link
href={{
pathname: '/vlabs/[slug]',
Expand All @@ -107,9 +107,9 @@ const VLabs = ({}) => {
>
<div>
<img className="w-35 h-30 object-cover" src={`${publicRuntimeConfig.staticFolder}/HP-VRES.png`}/>
<div className="font-bold text-l mb-2 bg-blue-500 text-white p-5">{vlab.title}</div>
<div className="font-bold text-l mb-2 bg-primary text-onPrimary p-5">{vlab.title}</div>
<div className="px-3 py-2">
<p className="text-gray-700 line-clamp-2">
<p className="text-onSurface line-clamp-2">
{vlab.description}
</p>
</div>
Expand All @@ -119,7 +119,7 @@ const VLabs = ({}) => {
);
})
) : (
<div className="rounded overflow-hidden shadow-lg bg-white p-5">
<div className="rounded overflow-hidden shadow-lg bg-surface p-5">
No virtual labs found
</div>
)
Expand Down
6 changes: 3 additions & 3 deletions vre-panel/pages/vlabs/[slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ const VLabDetails: React.FC<VLabDetailsProps> = ({token}) => {
const {slug} = router.query;

return (
<div className="min-h-screen flex flex-col mx-auto bg-gradient-to-b from-sky-200 to-orange-300">
<div className="min-h-screen flex flex-col mx-auto bg-surfaceContainer">
<Nav/>
<div className="grow">
<div className="container mx-auto py-10 space-y-4 gap-4">
<div className="rounded shadow-lg bg-white p-8">
<div className="rounded shadow-lg bg-surface p-8">
<VLabDescription slug={slug} isAuthenticated={isAuthenticated} token={token}/>
</div>
<div className="rounded shadow-lg bg-white p-8">
<div className="rounded shadow-lg bg-surface p-8">
<VLAbAssets slug={slug} isAuthenticated={isAuthenticated} token={token}/>
</div>
</div>
Expand Down
16 changes: 16 additions & 0 deletions vre-panel/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,22 @@ module.exports = {
content: [],
theme: {
extend: {
colors: {
primaryMuted: '#666666',
primary: '#0f4e8a',
primaryDark: '#00194B',
onPrimary: '#ffffff',
primaryContainer: '#9AC4FF',
onPrimaryContainer: '#000000',
secondary: '#EA5B2D',
onSecondary: '#ffffff',
secondaryContainer: '#FFBD85',
onSecondaryContainer: '#000000',
surface: '#ffffff',
onSurface: '#333333',
surfaceContainer: '#f2f2f2',
onSurfaceContainer: '#000000',
},
fontFamily: {
sans: ['Titillium Web', 'sans-serif'],
},
Expand Down
12 changes: 6 additions & 6 deletions vre-panel/templates/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ const Nav = () => {
const {paasConfig, paasConfigLoading} = useContext(PaasConfigContext)

return (
<header className="top-0 z-30 w-full px-2 py-4 bg-white sm:px-4 shadow-lg">
<nav className="bg-white border-gray-200 h-10 px-2 sm:px-4 rounded dark:bg-gray-800">
<header className="top-0 z-30 w-full px-2 py-4 bg-surface sm:px-4 shadow-lg">
<nav className="bg-surface border-gray-200 h-10 px-2 sm:px-4 rounded">
<div className="container flex flex-wrap justify-between items-center mx-auto">
<Link href='/' className="flex items-center">
{paasConfigLoading || (
Expand Down Expand Up @@ -47,10 +47,10 @@ const Nav = () => {
>
<Menu.Items
static
className="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
className="absolute right-0 w-56 mt-2 origin-top-right bg-surface border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
>
<div className="px-4 py-3 bg-orange-100">
<p className="text-sm font-medium leading-5 text-gray-900 truncate">
<div className="px-4 py-3 bg-primary text-onPrimary">
<p className="text-sm font-medium leading-5 truncate">
{session?.user?.name}
</p>
</div>
Expand All @@ -76,7 +76,7 @@ const Nav = () => {
</Menu>
) : (
<div>
<button onClick={() => signIn()} className="bg-blue-300 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded">
<button onClick={() => signIn()} className="bg-primary hover:bg-primaryDark text-onPrimary font-bold py-2 px-4 rounded">
Sign In
</button>
</div>
Expand Down

0 comments on commit 029a89b

Please sign in to comment.