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

CLASSROOMIO-T-127: Theming configuration

Browse Source 
CLASSROOMIO-T-127: Add 4 themes configurations into the app

Clean up


Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-51
Merged-by: Best Admin <[email protected]>
This commit is contained in:
Rotimi Best
2023-08-20 19:08:48 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 910d9c50a9
commit f39a0cee4b
75 changed files with 709 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Org/Community/DeleteCommentModal.svelte
+3 -10
View File
@@ -8,16 +8,9 @@
export let open = false;
</script>
<Modal
onClose={() => (open = false)}
bind:open
width="w-96"
modalHeading="Delete comment"
>
<Modal onClose={() => (open = false)} bind:open width="w-96" modalHeading="Delete comment">
<div>
<h1 class="dark:text-white text-lg">
Are you sure you want to delete this comment?
</h1>
<h1 class="dark:text-white text-lg">Are you sure you want to delete this comment?</h1>
<div class="mt-5 flex items-center justify-between">
<PrimaryButton
@@ -28,7 +21,7 @@
/>
<PrimaryButton
className="px-6 py-3"
variant={VARIANTS.CONTAINED_DANGER}
variant={VARIANTS.CONTAINED}
label="Yes, delete"
onClick={onDelete}
/>
src/lib/components/Org/LandingPage/index.svelte
+10 -10
View File
@@ -145,15 +145,15 @@
<div class="absolute h-[80vh] top-0 w-full opacity-80 z-10 bg-white" />
{#if video}
<div class="flex items-center justify-center">
<div class="flex items-center justify-center h-full">
<div
class="md:w-11/12 lg:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row z-20 relative"
>
<!-- Course Description -->
<div class="md:w-2/5 w-11/12 py-10 flex flex-col items-start mr-3">
<p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
<p class=" text-primary-600 text-2xl font-semibold">Coding Dojo</p>
<h1 class="text-4xl md:text-5xl lg:text-6xl my-4 font-bold">
Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
Web Developement Courses for <br /><span class="text-primary-600">Everyone</span>
</h1>
<p class="text-md mb-6 text-xl">
Practical project-based courses that are easy to understand and straight to the point
@@ -179,9 +179,9 @@
{:else}
<div class="w-full h-full flex items-center justify-center md:flex-row z-20 relative">
<div class="max-w-[600px] mx-auto w-11/12 py-10 flex flex-col items-center">
<p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
<p class=" text-primary-600 text-2xl font-semibold">Coding Dojo</p>
<h1 class="text-4xl md:text-6xl text-center my-4 font-bold">
Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
Web Developement Courses for <br /><span class="text-primary-600">Everyone</span>
</h1>
<p class="text-md mb-6 text-center text-xl">
Practical project-based courses that are easy to understand and straight to the point
@@ -227,7 +227,7 @@
<div class="w-full">
<div class="max-w-[500px] mx-auto w-11/12 py-10">
<h1 class="text-5xl text-center my-4 font-bold">
Explore our <span class="text-blue-600">Courses</span>
Explore our <span class="text-primary-600">Courses</span>
</h1>
<p class="text-md text-center">
Find courses you will love from best teachers all over the world🌎.
@@ -297,11 +297,11 @@
</section>
<!-- Contact Section-->
<section id="contact" transition:fade class="my-10 w-full bg-blue-50">
<section id="contact" transition:fade class="my-10 w-full bg-primary-50">
<div class="mx-auto max-w-6xl w-full">
<div class="max-w-[500px] mx-auto w-11/12 py-10">
<h1 class="text-5xl text-center my-4 font-bold">
Have you got any <span class="text-blue-600">Question?</span>
Have you got any <span class="text-primary-600">Question?</span>
</h1>
<p class="text-md text-center">Reach out to us with any question you might have.</p>
</div>
@@ -393,7 +393,7 @@
<!-- Waitlist Section -->
<section id="waitlist" transition:fade class="my-10 mx-auto max-w-6xl w-[95%]">
<div
class="bg-blue-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
class="bg-primary-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
>
<div class="w-full md:w-[65%] md:mr-4">
<h1 class="text-4xl font-bold mb-5 mt-0 text-white">Join our mailing list</h1>
@@ -474,7 +474,7 @@
</ul>
<p class="text-center mt-5">
Powered by
<a class="text-blue-600 underline" href="https://classroomio.com" target="_blank"
<a class="text-primary-600 underline" href="https://classroomio.com" target="_blank"
>ClassroomIO</a
>
</p>
src/lib/components/Org/Quiz/DeleteModal.svelte
+3 -6
View File
@@ -12,15 +12,12 @@
...m,
open: false,
id: null,
isQuestion: false,
isQuestion: false
}));
}
async function deleteQuiz() {
const { data, error } = await supabase
.from('quiz')
.delete()
.match({ id: $deleteModal.id });
const { data, error } = await supabase.from('quiz').delete().match({ id: $deleteModal.id });
console.log('data', data);
console.log('error', error);
@@ -53,7 +50,7 @@
<div class="mt-5">
<PrimaryButton
className="px-6 py-3"
variant={VARIANTS.CONTAINED_DANGER}
variant={VARIANTS.CONTAINED}
label="Delete"
onClick={() => {
if ($deleteModal.isQuestion) {
src/lib/components/Org/Quiz/Play/Header/CircleContent.svelte
+3 -3
View File
@@ -12,18 +12,18 @@
css: (t) => `
${slideTrans.css(t)}
opacity: ${t};
`,
`
};
}
</script>
<div class="circle flex items-center flex-col justify-center {className}">
{#key value}
<h3 class="text-blue-600" transition:fadeSlide={{ duration: 500 }}>
<h3 class="text-primary-600" transition:fadeSlide={{ duration: 500 }}>
{value}
</h3>
{/key}
<p class="text-blue-600 text-md">{label}</p>
<p class="text-primary-600 text-md">{label}</p>
</div>
<style>
src/lib/components/Org/Settings/OrgSettings.svelte
+84 -30
View File
@@ -13,29 +13,50 @@
let avatar;
let loading = false;
const themes = {
rose: 'theme-rose',
green: 'theme-green',
orange: 'theme-orange',
violet: 'theme-violet',
default: ''
};
function handleChangeTheme(t = '') {
return async () => {
document.body.className = document.body.className
.split(' ')
.filter((c) => !c.includes('theme'))
.join(' ')
.concat(!!t ? ' ' : '', t);
$currentOrg.theme = t;
const res = await supabase
.from('organization')
.update({ theme: t })
.match({ id: $currentOrg.id });
console.log('Update theme', res);
};
}
async function handleUpdate() {
try {
loading = true;
const updates = {
name: $currentOrg.name,
name: $currentOrg.name
};
if (avatar) {
const filename = `user/${$currentOrg.name + Date.now()}.webp`;
const { data } = await supabase.storage
.from('avatars')
.upload(filename, avatar, {
cacheControl: '3600',
upsert: false,
});
const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
cacheControl: '3600',
upsert: false
});
if (data && data.Key) {
const { publicURL } = supabase.storage
.from('avatars')
.getPublicUrl(filename);
const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename);
updates.avatar_url = publicURL;
$currentOrg.avatar_url = publicURL;
@@ -50,7 +71,7 @@
currentOrg.update((_currentOrg) => ({
..._currentOrg,
...updates,
...updates
}));
$snackbarStore.open = true;
$snackbarStore.message = 'Update successful';
@@ -78,15 +99,9 @@
<Grid class="border-c rounded border-gray-200 w-full mt-5">
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
><SectionTitle>Organization Profile</SectionTitle></Column
>
<Column sm={2} md={2} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<TextField
label="Organization Name"
bind:value={$currentOrg.name}
className="w-60 mb-5"
/>
<TextField label="Organization Name" bind:value={$currentOrg.name} className="w-60 mb-5" />
<UploadImage
bind:avatar
src={$currentOrg.avatar_url}
@@ -102,24 +117,64 @@
/>
</Column>
</Row>
<!-- <Row class="py-7 border-bottom-c">
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white">Set your brand</h4>
<h4 class="dark:text-white mt-0">Set your brand color</h4>
<div class="flex gap-2">
<button
class="rounded-full border-2 {$currentOrg.theme === themes.default &&
'border-[#1d4ee2]'} mr-3"
on:click={handleChangeTheme(themes.default)}
>
<div class="w-6 h-6 bg-[#1d4ee2] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.rose &&
'border-[#be1241]'} mr-3"
on:click={handleChangeTheme(themes.rose)}
>
<div class="w-6 h-6 bg-[#be1241] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.green &&
'border-[#0c891b]'} mr-3"
on:click={handleChangeTheme(themes.green)}
>
<div class="w-6 h-6 bg-[#0c891b] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.orange &&
'border-[#cc4902]'} mr-3"
on:click={handleChangeTheme(themes.orange)}
>
<div class="w-6 h-6 bg-[#cc4902] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.violet &&
'border-[#cf00ce]'} mr-3"
on:click={handleChangeTheme(themes.violet)}
>
<div class="w-6 h-6 bg-[#cf00ce] rounded-full m-1" />
</button>
</div>
</Column>
</Row> -->
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
><SectionTitle>Custom Domain</SectionTitle></Column
>
<Column sm={2} md={2} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white">Customise your Domain</h4>
<h4 class="dark:text-white mt-0">Customise your Domain</h4>
<p class="text-sm text-gray-500 dark:text-white">
Create a custom URL so your audience can get to your organization easily
</p>
<PrimaryButton
label="Edit domain"
className="my-7 py-5 px-10 text-blue-700"
className="my-7 py-5 px-10 text-primary-700"
variant={VARIANTS.OUTLINED}
onClick={() => gotoSetting('/domains')}
/>
@@ -130,12 +185,11 @@
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white">Set up your website</h4>
<p class="text-sm text-gray-500 dark:text-white">
Add team mates to your organization so you can both collaborate on
projects.
Add team mates to your organization so you can both collaborate on projects.
</p>
<PrimaryButton
label="Manage Team"
className="my-7 py-5 px-10 text-blue-700"
className="my-7 py-5 px-10 text-primary-700"
variant={VARIANTS.OUTLINED}
onClick={() => gotoSetting('/teams')}
/>
src/lib/components/Org/Settings/Profile.svelte
+1 -1
View File
@@ -99,6 +99,6 @@
isDisabled={loading}
onClick={handleUpdate}
/>
<PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
<PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
</Row>
</Grid>
src/lib/components/Org/SideBar.svelte
+4 -6
View File
@@ -68,7 +68,7 @@
height="h-7"
/>
{:else if $currentOrg.shortName}
<TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
<TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
{/if}
<OrgSelector />
@@ -77,7 +77,7 @@
{#each menuItems as menuItem}
<a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-primary-200 dark:hover:bg-gray-700 {isActive(
$page.url.pathname,
`${$currentOrgPath}${menuItem.path}`
) && NavClasses.active}"
@@ -107,16 +107,14 @@
<span class="flex-grow" />
<ul class="my-5 pb-5 px-4">
<a href={$currentOrgPath} class="text-black no-underline">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
>
<li class="flex items-center py-3 px-4 mb-2 rounded">
<HelpIcon size={20} class="carbon-icon dark:text-white" />
<p class="dark:text-white ml-2">Help</p>
</li>
</a>
<a href="{$currentOrgPath}/settings" class="text-black no-underline">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded {isActive(
$page.url.pathname,
`${$currentOrgPath}/settings`
) && NavClasses.active}"