highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-04-04 01:48:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve code block formatting (#2084)

Browse Source 
* initial update to styling

* fix chat input bar padding

* improve color choices
This commit is contained in:
pablodanswer 2024-08-08 10:12:35 -07:00 committed by GitHub
parent f411b9cb55
commit c630fcffee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 104 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/chat/ChatPage.tsx
View File

@ -1283,7 +1283,7 @@ export function ChatPage({
)}
<div
className={`h-full w-full relative flex-auto transition-margin duration-300 overflow-x-auto mobile:pb-12 desktop:pb-[140px]`}
className={`h-full w-full relative flex-auto transition-margin duration-300 overflow-x-auto mobile:pb-12 desktop:pb-[100px]`}
{...getRootProps()}
>
{/* <input {...getInputProps()} /> */}

84
web/src/app/globals.css
View File

@ -140,3 +140,87 @@
body {
overscroll-behavior-y: none;
}
/* Base styles for code blocks */
.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
background-color: theme("colors.code-bg");
font-size: theme("fontSize.code-sm");
}
pre[class*="language-"],
code[class*="language-"] {
color: theme("colors.code-text");
background: white;
}
/* Token styles */
.code-line .token.comment,
.code-line .token.prolog,
.code-line .token.doctype,
.code-line .token.cdata {
color: theme("colors.token-comment");
}
.code-line .token.punctuation,
.code-line .token.operator,
.code-line .token.entity,
.code-line .token.url,
.code-line .language-css .token.string,
.code-line .style .token.string {
color: theme("colors.token-punctuation");
}
.code-line .token.property,
.code-line .token.tag,
.code-line .token.boolean,
.code-line .token.number,
.code-line .token.constant,
.code-line .token.symbol,
.code-line .token.deleted,
.code-line .token.tag .token.punctuation {
color: theme("colors.token-property");
}
.code-line .token.selector,
.code-line .token.attr-name,
.code-line .token.string,
.code-line .token.char,
.code-line .token.builtin,
.code-line .token.inserted,
.code-line .token.attr-value,
.code-line .token.attr-value .token.punctuation {
color: theme("colors.token-selector");
}
.code-line .token.atrule,
.code-line .token.keyword {
color: theme("colors.token-atrule");
}
.code-line .token.function,
.code-line .token.class-name {
color: theme("colors.token-function");
}
.code-line .token.regex,
.code-line .token.important,
.code-line .token.variable {
color: theme("colors.token-regex");
}
.code-line .token.important,
.code-line .token.bold {
font-weight: theme("fontWeight.token-bold");
}
.code-line .token.italic {
font-style: theme("fontStyle.token-italic");
}
.code-line .token.entity {
cursor: help;
}
.code-line .token.attr-name {
color: theme("colors.token-attr-name");
}

20
web/tailwind-themes/tailwind.config.js
View File

@ -67,8 +67,19 @@ module.exports = {
"searchbar-max": "750px",
},
colors: {
// background
// code styling
"code-bg": "black", // black
"code-text": "#e0e0e0", // light gray
"token-comment": "#608b4e", // green
"token-punctuation": "#d4d4d4", // light gray
"token-property": "#569cd6", // blue
"token-selector": "#e07b53", // more vibrant orange
"token-atrule": "#d18ad8", // more vibrant purple
"token-function": "#f0e68c", // more vibrant light yellow
"token-regex": "#9cdcfe", // light blue
"token-attr-name": "#9cdcfe", // light blue
// background
"background-search": "#ffffff", // white
input: "#f5f5f5",
@ -232,11 +243,18 @@ module.exports = {
"tremor-full": "9999px",
},
fontSize: {
"code-sm": "small",
"tremor-label": ["0.75rem"],
"tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
"tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
"tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
},
fontWeight: {
"token-bold": "bold",
},
fontStyle: {
"token-italic": "italic",
},
},
},
safelist: [