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

refactor: replace inline styles with CSS classes

Browse source
This commit is contained in:
Hachi-R 2025-02-01 18:13:00 -03:00
parent b9e04de98a
commit 47e6d88dd9
22 changed files with 122 additions and 424 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/src/components/header/header.scss
View file

@ -73,6 +73,10 @@
gap: calc(globals.$spacing-unit * 2);
height: 100%;
overflow: hidden;
&--left {
flex: 1;
}
}
&__back-button {

2
src/renderer/src/components/header/header.tsx
View file

@ -81,7 +81,7 @@ export function Header() {
"header--is-windows": window.electron.platform === "win32",
})}
>
<section className="header__section" style={{ flex: 1 }}>
<section className="header__section header__section--left">
<button
type="button"
className={cn("header__back-button", {

6
src/renderer/src/components/modal/modal.scss
View file

@ -37,6 +37,12 @@
border-bottom: solid 1px globals.$border-color;
justify-content: space-between;
align-items: center;
&-title {
display: flex;
gap: 4px;
flex-direction: column;
}
}
&__close-button {

2
src/renderer/src/components/modal/modal.tsx
View file

@ -121,7 +121,7 @@ export function Modal({
data-hydra-dialog
>
<div className="modal__header">
<div style={{ display: "flex", gap: 4, flexDirection: "column" }}>
<div className="modal__header-title">
<h3>{title}</h3>
{description && <p>{description}</p>}
</div>

5
src/renderer/src/components/select-field/select-field.scss
View file

@ -9,6 +9,11 @@
border: 1px solid globals.$border-color;
height: 40px;
min-height: 40px;
&__container {
flex: 1;
}
&:hover {
border-color: rgba(255, 255, 255, 0.5);
}

2
src/renderer/src/components/select-field/select-field.tsx
View file

@ -23,7 +23,7 @@ export function SelectField({
const id = useId();
return (
<div style={{ flex: 1 }}>
<div className="select-field__container">
{label && (
<label htmlFor={id} className="select-field__label">
{label}

12
src/renderer/src/components/sidebar/sidebar-profile.scss
View file

@ -74,4 +74,16 @@
top: -5px;
right: -5px;
}
&__game-running-icon {
border-radius: 4px;
}
&__button-game-running-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
text-align: left;
}
}

12
src/renderer/src/components/sidebar/sidebar-profile.tsx
View file

@ -73,9 +73,9 @@ export function SidebarProfile() {
if (gameRunning.iconUrl) {
return (
<img
className="sidebar-profile__game-running-icon"
alt={gameRunning.title}
width={24}
style={{ borderRadius: 4 }}
src={gameRunning.iconUrl}
/>
);
@ -104,15 +104,7 @@ export function SidebarProfile() {
</p>
{userDetails && gameRunning && (
<div
style={{
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
width: "100%",
textAlign: "left",
}}
>
<div className="sidebar-profile__button-game-running-title">
<small>{gameRunning.title}</small>
</div>
)}

6
src/renderer/src/components/sidebar/sidebar.scss
View file

@ -101,6 +101,12 @@
font-weight: bold;
}
&__container {
display: flex;
flex-direction: column;
overflow: hidden;
}
&__section {
gap: calc(globals.$spacing-unit * 2);
display: flex;

4
src/renderer/src/components/sidebar/sidebar.tsx
View file

@ -180,9 +180,7 @@ export function Sidebar() {
maxWidth: sidebarWidth,
}}
>
<div
style={{ display: "flex", flexDirection: "column", overflow: "hidden" }}
>
<div className="sidebar__container">
<SidebarProfile />
<div className="sidebar__content">

10
src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
View file

@ -2,11 +2,11 @@
@keyframes rotate {
0% {
transform: rotate(0deg);
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
transform: rotate(0deg);
}
}
@ -110,4 +110,10 @@
opacity: globals.$disabled-opacity;
}
}
&__backup-state-label {
display: flex;
align-items: center;
gap: 8px;
}
}

6
src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.tsx
View file

@ -93,7 +93,7 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
const backupStateLabel = useMemo(() => {
if (uploadingBackup) {
return (
<span style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span className="cloud-sync-modal__backup-state-label">
<SyncIcon className="cloud-sync-modal__sync-icon" />
{t("uploading_backup")}
</span>
@ -102,7 +102,7 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
if (restoringBackup) {
return (
<span style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span className="cloud-sync-modal__backup-state-label">
<SyncIcon className="cloud-sync-modal__sync-icon" />
{t("restoring_backup", {
progress: formatDownloadProgress(
@ -115,7 +115,7 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
if (loadingPreview) {
return (
<span style={{ display: "flex", alignItems: "center", gap: 8 }}>
<span className="cloud-sync-modal__backup-state-label">
<SyncIcon className="cloud-sync-modal__sync-icon" />
{t("loading_save_preview")}
</span>

4
src/renderer/src/pages/game-details/modals/download-settings-modal.scss
View file

@ -45,4 +45,8 @@
text-decoration: underline;
}
}
&__change-path-button {
align-self: flex-end;
}
}

2
src/renderer/src/pages/game-details/modals/download-settings-modal.tsx
View file

@ -187,7 +187,7 @@ export function DownloadSettingsModal({
}
rightContent={
<Button
style={{ alignSelf: "flex-end" }}
className="download-settings-modal__change-path-button"
theme="outline"
onClick={handleChooseDownloadsPath}
disabled={downloadStarting}

7
src/renderer/src/pages/game-details/sidebar/how-long-to-beat-section.tsx
View file

@ -34,12 +34,7 @@ export function HowLongToBeatSection({
{howLongToBeatData
? howLongToBeatData.map((category) => (
<li key={category.title} className="how-long-to-beat__category">
<p
className="how-long-to-beat__category-label"
style={{
fontWeight: "bold",
}}
>
<p className="how-long-to-beat__category-label how-long-to-beat__category-label--bold">
{category.title}
</p>

22
src/renderer/src/pages/game-details/sidebar/sidebar.scss
View file

@ -78,6 +78,10 @@
color: globals.$muted-color;
}
&__category-label--bold {
font-weight: bold;
}
&__category-skeleton {
border: solid 1px globals.$border-color;
border-radius: 4px;
@ -172,3 +176,21 @@
text-decoration: underline;
}
}
.achievements-placeholder {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 8px;
}
.achievements-placeholder__blur {
filter: blur(4px);
}

21
src/renderer/src/pages/game-details/sidebar/sidebar.tsx
View file

@ -117,31 +117,16 @@ export function Sidebar() {
<aside className="content-sidebar">
{userDetails === null && (
<SidebarSection title={t("achievements")}>
<div
style={{
position: "absolute",
zIndex: 1,
inset: 0,
width: "100%",
height: "100%",
background: "rgba(0, 0, 0, 0.7)",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
gap: "8px",
}}
>
<div className="achievements-placeholder">
<LockIcon size={36} />
<h3>{t("sign_in_to_see_achievements")}</h3>
</div>
<ul className="list" style={{ filter: "blur(4px)" }}>
<ul className="list achievements-placeholder__blur">
{achievementsPlaceholder.map((achievement, index) => (
<li key={index}>
<div className="list__item">
<img
style={{ filter: "blur(8px)" }}
className={`list__item-image ${
className={`list__item-image achievements-placeholder__blur ${
achievement.unlocked ? "" : "list__item-image--locked"
}`}
src={achievement.icon}

4
src/renderer/src/pages/profile/profile-content/friends-box.scss
View file

@ -59,4 +59,8 @@
flex-direction: column;
gap: calc(globals.$spacing-unit / 2);
}
&__game-image {
border-radius: 4px;
}
}

2
src/renderer/src/pages/profile/profile-content/friends-box.tsx
View file

@ -15,9 +15,9 @@ export function FriendsBox() {
if (game.iconUrl) {
return (
<img
className="friends-box__game-image"
alt={game.title}
width={16}
style={{ borderRadius: 4 }}
src={game.iconUrl}
/>
);

15
src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss
View file

@ -29,6 +29,21 @@
color: globals.$body-color;
gap: calc(globals.$spacing-unit + globals.$spacing-unit / 2);
padding: 0 globals.$spacing-unit;
&__content {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
min-width: 0;
}
&__actions {
position: absolute;
right: 8px;
display: flex;
gap: 8px;
}
}
&__display-name {

41
src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
View file

@ -103,28 +103,13 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
if (type === "BLOCKED") {
return (
<div className="user-friend-item__container">
<div className="user-friend-item__button" style={{ cursor: "inherit" }}>
<div className="user-friend-item__button">
<Avatar size={35} src={profileImageUrl} alt={displayName} />
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
flex: "1",
minWidth: 0,
}}
>
<div className="user-friend-item__button__content">
<p className="user-friend-item__display-name">{displayName}</p>
</div>
</div>
<div
style={{
position: "absolute",
right: "8px",
display: "flex",
gap: "8px",
}}
>
<div className="user-friend-item__button__actions">
{getRequestActions()}
</div>
</div>
@ -139,27 +124,13 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
onClick={() => props.onClickItem(userId)}
>
<Avatar size={35} src={profileImageUrl} alt={displayName} />
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
flex: "1",
minWidth: 0,
}}
>
<div className="user-friend-item__button__content">
<p className="user-friend-item__display-name">{displayName}</p>
{getRequestDescription()}
</div>
</button>
<div
style={{
position: "absolute",
right: "8px",
display: "flex",
gap: "8px",
}}
>
<div className="user-friend-item__button__actions">
{getRequestActions()}
</div>
</div>