From 4f9299d6a047311ade09d85dc25b0723ad2c6821 Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:11:50 -0500
Subject: [PATCH] GithubRepos: Make UI Colors Match Theme

---
 .../components/GitHubReposComponent.tsx       | 13 ++--
 .../githubRepos/components/RepoCard.tsx       | 19 +++---
 .../githubRepos/components/ReposModal.tsx     | 14 ++--
 src/equicordplugins/githubRepos/index.tsx     |  3 +
 src/equicordplugins/githubRepos/styles.css    | 67 +++++++++++++++++--
 5 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
index 67aa4029e..f8076f9ce 100644
--- a/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
+++ b/src/equicordplugins/githubRepos/components/GitHubReposComponent.tsx
@@ -4,20 +4,17 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { classNameFactory } from "@api/Styles";
 import { BaseText } from "@components/BaseText";
 import { Button, TextButton } from "@components/Button";
 import { openModal } from "@utils/modal";
 import { React, useEffect, UserProfileStore, useState } from "@webpack/common";
 
-import { settings } from "..";
+import { cl, settings } from "..";
 import { fetchReposByUserId, fetchReposByUsername, fetchUserInfo, GitHubUserInfo } from "../githubApi";
 import { GitHubRepo } from "../types";
 import { RepoCard } from "./RepoCard";
 import { ReposModal } from "./ReposModal";
 
-export const cl = classNameFactory("vc-github-repos-");
-
 export function GitHubReposComponent({ id, theme }: { id: string, theme: string; }) {
     const [repos, setRepos] = useState<GitHubRepo[]>([]);
     const [loading, setLoading] = useState(true);
@@ -90,10 +87,10 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
         fetchData();
     }, [id]);
 
-    if (loading) return <BaseText size="xs" weight="semibold" className={cl("loading")} style={{ color: "var(--header-secondary)" }}>
+    if (loading) return <BaseText size="xs" weight="semibold" className={cl("loading")} >
         Loading repositories...</BaseText>;
 
-    if (error) return <BaseText size="xs" weight="semibold" className={cl("error")} style={{ color: "var(--text-danger)" }}>
+    if (error) return <BaseText size="xs" weight="semibold" className={cl("error")}>
         Error: {error}</BaseText>;
 
     if (!repos.length) return null;
