From 5404305e0aa53c8176797a6298f180d10b9b09bc Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Sat, 15 Nov 2025 18:22:49 -0500
Subject: [PATCH] IRememberYou: Fix Styles

---
 src/equicordplugins/iRememberYou/index.tsx  | 175 +++++++++++---------
 src/equicordplugins/iRememberYou/styles.css |  63 ++++++-
 2 files changed, 152 insertions(+), 86 deletions(-)

diff --git a/src/equicordplugins/iRememberYou/index.tsx b/src/equicordplugins/iRememberYou/index.tsx
index 2e931d200..a17255c88 100644
--- a/src/equicordplugins/iRememberYou/index.tsx
+++ b/src/equicordplugins/iRememberYou/index.tsx
@@ -4,12 +4,12 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import "styles.css?managed";
+import "./styles.css";
 
 import { DataStore } from "@api/index";
 import { addMessagePreSendListener, removeMessagePreSendListener } from "@api/MessageEvents";
+import { classNameFactory } from "@api/Styles";
 import { BaseText } from "@components/BaseText";
-import { Heart } from "@components/Heart";
 import { Paragraph } from "@components/Paragraph";
 import { EquicordDevs } from "@utils/constants";
 import { openUserProfile } from "@utils/discord";
@@ -37,6 +37,8 @@ interface GroupData {
     name: string;
 }
 
