fix: tooltip colors

This commit is contained in:
Andras Bacsai
2022-08-10 12:02:47 +00:00
parent a9ef490988
commit 9eeadd5882
14 changed files with 42 additions and 40 deletions

View File

@@ -18,6 +18,7 @@
</div> </div>
<div <div
class:tooltip-right={dataTooltip} class:tooltip-right={dataTooltip}
class:tooltip-primary={dataTooltip}
class:tooltip={dataTooltip} class:tooltip={dataTooltip}
class:text-center={isCenter} class:text-center={isCenter}
data-tip={dataTooltip} data-tip={dataTooltip}

View File

@@ -82,7 +82,8 @@
<button <button
disabled={updateStatus.success === false} disabled={updateStatus.success === false}
on:click={update} on:click={update}
class="icons tooltip-right bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105" class="icons tooltip tooltip-right tooltip-primary bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
data-tip="Update available!"
> >
{#if updateStatus.loading} {#if updateStatus.loading}
<svg <svg

View File

@@ -126,7 +126,7 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/" href="/"
class="icons tooltip tooltip-right bg-coolgray-200 hover:text-white" class="icons tooltip tooltip-right tooltip-primary bg-coolgray-200 hover:text-white"
class:text-white={$page.url.pathname === '/'} class:text-white={$page.url.pathname === '/'}
class:bg-coolgray-500={$page.url.pathname === '/'} class:bg-coolgray-500={$page.url.pathname === '/'}
data-tip="Dashboard" data-tip="Dashboard"
@@ -153,7 +153,7 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/applications" href="/applications"
class="icons tooltip tooltip-right bg-coolgray-200" class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class:text-applications={$page.url.pathname.startsWith('/applications') || class:text-applications={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')} $page.url.pathname.startsWith('/new/application')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') || class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
@@ -181,7 +181,7 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/sources" href="/sources"
class="icons tooltip tooltip-right bg-coolgray-200" class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class:text-sources={$page.url.pathname.startsWith('/sources') || class:text-sources={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')} $page.url.pathname.startsWith('/new/source')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') || class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
@@ -210,7 +210,7 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/destinations" href="/destinations"
class="icons tooltip tooltip-right bg-coolgray-200" class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class:text-destinations={$page.url.pathname.startsWith('/destinations') || class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')} $page.url.pathname.startsWith('/new/destination')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') || class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
@@ -245,7 +245,7 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/databases" href="/databases"
class="icons tooltip tooltip-right bg-coolgray-200" class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class:text-databases={$page.url.pathname.startsWith('/databases') || class:text-databases={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')} $page.url.pathname.startsWith('/new/database')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') || class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
@@ -271,7 +271,7 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/services" href="/services"
class="icons tooltip tooltip-right bg-coolgray-200" class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class:text-services={$page.url.pathname.startsWith('/services') || class:text-services={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')} $page.url.pathname.startsWith('/new/service')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/services') || class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
@@ -300,7 +300,7 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/iam" href="/iam"
class="icons tooltip tooltip-right bg-coolgray-200" class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class:text-iam={$page.url.pathname.startsWith('/iam')} class:text-iam={$page.url.pathname.startsWith('/iam')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')} class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
data-tip="IAM" data-tip="IAM"
@@ -324,7 +324,7 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'} href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class="icons tooltip tooltip-right bg-coolgray-200" class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200"
class:text-settings={$page.url.pathname.startsWith('/settings')} class:text-settings={$page.url.pathname.startsWith('/settings')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')} class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
data-tip="Settings" data-tip="Settings"
@@ -348,7 +348,7 @@
</a> </a>
<div <div
class="icons tooltip tooltip-right bg-coolgray-200 hover:text-error" class="icons tooltip tooltip-primary tooltip-right bg-coolgray-200 hover:text-error"
data-tip="Logout" data-tip="Logout"
on:click={logout} on:click={logout}
> >

View File

@@ -179,7 +179,7 @@
{#if $status.application.isExited} {#if $status.application.isExited}
<a <a
href={!$disabledButton ? `/applications/${id}/logs` : null} href={!$disabledButton ? `/applications/${id}/logs` : null}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-error" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-error"
data-tip="Application exited with an error!" data-tip="Application exited with an error!"
sveltekit:prefetch sveltekit:prefetch
> >
@@ -230,7 +230,7 @@
on:click={stopApplication} on:click={stopApplication}
type="submit" type="submit"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-error" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-error"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('application.stop_application') ? $t('application.stop_application')
: $t('application.permission_denied_stop_application')} : $t('application.permission_denied_stop_application')}
@@ -255,7 +255,7 @@
type="submit" type="submit"
disabled={$disabledButton || !isQueueActive} disabled={$disabledButton || !isQueueActive}
class:hover:text-green-500={isQueueActive} class:hover:text-green-500={isQueueActive}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? isQueueActive ? isQueueActive
? 'Rebuild application' ? 'Rebuild application'
@@ -285,7 +285,7 @@
<button <button
type="submit" type="submit"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-success" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-success"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? 'Deploy' ? 'Deploy'
: 'You do not have permission to deploy application.'} : 'You do not have permission to deploy application.'}
@@ -317,7 +317,7 @@
> >
<button <button
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip="Configurations" data-tip="Configurations"
> >
<svg <svg
@@ -383,7 +383,7 @@
> >
<button <button
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip="Persistent Storages" data-tip="Persistent Storages"
> >
<svg <svg
@@ -412,7 +412,7 @@
> >
<button <button
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip="Previews" data-tip="Previews"
> >
<svg <svg
@@ -444,7 +444,7 @@
> >
<button <button
disabled={$disabledButton || !$status.application.isRunning} disabled={$disabledButton || !$status.application.isRunning}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip={$t('application.logs')} data-tip={$t('application.logs')}
> >
<svg <svg
@@ -475,7 +475,7 @@
> >
<button <button
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip="Build Logs" data-tip="Build Logs"
> >
<svg <svg

View File

@@ -109,7 +109,7 @@
<div class="flex justify-end sticky top-0 p-1 mx-1"> <div class="flex justify-end sticky top-0 p-1 mx-1">
<button <button
on:click={followBuild} on:click={followBuild}
class="bg-transparent tooltip tooltip-bottom hover:text-green-500 hover:bg-coolgray-500" class="bg-transparent tooltip tooltip-primary tooltip-bottom hover:text-green-500 hover:bg-coolgray-500"
data-tip="Follow logs" data-tip="Follow logs"
class:text-green-500={followingBuild} class:text-green-500={followingBuild}
> >
@@ -134,7 +134,7 @@
<button <button
on:click={cancelBuild} on:click={cancelBuild}
class:animation-spin={cancelInprogress} class:animation-spin={cancelInprogress}
class="bg-transparent hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-bottom" class="bg-transparent hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-primary tooltip-bottom"
data-tip="Cancel build" data-tip="Cancel build"
> >
{#if cancelInprogress} {#if cancelInprogress}

View File

@@ -143,7 +143,7 @@
on:click={() => loadBuild(build.id)} on:click={() => loadBuild(build.id)}
class:rounded-tr={index === 0} class:rounded-tr={index === 0}
class:rounded-br={index === builds.length - 1} class:rounded-br={index === builds.length - 1}
class="tooltip tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl" class="tooltip tooltip-primary tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
class:bg-coolgray-400={buildId === build.id} class:bg-coolgray-400={buildId === build.id}
class:border-red-500={build.status === 'failed'} class:border-red-500={build.status === 'failed'}
class:border-green-500={build.status === 'success'} class:border-green-500={build.status === 'success'}

View File

@@ -147,7 +147,7 @@
<div class="flex justify-end sticky top-0 p-1 mx-1"> <div class="flex justify-end sticky top-0 p-1 mx-1">
<button <button
on:click={followBuild} on:click={followBuild}
class="bg-transparent tooltip tooltip-bottom" class="bg-transparent tooltip tooltip-primary tooltip-bottom"
data-tip="Follow logs" data-tip="Follow logs"
class:text-green-500={followingLogs} class:text-green-500={followingLogs}
> >

View File

@@ -144,7 +144,7 @@
{#if $status.database.isExited} {#if $status.database.isExited}
<a <a
href={!$disabledButton ? `/databases/${id}/logs` : null} href={!$disabledButton ? `/databases/${id}/logs` : null}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-red-500 tooltip-error" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
data-tip="Service exited with an error!" data-tip="Service exited with an error!"
sveltekit:prefetch sveltekit:prefetch
> >
@@ -220,7 +220,7 @@
on:click={startDatabase} on:click={startDatabase}
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-green-500" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('database.start_database') ? $t('database.start_database')
: $t('database.permission_denied_start_database')} : $t('database.permission_denied_start_database')}
@@ -285,7 +285,7 @@
> >
<button <button
disabled={!$status.database.isRunning} disabled={!$status.database.isRunning}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip={$t('database.logs')} data-tip={$t('database.logs')}
> >
<svg <svg
@@ -312,7 +312,7 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('database.delete_database') ? $t('database.delete_database')
: $t('database.permission_denied_delete_database')}><DeleteIcon /></button : $t('database.permission_denied_delete_database')}><DeleteIcon /></button

View File

@@ -130,7 +130,7 @@
<div class="flex justify-end sticky top-0 p-1 mx-1"> <div class="flex justify-end sticky top-0 p-1 mx-1">
<button <button
on:click={followBuild} on:click={followBuild}
class="bg-transparent tooltip tooltip-bottom" class="bg-transparent tooltip tooltip-primary tooltip-bottom"
data-tip="Follow logs" data-tip="Follow logs"
class:text-green-500={followingLogs} class:text-green-500={followingLogs}
> >

View File

@@ -91,7 +91,7 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin && isDestinationDeletable} disabled={!$appSession.isAdmin && isDestinationDeletable}
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable} class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
class="icons tooltip tooltip-left bg-transparent text-sm" class="icons tooltip tooltip-primary tooltip-left bg-transparent text-sm"
class:text-stone-600={!isDestinationDeletable} class:text-stone-600={!isDestinationDeletable}
data-tip={deletable()}><DeleteIcon /></button data-tip={deletable()}><DeleteIcon /></button
> >

