From 19976da82ee455ca17ee4a7e93ca3a8afb15b9dd Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Tue, 21 Jan 2025 15:23:17 -0300 Subject: [PATCH] refactor: migrate shared modals styles from VE to SCSS + BEM --- .../hydra-cloud/hydra-cloud-modal.scss | 10 +++ .../hydra-cloud/hydra-cloud-modal.tsx | 9 +-- .../user-friend-modal/user-friend-item.scss | 64 +++++++++++++++++++ .../user-friend-modal/user-friend-item.tsx | 35 +++++----- .../user-friend-modal-add-friend.scss | 21 ++++++ .../user-friend-modal-add-friend.tsx | 24 ++----- .../user-friend-modal-list.scss | 16 +++++ .../user-friend-modal-list.tsx | 48 ++++---------- .../user-friend-modal/user-friend-modal.scss | 34 ++++++++++ .../user-friend-modal/user-friend-modal.tsx | 48 ++++---------- 10 files changed, 195 insertions(+), 114 deletions(-) create mode 100644 src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.scss create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss create mode 100644 src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss diff --git a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.scss b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.scss new file mode 100644 index 00000000..4f65c7a3 --- /dev/null +++ b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.scss @@ -0,0 +1,10 @@ +@use "../../../scss/globals.scss"; + +.hydra-cloud-modal { + &__container { + display: flex; + width: 500px; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } +} diff --git a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx index fd44ce30..7c1cbae0 100644 --- a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx +++ b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud-modal.tsx @@ -1,6 +1,6 @@ import { Button, Modal } from "@renderer/components"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useTranslation } from "react-i18next"; +import "./hydra-cloud-modal.scss"; export interface HydraCloudModalProps { feature: string; @@ -22,13 +22,8 @@ export const HydraCloudModal = ({ return (
{t("hydra_cloud_feature_found")} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss new file mode 100644 index 00000000..715684e2 --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss @@ -0,0 +1,64 @@ +@use "../../../scss/globals.scss"; + +.user-friend-item { + &__container { + display: flex; + gap: calc(globals.$spacing-unit * 3); + align-items: center; + border-radius: 4px; + border: solid 1px globals.$border-color; + width: 100%; + height: 54px; + min-height: 54px; + transition: all ease 0.2s; + position: relative; + + &:hover { + background-color: rgba(255, 255, 255, 0.15); + } + } + + &__button { + display: flex; + align-items: center; + position: absolute; + cursor: pointer; + height: 100%; + width: 100%; + flex-direction: row; + color: globals.$body-color; + gap: calc(globals.$spacing-unit + globals.$spacing-unit / 2); + padding: 0 globals.$spacing-unit; + } + + &__display-name { + font-weight: bold; + font-size: globals.$body-font-size; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + &__accept-button { + cursor: pointer; + color: globals.$body-color; + width: 28px; + height: 28px; + + &:hover { + color: globals.$success-color; + } + } + + &__cancel-button { + cursor: pointer; + color: globals.$body-color; + width: 28px; + height: 28px; + + &:hover { + color: globals.$danger-color; + } + } +} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx index 38f0dd25..13a22357 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx @@ -1,8 +1,7 @@ import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react"; -import * as styles from "./user-friend-modal.css"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useTranslation } from "react-i18next"; import { Avatar } from "@renderer/components"; +import "./user-friend-item.scss"; export type UserFriendItemProps = { userId: string; @@ -31,10 +30,9 @@ export const UserFriendItem = (props: UserFriendItemProps) => { const getRequestDescription = () => { if (type === "ACCEPTED" || type === null) return null; - return ( - {type == "SENT" ? t("request_sent") : t("request_received")} + {type === "SENT" ? t("request_sent") : t("request_received")} ); }; @@ -45,7 +43,7 @@ export const UserFriendItem = (props: UserFriendItemProps) => { if (type === "SENT") { return (
-
{getRequestActions()} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss new file mode 100644 index 00000000..8c896a9e --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss @@ -0,0 +1,21 @@ +@use "../../../scss/globals.scss"; + +.user-friend-modal-add-friend { + &__actions { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: globals.$spacing-unit; + } + + &__button { + align-self: end; + } + + &__pending-container { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } +} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx index 23444e70..2bcf5ba7 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx @@ -1,10 +1,10 @@ import { Button, TextField } from "@renderer/components"; import { useToast, useUserDetails } from "@renderer/hooks"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { UserFriendItem } from "./user-friend-item"; +import "./user-friend-modal-add-friend.scss"; export interface UserFriendModalAddFriendProps { closeModal: () => void; @@ -76,15 +76,7 @@ export const UserFriendModalAddFriend = ({ return ( <> -
+
-
+

{t("pending")}

{friendRequests.length === 0 &&

{t("no_pending_invites")}

} {friendRequests.map((request) => { diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss new file mode 100644 index 00000000..eaf0e527 --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss @@ -0,0 +1,16 @@ +@use "../../../scss/globals.scss"; + +.user-friend-modal-list { + display: flex; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + max-height: 400px; + overflow-y: scroll; + + &__skeleton { + width: 100%; + height: 54px; + overflow: hidden; + border-radius: 4px; + } +} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx index d104e676..610816fa 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx @@ -1,4 +1,3 @@ -import { SPACING_UNIT, vars } from "@renderer/theme.css"; import type { UserFriend } from "@types"; import { useEffect, useRef, useState } from "react"; import { UserFriendItem } from "./user-friend-item"; @@ -6,6 +5,7 @@ import { useNavigate } from "react-router-dom"; import { useToast, useUserDetails } from "@renderer/hooks"; import { useTranslation } from "react-i18next"; import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; +import "./user-friend-modal-list.scss"; export interface UserFriendModalListProps { userId: string; @@ -94,41 +94,21 @@ export const UserFriendModalList = ({ }; return ( - -
+ +
{!isLoading && friends.length === 0 &&

{t("no_friends_added")}

} - {friends.map((friend) => { - return ( - - ); - })} - {isLoading && ( - ( + - )} + ))} + {isLoading && }
); diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss new file mode 100644 index 00000000..550c0fd9 --- /dev/null +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss @@ -0,0 +1,34 @@ +@use "../../../scss/globals.scss"; + +.user-friend-modal { + &__container { + display: flex; + width: 500px; + flex-direction: column; + gap: calc(globals.$spacing-unit * 2); + } + + &__header { + display: flex; + gap: globals.$spacing-unit; + align-items: center; + } + + &__friend-code-button { + color: globals.$body-color; + cursor: pointer; + display: flex; + gap: calc(globals.$spacing-unit / 2); + align-items: center; + transition: all ease 0.2s; + + &:hover { + color: globals.$muted-color; + } + } + + &__tabs { + display: flex; + gap: globals.$spacing-unit; + } +} diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx index d827fa20..93997777 100644 --- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx +++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx @@ -1,12 +1,11 @@ import { Button, Modal } from "@renderer/components"; -import { SPACING_UNIT } from "@renderer/theme.css"; import { useCallback, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { UserFriendModalAddFriend } from "./user-friend-modal-add-friend"; import { useToast, useUserDetails } from "@renderer/hooks"; import { UserFriendModalList } from "./user-friend-modal-list"; import { CopyIcon } from "@primer/octicons-react"; -import * as styles from "./user-friend-modal.css"; +import "./user-friend-modal.scss"; export enum UserFriendModalTab { FriendsList, @@ -27,15 +26,11 @@ export const UserFriendModal = ({ userId, }: UserFriendsModalProps) => { const { t } = useTranslation("user_profile"); - const tabs = [t("friends_list"), t("add_friends")]; - const [currentTab, setCurrentTab] = useState( initialTab || UserFriendModalTab.FriendsList ); - const { showSuccessToast } = useToast(); - const { userDetails } = useUserDetails(); const isMe = userDetails?.id == userId; @@ -64,44 +59,29 @@ export const UserFriendModal = ({ return ( -
+
{isMe && ( <> -
+

{t("your_friend_code")}

-
- {tabs.map((tab, index) => { - return ( - - ); - })} +
+ {tabs.map((tab, index) => ( + + ))}
)}