refactor: simplify theme structure and remove color-related code

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 && (

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/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 {
+import { CheckIcon } from "@primer/octicons-react";
-  CheckIcon,
-  CodeIcon,
-  ProjectRoadmapIcon,
-} 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,12 +81,11 @@ export default function ThemeEditor() {
         )}
       </div>
 
-      {activeTab === "code" && (
+      <Editor
-        <Editor
+        theme="vs-dark"
-          theme="vs-dark"
+        defaultLanguage="css"
-          defaultLanguage="css"
+        value={code}
-          value={code}
+        onChange={handleEditorChange}
-          onChange={handleEditorChange}
           options={{
             minimap: { enabled: false },
             fontSize: 14,
@@ -103,37 +93,10 @@ export default function ThemeEditor() {
             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>
-      )}
 
       <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")}

src/types/theme.types.ts

@@ -1,24 +1,6 @@
-import { z } from "zod";
-
-const isValidHexColor = (color: string): boolean => {
-  const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-  return hexColorRegex.test(color);
-};
-
-const hexColorSchema = z.string().refine(isValidHexColor);
-type HexColorType = z.infer<typeof hexColorSchema>;
-
 export interface Theme {
   id: string;
   name: string;
-  colors: {
-    accent: HexColorType;
-    background: HexColorType;
-    surface: HexColorType;
-    optional1?: HexColorType;
-    optional2?: HexColorType;
-  };
-  description?: string;
   author: string | undefined;
   authorName: string | undefined;
   isActive: boolean;