PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-09 03:37:45 +03:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

feat: adjusting ui

Browse Source
This commit is contained in:
Zamitto 2024-10-18 12:31:16 -03:00
parent ab27fd21d7
commit 6c6d13e387
3 changed files with 60 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/hooks/use-date.ts
View File

@ -72,7 +72,7 @@ export function useDate() {
const locale = getDateLocale(); const locale = getDateLocale();
return format( return format(
date, date,
locale == enUS ? "MM/dd/yyyy - HH:mm" : "dd/MM/yyyy - HH:mm" locale == enUS ? "MM/dd/yyyy - HH:mm" : "dd/MM/yyyy HH:mm"
); );
}, },

102
src/renderer/src/pages/achievements/achievements-content.tsx
View File

@ -10,7 +10,6 @@ import {
LockIcon, LockIcon,
PersonIcon, PersonIcon,
TrophyIcon, TrophyIcon,
UnlockIcon,
} from "@primer/octicons-react"; } from "@primer/octicons-react";
import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { SPACING_UNIT, vars } from "@renderer/theme.css";
import { gameDetailsContext } from "@renderer/context"; import { gameDetailsContext } from "@renderer/context";
@ -192,49 +191,55 @@ function AchievementList({ user, otherUser }: AchievementListProps) {
</div> </div>
</div> </div>
<div {otherUserAchievement.unlocked ? (
title={ <div
otherUserAchievement.unlockTime style={{
? formatDateTime(otherUserAchievement.unlockTime) whiteSpace: "nowrap",
: undefined display: "flex",
} flexDirection: "row",
> gap: `${SPACING_UNIT}px`,
{otherUserAchievement.unlockTime ? ( justifyContent: "center",
<div }}
style={{ >
whiteSpace: "nowrap", <CheckCircleIcon />
display: "flex", <small>{formatDateTime(otherUserAchievement.unlockTime!)}</small>
flexDirection: "column", </div>
}} ) : (
> <div
<CheckCircleIcon /> style={{
<small>{formatDateTime(otherUserAchievement.unlockTime)}</small> display: "flex",
</div> padding: `${SPACING_UNIT}px`,
) : ( justifyContent: "center",
<div> }}
<LockIcon /> >
</div> <LockIcon />
)} </div>
</div> )}
<div {userDetails?.subscription && achievements[index].unlocked ? (
title={ <div
userDetails?.subscription && achievements[index].unlockTime style={{
? formatDateTime(achievements[index].unlockTime) whiteSpace: "nowrap",
: undefined display: "flex",
} flexDirection: "row",
> gap: `${SPACING_UNIT}px`,
{userDetails?.subscription && achievements[index].unlockTime ? ( justifyContent: "center",
<div style={{ whiteSpace: "nowrap" }}> }}
<UnlockIcon /> >
<p>{formatDateTime(achievements[index].unlockTime)}</p> <CheckCircleIcon />
</div> <small>{formatDateTime(achievements[index].unlockTime!)}</small>
) : ( </div>
<div> ) : (
<LockIcon /> <div
</div> style={{
)} display: "flex",
</div> padding: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<LockIcon />
</div>
)}
</li> </li>
))} ))}
</ul> </ul>
@ -371,17 +376,20 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
</div> </div>
{otherUser && ( {otherUser && (
<div className={styles.panel({ stuck: isHeaderStuck })}> <div className={styles.tableHeader({ stuck: isHeaderStuck })}>
<div <div
style={{ style={{
display: "grid", display: "grid",
gridTemplateColumns: "3fr 1fr 1fr", gridTemplateColumns: "3fr 1fr 1fr",
padding: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT * 2}px`,
padding: `${SPACING_UNIT}px ${SPACING_UNIT * 3}px`,
}} }}
> >
<div></div> <div></div>
<div>{getProfileImage(otherUser)}</div> <div style={{ display: "flex", justifyContent: "center" }}>
<div> {getProfileImage(otherUser)}
</div>
<div style={{ display: "flex", justifyContent: "center" }}>
{getProfileImage({ {getProfileImage({
...userDetails, ...userDetails,
userId: userDetails.id, userId: userDetails.id,

5
src/renderer/src/pages/achievements/achievements.css.ts
View File

@ -4,6 +4,7 @@ import { recipe } from "@vanilla-extract/recipes";
export const HERO_HEIGHT = 150; export const HERO_HEIGHT = 150;
export const LOGO_HEIGHT = 100; export const LOGO_HEIGHT = 100;
export const LOGO_MAX_WIDTH = 200;
export const wrapper = style({ export const wrapper = style({
display: "flex", display: "flex",
@ -59,7 +60,9 @@ export const heroContent = style({
}); });
export const gameLogo = style({ export const gameLogo = style({
width: LOGO_MAX_WIDTH,
height: LOGO_HEIGHT, height: LOGO_HEIGHT,
objectFit: "contain",
}); });
export const container = style({ export const container = style({
@ -71,7 +74,7 @@ export const container = style({
zIndex: "1", zIndex: "1",
}); });
export const panel = recipe({ export const tableHeader = recipe({
base: { base: {
width: "100%", width: "100%",
backgroundColor: vars.color.darkBackground, backgroundColor: vars.color.darkBackground,