From 4eb305993260a6493df7f0f821e8cf2ee03ec580 Mon Sep 17 00:00:00 2001
From: kmmiio99o <164557248+kmmiio99o@users.noreply.github.com>
Date: Fri, 19 Dec 2025 23:22:28 +0100
Subject: [PATCH 1/4] Fix many colors issues

---
 src/core/ui/components/AddonCard.tsx                        | 6 +++---
 src/core/ui/components/AddonPage.tsx                        | 4 ++--
 src/core/ui/settings/pages/Fonts/FontEditor.tsx             | 4 ++--
 .../settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx | 2 +-
 src/lib/ui/components/Codeblock.tsx                         | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/core/ui/components/AddonCard.tsx b/src/core/ui/components/AddonCard.tsx
index 973ee38..ad6083d 100644
--- a/src/core/ui/components/AddonCard.tsx
+++ b/src/core/ui/components/AddonCard.tsx
@@ -32,7 +32,7 @@ const useStyles = createStyles({
     },
     headerLabel: {
         ...TextStyleSheet["heading-md/semibold"],
-        color: semanticColors.HEADER_PRIMARY,
+        color: semanticColors.MOBILE_TEXT_HEADING_PRIMARY,
     },
     headerSubtitle: {
         ...TextStyleSheet["text-md/semibold"],
@@ -40,7 +40,7 @@ const useStyles = createStyles({
     },
     descriptionLabel: {
         ...TextStyleSheet["text-md/semibold"],
-        color: semanticColors.HEADER_PRIMARY,
+        color: semanticColors.TEXT_NORMAL,
     },
     actions: {
         flexDirection: "row-reverse",
@@ -48,7 +48,7 @@ const useStyles = createStyles({
         gap: 5
     },
     iconStyle: {
-        tintColor: semanticColors.LOGO_PRIMARY,
+        tintColor: semanticColors.INTERACTIVE_ICON_DEFAULT,
         opacity: 0.2,
         height: 64,
         width: 64,
diff --git a/src/core/ui/components/AddonPage.tsx b/src/core/ui/components/AddonPage.tsx
index 35a5dcc..3da8d3a 100644
--- a/src/core/ui/components/AddonPage.tsx
+++ b/src/core/ui/components/AddonPage.tsx
@@ -151,7 +151,7 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
         return <View style={{ gap: 32, flexGrow: 1, justifyContent: "center", alignItems: "center" }}>
             <View style={{ gap: 8, alignItems: "center" }}>
                 <Image source={findAssetId("empty_quick_switcher")!} />
-                <Text variant="text-lg/semibold" color="text-normal">
+                <Text variant="text-lg/semibold" color="text-default">
                     Oops! Nothing to see here… yet!
                 </Text>
             </View>
@@ -204,7 +204,7 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
                 ListHeaderComponent={headerElement}
                 ListEmptyComponent={() => <View style={{ gap: 12, padding: 12, alignItems: "center" }}>
                     <Image source={findAssetId("devices_not_found")!} />
-                    <Text variant="text-lg/semibold" color="text-normal">
+                    <Text variant="text-lg/semibold" color="text-default">
                         Hmmm... could not find that!
                     </Text>
                 </View>}
diff --git a/src/core/ui/settings/pages/Fonts/FontEditor.tsx b/src/core/ui/settings/pages/Fonts/FontEditor.tsx
index 40ac61b..c977f70 100644
--- a/src/core/ui/settings/pages/Fonts/FontEditor.tsx
+++ b/src/core/ui/settings/pages/Fonts/FontEditor.tsx
@@ -332,7 +332,7 @@ export default function FontEditor(props: {
 
                     return <TableRow
                         label={name}
-                        subLabel={error ? <Text variant='text-xs/medium' color='text-danger'>{error.message}</Text> : url}
+                        subLabel={error ? <Text variant='text-xs/medium' color='text-feedback-critical'>{error.message}</Text> : url}
                         trailing={<Stack spacing={8} direction="horizontal">
                             <IconButton
                                 size="sm"
@@ -363,7 +363,7 @@ export default function FontEditor(props: {
                 })}
                 <TableRow label={<NewEntryRow fontName={props.name} fontEntry={fontEntries} />} />
             </TableRowGroup>
-            {errors && <Text variant='text-sm/medium' color='text-danger'>Some font entries cannot be imported. Please modify the entries and try again.</Text>}
+            {errors && <Text variant='text-sm/medium' color='text-feedback-critical'>Some font entries cannot be imported. Please modify the entries and try again.</Text>}
             <View style={{ flexDirection: "row", justifyContent: "flex-end", bottom: 0, left: 0 }}>
                 <Button
                     size="lg"
diff --git a/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx b/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
index d857f28..93546bb 100644
--- a/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
+++ b/src/core/ui/settings/pages/Plugins/sheets/PluginInfoActionSheet.tsx
@@ -208,7 +208,7 @@ export default function PluginInfoActionSheet({
             color="text-primary"
             style={{
               marginBottom: 4,
-              color: semanticColors.HEADER_PRIMARY,
+              color: "text-strong",
             }}
           >
             Description
diff --git a/src/lib/ui/components/Codeblock.tsx b/src/lib/ui/components/Codeblock.tsx
index 7b37a9a..735bea9 100644
--- a/src/lib/ui/components/Codeblock.tsx
+++ b/src/lib/ui/components/Codeblock.tsx
@@ -14,11 +14,11 @@ const useStyles = createStyles({
         fontFamily: constants.Fonts.CODE_NORMAL,
         fontSize: 12,
         textAlignVertical: "center",
-        backgroundColor: semanticColors.BACKGROUND_SECONDARY,
-        color: semanticColors.TEXT_NORMAL,
+        backgroundColor: semanticColors.CARD_BACKGROUND_DEFAULT,
+        color: semanticColors.TEXT_DEFAULT,
         borderWidth: 1,
         borderRadius: 12,
-        borderColor: semanticColors.BACKGROUND_TERTIARY,
+        borderColor: semanticColors.BORDER_SUBTLE,
         padding: 10,
     },
 });

From e344958f70f48aca1a7c7896889ac823879e2cc6 Mon Sep 17 00:00:00 2001
From: kmmiio99o <164557248+kmmiio99o@users.noreply.github.com>
Date: Sat, 20 Dec 2025 19:46:05 +0100
Subject: [PATCH 2/4] Change icon from ArrowsUpDownIcon to MoreVerticalIcon

Why it was UpDown before? I don't know, but it's changed now
---
 src/core/ui/components/AddonPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/ui/components/AddonPage.tsx b/src/core/ui/components/AddonPage.tsx
index 3da8d3a..3563bf0 100644
--- a/src/core/ui/components/AddonPage.tsx
+++ b/src/core/ui/components/AddonPage.tsx
@@ -175,7 +175,7 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
             <View style={{ flexDirection: "row", gap: 8 }}>
                 <Search style={{ flexGrow: 1 }} isRound={!!props.sortOptions} onChangeText={v => setSearch(v)} />
                 {props.sortOptions && <IconButton
-                    icon={findAssetId("ArrowsUpDownIcon")}
+                    icon={findAssetId("MoreVerticalIcon")}
                     variant="tertiary"
                     disabled={!!search}
                     onPress={() => showSimpleActionSheet({

From 4482be2ff0b24a5806951fb24494ac0a8682262d Mon Sep 17 00:00:00 2001
From: kmmiio99o <164557248+kmmiio99o@users.noreply.github.com>
Date: Sat, 20 Dec 2025 19:47:32 +0100
Subject: [PATCH 3/4] Make the buttons in Addon Browser look better. Literally

they were just too small
---
 .../ui/settings/pages/PluginBrowser/index.tsx | 64 ++++++++++---------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/core/ui/settings/pages/PluginBrowser/index.tsx b/src/core/ui/settings/pages/PluginBrowser/index.tsx
index 85a78a3..1afb2c7 100644
--- a/src/core/ui/settings/pages/PluginBrowser/index.tsx
+++ b/src/core/ui/settings/pages/PluginBrowser/index.tsx
@@ -45,14 +45,14 @@ function normalizeIdFromInstallUrl(url: string) {
 // @ts-ignore (i cant be bothered to type these)
 function InstallButton({ addon, isPluginMode, installing, setInstalling, setRefreshTick }) {
     const normId = normalizeIdFromInstallUrl(addon.installUrl);
-    const [installed, setInstalled] = React.useState(() => 
+    const [installed, setInstalled] = React.useState(() =>
         isPluginMode ? Boolean(VdPluginManager.plugins[normId]) : Boolean(themes[addon.installUrl])
     );
 
     React.useEffect(() => {
         setInstalled(isPluginMode ? Boolean(VdPluginManager.plugins[normId]) : Boolean(themes[addon.installUrl]));
     }, [addon.installUrl, setRefreshTick, isPluginMode]);
-    
+
     const installAddon = async () => {
         if (installing.has(normId)) return;
         setInstalling((prev: Iterable<unknown> | null | undefined) => new Set(prev).add(normId));
@@ -90,7 +90,7 @@ function InstallButton({ addon, isPluginMode, installing, setInstalling, setRefr
 
     const promptInstall = () => {
         if (!isPluginMode) return installAddon();
-        
+
         const plugin = addon as PluginData;
         const needsWarn = (plugin.status && plugin.status !== "working") || (plugin.warningMessage && plugin.warningMessage.trim().length > 0);
         if (!needsWarn) return installAddon();
@@ -197,12 +197,12 @@ function TrailingButtons({ addon, isPluginMode, installing, setInstalling, setRe
                 variant="secondary"
                 icon={findAssetId("MoreHorizontalIcon")}
             />
-            <InstallButton 
+            <InstallButton
                 addon={addon}
                 isPluginMode={isPluginMode}
-                installing={installing} 
-                setInstalling={setInstalling} 
-                setRefreshTick={setRefreshTick} 
+                installing={installing}
+                setInstalling={setInstalling}
+                setRefreshTick={setRefreshTick}
             />
         </Stack>
     );
@@ -238,12 +238,12 @@ function AddonCard({ addon, isPluginMode, installing, setInstalling, setRefreshT
                         )}
                     </View>
                     <View>
-                        <TrailingButtons 
+                        <TrailingButtons
                             addon={addon}
                             isPluginMode={isPluginMode}
-                            installing={installing} 
-                            setInstalling={setInstalling} 
-                            setRefreshTick={setRefreshTick} 
+                            installing={installing}
+                            setInstalling={setInstalling}
+                            setRefreshTick={setRefreshTick}
                         />
                     </View>
                 </View>
@@ -296,7 +296,7 @@ export default function BrowserPage() {
             const response = await safeFetch(url);
             if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             const data = await response.json();
-            
+
             let addonList: AddonData[] = [];
             if (Array.isArray(data)) {
                 addonList = data;
@@ -306,7 +306,7 @@ export default function BrowserPage() {
                 // Handle any other structure for themes - try common property names
                 addonList = data.OFFICIAL_THEMES || data.themes || data.THEMES || data.items || [];
             }
-            
+
             if (isPluginMode) {
                 setPlugins(addonList as PluginData[]);
             } else {
@@ -411,34 +411,38 @@ export default function BrowserPage() {
 
     return (
         <View style={{ flex: 1 }}>
-            <View style={{ justifyContent: "center", alignItems: "center", paddingHorizontal: 10 }}>
+            <View style={{ paddingHorizontal: 10 }}>
                 <Stack spacing={12}>
-                    <View style={{ flexDirection: "row", justifyContent: "center", alignItems: 'center', paddingTop: 10 }}>
-                        <Stack spacing={10} style={{ flexDirection: "row", justifyContent: "center", alignItems: 'center' }}>
+                    <View style={{ flexDirection: "row", paddingTop: 10 }}>
+                        <View style={{ flex: 1, flexDirection: "row", alignItems: "center" }}>
                             <Button
-                                size="sm"
+                                size="md"
                                 text="Plugins"
                                 variant={mode === "plugins" ? "primary" : "secondary"}
                                 onPress={() => setMode("plugins")}
+                                style={{ flex: 1 }}
                             />
+                            <View style={{ width: 8 }} />
                             <Button
-                                size="sm"
+                                size="md"
                                 text="Themes"
                                 variant={mode === "themes" ? "primary" : "secondary"}
                                 onPress={() => setMode("themes")}
+                                style={{ flex: 1 }}
                             />
-                        </Stack>
+                        </View>
                     </View>
 
                     <View style={{ flexDirection: "row", alignItems: "center", gap: 8, paddingBottom: 6 }}>
-                        <Search 
-                            placeholder={`Search ${mode}...`} 
-                            onChangeText={setSearchQuery} 
+                        <Search
+                            placeholder={`Search ${mode}...`}
+                            isRound={true}
+                            onChangeText={setSearchQuery}
                             style={{ flex: 1 }}
                         />
                         <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                         <IconButton
-                            size="sm"
+                            size="md"
                             variant="tertiary"
                             icon={findAssetId("MoreVerticalIcon")}
                             disabled={!!searchQuery}
@@ -457,11 +461,11 @@ export default function BrowserPage() {
                             })}
                         />
                     </View>
-                        
+
                     </View>
                 </Stack>
             </View>
-            
+
             <FlashList
                 data={sortedAndFiltered}
                 refreshing={loading}
@@ -485,16 +489,16 @@ export default function BrowserPage() {
                 //@ts-ignore
                 renderItem={({ item: addon }) => (
                     <View style={{ paddingVertical: 6, paddingHorizontal: 8 }}>
-                        <AddonCard 
+                        <AddonCard
                             addon={addon}
                             isPluginMode={mode === "plugins"}
-                            installing={installing} 
-                            setInstalling={setInstalling} 
-                            setRefreshTick={setRefreshTick} 
+                            installing={installing}
+                            setInstalling={setInstalling}
+                            setRefreshTick={setRefreshTick}
                         />
                     </View>
                 )}
             />
         </View>
     );
-}
\ No newline at end of file
+}

From bd8cc80252869c3c1182477199bac36dc2803f1a Mon Sep 17 00:00:00 2001
From: kmmiio99o <164557248+kmmiio99o@users.noreply.github.com>
Date: Sat, 20 Dec 2025 22:56:05 +0100
Subject: [PATCH 4/4] Moodle wanted :wires:

---
 src/core/ui/components/AddonPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/ui/components/AddonPage.tsx b/src/core/ui/components/AddonPage.tsx
index 3563bf0..3da8d3a 100644
--- a/src/core/ui/components/AddonPage.tsx
+++ b/src/core/ui/components/AddonPage.tsx
@@ -175,7 +175,7 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
             <View style={{ flexDirection: "row", gap: 8 }}>
                 <Search style={{ flexGrow: 1 }} isRound={!!props.sortOptions} onChangeText={v => setSearch(v)} />
                 {props.sortOptions && <IconButton
-                    icon={findAssetId("MoreVerticalIcon")}
+                    icon={findAssetId("ArrowsUpDownIcon")}
                     variant="tertiary"
                     disabled={!!search}
                     onPress={() => showSimpleActionSheet({