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

CLASSROOMIO-T-41: Implement dark/light mode switch

Browse Source 
Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-8
Merged-by: Digdippa Team <digdippa@gmail.com>
This commit is contained in:
Rotimi Best
2023-05-05 20:19:45 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 5f14b36ef8
commit 1388a41097
95 changed files with 611 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Org/Audience/index.svelte
+2 -2
View File
@@ -22,8 +22,8 @@
{:else}
<Box>
<AudienceEmptyIcon />
<h3 class="text-2xl my-5">No audience to manage!</h3>
<p class="w-1/3 text-center">
<h3 class="dark:text-white text-2xl my-5">No audience to manage!</h3>
<p class="dark:text-white w-1/3 text-center">
Manage all your students here and stay connected with them.
</p>
</Box>
src/components/Org/SectionTitle.svelte
+3
View File
@@ -0,0 +1,3 @@
<p class="dark:text-white font-bold">
<slot />
</p>
src/components/Org/Settings/Domains.svelte
+4 -3
View File
@@ -9,6 +9,7 @@
import { supabase } from '../../../utils/functions/supabase';
import { snackbarStore } from '../../Snackbar/store';
import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
import SectionTitle from '../SectionTitle.svelte';
let siteName;
let errors = '';
@@ -56,7 +57,7 @@
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
<Column sm={2} md={6} lg={8}>
<p class="text-md text-gray-500 mb-5">
<p class="text-md text-gray-500 dark:text-gray-200 mb-5">
Add your team mates or collaborators to your organization. Start working
together
</p>
@@ -86,11 +87,11 @@
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4} class="text-lg"
><strong>Custom domain</strong></Column
><SectionTitle>Custom domain</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
<div class="flex items-center">
<p class="mr-3">Add your own domain name</p>
<p class="dark:text-white mr-3">Add your own domain name</p>
<ComingSoon />
</div>
</Column>
src/components/Org/Settings/OrgSettings.svelte
+14 -9
View File
@@ -9,6 +9,7 @@
import { snackbarStore } from '../../Snackbar/store';
import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
import { currentOrg } from '../../../utils/store/org';
import SectionTitle from '../SectionTitle.svelte';
let avatar;
let loading = false;
@@ -79,7 +80,9 @@
<Grid class="border rounded border-gray-200 w-full mt-5">
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Organization Profile</strong></Column>
<Column sm={2} md={2} lg={4}
><SectionTitle>Organization Profile</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
<TextField
label="Organization Name"
@@ -102,16 +105,18 @@
</Column>
</Row>
<!-- <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Theme</strong></Column>
<Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4>Set your brand</h4>
<h4 class="dark:text-white">Set your brand</h4>
</Column>
</Row> -->
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Custom Domain</strong></Column>
<Column sm={2} md={2} lg={4}
><SectionTitle>Custom Domain</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
<h4>Customise your Domain</h4>
<p class="text-sm text-gray-500">
<h4 class="dark:text-white">Customise your Domain</h4>
<p class="text-sm text-gray-500 dark:text-gray-200">
Create a custom URL so your audience can get to your organization easily
</p>
<PrimaryButton
@@ -123,10 +128,10 @@
</Column>
</Row>
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Team</strong></Column>
<Column sm={2} md={2} lg={4}><SectionTitle>Team</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4>Set up your website</h4>
<p class="text-sm text-gray-500">
<h4 class="dark:text-white">Set up your website</h4>
<p class="text-sm text-gray-500 dark:text-gray-200">
Add team mates to your organization so you can both collaborate on
projects.
</p>
src/components/Org/Settings/Profile.svelte
+7 -2
View File
@@ -2,6 +2,7 @@
import { goto } from '@sapper/app';
import { Grid, Row, Column } from 'carbon-components-svelte';
import TextField from '../../Form/TextField.svelte';
import SectionTitle from '../SectionTitle.svelte';
import PrimaryButton from '../../PrimaryButton/index.svelte';
import { VARIANTS } from '../../PrimaryButton/constants';
import UploadImage from '../../UploadImage/index.svelte';
@@ -82,7 +83,9 @@
<Grid class="border rounded border-gray-200 w-full mt-5">
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Profile Picture</strong></Column>
<Column sm={2} md={2} lg={4}>
<SectionTitle>Profile Picture</SectionTitle>
</Column>
<Column sm={2} md={6} lg={8}>
<UploadImage
bind:avatar
@@ -92,7 +95,9 @@
</Column>
</Row>
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Personal Information</strong></Column>
<Column sm={2} md={2} lg={4}>
<SectionTitle>Personal Information</SectionTitle>
</Column>
<Column sm={2} md={6} lg={8}>
<TextField
label="Full Name"
src/components/Org/Settings/TeamMembers.svelte
+7 -4
View File
@@ -20,6 +20,7 @@
import { getOrgTeam } from '../../../utils/services/org';
import { profile } from '../../../utils/store/user';
import { supabase } from '../../../utils/functions/supabase';
import SectionTitle from '../SectionTitle.svelte';
let emailsStr = '';
let errorMessage = '';
@@ -128,9 +129,11 @@
<Grid class="border rounded border-gray-200 w-full mt-5">
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
<Column sm={2} md={2} lg={4} class="text-lg"
><SectionTitle>Add</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
<p class="text-md text-gray-500 mb-5">
<p class="text-md text-gray-500 dark:text-gray-200 mb-5">
Add your team mates or collaborators to your organization. Start working
together
</p>
@@ -161,7 +164,7 @@
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4} class="text-lg"
><strong>Members</strong></Column
><SectionTitle>Members</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
{#if isFetching}
@@ -170,7 +173,7 @@
{#each $orgTeam as teamMember}
<div class="flex justify-between items-center mb-5">
<div class="flex">
<p class="text-sm text-gray-500 mr-3">
<p class="text-sm text-gray-500 dark:text-gray-200 mr-3">
{teamMember.email}
</p>
<TextChip
src/components/Org/SideBar.svelte
+17 -15
View File
@@ -13,7 +13,7 @@
import { profile } from '../../utils/store/user';
let orgSiteName = '';
let activeClass = 'bg-gray-200';
let activeClass = 'bg-gray-200 dark:bg-gray-500';
let { page } = stores();
function isActive(pagePath, itemPath) {
@@ -30,7 +30,7 @@
$: orgSiteName = $currentOrg.siteName;
</script>
<aside class="root bg-gray-100 h-full">
<aside class="root bg-gray-100 dark:bg-gray-700 h-full">
<div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4">
{#if $currentOrg.avatar_url}
@@ -53,46 +53,46 @@
<ul class="my-5">
<a href="/org/{orgSiteName}" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}`
) && activeClass}"
>
<HomeIcon />
<p class="ml-2">Home</p>
<p class="dark:text-white ml-2">Home</p>
</li>
</a>
<a href="/org/{orgSiteName}/courses" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}/courses`
) && activeClass}"
>
<CourseIcon />
<p class="ml-2">Courses</p>
<p class="dark:text-white ml-2">Courses</p>
</li>
</a>
<a href="/org/{orgSiteName}/site" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}/site`
) && activeClass}"
>
<SiteSettingsIcon />
<p class="ml-2">Site settings</p>
<p class="dark:text-white ml-2">Site settings</p>
</li>
</a>
<a href="/org/{orgSiteName}/audience" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}/audience`
) && activeClass}"
>
<AudienceIcon />
<p class="ml-2">Audience</p>
<p class="dark:text-white ml-2">Audience</p>
</li>
</a>
</ul>
@@ -100,14 +100,16 @@
<span class="flex-grow" />
<ul class="my-5 pb-5 px-4">
<a href="/help" class="text-black">
<li class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200">
<Help />
<p class="ml-2">Help</p>
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
>
<Help class="carbon-icon" />
<p class="dark:text-white ml-2">Help</p>
</li>
</a>
<a href="/org/{orgSiteName}/settings" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}/settings`
) && activeClass}"
@@ -118,7 +120,7 @@
width="w-7"
height="h-7"
/>
<p class="ml-2">Settings</p>
<p class="dark:text-white ml-2">Settings</p>
</li>
</a>
</ul>