GithubRepos: Make UI Colors Match Theme

2025-11-13 14:11:50 -05:00 · 2025-11-13 14:11:50 -05:00 · 4f9299d6a0
commit 4f9299d6a0
parent fe1c457dcf
5 changed files with 85 additions and 31 deletions
--- 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>
                )}
--- 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()}
--- 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
--- 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,
--- 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%
 }