feat: dark mode
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div v-if="user.data?.is_moderator || isStudent" class="">
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
|
||||
>
|
||||
<Breadcrumbs class="h-7" :items="breadcrumbs" />
|
||||
<div class="flex items-center space-x-2">
|
||||
@@ -26,13 +26,13 @@
|
||||
<Tabs
|
||||
v-model="tabIndex"
|
||||
:tabs="tabs"
|
||||
tablistClass="overflow-y-hidden bg-white"
|
||||
tablistClass="overflow-y-hidden bg-surface-white"
|
||||
>
|
||||
<template #tab="{ tab, selected }" class="overflow-x-hidden">
|
||||
<div>
|
||||
<button
|
||||
class="group -mb-px flex items-center gap-1 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
|
||||
:class="{ 'text-gray-900': selected }"
|
||||
class="group -mb-px flex items-center gap-1 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
|
||||
:class="{ 'text-ink-gray-9': selected }"
|
||||
>
|
||||
<component
|
||||
v-if="tab.icon"
|
||||
@@ -43,7 +43,7 @@
|
||||
<Badge
|
||||
v-if="tab.count"
|
||||
:class="{
|
||||
'text-gray-900 border border-gray-900': selected,
|
||||
'text-ink-gray-9 border border-gray-900': selected,
|
||||
}"
|
||||
variant="subtle"
|
||||
theme="gray"
|
||||
@@ -92,10 +92,13 @@
|
||||
</Tabs>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="text-gray-700 font-semibold mb-4">
|
||||
<div class="text-ink-gray-7 font-semibold mb-4">
|
||||
{{ __('About this batch') }}:
|
||||
</div>
|
||||
<div v-html="batch.data.description" class="leading-5 mb-4"></div>
|
||||
<div
|
||||
v-html="batch.data.description"
|
||||
class="leading-5 mb-4 text-ink-gray-7"
|
||||
></div>
|
||||
|
||||
<div class="flex items-center avatar-group overlap mb-5">
|
||||
<div
|
||||
@@ -116,15 +119,18 @@
|
||||
:endDate="batch.data.end_date"
|
||||
class="mb-3"
|
||||
/>
|
||||
<div class="flex items-center mb-4">
|
||||
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<div class="flex items-center mb-4 text-ink-gray-7">
|
||||
<Clock class="h-4 w-4 stroke-1.5 mr-2" />
|
||||
<span>
|
||||
{{ formatTime(batch.data.start_time) }} -
|
||||
{{ formatTime(batch.data.end_time) }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="batch.data.timezone" class="flex items-center mb-4">
|
||||
<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
|
||||
<div
|
||||
v-if="batch.data.timezone"
|
||||
class="flex items-center mb-4 text-ink-gray-7"
|
||||
>
|
||||
<Globe class="h-4 w-4 stroke-1.5 mr-2" />
|
||||
<span>
|
||||
{{ batch.data.timezone }}
|
||||
</span>
|
||||
@@ -141,7 +147,7 @@
|
||||
<div class="text-base border rounded-md w-1/3 mx-auto my-32">
|
||||
<div class="border-b px-5 py-3 font-medium">
|
||||
<span
|
||||
class="inline-flex items-center before:bg-red-600 before:w-2 before:h-2 before:rounded-md before:mr-2"
|
||||
class="inline-flex items-center before:bg-surface-red-5 before:w-2 before:h-2 before:rounded-md before:mr-2"
|
||||
></span>
|
||||
{{ __('Not Permitted') }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user