external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui changes

Browse source
This commit is contained in:
Zamitto 2024-06-14 15:08:35 -03:00
parent fa2a92d5ed
commit ca21d8afe6
3 changed files with 36 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/renderer/src/pages/profile/profile-content.tsx
View file

@ -5,7 +5,7 @@ import { SPACING_UNIT, vars } from "@renderer/theme.css";
import { useMemo } from "react"; import { useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { formatDistance } from "date-fns"; import { formatDistance } from "date-fns";
import SteamLogo from "@renderer/assets/steam-logo.svg?react";
export interface ProfileContentProps { export interface ProfileContentProps {
userProfile: UserProfile; userProfile: UserProfile;
} }
@ -38,7 +38,10 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
return ( return (
<> <>
<section className={styles.profileContentBox}> <section
className={styles.profileContentBox}
style={{ padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px` }}
>
<img <img
alt={userProfile.displayName + " profile image"} alt={userProfile.displayName + " profile image"}
className={styles.profileAvatar} className={styles.profileAvatar}
@ -52,32 +55,14 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
<div className={styles.profileContent}> <div className={styles.profileContent}>
<div className={styles.profileGameSection}> <div className={styles.profileGameSection}>
<div <div>
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: `${SPACING_UNIT * 2}px`,
}}
>
<h2>Feed</h2> <h2>Feed</h2>
<div
style={{
flex: 1,
backgroundColor: vars.color.border,
height: "1px",
}}
/>
<h3 style={{ fontWeight: "400" }}>
{userProfile.recentGames.length}
</h3>
</div> </div>
<div <div
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT * 2}px`,
}} }}
> >
{userProfile.recentGames.map((game) => { {userProfile.recentGames.map((game) => {
@ -87,10 +72,8 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
className={cn(styles.feedItem, styles.profileContentBox)} className={cn(styles.feedItem, styles.profileContentBox)}
> >
<img <img
className={styles.gameIcon} className={styles.feedGameIcon}
src={game.iconUrl} src={game.cover}
width={50}
height={50}
alt={"Icon for " + game.title} alt={"Icon for " + game.title}
/> />
<div className={styles.gameInformation}> <div className={styles.gameInformation}>
@ -140,14 +123,20 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
<div <div
key={game.objectID} key={game.objectID}
className={cn(styles.gameListItem, styles.profileContentBox)} className={cn(styles.gameListItem, styles.profileContentBox)}
style={{
padding: `${SPACING_UNIT}px ${SPACING_UNIT}px`,
}}
> >
<img {game.iconUrl ? (
className={styles.gameIcon} <img
src={game.iconUrl} className={styles.libraryGameIcon}
width={50} src={game.iconUrl}
height={50} alt={game.title}
alt={"Icon for " + game.title} />
/> ) : (
<SteamLogo className={styles.libraryGameIcon} />
)}
<div className={styles.gameInformation}> <div className={styles.gameInformation}>
<p>{game.title}</p> <p>{game.title}</p>
<p>{formatPlayTime(game)}</p> <p>{formatPlayTime(game)}</p>

16
src/renderer/src/pages/profile/profile.css.tsx
View file

@ -13,7 +13,6 @@ export const profileContentBox = style({
display: "flex", display: "flex",
gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`, gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
alignItems: "center", alignItems: "center",
padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
borderRadius: "4px", borderRadius: "4px",
border: `solid 1px ${vars.color.border}`, border: `solid 1px ${vars.color.border}`,
width: "100%", width: "100%",
@ -67,9 +66,16 @@ export const contentSidebar = style({
}, },
}); });
export const gameIcon = style({ export const feedGameIcon = style({
width: "48px", height: "100%",
height: "48px", display: "flex",
justifyContent: "center",
alignItems: "center",
position: "relative",
});
export const libraryGameIcon = style({
height: "100%",
borderRadius: "50%", borderRadius: "50%",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
@ -82,6 +88,7 @@ export const feedItem = style({
flexDirection: "row", flexDirection: "row",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT}px`,
width: "100%", width: "100%",
height: "72px",
}); });
export const gameListItem = style({ export const gameListItem = style({
@ -89,6 +96,7 @@ export const gameListItem = style({
flexDirection: "row", flexDirection: "row",
gap: `${SPACING_UNIT}px`, gap: `${SPACING_UNIT}px`,
width: "100%", width: "100%",
height: "60px",
}); });
export const gameInformation = style({ export const gameInformation = style({

4
src/types/index.ts
View file

@ -89,8 +89,8 @@ export interface ProfileGame {
objectID: string; objectID: string;
shop: GameShop; shop: GameShop;
title: string; title: string;
iconUrl; iconUrl: string | null;
string?; cover: string;
playTimeInSeconds: number; playTimeInSeconds: number;
lastTimePlayed: Date | null; lastTimePlayed: Date | null;
} }