Skip to content

Commit 2286d94

Browse files
brendan-kellambrendan-kellam
authored
Dark theme improvements (#226)
1 parent e82c5e4 commit 2286d94

14 files changed

Lines changed: 200 additions & 110 deletions

File tree

‎packages/web/src/app/[domain]/browse/[...path]/codePreview.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { ScrollArea } from "@/components/ui/scroll-area";
44
import { useKeymapExtension } from "@/hooks/useKeymapExtension";
55
import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
66
import { useSyntaxHighlightingExtension } from "@/hooks/useSyntaxHighlightingExtension";
7-
import { useThemeNormalized } from "@/hooks/useThemeNormalized";
87
import { search } from "@codemirror/search";
98
import CodeMirror, { Decoration, DecorationSet, EditorSelection, EditorView, ReactCodeMirrorRef, SelectionRange, StateField, ViewUpdate } from "@uiw/react-codemirror";
109
import { useEffect, useMemo, useRef, useState } from "react";
1110
import { EditorContextMenu } from "../../components/editorContextMenu";
11+
import { useCodeMirrorTheme } from "@/hooks/useCodeMirrorTheme";
1212

1313
interface CodePreviewProps {
1414
path: string;
@@ -119,7 +119,7 @@ export const CodePreview = ({
119119
// eslint-disable-next-line react-hooks/exhaustive-deps
120120
}, [highlightRange, isEditorCreated]);
121121

122-
const { theme } = useThemeNormalized();
122+
const theme = useCodeMirrorTheme();
123123

124124
return (
125125
<ScrollArea className="h-full overflow-auto flex-1">
@@ -132,7 +132,7 @@ export const CodePreview = ({
132132
value={source}
133133
extensions={extensions}
134134
readOnly={true}
135-
theme={theme === "dark" ? "dark" : "light"}
135+
theme={theme}
136136
>
137137
{editorRef.current && editorRef.current.view && currentSelection && (
138138
<EditorContextMenu

‎packages/web/src/app/[domain]/browse/[...path]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FileHeader } from "@/app/[domain]/components/fireHeader";
1+
import { FileHeader } from "@/app/[domain]/components/fileHeader";
22
import { TopBar } from "@/app/[domain]/components/topBar";
33
import { Separator } from '@/components/ui/separator';
44
import { getFileSource, listRepositories } from '@/lib/server/searchService';

‎packages/web/src/app/[domain]/components/configEditor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { ScrollArea } from "@/components/ui/scroll-area";
44
import { useKeymapExtension } from "@/hooks/useKeymapExtension";
5-
import { useThemeNormalized } from "@/hooks/useThemeNormalized";
65
import { json, jsonLanguage, jsonParseLinter } from "@codemirror/lang-json";
76
import { linter } from "@codemirror/lint";
87
import { EditorView, hoverTooltip } from "@codemirror/view";
@@ -14,6 +13,7 @@ import { Schema } from "ajv";
1413
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
1514
import useCaptureEvent from "@/hooks/useCaptureEvent";
1615
import { CodeHostType } from "@/lib/utils";
16+
import { useCodeMirrorTheme } from "@/hooks/useCodeMirrorTheme";
1717

1818
export type QuickActionFn<T> = (previous: T) => T;
1919
export type QuickAction<T> = {
@@ -119,7 +119,7 @@ const ConfigEditor = <T,>(props: ConfigEditorProps<T>, forwardedRef: Ref<ReactCo
119119
);
120120

121121
const keymapExtension = useKeymapExtension(editorRef.current?.view);
122-
const { theme } = useThemeNormalized();
122+
const theme = useCodeMirrorTheme();
123123

124124
// ⚠️ DISGUSTING HACK AHEAD ⚠️
125125
// Background: When navigating to the /connections/:id?tab=settings page, we were hitting a 500 error with the following
@@ -251,7 +251,7 @@ const ConfigEditor = <T,>(props: ConfigEditorProps<T>, forwardedRef: Ref<ReactCo
251251
customAutocompleteStyle,
252252
...jsonSchemaExtensions,
253253
]}
254-
theme={theme === "dark" ? "dark" : "light"}
254+
theme={theme}
255255
/>
256256
</ScrollArea>
257257
<div

packages/web/src/app/[domain]/components/fireHeader.tsx renamed to packages/web/src/app/[domain]/components/fileHeader.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export const FileHeader = ({
2323
branchDisplayName,
2424
branchDisplayTitle,
2525
}: FileHeaderProps) => {
26-
2726
const info = getRepoCodeHostInfo(repo);
2827

2928
return (
@@ -47,7 +46,7 @@ export const FileHeader = ({
4746
</Link>
4847
{branchDisplayName && (
4948
<p
50-
className="text-xs font-semibold text-gray-500 dark:text-gray-400 mt-0.5 flex items-center gap-0.5"
49+
className="text-xs font-semibold text-gray-500 dark:text-gray-400 mt-[3px] flex items-center gap-0.5"
5150
title={branchDisplayTitle}
5251
>
5352
{/* hack since to make the @ symbol look more centered with the text */}
@@ -64,7 +63,9 @@ export const FileHeader = ({
6463
</p>
6564
)}
6665
<span>·</span>
67-
<div className="flex-1 flex items-center overflow-hidden">
66+
<div
67+
className="flex-1 flex items-center overflow-hidden mt-0.5"
68+
>
6869
<span className="inline-block w-full truncate-start font-mono text-sm">
6970
{!fileNameHighlightRange ?
7071
fileName

‎packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
import { EditorContextMenu } from "@/app/[domain]/components/editorContextMenu";
44
import { Button } from "@/components/ui/button";
55
import { ScrollArea } from "@/components/ui/scroll-area";
6+
import { useCodeMirrorTheme } from "@/hooks/useCodeMirrorTheme";
67
import { useKeymapExtension } from "@/hooks/useKeymapExtension";
78
import { useSyntaxHighlightingExtension } from "@/hooks/useSyntaxHighlightingExtension";
8-
import { useThemeNormalized } from "@/hooks/useThemeNormalized";
99
import { gutterWidthExtension } from "@/lib/extensions/gutterWidthExtension";
1010
import { highlightRanges, searchResultHighlightExtension } from "@/lib/extensions/searchResultHighlightExtension";
1111
import { SearchResultFileMatch } from "@/lib/types";
@@ -44,8 +44,8 @@ export const CodePreview = ({
4444
}: CodePreviewProps) => {
4545
const editorRef = useRef<ReactCodeMirrorRef>(null);
4646

47-
const { theme } = useThemeNormalized();
4847
const [gutterWidth, setGutterWidth] = useState(0);
48+
const theme = useCodeMirrorTheme();
4949

5050
const keymapExtension = useKeymapExtension(editorRef.current?.view);
5151
const syntaxHighlighting = useSyntaxHighlightingExtension(file?.language ?? '', editorRef.current?.view);
@@ -106,7 +106,7 @@ export const CodePreview = ({
106106

107107
return (
108108
<div className="flex flex-col h-full">
109-
<div className="flex flex-row bg-cyan-200 dark:bg-cyan-900 items-center justify-between pr-3 py-0.5">
109+
<div className="flex flex-row bg-accent items-center justify-between pr-3 py-0.5 mt-7">
110110

111111
{/* Gutter icon */}
112112
<div className="flex flex-row">
@@ -178,8 +178,8 @@ export const CodePreview = ({
178178
className="relative"
179179
readOnly={true}
180180
value={file?.content}
181-
theme={theme === "dark" ? "dark" : "light"}
182181
extensions={extensions}
182+
theme={theme}
183183
>
184184
{
185185
editorRef.current?.view &&

‎packages/web/src/app/[domain]/search/components/codePreviewPanel/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useQuery } from "@tanstack/react-query";
66
import { CodePreview, CodePreviewFile } from "./codePreview";
77
import { SearchResultFile } from "@/lib/types";
88
import { useDomain } from "@/hooks/useDomain";
9-
9+
import { SymbolIcon } from "@radix-ui/react-icons";
1010
interface CodePreviewPanelProps {
1111
fileMatch?: SearchResultFile;
1212
onClose: () => void;
@@ -24,7 +24,7 @@ export const CodePreviewPanel = ({
2424
}: CodePreviewPanelProps) => {
2525
const domain = useDomain();
2626

27-
const { data: file } = useQuery({
27+
const { data: file, isLoading } = useQuery({
2828
queryKey: ["source", fileMatch?.FileName, fileMatch?.Repository, fileMatch?.Branches],
2929
queryFn: async (): Promise<CodePreviewFile | undefined> => {
3030
if (!fileMatch) {
@@ -88,6 +88,13 @@ export const CodePreviewPanel = ({
8888
enabled: fileMatch !== undefined,
8989
});
9090

91+
if (isLoading) {
92+
return <div className="flex flex-col items-center justify-center h-full">
93+
<SymbolIcon className="h-6 w-6 animate-spin" />
94+
<p className="font-semibold text-center">Loading...</p>
95+
</div>
96+
}
97+
9198
return (
9299
<CodePreview
93100
file={file}

‎packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const Entry = ({
4646
)}
4747
<p className="overflow-hidden text-ellipsis whitespace-nowrap">{displayName}</p>
4848
</div>
49-
<div className="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 text-sm rounded-md">
49+
<div className="px-2 py-0.5 bg-accent text-sm rounded-md">
5050
{countText}
5151
</div>
5252
</div>

‎packages/web/src/app/[domain]/search/components/searchResultsPanel/codePreview.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
import { getCodemirrorLanguage } from "@/lib/codemirrorLanguage";
44
import { lineOffsetExtension } from "@/lib/extensions/lineOffsetExtension";
55
import { SearchResultRange } from "@/lib/types";
6-
import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
76
import { EditorState, StateField, Transaction } from "@codemirror/state";
8-
import { defaultLightThemeOption, oneDarkHighlightStyle, oneDarkTheme } from "@uiw/react-codemirror";
97
import { Decoration, DecorationSet, EditorView, lineNumbers } from "@codemirror/view";
108
import { useMemo, useRef } from "react";
119
import { LightweightCodeMirror, CodeMirrorRef } from "./lightweightCodeMirror";
12-
import { useThemeNormalized } from "@/hooks/useThemeNormalized";
10+
import { useCodeMirrorTheme } from "@/hooks/useCodeMirrorTheme";
1311

1412
const markDecoration = Decoration.mark({
1513
class: "cm-searchMatch-selected"
@@ -29,19 +27,13 @@ export const CodePreview = ({
2927
lineOffset,
3028
}: CodePreviewProps) => {
3129
const editorRef = useRef<CodeMirrorRef>(null);
32-
const { theme } = useThemeNormalized();
30+
const theme = useCodeMirrorTheme();
3331

3432
const extensions = useMemo(() => {
3533
const codemirrorExtension = getCodemirrorLanguage(language);
3634
return [
3735
EditorView.editable.of(false),
38-
...(theme === 'dark' ? [
39-
syntaxHighlighting(oneDarkHighlightStyle),
40-
oneDarkTheme,
41-
] : [
42-
syntaxHighlighting(defaultHighlightStyle),
43-
defaultLightThemeOption,
44-
]),
36+
theme,
4537
lineNumbers(),
4638
lineOffsetExtension(lineOffset),
4739
codemirrorExtension ? codemirrorExtension : [],

‎packages/web/src/app/[domain]/search/components/searchResultsPanel/fileMatchContainer.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { FileHeader } from "@/app/[domain]/components/fireHeader";
3+
import { FileHeader } from "@/app/[domain]/components/fileHeader";
44
import { Separator } from "@/components/ui/separator";
55
import { Repository, SearchResultFile } from "@/lib/types";
66
import { DoubleArrowDownIcon, DoubleArrowUpIcon } from "@radix-ui/react-icons";
@@ -17,6 +17,7 @@ interface FileMatchContainerProps {
1717
onShowAllMatchesButtonClicked: () => void;
1818
isBranchFilteringEnabled: boolean;
1919
repoMetadata: Record<string, Repository>;
20+
yOffset: number;
2021
}
2122

2223
export const FileMatchContainer = ({
@@ -27,6 +28,7 @@ export const FileMatchContainer = ({
2728
onShowAllMatchesButtonClicked,
2829
isBranchFilteringEnabled,
2930
repoMetadata,
31+
yOffset,
3032
}: FileMatchContainerProps) => {
3133

3234
const matchCount = useMemo(() => {
@@ -92,7 +94,10 @@ export const FileMatchContainer = ({
9294
<div>
9395
{/* Title */}
9496
<div
95-
className="top-0 bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 py-0.5 flex flex-row items-center justify-between cursor-pointer"
97+
className="bg-accent primary-foreground px-2 py-0.5 flex flex-row items-center justify-between cursor-pointer sticky top-0 z-10"
98+
style={{
99+
top: `-${yOffset}px`,
100+
}}
96101
onClick={() => {
97102
onOpenFile();
98103
}}
@@ -119,7 +124,7 @@ export const FileMatchContainer = ({
119124
}}
120125
/>
121126
{(index !== matches.length - 1 || isMoreContentButtonVisible) && (
122-
<Separator className="dark:bg-gray-400" />
127+
<Separator className="bg-accent" />
123128
)}
124129
</div>
125130
))}

‎packages/web/src/app/[domain]/search/components/searchResultsPanel/index.tsx‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -124,36 +124,40 @@ export const SearchResultsPanel = ({
124124
position: "relative",
125125
}}
126126
>
127-
{virtualizer.getVirtualItems().map((virtualRow) => (
128-
<div
129-
key={virtualRow.key}
130-
data-index={virtualRow.index}
131-
ref={virtualizer.measureElement}
132-
style={{
133-
position: 'absolute',
134-
top: 0,
135-
left: 0,
136-
width: '100%',
137-
transform: `translateY(${virtualRow.start}px)`,
138-
}}
139-
>
140-
<FileMatchContainer
141-
file={fileMatches[virtualRow.index]}
142-
onOpenFile={() => {
143-
onOpenFileMatch(fileMatches[virtualRow.index]);
144-
}}
145-
onMatchIndexChanged={(matchIndex) => {
146-
onMatchIndexChanged(matchIndex);
147-
}}
148-
showAllMatches={showAllMatchesStates[virtualRow.index]}
149-
onShowAllMatchesButtonClicked={() => {
150-
onShowAllMatchesButtonClicked(virtualRow.index);
127+
{virtualizer.getVirtualItems().map((virtualRow) => {
128+
const file = fileMatches[virtualRow.index];
129+
return (
130+
<div
131+
key={virtualRow.key}
132+
data-index={virtualRow.index}
133+
ref={virtualizer.measureElement}
134+
style={{
135+
position: 'absolute',
136+
transform: `translateY(${virtualRow.start}px)`,
137+
top: 0,
138+
left: 0,
139+
width: '100%',
151140
}}
152-
isBranchFilteringEnabled={isBranchFilteringEnabled}
153-
repoMetadata={repoMetadata}
154-
/>
155-
</div>
156-
))}
141+
>
142+
<FileMatchContainer
143+
file={file}
144+
onOpenFile={() => {
145+
onOpenFileMatch(file);
146+
}}
147+
onMatchIndexChanged={(matchIndex) => {
148+
onMatchIndexChanged(matchIndex);
149+
}}
150+
showAllMatches={showAllMatchesStates[virtualRow.index]}
151+
onShowAllMatchesButtonClicked={() => {
152+
onShowAllMatchesButtonClicked(virtualRow.index);
153+
}}
154+
isBranchFilteringEnabled={isBranchFilteringEnabled}
155+
repoMetadata={repoMetadata}
156+
yOffset={virtualRow.start}
157+
/>
158+
</div>
159+
)
160+
})}
157161
</div>
158162
{isLoadMoreButtonVisible && (
159163
<div className="p-3">

0 commit comments

Comments
 (0)