CLASSROOMIO-T-41: Implement dark/light mode switch
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
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
5f14b36ef8
commit
1388a41097
@@ -1,35 +1,35 @@
|
||||
<script>
|
||||
import marked from "marked";
|
||||
import PageNav from "../../../PageNav/index.svelte";
|
||||
import CloseButton from "../../../Buttons/Close/index.svelte";
|
||||
import TextField from "../../../Form/TextField.svelte";
|
||||
import marked from 'marked';
|
||||
import PageNav from '../../../PageNav/index.svelte';
|
||||
import CloseButton from '../../../Buttons/Close/index.svelte';
|
||||
import TextField from '../../../Form/TextField.svelte';
|
||||
// import SendButton from "../../../Buttons/Send/index.svelte";
|
||||
|
||||
export let handleClose;
|
||||
|
||||
let message = "";
|
||||
let message = '';
|
||||
let bodyRef;
|
||||
let chats = [
|
||||
{
|
||||
avatar: "https://picsum.photos/32/32/?random",
|
||||
name: "Evgeniy",
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Evgeniy',
|
||||
message: "I'am looking at this and it looks great",
|
||||
},
|
||||
{
|
||||
avatar: "https://picsum.photos/32/32/?random",
|
||||
name: "Sergey Semko",
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Sergey Semko',
|
||||
message:
|
||||
"Thanks for the feedback, what do you think about my website. https://rotimibest.com",
|
||||
'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
|
||||
},
|
||||
{
|
||||
avatar: "https://picsum.photos/32/32/?random",
|
||||
name: "Vitalii Marushko",
|
||||
message: "Всем привет",
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Vitalii Marushko',
|
||||
message: 'Всем привет',
|
||||
},
|
||||
{
|
||||
avatar: "https://picsum.photos/32/32/?random",
|
||||
name: "Natasha",
|
||||
message: "Привет Виталий",
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Natasha',
|
||||
message: 'Привет Виталий',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -41,8 +41,8 @@
|
||||
chats = [
|
||||
...chats,
|
||||
{
|
||||
avatar: "https://picsum.photos/32/32/?random",
|
||||
name: "You",
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'You',
|
||||
message,
|
||||
},
|
||||
];
|
||||
@@ -57,7 +57,7 @@
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === "Enter") {
|
||||
if (e.key === 'Enter') {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
@@ -80,7 +80,7 @@
|
||||
height="20"
|
||||
src={chat.avatar}
|
||||
/>
|
||||
<p class="ml-2 text-sm font-bold">{chat.name}</p>
|
||||
<p class="dark:text-white ml-2 text-sm font-bold">{chat.name}</p>
|
||||
</div>
|
||||
<article class="prose prose-sm sm:prose pt-2 pl-8">
|
||||
{@html marked(chat.message)}
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
<script>
|
||||
export let value;
|
||||
export let label;
|
||||
export let type = "text";
|
||||
export let name = "text";
|
||||
export let type = 'text';
|
||||
export let name = 'text';
|
||||
export let handleLabelButton;
|
||||
export let handleInputButton;
|
||||
</script>
|
||||
|
||||
<div class="mb-3">
|
||||
{#if label}
|
||||
<p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
|
||||
<p
|
||||
class="dark:text-white p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600"
|
||||
>
|
||||
{label}
|
||||
|
||||
{#if typeof handleLabelButton === "function"}
|
||||
{#if typeof handleLabelButton === 'function'}
|
||||
<button class="text-xl px-3 ml-5" on:click={handleLabelButton}>
|
||||
+
|
||||
</button>
|
||||
@@ -21,15 +23,15 @@
|
||||
{/if}
|
||||
|
||||
<div class="w-full">
|
||||
{#if type === "text"}
|
||||
{#if type === 'text'}
|
||||
<input type="text" {name} class="p-2 rounded-md w-4/5" bind:value />
|
||||
{/if}
|
||||
|
||||
{#if type === "date"}
|
||||
{#if type === 'date'}
|
||||
<input type="date" {name} class="p-2 rounded-md w-4/5" bind:value />
|
||||
{/if}
|
||||
|
||||
{#if typeof handleInputButton === "function"}
|
||||
{#if typeof handleInputButton === 'function'}
|
||||
<button class="text-xl px-3 ml-5" on:click={handleInputButton}>
|
||||
-
|
||||
</button>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
|
||||
<p
|
||||
class="dark:text-white p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600"
|
||||
>
|
||||
<slot />
|
||||
</p>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-4 bg-white-100 border-2 rounded-md mb-3">
|
||||
<div class="p-4 bg-white dark:bg-gray-800-100 border-2 rounded-md mb-3">
|
||||
{#if selectedOptionToView}
|
||||
<div>
|
||||
<div class="flex items-center mb-5">
|
||||
@@ -59,13 +59,13 @@
|
||||
{`<`}
|
||||
</button>
|
||||
<div class="flex-grow text-center">
|
||||
<h3 class="font-bold">Voted</h3>
|
||||
<h3 class="dark:text-white font-bold">Voted</h3>
|
||||
</div>
|
||||
</div>
|
||||
{#each selectedOptionToView.selectedBy as user}
|
||||
<div class="flex items-center mb-2">
|
||||
<Avatar src={user.avatar} name={user.label} className="mr-2" />
|
||||
<p>
|
||||
<p class="dark:text-white">
|
||||
{user.label}
|
||||
</p>
|
||||
</div>
|
||||
@@ -74,10 +74,10 @@
|
||||
{:else}
|
||||
<div class="flex mb-3 justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold">
|
||||
<h3 class="dark:text-white font-bold">
|
||||
{poll.question}
|
||||
</h3>
|
||||
<p class="text-sm italic">
|
||||
<p class="dark:text-white text-sm italic">
|
||||
Created by <a
|
||||
class="text-blue-500"
|
||||
href="https://twitter.com/rotimi_best"
|
||||
@@ -102,13 +102,13 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="mr-5">
|
||||
<Label>Expiration</Label>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
<p class="dark:text-white text-sm text-gray-600 mb-4">
|
||||
{poll.expiration || 'Today'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<Label>Total Votes</Label>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
<p class="dark:text-white text-sm text-gray-600 mb-4">
|
||||
{totalVotes}
|
||||
</p>
|
||||
</div>
|
||||
@@ -117,7 +117,7 @@
|
||||
<Label>Responses</Label>
|
||||
{#each poll.options as option, index}
|
||||
<div class="border-b p-5">
|
||||
<p>
|
||||
<p class="dark:text-white">
|
||||
{option.label}
|
||||
</p>
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
{:else}
|
||||
{#each poll.options as option, index}
|
||||
<button
|
||||
class="bg-white rounded-md border-2 border-gray-500 {didUserSelect(
|
||||
class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
|
||||
option
|
||||
) &&
|
||||
'focus:border-blue-700 border-blue-700'} text-black p-2 w-full mb-3 text-left relative"
|
||||
@@ -158,7 +158,7 @@
|
||||
<span
|
||||
class="progress absolute top-0 left-0 {didUserSelect(option)
|
||||
? 'bg-blue-700'
|
||||
: 'bg-gray-300'} h-full bg-opacity-25 "
|
||||
: 'bg-gray-300'} h-full bg-opacity-25"
|
||||
style="width: {calculatePercent(poll.options, option)}%;"
|
||||
/>
|
||||
<strong class="mr-3"
|
||||
@@ -169,11 +169,11 @@
|
||||
</button>
|
||||
{/each}
|
||||
<div class="flex items-center">
|
||||
<p class="text-sm text-gray-600">
|
||||
<p class="dark:text-white text-sm text-gray-600">
|
||||
Expires: {poll.expiration || 'Today'}
|
||||
</p>
|
||||
<span class="mx-2">|</span>
|
||||
<p class="text-sm text-gray-600">
|
||||
<p class="dark:text-white text-sm text-gray-600">
|
||||
Voted: {totalVotes}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
<script>
|
||||
import PageNav from "../../../PageNav/index.svelte";
|
||||
import CloseButton from "../../../Buttons/Close/index.svelte";
|
||||
import PrimaryButton from "../../../PrimaryButton/index.svelte";
|
||||
import { VARIANTS } from "../../../PrimaryButton/constants";
|
||||
import CreatePollForm from "./components/CreatePollForm.svelte";
|
||||
import Poll from "./components/Poll.svelte";
|
||||
import Tabs from "./components/Tabs.svelte";
|
||||
import PageNav from '../../../PageNav/index.svelte';
|
||||
import CloseButton from '../../../Buttons/Close/index.svelte';
|
||||
import PrimaryButton from '../../../PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '../../../PrimaryButton/constants';
|
||||
import CreatePollForm from './components/CreatePollForm.svelte';
|
||||
import Poll from './components/Poll.svelte';
|
||||
import Tabs from './components/Tabs.svelte';
|
||||
|
||||
export let handleClose;
|
||||
|
||||
const users = [
|
||||
{
|
||||
label: "Rich Harris",
|
||||
value: "rich-harris",
|
||||
avatar: "https://i.pravatar.cc/150?img=1",
|
||||
label: 'Rich Harris',
|
||||
value: 'rich-harris',
|
||||
avatar: 'https://i.pravatar.cc/150?img=1',
|
||||
},
|
||||
{
|
||||
label: "Linus Torvalds",
|
||||
value: "linus-torvalds",
|
||||
avatar: "https://i.pravatar.cc/150?img=2",
|
||||
label: 'Linus Torvalds',
|
||||
value: 'linus-torvalds',
|
||||
avatar: 'https://i.pravatar.cc/150?img=2',
|
||||
},
|
||||
{
|
||||
label: "Elon Musk",
|
||||
value: "elon-musk",
|
||||
avatar: "https://i.pravatar.cc/150?img=3",
|
||||
label: 'Elon Musk',
|
||||
value: 'elon-musk',
|
||||
avatar: 'https://i.pravatar.cc/150?img=3',
|
||||
},
|
||||
{
|
||||
label: "Satoshi Nakamoto",
|
||||
value: "satoshi-nakamoto",
|
||||
avatar: "https://i.pravatar.cc/150?img=4",
|
||||
label: 'Satoshi Nakamoto',
|
||||
value: 'satoshi-nakamoto',
|
||||
avatar: 'https://i.pravatar.cc/150?img=4',
|
||||
},
|
||||
];
|
||||
const tabs = [
|
||||
{
|
||||
label: "My polls",
|
||||
label: 'My polls',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "Other polls",
|
||||
label: 'Other polls',
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
@@ -47,36 +47,36 @@
|
||||
let shouldCreatePoll = false;
|
||||
let polls = [
|
||||
{
|
||||
question: "Who is the creator of Svelte?",
|
||||
question: 'Who is the creator of Svelte?',
|
||||
author: users[0],
|
||||
status: "draft", // public
|
||||
status: 'draft', // public
|
||||
expiration: new Date().toDateString(),
|
||||
options: [
|
||||
{
|
||||
label: "Dan Abrahmov",
|
||||
label: 'Dan Abrahmov',
|
||||
selectedBy: [],
|
||||
},
|
||||
{
|
||||
label: "Evan You",
|
||||
label: 'Evan You',
|
||||
selectedBy: [
|
||||
{
|
||||
label: "Rich Harris",
|
||||
value: "rich-harris",
|
||||
avatar: "https://i.pravatar.cc/150?img=1",
|
||||
label: 'Rich Harris',
|
||||
value: 'rich-harris',
|
||||
avatar: 'https://i.pravatar.cc/150?img=1',
|
||||
},
|
||||
{
|
||||
label: "Linus Torvalds",
|
||||
value: "linus-torvalds",
|
||||
avatar: "https://i.pravatar.cc/150?img=2",
|
||||
label: 'Linus Torvalds',
|
||||
value: 'linus-torvalds',
|
||||
avatar: 'https://i.pravatar.cc/150?img=2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Rich Harris",
|
||||
label: 'Rich Harris',
|
||||
selectedBy: [],
|
||||
},
|
||||
{
|
||||
label: "Yehuda Katz",
|
||||
label: 'Yehuda Katz',
|
||||
selectedBy: [],
|
||||
},
|
||||
],
|
||||
@@ -186,7 +186,7 @@
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class="bg-gray-100 border rounded-md h-60 flex items-center justify-center "
|
||||
class="bg-gray-100 dark:bg-gray-700 border rounded-md h-60 flex items-center justify-center"
|
||||
>
|
||||
<h2 class="text-xl font-bold">No polls to display</h2>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script>
|
||||
import marked from "marked";
|
||||
import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
|
||||
import PageNav from "../../../PageNav/index.svelte";
|
||||
import CloseButton from "../../../Buttons/Close/index.svelte";
|
||||
import Vote from "../../../Vote/index.svelte";
|
||||
import TextField from "../../../Form/TextField.svelte";
|
||||
import marked from 'marked';
|
||||
import CheckmarkOutline20 from 'carbon-icons-svelte/lib/CheckmarkOutline20';
|
||||
import PageNav from '../../../PageNav/index.svelte';
|
||||
import CloseButton from '../../../Buttons/Close/index.svelte';
|
||||
import Vote from '../../../Vote/index.svelte';
|
||||
import TextField from '../../../Form/TextField.svelte';
|
||||
|
||||
export let handleClose;
|
||||
let bodyRef;
|
||||
@@ -13,30 +13,30 @@
|
||||
let questions = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Evgeniy",
|
||||
name: 'Evgeniy',
|
||||
question: "I'am looking at this and it looks great",
|
||||
vote: 1,
|
||||
answered: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Sergey Semko",
|
||||
name: 'Sergey Semko',
|
||||
question:
|
||||
"Thanks for the feedback, what do you think about my website. https://rotimibest.com",
|
||||
'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
|
||||
vote: 4,
|
||||
answered: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Vitalii Marushko",
|
||||
question: "Всем привет",
|
||||
name: 'Vitalii Marushko',
|
||||
question: 'Всем привет',
|
||||
vote: 20,
|
||||
answered: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Natasha",
|
||||
question: "Привет Виталий",
|
||||
name: 'Natasha',
|
||||
question: 'Привет Виталий',
|
||||
vote: 0,
|
||||
answered: false,
|
||||
},
|
||||
@@ -51,7 +51,7 @@
|
||||
...questions,
|
||||
{
|
||||
id: questions.length,
|
||||
name: "You",
|
||||
name: 'You',
|
||||
question,
|
||||
vote: 0,
|
||||
answered: false,
|
||||
@@ -82,7 +82,7 @@
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === "Enter") {
|
||||
if (e.key === 'Enter') {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
@@ -99,13 +99,13 @@
|
||||
<div class="flex items-start ml-2 mb-2 mt-2">
|
||||
<Vote bind:value={question.vote} />
|
||||
<div class="ml-2 flex-grow">
|
||||
<p class="text-sm font-bold">{question.name}</p>
|
||||
<p class="dark:text-white text-sm font-bold">{question.name}</p>
|
||||
<article class="prose prose-sm sm:prose">
|
||||
{@html marked(question.question)}
|
||||
</article>
|
||||
</div>
|
||||
<button
|
||||
class={`${question.answered && "active"}`}
|
||||
class={`${question.answered && 'active'}`}
|
||||
on:click={handleMarkAnswered(question.id)}
|
||||
>
|
||||
<CheckmarkOutline20 class="carbon-icon" />
|
||||
|
||||
Reference in New Issue
Block a user