Skip to content

Commit de8e659

Browse files
OksamiesOksamies
committed
Fix issues brought up in QA of PR #1206 
1 parent d8cb12e commit de8e659

File tree

20 files changed

+730
-239
lines changed

20 files changed

+730
-239
lines changed

Diff for: ‎apps/cyberstorm-remix/app/communities/communities.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export default function CommunitiesPage() {
137137
csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]}
138138
>
139139
<div className={searchAndOrderStyles.searchTextInput}>
140-
<span>Search</span>
140+
<label htmlFor="communitiesSearchInput">Search</label>
141141
<NewTextInput
142142
onChange={(e) => setSearchValue(e.target.value)}
143143
value={searchValue}
@@ -146,15 +146,17 @@ export default function CommunitiesPage() {
146146
leftIcon={<FontAwesomeIcon icon={faSearch} />}
147147
csColor="cyber-green"
148148
rootClasses={searchAndOrderStyles.searchInput}
149+
id="communitiesSearchInput"
149150
/>
150151
</div>
151152
<div className={searchAndOrderStyles.searchFilters}>
152-
<span>Sort by</span>
153+
<label htmlFor="communitiesSortBy">Sort by</label>
153154
<NewSelect
154155
onChange={changeOrder}
155156
options={selectOptions}
156157
value={searchParams.get("order") ?? SortOptions.Popular}
157158
aria-label="Sort communities by"
159+
id="communitiesSortBy"
158160
/>
159161
</div>
160162
</Container>
@@ -208,7 +210,7 @@ function CommunitiesList(props: { communitiesData: Communities }) {
208210
<CardCommunity
209211
key={community.identifier}
210212
community={community}
211-
isPopular={flatDogs.includes(community.identifier)}
213+
isPopular={community.total_package_count > 1000}
212214
isNew={
213215
new Date(community.datetime_created).getTime() >
214216
new Date().getTime() - 1000 * 60 * 60 * 336

Diff for: ‎apps/cyberstorm-remix/app/root.tsx

+34-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ import {
1717
import { Footer } from "@thunderstore/cyberstorm/src/components/Footer/Footer";
1818
import { Provider as RadixTooltip } from "@radix-ui/react-tooltip";
1919

20-
import { Navigation } from "cyberstorm/navigation/Navigation";
20+
import {
21+
MobileNavigationMenu,
22+
MobileUserPopoverContent,
23+
Navigation,
24+
} from "cyberstorm/navigation/Navigation";
2125
import { LinkLibrary } from "cyberstorm/utils/LinkLibrary";
2226
import { AdContainer, LinkingProvider } from "@thunderstore/cyberstorm";
2327
import { DapperTs } from "@thunderstore/dapper-ts";
@@ -29,10 +33,12 @@ import {
2933
getPublicEnvVariables,
3034
publicEnvVariables,
3135
} from "cyberstorm/security/publicEnvVariables";
32-
import { useEffect, useRef } from "react";
36+
import { useEffect, useRef, useState } from "react";
3337
import { useHydrated } from "remix-utils/use-hydrated";
3438
import Toast from "@thunderstore/cyberstorm/src/components/Toast";
3539
import { SessionProvider } from "@thunderstore/ts-api-react";
40+
import { CurrentUser } from "@thunderstore/dapper/types";
41+
import { getDapper } from "cyberstorm/dapper/sessionUtils";
3642

3743
// REMIX TODO: https://remix.run/docs/en/main/route/links
3844
// export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
@@ -128,6 +134,22 @@ function Root() {
128134
? false
129135
: true;
130136

137+
const isHydrated = useHydrated();
138+
const startsHydrated = useRef(isHydrated);
139+
const [currentUser, setCurrentUser] = useState<CurrentUser>();
140+
141+
useEffect(() => {
142+
if (!startsHydrated.current && isHydrated) return;
143+
const fetchAndSetUser = async () => {
144+
const dapper = await getDapper(true);
145+
const fetchedUser = await dapper.getCurrentUser();
146+
if (fetchedUser?.username) {
147+
setCurrentUser(fetchedUser);
148+
}
149+
};
150+
fetchAndSetUser();
151+
}, []);
152+
131153
return (
132154
<html lang="en">
133155
<head>
@@ -173,7 +195,16 @@ function Root() {
173195
<RadixTooltip delayDuration={300}>
174196
<div className={styles.root}>
175197
{/* REMIX TODO: For whatever reason the Navigation seems to cause suspense boundary errors. Couldn't find a reason why */}
176-
<Navigation />
198+
<Navigation
199+
hydrationCheck={!startsHydrated.current && isHydrated}
200+
currentUser={currentUser}
201+
/>
202+
<MobileNavigationMenu />
203+
{!startsHydrated.current && isHydrated && currentUser ? (
204+
<MobileUserPopoverContent user={currentUser} />
205+
) : (
206+
<MobileUserPopoverContent />
207+
)}
177208
<section className={styles.content}>
178209
<div className={styles.sideContainers} />
179210
<div className={styles.middleContainer}>

Diff for: ‎apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx

+108-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
import styles from "./Navigation.module.css";
2+
import {
3+
Heading,
4+
Modal,
5+
NewButton,
6+
NewIcon,
7+
NewLink,
8+
NewText,
9+
} from "@thunderstore/cyberstorm";
10+
import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
11+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
12+
import { OverwolfLogo } from "@thunderstore/cyberstorm/src/svg/svg";
13+
import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
14+
import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth";
15+
import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
16+
117
import styles from "./Navigation.module.css";
218
import { Modal, NewButton, NewIcon } from "@thunderstore/cyberstorm";
319
import { LoginList } from "./LoginList";
@@ -27,7 +43,98 @@ export function DesktopLoginPopover() {
2743
</NewButton>
2844
}
2945
>
30-
<LoginList />
46+
<div className={styles.loginList}>
47+
<svg
48+
xmlns="http://www.w3.org/2000/svg"
49+
width="50"
50+
height="45"
51+
viewBox="0 0 50 45"
52+
fill="none"
53+
className={styles.TSLoginLogo}
54+
>
55+
<path
56+
d="M0.710078 24.9394L9.78854 41.2481L14.6615 32.2309L10.0734 23.9981C9.52443 23.0474 9.52443 21.9529 10.0734 20.9973L16.2418 10.2767C16.7912 9.32224 17.734 8.77655 18.831 8.77697H22.1474L15.7292 23.2203H23.6593L12.8766 44.1116L34.5318 18.1671H27.8748L32.4178 8.77697H40.3769H45.006L49.96 0.167812H35.7761H26.3397H14.9641C13.1759 0.168228 11.6411 1.05689 10.7459 2.60758L0.710078 20.0561C-0.182994 21.6105 -0.18362 23.3929 0.710078 24.9394ZM17.1308 44.832H35.0372C36.8217 44.832 38.3601 43.9432 39.2578 42.3883L49.2938 24.9389C50.1816 23.3929 50.1816 21.6105 49.2938 20.0557L45.2805 13.0783H35.3738L39.93 20.9973C40.4744 21.9537 40.4744 23.048 39.9285 23.9985L33.7625 34.7217C33.2095 35.6776 32.2661 36.2225 31.1679 36.2225H26.6871L24.2827 36.1873L17.1308 44.832Z"
57+
fill="url(#paint0_linear_11481_128455)"
58+
/>
59+
<defs>
60+
<linearGradient
61+
id="paint0_linear_11481_128455"
62+
x1="28.2562"
63+
y1="44.832"
64+
x2="28.2562"
65+
y2="0.167812"
66+
gradientUnits="userSpaceOnUse"
67+
>
68+
<stop stopColor="#00B976" />
69+
<stop offset="0.796875" stopColor="#46FFBD" />
70+
</linearGradient>
71+
</defs>
72+
</svg>
73+
<Heading
74+
mode="heading"
75+
csLevel="2"
76+
csStyleLevel="3"
77+
rootClasses={styles.loginTitle}
78+
>
79+
Log in to Thunderstore
80+
</Heading>
81+
<div className={styles.loginLinkList}>
82+
<NewLink
83+
primitiveType="link"
84+
href={buildAuthLoginUrl({ type: "discord" })}
85+
rootClasses={classnames(styles.loginLink, styles.loginLinkDiscord)}
86+
csTextStyles={["fontSizeS", "fontWeightBold"]}
87+
>
88+
<NewIcon csMode="inline" noWrapper>
89+
<FontAwesomeIcon icon={faDiscord} />
90+
</NewIcon>
91+
Connect with Discord
92+
</NewLink>
93+
<NewLink
94+
primitiveType="link"
95+
href={buildAuthLoginUrl({ type: "github" })}
96+
rootClasses={classnames(styles.loginLink, styles.loginLinkGithub)}
97+
csTextStyles={["fontSizeS", "fontWeightBold"]}
98+
>
99+
<NewIcon csMode="inline" noWrapper>
100+
<FontAwesomeIcon icon={faGithub} />
101+
</NewIcon>
102+
Connect with Github
103+
</NewLink>
104+
<NewLink
105+
primitiveType="link"
106+
href={buildAuthLoginUrl({ type: "overwolf" })}
107+
rootClasses={classnames(styles.loginLink, styles.loginLinkOverwolf)}
108+
csTextStyles={["fontSizeS", "fontWeightBold"]}
109+
>
110+
<NewIcon csMode="inline" noWrapper>
111+
<OverwolfLogo />
112+
</NewIcon>
113+
Connect with Overwolf
114+
</NewLink>
115+
</div>
116+
<NewText
117+
rootClasses={styles.loginLegalText}
118+
csTextStyles={["lineHeightBody", "fontSizeXS", "fontWeightRegular"]}
119+
>
120+
By logging in and accessing the site you agree to{" "}
121+
<NewLink
122+
primitiveType="cyberstormLink"
123+
linkId="TermsOfService"
124+
csVariant="tertiary"
125+
>
126+
Terms and Conditions
127+
</NewLink>{" "}
128+
and{" "}
129+
<NewLink
130+
primitiveType="cyberstormLink"
131+
linkId="PrivacyPolicy"
132+
csVariant="tertiary"
133+
>
134+
Privacy Policy
135+
</NewLink>
136+
</NewText>
137+
</div>
31138
</Modal>
32139
);
33140
}

Diff for: ‎apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.module.css

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
justify-content: space-between;
55
}
66

7+
.focus:not([data-highlighted]) a svg {
8+
color: var(--color-tertiary);
9+
}
10+
711
.root {
812
min-width: 14rem;
913
}

Diff for: ‎apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function DevelopersDropDown() {
2424
</NewButton>
2525
}
2626
csVariant="default"
27-
csColor="surface"
27+
csColor="surface-alpha"
2828
rootClasses={styles.root}
2929
>
3030
<NewDropDownItem>
@@ -67,7 +67,7 @@ export function DevelopersDropDown() {
6767
Markdown Preview
6868
</NewLink>
6969
</NewDropDownItem>
70-
<NewDropDownItem>
70+
<NewDropDownItem rootClasses={styles.focus}>
7171
<NewLink
7272
primitiveType="link"
7373
csVariant="primary"
@@ -76,7 +76,7 @@ export function DevelopersDropDown() {
7676
rootClasses={styles.externalLink}
7777
>
7878
Github
79-
<NewIcon csMode="inline" csVariant="tertiary">
79+
<NewIcon csMode="inline" noWrapper>
8080
<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
8181
</NewIcon>
8282
</NewLink>

Diff for: ‎apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css

+45-12
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
height: var(--header-height);
1616
padding: 0 var(--space--12);
1717
background: var(--body-bg-color-a);
18-
background-color: rgb(16 16 40 / 0.85);
1918
box-shadow: 0 1px 10px 0 var(--body-bg-color);
2019
backdrop-filter: blur(10px);
2120
}
@@ -43,8 +42,12 @@
4342
display: flex;
4443
gap: var(--space--16);
4544
align-items: center;
45+
}
4646

47-
--dropdown-item-color: var(--color-primary) !important;
47+
.dropDownItem[data-highlighted] svg,
48+
.dropDownItem[data-highlighted],
49+
.dropDownItem {
50+
color: var(--color-primary);
4851
}
4952

5053
.dropDownUserInfo {
@@ -63,21 +66,14 @@
6366
display: none;
6467
}
6568

66-
.mobileNavItemIconWrapper {
67-
height: 1.75rem;
68-
background: transparent;
69-
}
70-
7169
.mobileNavMenuDevelopersButton {
7270
display: flex;
7371
gap: 1rem;
7472
align-items: center;
7573
align-self: stretch;
7674
justify-content: space-between;
7775
padding: 1rem;
78-
color: #f5f5f6;
79-
font-weight: 400;
80-
font-size: 0.875rem;
76+
color: var(--color-primary);
8177
background: transparent;
8278
}
8379

@@ -90,12 +86,20 @@
9086
flex-direction: column;
9187
flex-grow: 1;
9288
align-items: center;
93-
color: #9c9cc4;
89+
color: var(--color-tertiary);
9490
font-weight: 400;
9591
font-size: 0.75rem;
9692
line-height: 1.2rem;
9793
}
9894

95+
button.mobileNavItem {
96+
background: transparent;
97+
}
98+
99+
.mobileNavItemIcon {
100+
height: 1.375rem;
101+
}
102+
99103
.accountPopoverItem {
100104
display: flex;
101105
gap: 1rem;
@@ -137,6 +141,8 @@
137141
.TSLoginLogo {
138142
width: 3.12rem;
139143
height: 2.79rem;
144+
color: currentcolor;
145+
fill: currentcolor;
140146
}
141147

142148
.loginTitle {
@@ -151,6 +157,15 @@
151157
max-width: 300px;
152158
}
153159

160+
.loginListMobile {
161+
display: flex;
162+
flex-direction: column;
163+
gap: 2rem;
164+
align-items: center;
165+
166+
/* justify-content: center; */
167+
}
168+
154169
.loginLinkList {
155170
display: flex;
156171
flex-direction: column;
@@ -168,6 +183,16 @@
168183
color: #f5f5f6;
169184
}
170185

186+
.loginLinkMobile {
187+
display: flex;
188+
flex: 1 0 0;
189+
gap: 1rem;
190+
align-items: center;
191+
padding: 0.75rem 1rem;
192+
border-radius: 0.5rem;
193+
color: #f5f5f6;
194+
}
195+
171196
.loginLinkDiscord {
172197
background: #5865f2;
173198
}
@@ -186,7 +211,15 @@
186211
--text-color: #8683be;
187212
}
188213

214+
.mobileMenu {
215+
display: none;
216+
}
217+
189218
@media (width <= 63.5rem) {
219+
.mobileMenu {
220+
display: flex;
221+
}
222+
190223
.desktopNavRoot {
191224
display: none;
192225
}
@@ -201,7 +234,7 @@
201234
justify-content: space-evenly;
202235
width: 100%;
203236
padding: 0.5rem 1.5rem 0.25rem;
204-
background: rgb(16 16 40 / 0.85);
237+
background: var(--body-bg-color-a);
205238
backdrop-filter: blur(10px);
206239
}
207240
}

0 commit comments

Comments
 (0)