View File

@@ -52,7 +52,7 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons tooltip tooltip-left bg-transparent text-sm" class="icons tooltip tooltip-primary tooltip-left bg-transparent text-sm"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? 'Delete' ? 'Delete'
: $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button : $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button

View File

@@ -177,7 +177,7 @@
{#if $status.service.isExited} {#if $status.service.isExited}
<a <a
href={!$disabledButton ? `/services/${id}/logs` : null} href={!$disabledButton ? `/services/${id}/logs` : null}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-red-500 tooltip-error" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
data-tip="Service exited with an error!" data-tip="Service exited with an error!"
sveltekit:prefetch sveltekit:prefetch
> >
@@ -228,7 +228,7 @@
on:click={stopService} on:click={stopService}
type="submit" type="submit"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-red-500" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('service.stop_service') ? $t('service.stop_service')
: $t('service.permission_denied_stop_service')} : $t('service.permission_denied_stop_service')}
@@ -253,7 +253,7 @@
on:click={startService} on:click={startService}
type="submit" type="submit"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-green-500" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('service.start_service') ? $t('service.start_service')
: $t('service.permission_denied_start_service')} : $t('service.permission_denied_start_service')}
@@ -283,7 +283,7 @@
class:bg-coolgray-500={$page.url.pathname === `/services/${id}`} class:bg-coolgray-500={$page.url.pathname === `/services/${id}`}
> >
<button <button
class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm disabled:text-red-500"
data-tip={$t('application.configurations')} data-tip={$t('application.configurations')}
> >
<svg <svg
@@ -317,7 +317,7 @@
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`} class:bg-coolgray-500={$page.url.pathname === `/services/${id}/secrets`}
> >
<button <button
class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm disabled:text-red-500"
data-tip={$t('application.secret')} data-tip={$t('application.secret')}
> >
<svg <svg
@@ -347,7 +347,7 @@
class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`} class:bg-coolgray-500={$page.url.pathname === `/services/${id}/storages`}
> >
<button <button
class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm disabled:text-red-500"
data-tip="Persistent Storage" data-tip="Persistent Storage"
> >
<svg <svg
@@ -377,7 +377,7 @@
> >
<button <button
disabled={!$status.service.isRunning} disabled={!$status.service.isRunning}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip={$t('service.logs')} data-tip={$t('service.logs')}
> >
<svg <svg
@@ -405,7 +405,7 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-primary tooltip-bottom text-sm"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('service.delete_service') ? $t('service.delete_service')
: $t('service.permission_denied_delete_service')}><DeleteIcon /></button : $t('service.permission_denied_delete_service')}><DeleteIcon /></button

View File

@@ -127,7 +127,7 @@
<div class="flex justify-end sticky top-0 p-1 mx-1"> <div class="flex justify-end sticky top-0 p-1 mx-1">
<button <button
on:click={followBuild} on:click={followBuild}
class="bg-transparent tooltip tooltip-bottom" class="bg-transparent tooltip tooltip-primary tooltip-bottom"
data-tip="Follow logs" data-tip="Follow logs"
class:text-green-500={followingLogs} class:text-green-500={followingLogs}
> >

View File

@@ -59,7 +59,7 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons tooltip tooltip-bottom bg-transparent text-sm" class="icons tooltip tooltip-primary tooltip-bottom bg-transparent text-sm"
data-tip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('source.delete_git_source') ? $t('source.delete_git_source')
: $t('source.permission_denied')}><DeleteIcon /></button : $t('source.permission_denied')}><DeleteIcon /></button