Skip to content

Commit

Permalink
improved styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Igor Kedzierawski committed May 8, 2024
1 parent d244508 commit 5b9fd73
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 58 deletions.
4 changes: 2 additions & 2 deletions auth-server/keycloak-theme/themes/corn/account/common.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
id="${name}" name="${id}"
value="${value}"
class=" w-full inline-flex justify-center px-4 py-2 bg-yellow-500 border border-yellow-600
rounded-md text-white transition-colors duration-300 hover:bg-yellow-600 hover:border-yellow-700"
rounded-md text-black transition-colors duration-300 hover:bg-yellow-600 hover:border-yellow-700"
>
<#nested>
</button>
Expand Down Expand Up @@ -154,7 +154,7 @@
<a
href="${href}" id="${id}"
class=" w-full inline-flex justify-center px-4 py-2 bg-yellow-500 border border-yellow-600
rounded-md text-white transition-colors duration-300 hover:bg-yellow-600 hover:border-yellow-700"
rounded-md text-black transition-colors duration-300 hover:bg-yellow-600 hover:border-yellow-700"
>
<#nested>
</a>
Expand Down
2 changes: 1 addition & 1 deletion auth-server/keycloak-theme/themes/corn/account/sessions.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<td class="px-3 py-4">${session.started?datetime}</td>
<td class="px-3 py-4">${session.lastAccess?datetime}</td>
<td class="px-3 py-4">${session.expires?datetime}</td>
<td class="px-3 py-4">
<td class="px-3 py-4 space-y-1">
<#list session.clients as client>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">${client}</span>
</#list>
Expand Down
112 changes: 60 additions & 52 deletions auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,15 @@
</title>
<link rel="icon" href="/resources/jxveb/common/corn/img/corn.png" />
<link rel="stylesheet" href="/resources/jxveb/common/corn/css/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>

<body class="h-screen bg-yellow-400">
<body class="flex flex-col h-screen bg-yellow-400">

<header class="w-full bg-yellowishDark">
<nav class="w-full flex justify-between items-center py-2 px-2">
Expand All @@ -42,70 +48,72 @@
</nav>
</header>

