PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-02-03 00:33:49 +03:00
Code Issues Actions 1 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();
return format(
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,
PersonIcon,
TrophyIcon,
UnlockIcon,
} from "@primer/octicons-react";
import { SPACING_UNIT, vars } from "@renderer/theme.css";
import { gameDetailsContext } from "@renderer/context";
@ -192,49 +191,55 @@ function AchievementList({ user, otherUser }: AchievementListProps) {
</div>
</div>
<div
title={
otherUserAchievement.unlockTime
? formatDateTime(otherUserAchievement.unlockTime)
: undefined
}
>
{otherUserAchievement.unlockTime ? (
<div
style={{
whiteSpace: "nowrap",
display: "flex",
flexDirection: "column",
}}
>
<CheckCircleIcon />
<small>{formatDateTime(otherUserAchievement.unlockTime)}</small>
</div>
) : (
<div>
<LockIcon />
</div>
)}
</div>
{otherUserAchievement.unlocked ? (
<div
style={{
whiteSpace: "nowrap",
display: "flex",
flexDirection: "row",
gap: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<CheckCircleIcon />
<small>{formatDateTime(otherUserAchievement.unlockTime!)}</small>
</div>
) : (
<div
style={{
display: "flex",
padding: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<LockIcon />
</div>
)}
<div
title={
userDetails?.subscription && achievements[index].unlockTime
? formatDateTime(achievements[index].unlockTime)
: undefined
}
>
{userDetails?.subscription && achievements[index].unlockTime ? (
<div style={{ whiteSpace: "nowrap" }}>
<UnlockIcon />
<p>{formatDateTime(achievements[index].unlockTime)}</p>
</div>
) : (
<div>
<LockIcon />
</div>
)}
</div>
{userDetails?.subscription && achievements[index].unlocked ? (
<div
style={{
whiteSpace: "nowrap",
display: "flex",
flexDirection: "row",
gap: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<CheckCircleIcon />
<small>{formatDateTime(achievements[index].unlockTime!)}</small>
</div>
) : (
<div
style={{
display: "flex",
padding: `${SPACING_UNIT}px`,
justifyContent: "center",
}}
>
<LockIcon />
</div>
)}
</li>
))}
</ul>
@ -371,17 +376,20 @@ export function AchievementsContent({ otherUser }: AchievementsContentProps) {
</div>
{otherUser && (
<div className={styles.panel({ stuck: isHeaderStuck })}>
<div className={styles.tableHeader({ stuck: isHeaderStuck })}>
<div
style={{
display: "grid",
gridTemplateColumns: "3fr 1fr 1fr",
padding: `${SPACING_UNIT}px`,
gap: `${SPACING_UNIT * 2}px`,
padding: `${SPACING_UNIT}px ${SPACING_UNIT * 3}px`,
}}
>
<div></div>
<div>{getProfileImage(otherUser)}</div>
<div>
<div style={{ display: "flex", justifyContent: "center" }}>
{getProfileImage(otherUser)}
</div>
<div style={{ display: "flex", justifyContent: "center" }}>
{getProfileImage({
...userDetails,
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 LOGO_HEIGHT = 100;
export const LOGO_MAX_WIDTH = 200;
export const wrapper = style({
display: "flex",
@ -59,7 +60,9 @@ export const heroContent = style({
});
export const gameLogo = style({
width: LOGO_MAX_WIDTH,
height: LOGO_HEIGHT,
objectFit: "contain",
});
export const container = style({
@ -71,7 +74,7 @@ export const container = style({
zIndex: "1",
});
export const panel = recipe({
export const tableHeader = recipe({
base: {
width: "100%",
backgroundColor: vars.color.darkBackground,