ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More theming improvements

Browse Source
This commit is contained in:
Rotimi Best
2023-08-24 09:12:10 +01:00
parent a422f2f290
commit 6177c33d4f
4 changed files with 164 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.postcss
+150
View File
@@ -104,6 +104,9 @@ code {
.theme-rose .text-primary-50 {
color: #fff1f2;
}
.theme-rose .border-primary-50 {
border-color: #fff1f2;
}
.theme-rose .bg-primary-100 {
background-color: #ffe4e7;
@@ -111,6 +114,9 @@ code {
.theme-rose .text-primary-100 {
color: #ffe4e7;
}
.theme-rose .border-primary-100 {
border-color: #ffe4e7;
}
.theme-rose .bg-primary-200 {
background-color: #fecdd4;
@@ -118,6 +124,9 @@ code {
.theme-rose .text-primary-200 {
color: #fecdd4;
}
.theme-rose .border-primary-200 {
border-color: #fecdd4;
}
.theme-rose .bg-primary-300 {
background-color: #fda4b2;
@@ -125,6 +134,9 @@ code {
.theme-rose .text-primary-300 {
color: #fda4b2;
}
.theme-rose .border-primary-300 {
border-color: #fda4b2;
}
.theme-rose .bg-primary-400 {
background-color: #fb7189;
@@ -132,6 +144,9 @@ code {
.theme-rose .text-primary-400 {
color: #fb7189;
}
.theme-rose .border-primary-400 {
border-color: #fb7189;
}
.theme-rose .bg-primary-500 {
background-color: #f43f63;
@@ -139,6 +154,9 @@ code {
.theme-rose .text-primary-500 {
color: #f43f63;
}
.theme-rose .border-primary-500 {
border-color: #f43f63;
}
.theme-rose .bg-primary-600 {
background-color: #e21d4e;
@@ -146,6 +164,9 @@ code {
.theme-rose .text-primary-600 {
color: #e21d4e;
}
.theme-rose .border-primary-600 {
border-color: #e21d4e;
}
.theme-rose .bg-primary-700 {
background-color: #be1241;
@@ -153,6 +174,9 @@ code {
.theme-rose .text-primary-700 {
color: #be1241;
}
.theme-rose .border-primary-700 {
border-color: #be1241;
}
.theme-rose .bg-primary-800 {
background-color: #9f123d;
@@ -160,6 +184,9 @@ code {
.theme-rose .text-primary-800 {
color: #9f123d;
}
.theme-rose .border-primary-800 {
border-color: #9f123d;
}
.theme-rose .bg-primary-900 {
background-color: #88133a;
@@ -167,6 +194,9 @@ code {
.theme-rose .text-primary-900 {
color: #88133a;
}
.theme-rose .border-primary-900 {
border-color: #88133a;
}
/**
Blue Theme
@@ -177,6 +207,9 @@ code {
.text-primary-50 {
color: #eff6ff;
}
.border-primary-50 {
border-color: #eff6ff;
}
.bg-primary-100 {
background-color: #dbeafe;
@@ -184,6 +217,9 @@ code {
.text-primary-100 {
color: #dbeafe;
}
.border-primary-100 {
border-color: #dbeafe;
}
.bg-primary-200 {
background-color: #bfdafe;
@@ -191,6 +227,9 @@ code {
.text-primary-200 {
color: #bfdafe;
}
.border-primary-200 {
border-color: #bfdafe;
}
.bg-primary-300 {
background-color: #92c4fe;
@@ -198,6 +237,9 @@ code {
.text-primary-300 {
color: #92c4fe;
}
.border-primary-300 {
border-color: #92c4fe;
}
.bg-primary-400 {
background-color: #5fa3fb;
@@ -205,6 +247,9 @@ code {
.text-primary-400 {
color: #5fa3fb;
}
.border-primary-400 {
border-color: #5fa3fb;
}
.bg-primary-500 {
background-color: #3a7ff7;
@@ -212,6 +257,9 @@ code {
.text-primary-500 {
color: #3a7ff7;
}
.border-primary-500 {
border-color: #3a7ff7;
}
.bg-primary-600 {
background-color: #2460ec;
@@ -219,6 +267,9 @@ code {
.text-primary-600 {
color: #2460ec;
}
.border-primary-600 {
border-color: #2460ec;
}
.bg-primary-700 {
background-color: #1d4ee2;
@@ -226,6 +277,9 @@ code {
.text-primary-700 {
color: #1d4ee2;
}
.border-primary-700 {
border-color: #1d4ee2;
}
.bg-primary-800 {
background-color: #1d3eb0;
@@ -233,6 +287,9 @@ code {
.text-primary-800 {
color: #1d3eb0;
}
.border-primary-800 {
border-color: #1d3eb0;
}
.bg-primary-900 {
background-color: #1d398b;
@@ -240,6 +297,9 @@ code {
.text-primary-900 {
color: #1d398b;
}
.border-primary-900 {
border-color: #1d398b;
}
/**
Green Theme
@@ -250,6 +310,9 @@ code {
.theme-green .text-primary-50 {
color: #effef0;
}
.theme-green .border-primary-50 {
border-color: #effef0;
}
.theme-green .bg-primary-100 {
background-color: #d9ffdc;
@@ -257,6 +320,9 @@ code {
.theme-green .text-primary-100 {
color: #d9ffdc;
}
.theme-green .border-primary-100 {
border-color: #d9ffdc;
}
.theme-green .bg-primary-200 {
background-color: #b6fcbc;
@@ -264,6 +330,9 @@ code {
.theme-green .text-primary-200 {
color: #b6fcbc;
}
.theme-green .border-primary-200 {
border-color: #b6fcbc;
}
.theme-green .bg-primary-300 {
background-color: #7df88a;
@@ -271,6 +340,9 @@ code {
.theme-green .text-primary-300 {
color: #7df88a;
}
.theme-green .border-primary-300 {
border-color: #7df88a;
}
.theme-green .bg-primary-400 {
background-color: #3deb51;
@@ -278,6 +350,9 @@ code {
.theme-green .text-primary-400 {
color: #3deb51;
}
.theme-green .border-primary-400 {
border-color: #3deb51;
}
.theme-green .bg-primary-500 {
background-color: #12bf26;
@@ -285,6 +360,9 @@ code {
.theme-green .text-primary-500 {
color: #12bf26;
}
.theme-green .border-primary-500 {
border-color: #12bf26;
}
.theme-green .bg-primary-600 {
background-color: #0aaf1d;
@@ -292,6 +370,9 @@ code {
.theme-green .text-primary-600 {
color: #0aaf1d;
}
.theme-green .border-primary-600 {
border-color: #0aaf1d;
}
.theme-green .bg-primary-700 {
background-color: #0c891b;
@@ -299,6 +380,9 @@ code {
.theme-green .text-primary-700 {
color: #0c891b;
}
.theme-green .border-primary-700 {
border-color: #0c891b;
}
.theme-green .bg-primary-800 {
background-color: #0f6c1b;
@@ -306,6 +390,9 @@ code {
.theme-green .text-primary-800 {
color: #0f6c1b;
}
.theme-green .border-primary-800 {
border-color: #0f6c1b;
}
.theme-green .bg-primary-900 {
background-color: #0f581a;
@@ -313,6 +400,9 @@ code {
.theme-green .text-primary-900 {
color: #0f581a;
}
.theme-green .border-primary-900 {
border-color: #0f581a;
}
/**
Orange Theme
@@ -323,6 +413,9 @@ code {
.theme-orange .text-primary-50 {
color: #fff8ec;
}
.theme-orange .border-primary-50 {
border-color: #fff8ec;
}
.theme-orange .bg-primary-100 {
background-color: #fff0d3;
@@ -330,6 +423,9 @@ code {
.theme-orange .text-primary-100 {
color: #fff0d3;
}
.theme-orange .border-primary-100 {
border-color: #fff0d3;
}
.theme-orange .bg-primary-200 {
background-color: #ffdca5;
@@ -337,6 +433,9 @@ code {
.theme-orange .text-primary-200 {
color: #ffdca5;
}
.theme-orange .border-primary-200 {
border-color: #ffdca5;
}
.theme-orange .bg-primary-300 {
background-color: #ffc26d;
@@ -344,6 +443,9 @@ code {
.theme-orange .text-primary-300 {
color: #ffc26d;
}
.theme-orange .border-primary-300 {
border-color: #ffc26d;
}
.theme-orange .bg-primary-400 {
background-color: #ff9d32;
@@ -351,6 +453,9 @@ code {
.theme-orange .text-primary-400 {
color: #ff9d32;
}
.theme-orange .border-primary-400 {
border-color: #ff9d32;
}
.theme-orange .bg-primary-500 {
background-color: #ff7f0a;
@@ -358,6 +463,9 @@ code {
.theme-orange .text-primary-500 {
color: #ff7f0a;
}
.theme-orange .border-primary-500 {
border-color: #ff7f0a;
}
.theme-orange .bg-primary-600 {
background-color: #ff6600;
@@ -365,6 +473,9 @@ code {
.theme-orange .text-primary-600 {
color: #ff6600;
}
.theme-orange .border-primary-600 {
border-color: #ff6600;
}
.theme-orange .bg-primary-700 {
background-color: #cc4902;
@@ -372,6 +483,9 @@ code {
.theme-orange .text-primary-700 {
color: #cc4902;
}
.theme-orange .border-primary-700 {
border-color: #cc4902;
}
.theme-orange .bg-primary-800 {
background-color: #a1390b;
@@ -379,6 +493,9 @@ code {
.theme-orange .text-primary-800 {
color: #a1390b;
}
.theme-orange .border-primary-800 {
border-color: #a1390b;
}
.theme-orange .bg-primary-900 {
background-color: #82310c;
@@ -386,6 +503,9 @@ code {
.theme-orange .text-primary-900 {
color: #82310c;
}
.theme-orange .border-primary-900 {
border-color: #82310c;
}
/**
Violet Theme
@@ -396,6 +516,9 @@ code {
.theme-violet .text-primary-50 {
color: #fff2fe;
}
.theme-violet .border-primary-50 {
border-color: #fff2fe;
}
.theme-violet .bg-primary-100 {
background-color: #ffe3fe;
@@ -403,6 +526,9 @@ code {
.theme-violet .text-primary-100 {
color: #ffe3fe;
}
.theme-violet .border-primary-100 {
border-color: #ffe3fe;
}
.theme-violet .bg-primary-200 {
background-color: #ffc6fe;
@@ -410,6 +536,9 @@ code {
.theme-violet .text-primary-200 {
color: #ffc6fe;
}
.theme-violet .border-primary-200 {
border-color: #ffc6fe;
}
.theme-violet .bg-primary-300 {
background-color: #ff99f7;
@@ -417,6 +546,9 @@ code {
.theme-violet .text-primary-300 {
color: #ff99f7;
}
.theme-violet .border-primary-300 {
border-color: #ff99f7;
}
.theme-violet .bg-primary-400 {
background-color: #ff5df2;
@@ -424,6 +556,9 @@ code {
.theme-violet .text-primary-400 {
color: #ff5df2;
}
.theme-violet .border-primary-400 {
border-color: #ff5df2;
}
.theme-violet .bg-primary-500 {
background-color: #ff21f5;
@@ -431,6 +566,9 @@ code {
.theme-violet .text-primary-500 {
color: #ff21f5;
}
.theme-violet .border-primary-500 {
border-color: #ff21f5;
}
.theme-violet .bg-primary-600 {
background-color: #fb00ff;
@@ -438,6 +576,9 @@ code {
.theme-violet .text-primary-600 {
color: #fb00ff;
}
.theme-violet .border-primary-600 {
border-color: #fb00ff;
}
.theme-violet .bg-primary-700 {
background-color: #cf00ce;
@@ -445,6 +586,9 @@ code {
.theme-violet .text-primary-700 {
color: #cf00ce;
}
.theme-violet .border-primary-700 {
border-color: #cf00ce;
}
.theme-violet .bg-primary-800 {
background-color: #a900a6;
@@ -452,6 +596,9 @@ code {
.theme-violet .text-primary-800 {
color: #a900a6;
}
.theme-violet .border-primary-800 {
border-color: #a900a6;
}
.theme-violet .bg-primary-900 {
background-color: #890684;
@@ -459,3 +606,6 @@ code {
.theme-violet .text-primary-900 {
color: #890684;
}
.theme-violet .border-primary-900 {
border-color: #890684;
}
src/lib/components/AuthUI/index.svelte
+2 -2
View File
@@ -36,7 +36,7 @@
<div class="container border border-gray bg-white dark:bg-gray-800">
<div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
{#if !showOnlyContent || showLogo}
<div class="flex items-center justify-center w-full pt-2">
<div class="flex flex-col items-center justify-center w-full pt-2">
<Avatar
src={$currentOrg.avatar_url ? $currentOrg.avatar_url : '/logo-192.png'}
name={$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
@@ -45,7 +45,7 @@
height="h-10"
className="mr-2"
/>
<h4 class="dark:text-white text-xl">
<h4 class="dark:text-white text-xl mt-0">
{$currentOrg.name ? $currentOrg.name : 'ClassroomIO'}
</h4>
</div>
src/lib/components/Avatar/index.svelte
+1 -1
View File
@@ -7,4 +7,4 @@
export let height = 'h-10';
</script>
<img alt={name} {src} class="{className} {width} {height} {shape} bg-primary-100" />
<img alt={name} {src} class="{className} {width} {height} {shape}" />
src/lib/components/PageNav/index.svelte
+11 -1
View File
@@ -63,12 +63,22 @@
{#if Array.isArray(navItems) && navItems.length}
<div class="flex justify-evenly items-center">
{#each navItems as item}
<a class="mr-5 text-sm flex items-center {item.isActive && 'active'}" href={item.href}>
<a
class="mr-5 pb-2 text-sm flex items-center relative {item.isActive
? 'text-primary-700'
: 'dark:bg-gray-500 dark:text-white'}"
href={item.href}
>
{item.label}
{#if typeof item.badgeValue === 'number'}
<Chip value={item.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
{/if}
<span
class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {item.isActive
? 'w-full'
: 'w-0'}"
/>
</a>
{/each}
{#if addButtonHref}