Skip to content

Commit

Permalink
update light/dark codeblock styles for visibility
Browse files Browse the repository at this point in the history
patch embed modal text invisible
patch toggle colors
  • Loading branch information
timothycarambat committed Nov 20, 2024
1 parent fa7c530 commit 988181a
Show file tree
Hide file tree
Showing 9 changed files with 281 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function LiveSyncToggle({ enabled = false, onToggle }) {
checked={status}
className="peer sr-only pointer-events-none"
/>
<div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
<div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
</label>
</div>
<div className="flex flex-col space-y-4">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/FineTuning/Steps/DataUpload/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default function DataUpload({ setSettings, setStep }) {
checked={dataFilters.feedback}
className="peer sr-only pointer-events-none"
/>
<div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-0 peer-focus:ring-none"></div>
<div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
</label>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React, { useState } from "react";
import { CheckCircle, CopySimple, X } from "@phosphor-icons/react";
import showToast from "@/utils/toast";
import hljs from "highlight.js";
import "highlight.js/styles/github-dark-dimmed.min.css";
import "@/utils/chat/themes/github-dark.css";
import "@/utils/chat/themes/github.css";

export default function CodeSnippetModal({ embed, closeModal }) {
return (
Expand Down Expand Up @@ -66,6 +67,8 @@ const ScriptTag = ({ embed }) => {
? "http://localhost:3001"
: window.location.origin;
const snippet = createScriptTagSnippet(embed, scriptHost, serverHost);
const theme =
window.localStorage.getItem("theme") === "light" ? "github" : "github-dark";

const handleClick = () => {
window.navigator.clipboard.writeText(snippet);
Expand All @@ -82,7 +85,7 @@ const ScriptTag = ({ embed }) => {
<label className="block text-sm font-medium text-white">
HTML Script Tag Embed Code
</label>
<p className="text-secondary text-xs">
<p className="text-theme-text-secondary text-xs">
Have your workspace chat embed function like a help desk chat bottom
in the corner of your website.
</p>
Expand All @@ -97,7 +100,7 @@ const ScriptTag = ({ embed }) => {
<button
disabled={copied}
onClick={handleClick}
className="disabled:border disabled:border-green-300 disabled:light:border-green-600 border border-transparent relative w-full font-mono flex bg-zinc-900 light:invert text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5"
className={`disabled:border disabled:border-green-300 disabled:light:border-green-600 border border-transparent relative w-full font-mono flex hljs ${theme} light:border light:border-gray-700 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none p-2.5`}
>
<div
className="flex w-full text-left flex-col gap-y-1 pr-6 pl-4 whitespace-pre-line"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export const WorkspaceSelection = ({ defaultValue = null }) => {
>
Workspace
</label>
<p className="text-secondary text-xs">
<p className="text-theme-text-secondary text-xs">
This is the workspace your chat window will be based on. All defaults
will be inherited from the workspace unless overridden by this config.
</p>
Expand Down Expand Up @@ -174,7 +174,7 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
>
Allowed chat method
</label>
<p className="text-secondary text-xs">
<p className="text-theme-text-secondary text-xs">
Set how your chatbot should operate. Query means it will only respond
if a document helps answer the query.
<br />
Expand All @@ -187,8 +187,8 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
chatMode === "chat"
? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
: "border-theme-sidebar-border"
} hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
: "border-theme-sidebar-border hover:border-theme-sidebar-border hover:bg-theme-bg-secondary"
} `}
>
<input
type="radio"
Expand All @@ -213,8 +213,8 @@ export const ChatModeSelection = ({ defaultValue = null }) => {
className={`transition-all duration-300 w-full h-11 p-2.5 rounded-lg flex justify-start items-center gap-2.5 cursor-pointer border ${
chatMode === "query"
? "border-theme-sidebar-item-workspace-active bg-theme-bg-secondary"
: "border-theme-sidebar-border"
} hover:border-theme-sidebar-border hover:bg-theme-bg-secondary`}
: "border-theme-sidebar-border hover:border-theme-sidebar-border hover:bg-theme-bg-secondary"
} `}
>
<input
type="radio"
Expand Down Expand Up @@ -287,7 +287,7 @@ export const PermittedDomains = ({ defaultValue = [] }) => {
>
Restrict requests from domains
</label>
<p className="test-secondary text-xs">
<p className="text-theme-text-secondary text-xs">
This filter will block any requests that come from a domain other than
the list below.
<br />
Expand Down Expand Up @@ -317,7 +317,7 @@ export const NumberInput = ({ name, title, hint, defaultValue = 0 }) => {
<label htmlFor={name} className="block text-sm font-medium text-white">
{title}
</label>
<p className="test-secondary text-xs">{hint}</p>
<p className="text-theme-text-secondary text-xs">{hint}</p>
</div>
<input
type="number"
Expand All @@ -340,7 +340,7 @@ export const BooleanInput = ({ name, title, hint, defaultValue = null }) => {
<label htmlFor={name} className="block text-sm font-medium text-white">
{title}
</label>
<p className="test-secondary text-xs">{hint}</p>
<p className="text-theme-text-secondary text-xs">{hint}</p>
</div>
<label className="relative inline-flex cursor-pointer items-center">
<input
Expand All @@ -350,7 +350,7 @@ export const BooleanInput = ({ name, title, hint, defaultValue = null }) => {
checked={status}
className="peer sr-only pointer-events-none"
/>
<div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800" />
<div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
</label>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ function TelemetryLogs({ settings }) {
checked={telemetry}
className="peer sr-only pointer-events-none"
/>
<div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
<div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"></div>
</label>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/GeneralSettings/Security/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,8 @@ function MultiUserMode() {
/>
<div
hidden={multiUserModeEnabled}
className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"
></div>
className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent"
/>
</label>
</div>
{useMultiUserMode && (
Expand Down Expand Up @@ -303,7 +303,7 @@ function PasswordProtection() {
defaultChecked={usePassword}
className="peer sr-only pointer-events-none"
/>
<div className="pointer-events-none peer h-6 w-11 rounded-full bg-stone-400 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border after:border-gray-600 after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-lime-300 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
<div className="peer-disabled:opacity-50 pointer-events-none peer h-6 w-11 rounded-full bg-[#CFCFD0] after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:shadow-xl after:border-none after:bg-white after:box-shadow-md after:transition-all after:content-[''] peer-checked:bg-[#32D583] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-transparent" />
</label>
</div>
{usePassword && (
Expand Down
13 changes: 9 additions & 4 deletions frontend/src/utils/chat/markdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import { encode as HTMLEncode } from "he";
import markdownIt from "markdown-it";
import markdownItKatex from "markdown-it-katex";
import hljs from "highlight.js";
import "highlight.js/styles/github-dark-dimmed.min.css";
import "./themes/github-dark.css";
import "./themes/github.css";
import { v4 } from "uuid";

const markdown = markdownIt({
Expand All @@ -12,9 +13,13 @@ const markdown = markdownIt({
const uuid = v4();
if (lang && hljs.getLanguage(lang)) {
try {
const theme =
window.localStorage.getItem("theme") === "light"
? "github"
: "github-dark";
return (
`<div class="whitespace-pre-line w-full rounded-lg bg-black-900 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200 light:invert">
<div class="w-full flex items-center absolute top-0 left-0 text-slate-200 bg-stone-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">
`<div class="whitespace-pre-line w-full hljs ${theme} light:border light:border-gray-700 rounded-lg px-4 pb-4 relative font-mono font-normal text-sm text-slate-200">
<div class="w-full flex items-center absolute top-0 left-0 text-slate-200 light:bg-sky-800 bg-stone-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">
<div class="flex gap-2">
<code class="text-xs">${lang || ""}</code>
</div>
Expand All @@ -31,7 +36,7 @@ const markdown = markdownIt({
}

return (
`<div class="whitespace-pre-line w-full rounded-lg bg-black-900 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200 light:invert">
`<div class="whitespace-pre-line w-full rounded-lg bg-black-900 light:bg-gray-200 px-4 pb-4 relative font-mono font-normal text-sm text-slate-200">
<div class="w-full flex items-center absolute top-0 left-0 text-slate-200 bg-stone-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md">
<div class="flex gap-2"><code class="text-xs"></code></div>
<button data-code-snippet data-code="code-${uuid}" class="flex items-center gap-x-2">
Expand Down
125 changes: 125 additions & 0 deletions frontend/src/utils/chat/themes/github-dark.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
/*!
Theme: GitHub Dark
Description: Dark theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-dark
Current colors taken from GitHub's CSS
*/

.github-dark.hljs {
color: #c9d1d9;
background: #0d1117;
}

.github-dark .hljs-doctag,
.github-dark .hljs-keyword,
.github-dark .hljs-meta .hljs-keyword,
.github-dark .hljs-template-tag,
.github-dark .hljs-template-variable,
.github-dark .hljs-type,
.github-dark .hljs-variable.language_ {
/* prettylights-syntax-keyword */
color: #ff7b72;
}

.github-dark .hljs-title,
.github-dark .hljs-title.class_,
.github-dark .hljs-title.class_.inherited__,
.github-dark .hljs-title.function_ {
/* prettylights-syntax-entity */
color: #d2a8ff;
}

.github-dark .hljs-attr,
.github-dark .hljs-attribute,
.github-dark .hljs-literal,
.github-dark .hljs-meta,
.github-dark .hljs-number,
.github-dark .hljs-operator,
.github-dark .hljs-variable,
.github-dark .hljs-selector-attr,
.github-dark .hljs-selector-class,
.github-dark .hljs-selector-id {
/* prettylights-syntax-constant */
color: #79c0ff;
}

.github-dark .hljs-regexp,
.github-dark .hljs-string,
.github-dark .hljs-meta .hljs-string {
/* prettylights-syntax-string */
color: #a5d6ff;
}

.github-dark .hljs-built_in,
.github-dark .hljs-symbol {
/* prettylights-syntax-variable */
color: #ffa657;
}

.github-dark .hljs-comment,
.github-dark .hljs-code,
.github-dark .hljs-formula {
/* prettylights-syntax-comment */
color: #8b949e;
}

.github-dark .hljs-name,
.github-dark .hljs-quote,
.github-dark .hljs-selector-tag,
.github-dark .hljs-selector-pseudo {
/* prettylights-syntax-entity-tag */
color: #7ee787;
}

.github-dark .hljs-subst {
/* prettylights-syntax-storage-modifier-import */
color: #c9d1d9;
}

.github-dark .hljs-section {
/* prettylights-syntax-markup-heading */
color: #1f6feb;
font-weight: bold;
}

.github-dark .hljs-bullet {
/* prettylights-syntax-markup-list */
color: #f2cc60;
}

.github-dark .hljs-emphasis {
/* prettylights-syntax-markup-italic */
color: #c9d1d9;
font-style: italic;
}

.github-dark .hljs-strong {
/* prettylights-syntax-markup-bold */
color: #c9d1d9;
font-weight: bold;
}

.github-dark .hljs-addition {
/* prettylights-syntax-markup-inserted */
color: #aff5b4;
background-color: #033a16;
}

.github-dark .hljs-deletion {
/* prettylights-syntax-markup-deleted */
color: #ffdcd7;
background-color: #67060c;
}

.github-dark .hljs-char.escape_,
.github-dark .hljs-link,
.github-dark .hljs-params,
.github-dark .hljs-property,
.github-dark .hljs-punctuation,
.github-dark .hljs-tag {
/* purposely ignored */
}
Loading

0 comments on commit 988181a

Please sign in to comment.