diff --git a/README.md b/README.md index 0fa0a2498..b0ec37abd 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ Competitive Splatoon Hub with over 20k registered users. - Plus Server for top player "looking for group purposes" voting and suggestion tools. - User pages - User search +- Form teams (featuring uploading profile and banner pictures) - Object Damage Calculator (how much does each weapon deal vs. different objects) - Build Analyzer (exact stats of your builds) - Auth via Discord @@ -26,6 +27,8 @@ Competitive Splatoon Hub with over 20k registered users. - Remix - Sqlite3 - CSS (plain) +- E2E tests via Playwright +- Unit tests via uvu ## Screenshots diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 3e9b17c25..1384fbdde 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -61,7 +61,7 @@ export function Button(props: ButtonProps) { type LinkButtonProps = Pick< ButtonProps, - "variant" | "children" | "className" | "size" | "testId" + "variant" | "children" | "className" | "size" | "testId" | "icon" > & Pick & { "data-cy"?: string } & { isExternal?: boolean; @@ -77,6 +77,7 @@ export function LinkButton({ isExternal, state, testId, + icon, }: LinkButtonProps) { if (isExternal) { return ( @@ -92,6 +93,10 @@ export function LinkButton({ target="_blank" rel="noreferrer" > + {icon && + React.cloneElement(icon, { + className: clsx("button-icon", { lonely: !children }), + })} {children} ); @@ -110,6 +115,10 @@ export function LinkButton({ prefetch={prefetch} state={state} > + {icon && + React.cloneElement(icon, { + className: clsx("button-icon", { lonely: !children }), + })} {children} ); diff --git a/app/components/icons/User.tsx b/app/components/icons/User.tsx deleted file mode 100644 index 62b09d637..000000000 --- a/app/components/icons/User.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export function UserIcon({ className }: { className?: string }) { - return ( - - - - ); -} diff --git a/app/components/layout/UserItem.tsx b/app/components/layout/UserItem.tsx index 743f257da..210248308 100644 --- a/app/components/layout/UserItem.tsx +++ b/app/components/layout/UserItem.tsx @@ -1,13 +1,9 @@ import { Link } from "@remix-run/react"; import { useTranslation } from "~/hooks/useTranslation"; import { useUser } from "~/modules/auth"; -import { LOG_OUT_URL, userPage } from "~/utils/urls"; +import { userPage } from "~/utils/urls"; import { Avatar } from "../Avatar"; -import { Button } from "../Button"; import { LogInIcon } from "../icons/LogIn"; -import { LogOutIcon } from "../icons/LogOut"; -import { UserIcon } from "../icons/User"; -import { Popover } from "../Popover"; import { LogInButtonContainer } from "./LogInButtonContainer"; export function UserItem() { @@ -16,42 +12,16 @@ export function UserItem() { if (user) { return ( - - } - > -
- - - -
- -
-
-
+ + + ); } diff --git a/app/features/team/routes/t.$customUrl.edit.tsx b/app/features/team/routes/t.$customUrl.edit.tsx index 69e6faf26..7ab2aab7d 100644 --- a/app/features/team/routes/t.$customUrl.edit.tsx +++ b/app/features/team/routes/t.$customUrl.edit.tsx @@ -160,7 +160,11 @@ export default function EditTeamPage() { - + {t("common:actions.submit")} diff --git a/app/features/team/routes/t.$customUrl.tsx b/app/features/team/routes/t.$customUrl.tsx index 8757550a3..86d8f5427 100644 --- a/app/features/team/routes/t.$customUrl.tsx +++ b/app/features/team/routes/t.$customUrl.tsx @@ -12,7 +12,9 @@ import { Avatar } from "~/components/Avatar"; import { Button, LinkButton } from "~/components/Button"; import { Flag } from "~/components/Flag"; import { FormWithConfirm } from "~/components/FormWithConfirm"; +import { EditIcon } from "~/components/icons/Edit"; import { TwitterIcon } from "~/components/icons/Twitter"; +import { UsersIcon } from "~/components/icons/Users"; import { WeaponImage } from "~/components/Image"; import { Main } from "~/components/Main"; import { Placement } from "~/components/Placement"; @@ -228,6 +230,7 @@ function ActionButtons() { to={manageTeamRosterPage(team.customUrl)} variant="outlined" prefetch="intent" + icon={} testId="manage-roster-button" > {t("team:actionButtons.manageRoster")} @@ -239,6 +242,7 @@ function ActionButtons() { to={editTeamPage(team.customUrl)} variant="outlined" prefetch="intent" + icon={} testId="edit-team-button" > {t("team:actionButtons.editTeam")} diff --git a/app/features/team/team.css b/app/features/team/team.css index 635d6d3d5..1ea23678d 100644 --- a/app/features/team/team.css +++ b/app/features/team/team.css @@ -157,7 +157,7 @@ .team__action-buttons { display: flex; - justify-content: flex-end; + justify-content: center; gap: var(--s-2); } @@ -331,4 +331,8 @@ .team__banner__placeholder { height: 12rem; } + + .team__action-buttons { + justify-content: flex-end; + } } diff --git a/app/routes/u.$identifier.tsx b/app/routes/u.$identifier.tsx index 9445aed81..cc9cafaaa 100644 --- a/app/routes/u.$identifier.tsx +++ b/app/routes/u.$identifier.tsx @@ -106,7 +106,7 @@ export default function UserPageLayout() { {t("header.profile")} {isOwnPage && ( - + {t("actions.edit")} )} @@ -116,7 +116,7 @@ export default function UserPageLayout() { )} {(isOwnPage || data.buildsCount > 0) && ( - + {t("pages.builds")} ({data.buildsCount}) )} diff --git a/app/styles/common.css b/app/styles/common.css index 394c9713d..3de56481e 100644 --- a/app/styles/common.css +++ b/app/styles/common.css @@ -139,7 +139,7 @@ a { } /* :not([name="text"]) workaround not to select textarea on map planner */ -textarea:not(.plain):not([name="text"]) { +textarea:not(.plain, [name="text"]) { width: 18rem; max-width: 100%; height: 8rem; @@ -159,7 +159,7 @@ progress { accent-color: var(--theme); } -textarea:not(.plain):not([name="text"]):focus-within { +textarea:not(.plain, [name="text"]):focus-within { border-color: transparent; /* TODO: rectangle on Safari */ diff --git a/app/styles/front.css b/app/styles/front.css index 3fd2616d5..8f8f403b2 100644 --- a/app/styles/front.css +++ b/app/styles/front.css @@ -114,8 +114,4 @@ .front__nav-item.round { display: none; } - - .front__log-out-container { - display: none; - } } diff --git a/e2e/team.spec.ts b/e2e/team.spec.ts index 4ab321e19..7a9353cb6 100644 --- a/e2e/team.spec.ts +++ b/e2e/team.spec.ts @@ -59,7 +59,7 @@ test.describe("Team page", () => { await page.getByTestId("bio-textarea").clear(); await page.getByTestId("bio-textarea").type("shorter bio"); - await submit(page); + await page.getByTestId("edit-team-submit-button").click(); await expect(page).toHaveURL(/better-alliance-rogue/); await page.getByText("shorter bio").isVisible(); diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 3c2a7b9ff..14505004b 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -130,7 +130,7 @@ "upload.imageToUpload": "Image to upload", "upload.title": "Uploading {{type}}. Recommended size is {{width}}×{{height}}.", "upload.type.team-pfp": "team profile picture", - "upload.type.team-banner": "team banner", + "upload.type.team-banner": "team picture banner", "upload.commonExplanation": "Before the image is publicly displayed a moderator will validate it. Images uploaded by patrons are shown without validation.", "upload.afterExplanation_one": "You have {{count}} image pending. The image will show up automatically after validation.", "upload.afterExplanation_other": "You have {{count}} images pending. The images will show up automatically after validation." diff --git a/public/locales/en/team.json b/public/locales/en/team.json index 7e0d5547c..2e57d5424 100644 --- a/public/locales/en/team.json +++ b/public/locales/en/team.json @@ -23,7 +23,7 @@ "forms.fields.bio": "Bio", "forms.fields.uploadImages": "Upload images", "forms.fields.uploadImages.pfp": "Profile picture", - "forms.fields.uploadImages.banner": "Banner", + "forms.fields.uploadImages.banner": "Team Picture Banner", "forms.info.name": "Note that if you change your team's name then someone else can claim the name and URL for their team", "forms.errors.duplicateName": "There is already a team with this name", "roster.teamFull": "Team is full",