Skip to content

Commit 7023f52

Browse files
xPawxPaw
committed
Update icons
1 parent 6007bae commit 7023f52

File tree

15 files changed

+109
-565
lines changed

15 files changed

+109
-565
lines changed

‎web/package-lock.json‎

Lines changed: 1 addition & 435 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
"eslint-plugin-react-hooks": "^5.2.0",
2626
"typescript": "^5.9.3",
2727
"typescript-eslint": "^8.56.1",
28-
"vite": "^7.3.1",
29-
"vite-plugin-svgr": "^4.5.0"
28+
"vite": "^7.3.1"
3029
}
3130
}

‎web/public/cs2.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 22 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,28 @@
11
import React, { useContext } from "react";
2-
import { Link } from "react-router-dom";
32
import styled from "styled-components";
43
import { Declaration, SchemaClass, SchemaEnum } from "./api";
54
import { DeclarationsContext } from "./DeclarationsContext";
65
import { GAMES, GameId } from "~games";
7-
8-
const Wrapper = styled.div`
9-
padding: 10px 14px;
10-
border-top: 1px solid ${(props) => props.theme.groupSeparator};
11-
`;
12-
13-
const Title = styled.div`
14-
font-size: 14px;
15-
font-weight: 600;
16-
text-transform: uppercase;
17-
letter-spacing: 0.04em;
18-
color: ${(props) => props.theme.textDim};
19-
margin-bottom: 6px;
20-
`;
21-
22-
const RefList = styled.div`
23-
display: flex;
24-
flex-wrap: wrap;
25-
gap: 5px;
26-
`;
6+
import { SectionWrapper, SectionTitle, SectionList, SectionLink } from "./utils/styles";
277

288
type DiffStatus = "identical" | "offsets_only" | "differs";
299

3010
const statusColor = (status: DiffStatus) =>
3111
status === "identical" ? "#4a8c2a" : status === "offsets_only" ? "#5b8ab5" : "#c97a1e";
3212

33-
const GameLink = styled(Link)<{ $status: DiffStatus }>`
34-
display: inline-flex;
35-
align-items: center;
36-
gap: 6px;
37-
padding: 3px 10px;
38-
border-radius: 6px;
39-
font-size: 14px;
40-
text-decoration: none;
41-
color: ${(props) => props.theme.text};
42-
background: ${(props) => props.theme.groupMembers};
43-
border: 1px solid ${(props) => props.$status === "identical" ? props.theme.groupBorder : statusColor(props.$status)};
44-
transition: border-color 0.1s;
45-
46-
&:hover {
47-
border-color: ${(props) => props.theme.highlight};
48-
}
13+
const GameLink = styled(SectionLink)<{ $status: DiffStatus }>`
14+
border-color: ${(props) => props.$status === "identical" ? props.theme.groupBorder : statusColor(props.$status)};
4915
`;
5016

51-
const StatusDot = styled.span<{ $status: DiffStatus }>`
52-
width: 8px;
53-
height: 8px;
54-
border-radius: 50%;
55-
background-color: ${(props) => statusColor(props.$status)};
17+
const GameIconWrapper = styled.span`
18+
display: flex;
5619
flex-shrink: 0;
20+
21+
> svg {
22+
width: 18px;
23+
height: 18px;
24+
border-radius: 3px;
25+
}
5726
`;
5827