<div class="grid grid-cols-[196px,1fr] gap-4 mx-auto h-screen max-w-[968px]">
<ul class="space-y-2 py-2">
<li>
<@common.ACTIVATABLE_BUTTON href="${url.accountUrl}" id="kc-account" expected="account" actual="${active}">
${msg("account")}
</@common.ACTIVATABLE_BUTTON>
</li>
<#if features.passwordUpdateSupported>
<div class="flex-grow pt-4">
<div class="grid grid-cols-[196px,1fr] gap-4 mx-auto h-full max-w-[968px]">
<ul class="space-y-2 py-4">
<li>
<@common.ACTIVATABLE_BUTTON href="${url.passwordUrl}" id="kc-password" expected="password" actual="${active}">
${msg("password")}
<@common.ACTIVATABLE_BUTTON href="${url.accountUrl}" id="kc-account" expected="account" actual="${active}">
${msg("account")}
</@common.ACTIVATABLE_BUTTON>
</li>
</#if>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.totpUrl}" id="kc-totp" expected="totp" actual="${active}">
${msg("authenticator")}
</@common.ACTIVATABLE_BUTTON>
</li>
<#if features.identityFederation>
<#if features.passwordUpdateSupported>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.passwordUrl}" id="kc-password" expected="password" actual="${active}">
${msg("password")}
</@common.ACTIVATABLE_BUTTON>
</li>
</#if>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.socialUrl}" id="kc-social" expected="social" actual="${active}">
${msg("federatedIdentity")}
<@common.ACTIVATABLE_BUTTON href="${url.totpUrl}" id="kc-totp" expected="totp" actual="${active}">
${msg("authenticator")}
</@common.ACTIVATABLE_BUTTON>
</li>
</#if>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.sessionsUrl}" id="kc-sessions" expected="sessions" actual="${active}">
${msg("sessions")}
</@common.ACTIVATABLE_BUTTON>
</li>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.applicationsUrl}" id="kc-applications" expected="applications" actual="${active}">
${msg("applications")}
</@common.ACTIVATABLE_BUTTON>
</li>
<#if features.log>
<#if features.identityFederation>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.socialUrl}" id="kc-social" expected="social" actual="${active}">
${msg("federatedIdentity")}
</@common.ACTIVATABLE_BUTTON>
</li>
</#if>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.logUrl}" id="kc-log" expected="log" actual="${active}">
${msg("log")}
<@common.ACTIVATABLE_BUTTON href="${url.sessionsUrl}" id="kc-sessions" expected="sessions" actual="${active}">
${msg("sessions")}
</@common.ACTIVATABLE_BUTTON>
</li>
</#if>
<#if realm.userManagedAccessAllowed && features.authorization>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.resourceUrl}" id="kc-authorization" expected="authorization" actual="${active}">
${msg("myResources")}
<@common.ACTIVATABLE_BUTTON href="${url.applicationsUrl}" id="kc-applications" expected="applications" actual="${active}">
${msg("applications")}
</@common.ACTIVATABLE_BUTTON>
</li>
</#if>
</ul>
<#if features.log>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.logUrl}" id="kc-log" expected="log" actual="${active}">
${msg("log")}
</@common.ACTIVATABLE_BUTTON>
</li>
</#if>
<#if realm.userManagedAccessAllowed && features.authorization>
<li>
<@common.ACTIVATABLE_BUTTON href="${url.resourceUrl}" id="kc-authorization" expected="authorization" actual="${active}">
${msg("myResources")}
</@common.ACTIVATABLE_BUTTON>
</li>
</#if>
</ul>

<div class="content-area bg-yellowishDark text-white h-full px-6 py-2 border border-gray-300 border-solid border-x-2 border-y-0">
<#if message?has_content>
<div>
<#if message.type=='success' >
<span class="text-green-500">${kcSanitize(message.summary)?no_esc}</span>
</#if>
<#if message.type=='error' >
<span class="text-red-500">${kcSanitize(message.summary)?no_esc}</span>
</#if>
</div>
</#if>
<#nested "content">
<div class="content-area bg-yellowishDark text-white h-full px-6 py-4 border border-gray-300 border-solid border-2 rounded-lg">
<#if message?has_content>
<div>
<#if message.type=='success' >
<span class="text-green-500">${kcSanitize(message.summary)?no_esc}</span>
</#if>
<#if message.type=='error' >
<span class="text-red-500">${kcSanitize(message.summary)?no_esc}</span>
</#if>
</div>
</#if>
<#nested "content">
</div>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion auth-server/keycloak-theme/themes/corn/login/common.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
tabindex="${tabindex}" type="${type}"
id="${name}" name="${id}"
class=" w-full inline-flex justify-center px-4 py-2 bg-yellow-500 border border-yellow-600
rounded-md text-white transition-colors duration-300 hover:bg-yellow-600 hover:border-yellow-700"
rounded-md text-black transition-colors duration-300 hover:bg-yellow-600 hover:border-yellow-700"
>
<#nested>
</button>
Expand Down
9 changes: 7 additions & 2 deletions auth-server/keycloak-theme/themes/corn/login/tailwind-template.ftl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<#macro mainLayout>
<!DOCTYPE html>
<html class="">

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Expand All @@ -16,7 +15,13 @@
</title>
<link rel="icon" href="/resources/jxveb/common/corn/img/corn.png" />
<link rel="stylesheet" href="/resources/jxveb/common/corn/css/styles.css" />
</head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>

<body class="h-screen flex flex-col bg-yellow-400">
<div class="flex">
Expand Down

0 comments on commit 5b9fd73

Please sign in to comment.