+const cl = classNameFactory("vc-i-remember-you-");
+
 class Data {
     declare usersCollection: Record<string, GroupData>;
     declare _storageAutoSaveProtocol_interval;
@@ -214,10 +216,10 @@ class DataUI {
 
 
         return <aside key={key} >
-            <div className={"vc-i-remember-you-user-header-container"}>
+            <div className={cl("header-container")}>
                 <BaseText>{key.toUpperCase()}</BaseText>
-                <div className={"vc-i-remember-you-user-header-btns"}>
-                    <Flex style={{ gap: "calc(0.5em + 0.5vw) 0.2em", flexDirection: "column" }}>
+                <div className={cl("header-btns")}>
+                    <Flex>
                         {usersElements}
                     </Flex>
                 </div>
@@ -227,11 +229,12 @@ class DataUI {
 
     renderUserAvatar(user: IStorageUser) {
         return <Clickable onClick={() => openUserProfile(user.id)}>
-            <span style={{ cursor: "pointer" }} >
+            <span className={cl("user-avatar")}>
                 <Avatar src={user.iconURL} size="SIZE_24" />
             </span>
         </Clickable>;
     }
+
     userTooltipText(user: IStorageUser) {
         const { updatedAt } = user.extra || {};
         const updatedAtContent = updatedAt ? new Intl.DateTimeFormat().format(updatedAt) : null;
@@ -241,66 +244,79 @@ class DataUI {
     renderUserRow(user: IStorageUser, allowExtra: { owner?: boolean; } = {}) {
         allowExtra = Object.assign({ owner: true }, allowExtra);
 
-        return <Flex key={user.id} style={{ margin: 0, width: "100%", flexWrap: "wrap", alignItems: "center" }}>
-            <span style={{ width: "24em" }}>
-                <Flex style={{ gap: "0.5em", alignItems: "center", margin: 0, wordBreak: "break-word" }}>
-                    {this.renderUserAvatar(user)}
-                    <Tooltip text={this.userTooltipText(user)}>
-                        {props =>
-                            <Paragraph {...props}>{user.tag} {allowExtra.owner && user.extra?.isOwner && "(owner)"}</Paragraph>
-                        }
-                    </Tooltip>
-                </Flex>
-            </span>
+        return (
+            <Flex key={user.id} className={cl("user-row")}>
+                <span className={cl("user")}>
+                    <Flex>
+                        {this.renderUserAvatar(user)}
+                        <Tooltip text={this.userTooltipText(user)}>
+                            {props =>
+                                <Paragraph {...props} className={cl("user-username")}>
+                                    {user.tag} {allowExtra.owner && user.extra?.isOwner && "(owner)"}
+                                </Paragraph>
+                            }
+                        </Tooltip>
+                    </Flex>
+                </span>
 
-            <span style={{ height: "min-content" }}><Paragraph style={{ opacity: 0.75 }}>{user.id}</Paragraph></span>
-        </Flex>;
+                <span className={cl("user-id")}>
+                    <Paragraph>
+                        {user.id}
+                    </Paragraph>
+                </span>
+            </Flex>
+        );
     }
 
     renderButtonsFooter(usersCollection: Data["usersCollection"]) {
-        return <footer>
-            <Flex style={{ gap: "1.5em", marginTop: "2em" }}>
+        return (
+            <footer className={cl("buttons")}>
+                <Flex>
 
-                <Clickable onClick={() => Modal.openModal(props => <Modal.ModalRoot size={Modal.ModalSize.LARGE} fullscreenOnMobile={true} {...props}>
-                    <Modal.ModalHeader separator={false}>
-                        <BaseText
-                            size="lg"
-                            weight="semibold"
-                            color="header-primary"
-                            tag="h1"
-                            style={{ flexGrow: 1 }}
-                        >
-                            Editor
-                        </BaseText>
-                        <Modal.ModalCloseButton onClick={props.onClose} />
-                    </Modal.ModalHeader>
-                    <Modal.ModalContent>
-                        <Flex style={{ paddingBlock: "0.5em", gap: "0.75em" }}>
-                            <Button label="Validate and save" >Validate and save</Button>
-                            <Button label="Cancel" color={Button.Colors.TRANSPARENT}>Cancel</Button>
-                        </Flex>
-                        <TextArea value={JSON.stringify(usersCollection, null, "\t")} onChange={() => { }} rows={20} />
-                    </Modal.ModalContent>
-                </Modal.ModalRoot>)}>
-                    <Paragraph style={{ cursor: "pointer" }}>Open editor</Paragraph>
-                </Clickable>
+                    <Clickable onClick={() => Modal.openModal(props => <Modal.ModalRoot size={Modal.ModalSize.LARGE} fullscreenOnMobile={true} {...props}>
+                        <Modal.ModalHeader separator={false}>
+                            <BaseText
+                                size="lg"
+                                weight="semibold"
+                                color="header-primary"
+                                tag="h1"
+                                className={cl("buttons-editor")}
+                            >
+                                Editor
+                            </BaseText>
+                            <Modal.ModalCloseButton onClick={props.onClose} />
+                        </Modal.ModalHeader>
+                        <Modal.ModalContent>
+                            <Flex className={cl("buttons-save")}>
+                                <Button label="Validate and save" >Validate and save</Button>
+                                <Button label="Cancel" color={Button.Colors.TRANSPARENT}>Cancel</Button>
+                            </Flex>
+                            <TextArea value={JSON.stringify(usersCollection, null, "\t")} onChange={() => { }} rows={20} />
+                        </Modal.ModalContent>
+                    </Modal.ModalRoot>)}>
+                        <BaseText className={cl("buttons-editor-open")}>Open editor</BaseText>
+                    </Clickable>
 
-                <Clickable onClick={
-                    async () => {
-                        const confirmed = confirm("Sure?");
-                        if (!confirmed) {
-                            return;
+                    <Clickable onClick={
+                        async () => {
+                            const confirmed = confirm("Sure?");
+                            if (!confirmed) {
+                                return;
+                            }
+
+                            const { plugin } = this;
+                            const data = plugin.dataManager as Data;
+                            data.usersCollection = {};
+                            await data.updateStorage();
                         }
-
-                        const { plugin } = this;
-                        const data = plugin.dataManager as Data;
-                        data.usersCollection = {};
-                        await data.updateStorage();
-                    }
-                }><BaseText style={{ cursor: "pointer" }}>Reset storage</BaseText>
-                </Clickable>
-            </Flex>
-        </footer >;
+                    }>
+                        <BaseText className={cl("buttons-reset")}>
+                            Reset storage
+                        </BaseText>
+                    </Clickable>
+                </Flex>
+            </footer >
+        );
     }
 
     renderSearchElement(usersCollection: Data["usersCollection"]) {
@@ -311,38 +327,33 @@ class DataUI {
 
         const list = [...map.values()];
 
-        return <section style={{ paddingBlock: "1em" }}>
-            <TextInput placeholder="Filter by tag, username" name="Filter" onChange={value => setState(value)} />
-            {current &&
-                <Flex style={{ flexDirection: "column", gap: "0.5em", paddingTop: "1em" }}>
-                    {list.filter(user => user.tag.includes(current) || user.username.includes(current))
-                        .map(user => this.renderUserRow(
-                            user,
-                            { owner: false }
-                        ))
-                    }
-                </Flex>
-            }
-        </section>;
+        return (
+            <section className={cl("search")}>
+                <TextInput placeholder="Filter by tag, username" name="Filter" onChange={value => setState(value)} />
+                {current &&
+                    <Flex className={cl("search-user")}>
+                        {list.filter(user => user.tag.includes(current) || user.username.includes(current))
+                            .map(user => this.renderUserRow(
+                                user,
+                                { owner: false }
+                            ))
+                        }
+                    </Flex>
+                }
+            </section>
+        );
     }
 
     toElement(usersCollection: Data["usersCollection"]) {
         return (
-            /*
-          > ![Important]
-          > Let me know a more promising color, instead of #ffffff
-          */
-            <main style={{ color: "#ffffff", paddingBottom: "4em" }}>
+            <main className={cl("header")}>
                 <BaseText size="lg" weight="bold" tag="h1">
-                    {"IRememberYou"}{" "}
-                    <Heart />
+                    {"IRememberYou"}
                 </BaseText>
 
-
                 {this.renderSectionDescription()}
-                <br />
                 {this.renderSearchElement(usersCollection)}
-                <Flex style={{ gap: "1.5em", flexDirection: "column" }}>
+                <Flex className={cl("rows")}>
                     {this.renderUsersCollectionAsRows(usersCollection)}
                 </Flex>
                 {this.renderButtonsFooter(usersCollection)}
diff --git a/src/equicordplugins/iRememberYou/styles.css b/src/equicordplugins/iRememberYou/styles.css
index 628b9408d..9dcf5dfd1 100644
--- a/src/equicordplugins/iRememberYou/styles.css
+++ b/src/equicordplugins/iRememberYou/styles.css
@@ -1,11 +1,66 @@
-.vc-i-remember-you-user-header-container {
+.vc-i-remember-you-header-container {
     display: contents;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
+    flex-direction: column;
 }
 
-.vc-i-remember-you-user-header-btns {
-    display: none;
+.vc-i-remember-you-header-btns {
     gap: 8px;
 }
+
+.vc-i-remember-you-header {
+    color: var(--text-default);
+}
+
+.vc-i-remember-you-rows {
+    gap: 5px;
+    flex-direction: column;
+}
+
+.vc-i-remember-you-search {
+    padding-block: 10px;
+}
+
+.vc-i-remember-you-search-user {
+    flex-direction: column;
+    padding-top: 18px;
+}
+
+.vc-i-remember-you-user-avatar {
+    cursor: pointer;
+    margin-right: 30px;
+}
+
+.vc-i-remember-you-user-row {
+    margin: 0;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.vc-i-remember-you-user-id {
+    height: min-content;
+    opacity: 0.75;
+}
+
+.vc-i-remember-you-user {
+    width: 500px;
+    gap: 250px;
+    align-items: center;
+    overflow-wrap: break-word;
+    margin-top: 5px;
+}
+
+.vc-i-remember-you-user-username {
+    margin-top: 2px;
+}
+
+.vc-i-remember-you-buttons {
+    margin-top: 10px;
+}
+
+.vc-i-remember-you-buttons-reset {
+    cursor: pointer;
+    margin-left: 12px;
+}