feat: updating translations

src/renderer/src/constants.ts

@@ -1,6 +1,6 @@
 import { Downloader } from "@shared";
 
-export const VERSION_CODENAME = "Spectre";
+export const VERSION_CODENAME = "Polychrome";
 
 export const DOWNLOADER_NAME = {
   [Downloader.RealDebrid]: "Real-Debrid",

src/renderer/src/helpers.ts

@@ -61,13 +61,20 @@ export const injectCustomCss = (css: string) => {
       currentCustomCss.remove();
     }
 
-    const style = document.createElement("style");
-
-    style.id = "custom-css";
-    style.textContent = `
-      ${css}
-    `;
-    document.head.appendChild(style);
+    if (css.startsWith("https://hydrathemes.shop/")) {
+      const link = document.createElement("link");
+      link.id = "custom-css";
+      link.rel = "stylesheet";
+      link.href = css;
+      document.head.appendChild(link);
+    } else {
+      const style = document.createElement("style");
+      style.id = "custom-css";
+      style.textContent = `
+        ${css}
+      `;
+      document.head.appendChild(style);
+    }
   } catch (error) {
     console.error("failed to inject custom css:", error);
   }

src/renderer/src/pages/settings/aparence/components/theme-card.scss

@@ -85,6 +85,10 @@
       flex-direction: row;
       gap: 8px;
 
+      &--external {
+        display: none;
+      }
+
       Button {
         padding: 8px 11px;
       }

src/renderer/src/pages/settings/aparence/components/theme-card.tsx

@@ -81,17 +81,6 @@ export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
       >
         <div className="theme-card__header">
           <div className="theme-card__header__title">{theme.name}</div>
-
-          <div className="theme-card__header__colors">
-            {Object.entries(theme.colors).map(([key, color]) => (
-              <div
-                title={color}
-                style={{ backgroundColor: color }}
-                className="theme-card__header__colors__color"
-                key={key}
-              ></div>
-            ))}
-          </div>
         </div>
 
         {theme.authorName && (
@@ -122,6 +111,11 @@ export const ThemeCard = ({ theme, onListUpdated }: ThemeCardProps) => {
 
           <div className="theme-card__actions__right">
             <Button
+              className={
+                theme.code.startsWith("https://hydrathemes.shop/")
+                  ? "theme-card__actions__right--external"
+                  : ""
+              }
               onClick={() => window.electron.openEditorWindow(theme.id)}
               title={t("edit_theme")}
               theme="outline"

src/renderer/src/pages/settings/aparence/modals/add-theme-modal.tsx

@@ -41,11 +41,6 @@ export const AddThemeModal = ({
       isActive: false,
       author: userDetails?.id || undefined,
       authorName: userDetails?.username || undefined,
-      colors: {
-        accent: "",
-        background: "",
-        surface: "",
-      },
       code: "",
       createdAt: new Date(),
       updatedAt: new Date(),

src/renderer/src/pages/settings/aparence/settings-appearance.tsx

@@ -17,8 +17,6 @@ export const SettingsAppearance = () => {
 
   return (
     <div className="settings-appearance">
-      <p className="settings-appearance__description">Appearance</p>
-
       <ThemeActions onListUpdated={loadThemes} themesCount={themes.length} />
 
       <div className="settings-appearance__themes">

src/renderer/src/pages/theme-editor/theme-editor.scss

@@ -9,7 +9,7 @@
   &__header {
     display: flex;
     align-items: center;
-    padding: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit + 1px);
     background-color: globals.$dark-background-color;
     font-size: 8px;
     z-index: 50;
@@ -47,7 +47,7 @@
     &-actions {
       display: flex;
       flex-direction: row;
-      justify-content: space-between;
+      justify-content: flex-end;
       align-items: center;
 
       &__tabs {

src/renderer/src/pages/theme-editor/theme-editor.tsx

@@ -4,11 +4,7 @@ import Editor from "@monaco-editor/react";
 import { Theme } from "@types";
 import { useSearchParams } from "react-router-dom";
 import { Button } from "@renderer/components";
-import {
-  CheckIcon,
-  CodeIcon,
-  ProjectRoadmapIcon,
-} from "@primer/octicons-react";
+import { CheckIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 
@@ -16,17 +12,12 @@ export default function ThemeEditor() {
   const [searchParams] = useSearchParams();
   const [theme, setTheme] = useState<Theme | null>(null);
   const [code, setCode] = useState("");
-  const [activeTab, setActiveTab] = useState("code");
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const themeId = searchParams.get("themeId");
 
   const { t } = useTranslation("settings");
 
-  const handleTabChange = (tab: string) => {
-    setActiveTab(tab);
-  };
-
   useEffect(() => {
     if (themeId) {
       window.electron.getCustomThemeById(themeId).then((loadedTheme) => {
@@ -90,50 +81,22 @@ export default function ThemeEditor() {
         )}
       </div>
 
-      {activeTab === "code" && (
-        <Editor
-          theme="vs-dark"
-          defaultLanguage="css"
-          value={code}
-          onChange={handleEditorChange}
-          options={{
-            minimap: { enabled: false },
-            fontSize: 14,
-            lineNumbers: "on",
-            wordWrap: "on",
-            automaticLayout: true,
-          }}
-        />
-      )}
-
-      {activeTab === "info" && (
-        <div className="theme-editor__info">
-          entao mano eu ate fiz isso aqui mas tava feio dms ai deu vergonha e
-          removi kkkk
-        </div>
-      )}
+      <Editor
+        theme="vs-dark"
+        defaultLanguage="css"
+        value={code}
+        onChange={handleEditorChange}
+        options={{
+          minimap: { enabled: false },
+          fontSize: 14,
+          lineNumbers: "on",
+          wordWrap: "on",
+          automaticLayout: true,
+        }}
+      />
 
       <div className="theme-editor__footer">
         <div className="theme-editor__footer-actions">
-          <div className="theme-editor__footer-actions__tabs">
-            <Button
-              onClick={() => handleTabChange("code")}
-              theme="dark"
-              className={activeTab === "code" ? "active" : ""}
-            >
-              <CodeIcon />
-              {t("editor_tab_code")}
-            </Button>
-            <Button
-              onClick={() => handleTabChange("info")}
-              theme="dark"
-              className={activeTab === "info" ? "active" : ""}
-            >
-              <ProjectRoadmapIcon />
-              {t("editor_tab_info")}
-            </Button>
-          </div>
-
           <Button onClick={handleSave}>
             <CheckIcon />
             {t("editor_tab_save")}