LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Adds dark theme support for public portal [CW-2525] (#7979)

Browse Source 
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Nithin David Thomas
2023-10-04 11:56:00 +05:30
committed by GitHub
parent 6a73953003
commit b71a580573
20 changed files with 178 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/portal/components/PublicSearchInput.vue
View File

@@ -1,16 +1,16 @@
<template>
<div
class="w-full flex items-center rounded-md border-solid border-2 h-16 bg-white px-4 py-2 text-slate-600"
class="w-full flex items-center rounded-md border-solid border-2 h-16 bg-white dark:bg-slate-900 px-4 py-2 text-slate-600 dark:text-slate-200"
:class="{
'shadow border-woot-100': isFocused,
'border-slate-50 shadow-sm': !isFocused,
'shadow border-woot-100 dark:border-woot-700': isFocused,
'border-slate-50 dark:border-slate-800 shadow-sm': !isFocused,
}"
>
<fluent-icon icon="search" />
<input
:value="value"
type="text"
class="w-full focus:outline-none text-base h-full bg-white px-2 py-2 text-slate-700 placeholder-slate-500"
class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
:placeholder="searchPlaceholder"
role="search"
@input="onChange"

21
app/javascript/portal/components/SearchSuggestions.vue
View File

@@ -1,16 +1,22 @@
<template>
<div
class="shadow-md bg-white mt-2 max-h-72 scroll-py-2 p-4 rounded overflow-y-auto text-sm text-slate-700"
class="shadow-md bg-white dark:bg-slate-900 mt-2 max-h-72 scroll-py-2 p-4 rounded overflow-y-auto text-sm text-slate-700 dark:text-slate-100"
>
<div v-if="isLoading" class="font-medium text-sm text-slate-400">
<div
v-if="isLoading"
class="font-medium text-sm text-slate-400 dark:text-slate-700"
>
{{ loadingPlaceholder }}
</div>
<h3 v-if="shouldShowResults" class="font-medium text-sm text-slate-400">
<h3
v-if="shouldShowResults"
class="font-medium text-sm text-slate-400 dark:text-slate-700"
>
{{ resultsTitle }}
</h3>
<ul
v-if="shouldShowResults"
class="bg-white mt-2 max-h-72 scroll-py-2 overflow-y-auto text-sm text-slate-700"
class="bg-white dark:bg-slate-900 mt-2 max-h-72 scroll-py-2 overflow-y-auto text-sm text-slate-700 dark:text-slate-100"
role="listbox"
>
<li
@@ -18,7 +24,7 @@
:id="article.id"
:key="article.id"
class="group flex cursor-default select-none items-center rounded-md p-2 mb-1"
:class="{ 'bg-slate-25': index === selectedIndex }"
:class="{ 'bg-slate-25 dark:bg-slate-800': index === selectedIndex }"
role="option"
tabindex="-1"
@mouseover="onHover(index)"
@@ -32,7 +38,10 @@
</li>
</ul>
<div v-if="showEmptyResults" class="font-medium text-sm text-slate-400">
<div
v-if="showEmptyResults"
class="font-medium text-sm text-slate-400 dark:text-slate-700"
>
{{ emptyPlaceholder }}
</div>
</div>

4
app/javascript/portal/components/TableOfContents.vue
View File

@@ -4,7 +4,7 @@
<nav class="max-w-2xl">
<h2
id="on-this-page-title"
class="text-slate-800 font-semibold tracking-wide border-b mb-3 leading-7"
class="text-slate-800 dark:text-slate-50 font-semibold tracking-wide border-b mb-3 leading-7"
>
{{ tocHeader }}
</h2>
@@ -14,7 +14,7 @@
<a
:href="`#${element.slug}`"
data-turbolinks="false"
class="text-base text-slate-800 cursor-pointer"
class="text-base text-slate-800 dark:text-slate-50 cursor-pointer"
>
{{ element.title }}
</a>