Skip to content

Commit 01c8678

Browse files
xPawxPaw
committed
improve background
1 parent 28dfde7 commit 01c8678

File tree

9 files changed

+53
-48
lines changed

9 files changed

+53
-48
lines changed

‎web/src/components/Docs/SchemaType.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function SchemaTypeView({ type }: { type: SchemaFieldType }) {
3636
if (type.inner) {
3737
return (
3838
<>
39-
{type.name}
39+
<ColoredSyntax kind="interface">{type.name}</ColoredSyntax>
4040
{"< "}
4141
<SchemaTypeView type={type.inner} />
4242
{type.inner2 && (
@@ -48,7 +48,7 @@ export function SchemaTypeView({ type }: { type: SchemaFieldType }) {
4848
</>
4949
);
5050
}
51-
return <span>{type.name}</span>;
51+
return <ColoredSyntax kind="interface">{type.name}</ColoredSyntax>;
5252
case "bitfield":
5353
return <ColoredSyntax kind="literal">bitfield:{type.count}</ColoredSyntax>;
5454
}
@@ -70,6 +70,7 @@ const MetadataList = styled.div`
7070
font-size: 14px;
7171
color: ${(props) => props.theme.textDim};
7272
margin-top: 4px;
73+
margin-bottom: 4px;
7374
margin-left: 20px;
7475
display: flex;
7576
flex-direction: column;

‎web/src/components/GlobalStyle.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import { createGlobalStyle } from "styled-components";
33
export const GlobalStyle = createGlobalStyle`
44
html, body, #root {
55
width: 100%;
6-
height: 100%;
76
margin: 0;
87
background-color: ${(props) => props.theme.background};
8+
scrollbar-gutter: stable;
99
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
1010
font-size: 16px;
1111
-webkit-font-smoothing: antialiased;
1212
-moz-osx-font-smoothing: grayscale;
1313
scrollbar-color: ${(props) => props.theme.scrollbar.thumb} ${(props) => props.theme.scrollbar.track};
14-
scrollbar-width: thin;
1514
}
1615
1716
*, *::before, *::after {

‎web/src/components/Lists.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useRef } from "react";
2-
import { useVirtualizer } from "@tanstack/react-virtual";
2+
import { useWindowVirtualizer } from "@tanstack/react-virtual";
33

44
interface Props<T> {
55
className?: string;
@@ -8,17 +8,17 @@ interface Props<T> {
88
}
99

1010
export function LazyList<T>({ className, data, render }: Props<T>) {
11-
const parentRef = useRef<HTMLDivElement>(null);
11+
const listRef = useRef<HTMLDivElement>(null);
1212

13-
const virtualizer = useVirtualizer({
13+
const virtualizer = useWindowVirtualizer({
1414
count: data.length,
15-
getScrollElement: () => parentRef.current,
1615
estimateSize: () => 200,
1716
overscan: 3,
17+
scrollMargin: listRef.current?.offsetTop ?? 0,
1818
});
1919

2020
return (
21-
<div ref={parentRef} className={className} style={{ flex: 1, overflow: "auto" }}>
21+
<div ref={listRef} className={className}>
2222
<div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
2323
{virtualizer.getVirtualItems().map((virtualRow) => (
2424
<div
@@ -30,7 +30,7 @@ export function LazyList<T>({ className, data, render }: Props<T>) {
3030
top: 0,
3131
left: 0,
3232
width: "100%",
33-
transform: `translateY(${virtualRow.start}px)`,
33+
transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`,
3434
}}
3535
>
3636
{render(data[virtualRow.index])}
@@ -43,7 +43,7 @@ export function LazyList<T>({ className, data, render }: Props<T>) {
4343

4444
export function ScrollableList<T>({ className, data, render }: Props<T>) {
4545
return (
46-
<div className={className} style={{ flex: 1, overflowX: "hidden", overflowY: "auto" }}>
46+
<div className={className}>
4747
{data.map((x) => render(x))}
4848
</div>
4949
);

‎web/src/components/Themes.tsx‎

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,12 @@ export const themeLight = {
44
text: "#1a1d21",
55
textDim: "#5f6672",
66

7-
navbar: "#ffffff",
8-
navbarLinkShadow: "transparent",
9-
navbarShadow: "#e2e5ea",
10-
sidebar: "#ffffff",
7+
sidebar: "#eceef3",
118
group: "#ffffff",
12-
groupMembers: "#f5f6f8",
9+
groupMembers: "#f0f1f5",
1310
groupShadow: "0 1px 3px #0000000a, 0 1px 2px #0000000f",
14-
groupSeparator: "#eceef1",
15-
groupBorder: "#eceef1",
11+
groupSeparator: "#e0e2e8",
12+
groupBorder: "#e0e2e8",
1613
searchHighlight: "#fef9c3",
1714

1815
syntax: {
@@ -24,34 +21,31 @@ export const themeLight = {
2421

2522
scrollbar: {
2623
track: "transparent",
27-
thumb: "#d1d5db",
24+
thumb: "#cdd0d6",
2825
},
2926

3027
searchbox: {
31-
background: "#f0f1f4",
28+
background: "#eceef3",
3229
placeholder: "#9ca3af",
3330
border: "none",
3431
button: "transparent",
35-
buttonFill: "#888888",
36-
buttonFillUpdated: "#000000",
32+
buttonFill: "#777c85",
33+
buttonFillUpdated: "#1a1d21",
3734
},
3835
};
3936

4037
export const themeDark = {
41-
background: "#111318",
38+
background: "#0c131d",
4239
highlight: "#6dbf3a",
4340
text: "#e4e6ea",
4441
textDim: "#8b909a",
4542

46-
navbar: "#181a20",
47-
navbarLinkShadow: "transparent",
48-
navbarShadow: "#0000004d",
49-
sidebar: "#181a20",
50-
group: "#1a1c23",
51-
groupMembers: "#1f2128",
43+
sidebar: "#090e15",
44+
group: "#181a21",
45+
groupMembers: "#1e2028",
5246
groupShadow: "0 1px 3px #00000033, 0 1px 2px #00000044",
53-
groupSeparator: "#282b33",
54-
groupBorder: "#282b33",
47+
groupSeparator: "#262930",
48+
groupBorder: "#262930",
5549
searchHighlight: "#6dbf3a20",
5650

5751
syntax: {
@@ -63,15 +57,15 @@ export const themeDark = {
6357

6458
scrollbar: {
6559
track: "transparent",
66-
thumb: "#383c44",
60+
thumb: "#363a42",
6761
},
6862

6963
searchbox: {
70-
background: "#1f2128",
64+
background: "#181a21",
7165
placeholder: "#6b7280",
7266
border: "none",
7367
button: "transparent",
74-
buttonFill: "#888888",
68+
buttonFill: "#8b909a",
7569
buttonFillUpdated: "#e4e6ea",
7670
},
7771
};

‎web/src/components/layout/Content.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@ import styled from "styled-components";
33
export const ContentWrapper = styled.main`
44
grid-column: 2;
55
grid-row: 2;
6-
display: flex;
7-
flex-flow: column;
8-
padding: 0 0 0 14px;
6+
padding: 0 0 0 24px;
97
min-width: 0;
10-
min-height: 0;
118
129
@media (max-width: 768px) {
1310
grid-column: 1;

‎web/src/components/layout/NavBar.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,15 @@ const NavBarCell = styled.div`
4343
grid-row: 1;
4444
display: flex;
4545
align-items: center;
46-
background-color: ${(props) => props.theme.navbar};
47-
border-bottom: 1px solid ${(props) => props.theme.groupBorder};
4846
`;
4947

5048
const NavBarSidebarCell = styled(NavBarCell)`
5149
grid-column: 1;
5250
padding: 10px 14px;
51+
background-color: ${(props) => props.theme.sidebar};
52+
position: sticky;
53+
top: 0;
54+
z-index: 10;
5355
5456
@media (max-width: 768px) {
5557
display: none;
@@ -59,11 +61,16 @@ const NavBarSidebarCell = styled(NavBarCell)`
5961
const NavBarContentCell = styled(NavBarCell)`
6062
grid-column: 2;
6163
gap: 14px;
62-
padding: 10px 14px;
64+
padding: 10px 14px 10px 24px;
6365
min-width: 0;
66+
background-color: ${(props) => props.theme.background};
67+
position: sticky;
68+
top: 0;
69+
z-index: 10;
6470
6571
@media (max-width: 768px) {
6672
grid-column: 1;
73+
padding: 10px 14px;
6774
}
6875
`;
6976

@@ -80,8 +87,7 @@ const NavBarSimple = styled.nav`
8087
justify-content: flex-end;
8188
gap: 14px;
8289
padding: 10px 14px;
83-
background-color: ${(props) => props.theme.navbar};
84-
border-bottom: 1px solid ${(props) => props.theme.groupBorder};
90+
background-color: ${(props) => props.theme.background};
8591
`;
8692

8793
const HomeBrandLink = styled(NavLink)`

‎web/src/components/layout/Sidebar.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ import styled from "styled-components";
44
import { IconKind, KindIcon } from "~components/KindIcon";
55
import { Declaration } from "~components/Docs/api";
66
import { DeclarationsContext } from "~components/Docs/DeclarationsContext";
7+
import { NAVBAR_HEIGHT } from "./constants";
78

89
const SidebarLink = styled(NavLink)`
910
display: block;
1011
background: transparent;
11-
border-radius: 6px;
1212
border-left: 2px solid transparent;
1313
padding: 4px 8px;
1414
text-decoration: none;
1515
color: ${(props) => props.theme.text};
1616
overflow: hidden;
1717
text-overflow: ellipsis;
1818
white-space: nowrap;
19-
height: 100%;
2019
box-sizing: border-box;
2120
font-size: 14px;
21+
line-height: 20px;
2222
transition: background 0.1s, color 0.1s;
2323
2424
&:hover {
@@ -27,7 +27,7 @@ const SidebarLink = styled(NavLink)`
2727
2828
&.active {
2929
font-weight: 600;
30-
background: ${(props) => props.theme.highlight}12;
30+
background: ${(props) => props.theme.highlight}18;
3131
border-left: 2px solid ${(props) => props.theme.highlight};
3232
color: ${(props) => props.theme.highlight};
3333
}
@@ -92,6 +92,11 @@ export const SidebarWrapper = styled.div`
9292
overflow: hidden;
9393
min-width: 0;
9494
padding: 6px 8px 4px 10px;
95+
background-color: ${(props) => props.theme.sidebar};
96+
position: sticky;
97+
top: ${NAVBAR_HEIGHT}px;
98+
height: calc(100dvh - ${NAVBAR_HEIGHT}px);
99+
align-self: start;
95100
96101
@media (max-width: 768px) {
97102
display: none;

‎web/src/components/layout/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const NAVBAR_HEIGHT = 60;

‎web/src/pages/DeclarationsPage.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,13 @@ export default function DeclarationsPage({ context }: { context: Omit<Declaratio
8181
);
8282
}
8383

84+
import { NAVBAR_HEIGHT } from "~components/layout/constants";
85+
8486
const PageGrid = styled.div`
8587
display: grid;
8688
grid-template-columns: 340px 1fr;
87-
grid-template-rows: auto 1fr;
88-
height: 100%;
89+
grid-template-rows: ${NAVBAR_HEIGHT}px 1fr;
90+
min-height: 100dvh;
8991
9092
@media (max-width: 1100px) {
9193
grid-template-columns: 200px 1fr;

0 commit comments

Comments
 (0)