5928
function compareClasses(a: SchemaClass, b: SchemaClass): DiffStatus {
@@ -115,16 +84,19 @@ export function CrossGameRefs({ name, module, kind }: { name: string; module: st
11584
if (otherGames.length === 0) return null;
11685

11786
return (
118-
<Wrapper>
119-
<Title>Also in</Title>
120-
<RefList>
121-
{otherGames.map(({ gameId, gameName, status, module: otherModule }) => (
87+
<SectionWrapper>
88+
<SectionTitle>Also in</SectionTitle>
89+
<SectionList>
90+
{otherGames.map(({ gameId, gameName, status, module: otherModule }) => {
91+
const gameInfo = GAMES.find((g) => g.id === gameId);
92+
return (
12293
<GameLink key={gameId} to={`/${gameId}/${otherModule}/${name}`} $status={status} title={status === "identical" ? "Identical" : status === "offsets_only" ? "Only offsets differ" : "Differs"}>
123-
<StatusDot $status={status} />
94+
{gameInfo && <GameIconWrapper>{gameInfo.icon}</GameIconWrapper>}
12495
{gameName}
12596
</GameLink>
126-
))}
127-
</RefList>
128-
</Wrapper>
97+
);
98+
})}
99+
</SectionList>
100+
</SectionWrapper>
129101
);
130102
}

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

Lines changed: 10 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,11 @@
11
import React, { useContext, useState } from "react";
2-
import { Link } from "react-router-dom";
32
import styled from "styled-components";
43
import { DeclarationsContext } from "./DeclarationsContext";
5-
import { KindIcon } from "./utils/components";
4+
import { KindIcon } from "~components/KindIcon";
5+
import { SectionWrapper, SectionTitle, SectionList, SectionLink } from "./utils/styles";
66

77
const COLLAPSE_THRESHOLD = 8;
88

9-
const Wrapper = styled.div`
10-
padding: 10px 14px;
11-
border-top: 1px solid ${(props) => props.theme.groupSeparator};
12-
`;
13-
14-
const Title = styled.div`
15-
font-size: 14px;
16-
font-weight: 600;
17-
text-transform: uppercase;
18-
letter-spacing: 0.04em;
19-
color: ${(props) => props.theme.textDim};
20-
margin-bottom: 6px;
21-
`;
22-
23-
const RefList = styled.div`
24-
display: flex;
25-
flex-wrap: wrap;
26-
gap: 5px;
27-
`;
28-
29-
const RefLink = styled(Link)`
30-
display: inline-flex;
31-
align-items: center;
32-
gap: 4px;
33-
padding: 3px 10px;
34-
border-radius: 6px;
35-
font-size: 14px;
36-
text-decoration: none;
37-
color: ${(props) => props.theme.text};
38-
background: ${(props) => props.theme.groupMembers};
39-
border: 1px solid ${(props) => props.theme.groupBorder};
40-
transition: border-color 0.1s;
41-
42-
&:hover {
43-
border-color: ${(props) => props.theme.highlight};
44-
}
45-
`;
46-
479
const RefField = styled.span`
4810
color: ${(props) => props.theme.textDim};
4911
@@ -76,21 +38,21 @@ export function ReferencedBy({ name, module }: { name: string; module: string })
7638
const visible = collapsible && !expanded ? refs.slice(0, COLLAPSE_THRESHOLD) : refs;
7739

7840
return (
79-
<Wrapper>
80-
<Title>Referenced by ({refs.length})</Title>
81-
<RefList>
41+
<SectionWrapper>
42+
<SectionTitle>Referenced by ({refs.length})</SectionTitle>
43+
<SectionList>
8244
{visible.map((ref, i) => (
83-
<RefLink key={`${ref.declarationModule}/${ref.declarationName}-${ref.fieldName ?? ""}-${i}`} to={`${root}/${ref.declarationModule}/${ref.declarationName}`}>
84-
<KindIcon kind={ref.declarationKind} size="small" />
45+
<SectionLink key={`${ref.declarationModule}/${ref.declarationName}-${ref.fieldName ?? ""}-${i}`} to={`${root}/${ref.declarationModule}/${ref.declarationName}`}>
46+
<KindIcon kind={ref.declarationKind} size={18} />
8547
<span>{ref.declarationName}{ref.fieldName && <RefField>{ref.fieldName}</RefField>}</span>
86-
</RefLink>
48+
</SectionLink>
8749
))}
8850
{collapsible && (
8951
<ToggleButton onClick={() => setExpanded(!expanded)} aria-label={expanded ? "Show fewer references" : "Show all references"} aria-expanded={expanded}>
9052
{expanded ? "show less" : `+${refs.length - COLLAPSE_THRESHOLD} more…`}
9153
</ToggleButton>
9254
)}
93-
</RefList>
94-
</Wrapper>
55+
</SectionList>
56+
</SectionWrapper>
9557
);
9658
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ function EnumMemberView({ member, highlighted }: { member: api.SchemaEnumMember;
102102
return (
103103
<EnumMemberWrapper $highlighted={highlighted}>
104104
<EnumMemberSignature>
105+
<KindIcon kind="enum-member" size="small" />
105106
{member.name} = <ColoredSyntax kind="literal">{member.value}</ColoredSyntax>
106107
</EnumMemberSignature>
107108
{member.metadata && <MetadataTags metadata={member.metadata} />}

‎web/src/components/Docs/utils/styles.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,44 @@ export const DeclarationNameLink = styled(Link)`
4949
}
5050
`;
5151

52+
export const SectionWrapper = styled.div`
53+
padding: 10px 14px;
54+
border-top: 1px solid ${(props) => props.theme.groupSeparator};
55+
`;
56+
57+
export const SectionTitle = styled.div`
58+
font-size: 14px;
59+
font-weight: 600;
60+
text-transform: uppercase;
61+
letter-spacing: 0.04em;
62+
color: ${(props) => props.theme.textDim};
63+
margin-bottom: 6px;
64+
`;
65+
66+
export const SectionList = styled.div`
67+
display: flex;
68+
flex-wrap: wrap;
69+
gap: 5px;
70+
`;
71+
72+
export const SectionLink = styled(Link)`
73+
display: inline-flex;
74+
align-items: center;
75+
gap: 6px;
76+
padding: 3px 10px;
77+
border-radius: 6px;
78+
font-size: 14px;
79+
text-decoration: none;
80+
color: ${(props) => props.theme.text};
81+
background: ${(props) => props.theme.groupMembers};
82+
border: 1px solid ${(props) => props.theme.groupBorder};
83+
transition: border-color 0.1s;
84+
85+
&:hover {
86+
border-color: ${(props) => props.theme.highlight};
87+
}
88+
`;
89+
5290
export const CollapsedItemsLink = styled(Link)`
5391
display: block;
5492
padding: 4px 8px;

‎web/src/components/KindIcon/Class.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎web/src/components/KindIcon/EnumItem.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎web/src/components/KindIcon/Field.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)