@@ -115,10 +112,10 @@ export function GitHubReposComponent({ id, theme }: { id: string, theme: string;
 
     return (
         <div className={cl("container")}>
-            <BaseText size="xs" weight="semibold" className={cl("header")} style={{ color: "var(--header-secondary)" }}>
+            <BaseText size="xs" weight="semibold" className={cl("header")}>
                 GitHub Repositories
                 {userInfo && (
-                    <span className={cl("count")} style={{ color: "var(--text-muted)" }}>
+                    <span className={cl("count")}>
                         {` (Showing only top ${topRepos.length}/${userInfo.totalRepos})`}
                     </span>
                 )}
diff --git a/src/equicordplugins/githubRepos/components/RepoCard.tsx b/src/equicordplugins/githubRepos/components/RepoCard.tsx
index 043bf65d9..8d6ea6a77 100644
--- a/src/equicordplugins/githubRepos/components/RepoCard.tsx
+++ b/src/equicordplugins/githubRepos/components/RepoCard.tsx
@@ -4,10 +4,10 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { classNameFactory } from "@api/Styles";
 import { BaseText } from "@components/BaseText";
 import { React, Tooltip } from "@webpack/common";
 
+import { cl } from "..";
 import { getLanguageColor } from "../colors";
 import { RepoCardProps } from "../types";
 import { Star } from "./Star";
@@ -15,15 +15,13 @@ import { Star } from "./Star";
 export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) {
     const handleClick = () => window.open(repo.html_url, "_blank");
 
-    const cl = classNameFactory("vc-github-repo-");
-
     const renderStars = () => {
         if (!showStars) return null;
 
         return (
             <div className={cl("stars")}>
                 <Star className={cl("stars-icon")} />
-                <BaseText size="sm" style={{ color: "var(--text-muted)" }}>{repo.stargazers_count.toLocaleString()}</BaseText>
+                <BaseText size="sm">{repo.stargazers_count.toLocaleString()}</BaseText>
             </div>
         );
     };
@@ -40,9 +38,10 @@ export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) {
                     height="16"
                     fill="none"
                     viewBox="0 0 24 24"
-                    style={{ cursor: "pointer" }}>
-                    <path fill="var(--interactive-normal)" d="M8 5a1 1 0 0 0 0 2h7.59L5.29 17.3a1 1 0 1 0 1.42 1.4L17 8.42V16a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H8Z">
-                    </path>
+                >
+                    <path
+                        d="M8 5a1 1 0 0 0 0 2h7.59L5.29 17.3a1 1 0 1 0 1.42 1.4L17 8.42V16a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1H8Z"
+                    />
                 </svg>
             </div>
         );
@@ -57,7 +56,7 @@ export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) {
                     className={cl("language-color")}
                     style={{ backgroundColor: getLanguageColor(repo.language) }}
                 />
-                <BaseText size="sm" style={{ color: "var(--text-muted)" }}>{repo.language}</BaseText>
+                <BaseText size="sm">{repo.language}</BaseText>
                 {renderStars()}
             </div >
         );
@@ -73,7 +72,7 @@ export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) {
                             onMouseEnter={onMouseEnter}
                         >
                             <div className={cl("header")}>
-                                <BaseText size="sm" weight="medium" className={cl("name")} style={{ color: "var(--interactive-active)" }}>
+                                <BaseText size="sm" weight="medium" className={cl("name")}>
                                     {repo.name}
                                 </BaseText>
                                 {renderLink()}
@@ -85,7 +84,7 @@ export function RepoCard({ repo, showStars, showLanguage }: RepoCardProps) {
             ) : (
                 <div className={cl("card")}>
                     <div className={cl("header")}>
-                        <BaseText size="sm" weight="medium" className={cl("name")} style={{ color: "var(--interactive-active)" }}>
+                        <BaseText size="sm" weight="medium" className={cl("name")} >
                             {repo.name}
                         </BaseText>
                         {renderLink()}
diff --git a/src/equicordplugins/githubRepos/components/ReposModal.tsx b/src/equicordplugins/githubRepos/components/ReposModal.tsx
index 55ca21b74..bf41cc3da 100644
--- a/src/equicordplugins/githubRepos/components/ReposModal.tsx
+++ b/src/equicordplugins/githubRepos/components/ReposModal.tsx
@@ -9,9 +9,9 @@ import { HeadingPrimary } from "@components/Heading";
 import { ModalContent, ModalFooter, ModalHeader, ModalRoot } from "@utils/modal";
 import { React } from "@webpack/common";
 
+import { cl } from "..";
 import { getLanguageColor } from "../colors";
 import { GitHubRepo } from "../types";
-import { cl } from "./GitHubReposComponent";
 import { Star } from "./Star";
 
 interface ReposModalProps {
@@ -73,10 +73,10 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
                 <div className={cl("table-container")}>
                     <table className={cl("table")}>
                         <colgroup>
-                            <col style={{ width: "20%" }} />
-                            <col style={{ width: "45%" }} />
-                            <col style={{ width: "15%" }} />
-                            <col style={{ width: "10%" }} />
+                            <col className={cl("header-repo")} />
+                            <col className={cl("header-description")} />
+                            <col className={cl("header-language")} />
+                            <col className={cl("header-stars")} />
                         </colgroup>
                         {renderTableHeader()}
                         <tbody>
@@ -85,10 +85,10 @@ export function ReposModal({ repos, username, rootProps }: ReposModalProps) {
                     </table>
                 </div>
             </ModalContent>
-            <ModalFooter>
+            <ModalFooter className={cl("modal-footer")}>
                 <Button
                     className={cl("modal-footer-github")}
-                    variant="primary"
+                    variant="link"
                     onClick={() => window.open(`https://github.com/${username}?tab=repositories`, "_blank")}
                 >
                     View on GitHub
diff --git a/src/equicordplugins/githubRepos/index.tsx b/src/equicordplugins/githubRepos/index.tsx
index faf53f159..406d90ae4 100644
--- a/src/equicordplugins/githubRepos/index.tsx
+++ b/src/equicordplugins/githubRepos/index.tsx
@@ -7,6 +7,7 @@
 import "./styles.css";
 
 import { definePluginSettings } from "@api/Settings";
+import { classNameFactory } from "@api/Styles";
 import { BaseText } from "@components/BaseText";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { EquicordDevs } from "@utils/constants";
@@ -17,6 +18,8 @@ import { React } from "@webpack/common";
 
 import { GitHubReposComponent } from "./components/GitHubReposComponent";
 
+export const cl = classNameFactory("vc-github-repos-");
+
 export const settings = definePluginSettings({
     showStars: {
         type: OptionType.BOOLEAN,
diff --git a/src/equicordplugins/githubRepos/styles.css b/src/equicordplugins/githubRepos/styles.css
index 512c39ab8..3d1291b35 100644
--- a/src/equicordplugins/githubRepos/styles.css
+++ b/src/equicordplugins/githubRepos/styles.css
@@ -29,28 +29,29 @@
 .vc-github-repos-button,
 .vc-github-repos-show-more {
     color: var(--text-default);
-    background-color: var(--control-background-primary-default);
     width: 100%;
 }
 
-.vc-github-repo-card {
+.vc-github-repos-card {
     padding: 8px;
     border-radius: var(--radius-xs);
     border: 1px solid var(--profile-body-divider-color, var(--input-border));
 }
 
-.vc-github-repo-header {
+.vc-github-repos-header {
+    color: var(--header-secondary);
     display: flex;
     justify-content: space-between;
 }
 
-.vc-github-repo-stars {
+.vc-github-repos-stars {
     display: flex;
     align-items: center;
     gap: 4px;
+    color: var(--text-muted);
 }
 
-.vc-github-repo-language {
+.vc-github-repos-language {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -58,7 +59,7 @@
     font-size: 12px;
 }
 
-.vc-github-repo-language-color {
+.vc-github-repos-language-color {
     width: var(--size-sm);
     height: var(--size-sm);
     border-radius: var(--radius-round);
@@ -68,6 +69,7 @@
 .vc-github-repos-modal {
     width: 90%;
     max-width: 900px;
+    background-color: var(--background-base-lower);
 }
 
 .vc-github-repos-modal-title {
@@ -187,4 +189,57 @@
 
 .vc-github-repos-modal-footer-close {
     margin-right: 5px;
+}
+
+.vc-github-repos-modal-footer-close,
+.vc-github-repos-modal-footer-github {
+    color: var(--text-default);
+    background-color: color-mix(in srgb, var(--background-base-low) 90%, white);
+    border: 0;
+}
+
+.vc-github-repos-modal-footer-close:hover,
+.vc-github-repos-modal-footer-github:hover {
+    background-color: color-mix(in srgb, var(--background-base-low) 75%, white);
+}
+
+.vc-github-repos-modal-footer {
+    background-color: var(--background-base-lower);
+}
+
+.vc-github-repos-loading {
+    color: var(--header-secondary);
+}
+
+.vc-github-repos-count {
+    color: var(--text-muted);
+}
+
+.vc-github-repos-error {
+    color: var(--text-danger);
+}
+
+.vc-github-repos-link {
+    cursor: pointer;
+    fill: var(--interactive-normal);
+}
+
+.vc-github-repos-name {
+    color: var(--interactive-active);
+}
+
+.vc-github-repos-header-repo {
+    width: 20%
+}
+
+.vc-github-repos-header-description {
+    width: 50%
+}
+
+.vc-github-repos-header-language {
+    width: 15%
+}
+
+.vc-github-repos-header-stars {
+    width: 10%
 }
\ No newline at end of file