OC-66 done

16 files changed, 118 insertions, 181 deletions

diff --git a/src/main/java/cc/polyfrost/oneconfig/command/OneConfigCommand.java b/src/main/java/cc/polyfrost/oneconfig/command/OneConfigCommand.java
index ab2c403..d58c5a6 100644
--- a/src/main/java/cc/polyfrost/oneconfig/command/OneConfigCommand.java
+++ b/src/main/java/cc/polyfrost/oneconfig/command/OneConfigCommand.java
@@ -3,6 +3,7 @@ package cc.polyfrost.oneconfig.command;
 import cc.polyfrost.oneconfig.gui.HudGui;
 import cc.polyfrost.oneconfig.gui.OneConfigGui;
 import cc.polyfrost.oneconfig.utils.GuiUtils;
+import cc.polyfrost.oneconfig.utils.InputUtils;
 import cc.polyfrost.oneconfig.utils.commands.annotations.Command;
 import cc.polyfrost.oneconfig.utils.commands.annotations.Main;
 import cc.polyfrost.oneconfig.utils.commands.annotations.SubCommand;
@@ -26,11 +27,12 @@ public class OneConfigCommand {
         }
     }
 
-    @SubCommand(value = "destory", description = "Destroy the cached OneConfig GUI.")
+    @SubCommand(value = "destroy", description = "Destroy the cached OneConfig GUI.")
     private static class DestroySubCommand {
         @Main
         private static void main() {
             OneConfigGui.instanceToRestore = null;
+            InputUtils.blockClicks(false);
         }
     }
 }
\ No newline at end of file
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java b/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
index 3f880a0..bd449cf 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
@@ -54,11 +54,11 @@ public class SideBar {
             if (button.equals(buttons.get(selected))) break;
             buttons.get(selected).setColorPalette(ColorPalette.TERTIARY);
             moveAnimation = new EaseInOutQuart(300, buttons.get(selected).y, button.y, false);
-            sizeAnimation = new EaseInQuartReversed(300, 36, 72, false);
+            sizeAnimation = new EaseInQuartReversed(300, 36, 54, false);
             selected = buttons.indexOf(button);
         }
         if (moveAnimation != null) {
-            RenderManager.drawRoundedRect(vg, x + 16, moveAnimation.get(), 192, sizeAnimation.get(), OneConfigConfig.PRIMARY_600, 12);
+            RenderManager.drawRoundedRect(vg, x + 16, moveAnimation.get() - (sizeAnimation.get() - 36) / 2f, 192, sizeAnimation.get(0), OneConfigConfig.PRIMARY_600, 12);
             if (moveAnimation.isFinished() && sizeAnimation.isFinished()) {
                 moveAnimation = null;
                 sizeAnimation = null;
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/animations/ColorAnimation.java b/src/main/java/cc/polyfrost/oneconfig/gui/animations/ColorAnimation.java
index 39130f0..a9ef863 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/animations/ColorAnimation.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/animations/ColorAnimation.java
@@ -1,6 +1,7 @@
 package cc.polyfrost.oneconfig.gui.animations;
 
 import cc.polyfrost.oneconfig.utils.color.ColorPalette;
+import cc.polyfrost.oneconfig.utils.color.ColorUtils;
 
 public class ColorAnimation {
     private ColorPalette palette;
@@ -33,7 +34,6 @@ public class ColorAnimation {
             blueAnimation = new EaseInOutQuad(100, blueAnimation.get(), newColors[2], false);
             alphaAnimation = new EaseInOutQuad(100, alphaAnimation.get(), newColors[3], false);
             prevState = state;
-            return ((int) (alphaAnimation.get(0) * 255) << 24) | ((int) (redAnimation.get(0) * 255) << 16) | ((int) (greenAnimation.get(0) * 255) << 8) | ((int) (blueAnimation.get(0) * 255));
         }
         return ((int) (alphaAnimation.get() * 255) << 24) | ((int) (redAnimation.get() * 255) << 16) | ((int) (greenAnimation.get() * 255) << 8) | ((int) (blueAnimation.get() * 255));
     }
@@ -43,6 +43,7 @@ public class ColorAnimation {
     }
 
     public void setPalette(ColorPalette palette) {
+        if (this.palette.equals(palette)) return;
         this.palette = palette;
         prevState = 3;
     }
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseInQuartReversed.java b/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseInQuartReversed.java
index 9e77714..10bf354 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseInQuartReversed.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseInQuartReversed.java
@@ -14,7 +14,8 @@ public class EaseInQuartReversed extends Animation {
     @Override
     protected float animate(float timePassed, float duration, float start, float change) {
         float x = timePassed / duration;
-        if (x < 0.5f) return (float) (16 * Math.pow(x, 4) * change + start);
-        return (float) (Math.pow(2 * x - 2, 4) * change + start);
+        if (x < 0.25f) return (float) (128 * Math.pow(x, 4) * change + start);
+        if (x < 0.75f) return (float) ((-128 * Math.pow(x - 0.5, 4) + 1) * change + start);
+        return (float) (128 * Math.pow(x - 1, 4) * change + start);
     }
 }
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java
index afccbe3..d7e5c9e 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java
@@ -2,7 +2,6 @@ package cc.polyfrost.oneconfig.gui.elements;
 
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
 import cc.polyfrost.oneconfig.gui.OneConfigGui;
-import cc.polyfrost.oneconfig.gui.animations.ColorAnimation;
 import cc.polyfrost.oneconfig.gui.pages.Page;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
@@ -78,7 +77,7 @@ public class BasicButton extends BasicElement {
         }
         if (alignment == ALIGNMENT_CENTER) {
             if (icon1 != null && icon2 == null && text == null) {
-                RenderManager.drawSvg(vg, icon1, middle - iconSize / 2f, middleYIcon, iconSize, iconSize);
+                RenderManager.drawSvg(vg, icon1, middle - iconSize / 2f, middleYIcon, iconSize, iconSize, color);
             } else {
                 if (icon1 != null)
                     contentWidth += iconSize + xSpacing;
@@ -95,9 +94,9 @@ public class BasicButton extends BasicElement {
             if (text != null)
                 RenderManager.drawText(vg, text, middle - contentWidth / 2, middleYText, color, fontSize, Fonts.MEDIUM);
             if (icon1 != null)
-                RenderManager.drawSvg(vg, icon1, x + xSpacing, middleYIcon, iconSize, iconSize, color);
+                RenderManager.drawSvg(vg, icon1, x + xPadding, middleYIcon, iconSize, iconSize, color);
             if (icon2 != null)
-                RenderManager.drawSvg(vg, icon2, x + width - xSpacing - iconSize, middleYIcon, iconSize, iconSize, color);
+                RenderManager.drawSvg(vg, icon2, x + width - xPadding - iconSize, middleYIcon, iconSize, iconSize, color);
         } else if (alignment == ALIGNMENT_LEFT) {
             contentWidth = xPadding;
             if (icon1 != null) {
@@ -126,22 +125,12 @@ public class BasicButton extends BasicElement {
         else if (toggleable) setColorPalette(ColorPalette.SECONDARY);
     }
 
-    /*@Override
-    public void update(int x, int y) {
-        super.update(x, y);
-        if (hoverFx && !disabled) {
-            if (!toggleable) {
-                currentColor = ColorUtils.getColor(currentColor, colorPalette, hovered, hovered && Mouse.isButtonDown(0));
-            } else {
-                if (toggled)
-                    currentColor = ColorUtils.smoothColor(currentColor, OneConfigConfig.GRAY_500, OneConfigConfig.PRIMARY_600, true, 30f);
-                else
-                    currentColor = ColorUtils.getColor(currentColor, colorPalette, hovered, hovered && Mouse.isButtonDown(0));
-            }
-        } else if (hoverFx) {
-            currentColor = colorPalette.getNormalColor();
-        }
-    }*/
+    @Override
+    public void setToggled(boolean toggled) {
+        this.toggled = toggled;
+        if (toggled && toggleable) setColorPalette(ColorPalette.PRIMARY);
+        else if (toggleable) setColorPalette(ColorPalette.SECONDARY);
+    }
 
     public void setToggleable(boolean state) {
         this.toggleable = state;
@@ -166,4 +155,12 @@ public class BasicButton extends BasicElement {
     public void setText(String text) {
         this.text = text;
     }
+
+    public void setLeftIcon(SVGs icon) {
+        icon1 = icon;
+    }
+
+    public void setRightIcon(SVGs icon) {
+        icon2 = icon;
+    }
 }
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
index 3ff61a1..84ac43c 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
@@ -40,6 +40,7 @@ public class BasicElement {
 
 
     public void draw(long vg, int x, int y) {
+        this.update(x, y);
     }
 
     public void update(int x, int y) {
@@ -103,6 +104,10 @@ public class BasicElement {
         return hovered;
     }
 
+    public boolean isPressed() {
+        return pressed;
+    }
+
     public boolean isClicked() {
         return clicked;
     }
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
index e67c8ef..0a48db2 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
@@ -12,10 +12,9 @@ import cc.polyfrost.oneconfig.lwjgl.image.Images;
 import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
 import cc.polyfrost.oneconfig.lwjgl.scissor.Scissor;
 import cc.polyfrost.oneconfig.lwjgl.scissor.ScissorManager;
-import cc.polyfrost.oneconfig.utils.color.ColorPalette;
 import cc.polyfrost.oneconfig.utils.InputUtils;
-import cc.polyfrost.oneconfig.utils.MathUtils;
 import cc.polyfrost.oneconfig.utils.NetworkUtils;
+import cc.polyfrost.oneconfig.utils.color.ColorPalette;
 import org.lwjgl.input.Mouse;
 
 import java.awt.*;
@@ -58,9 +57,9 @@ public class ColorSelector {
 
     public ColorSelector(OneColor color, int mouseX, int mouseY) {
         this.color = color;
-        buttons.add(new BasicElement(124, 28, ColorPalette.SECONDARY, true, 10f));
-        buttons.add(new BasicElement(124, 28, ColorPalette.SECONDARY, true, 10f));
-        buttons.add(new BasicElement(124, 28, ColorPalette.SECONDARY, true, 10f));
+        buttons.add(new BasicButton(124, 28, "HSB Box", BasicButton.ALIGNMENT_CENTER, ColorPalette.TERTIARY));
+        buttons.add(new BasicButton(124, 28, "Color Wheel", BasicButton.ALIGNMENT_CENTER, ColorPalette.TERTIARY));
+        buttons.add(new BasicButton(124, 28, "Chroma", BasicButton.ALIGNMENT_CENTER, ColorPalette.TERTIARY));
         hueInput.setCurrentValue(color.getHue());
         saturationInput.setCurrentValue(color.getSaturation());
         brightnessInput.setCurrentValue(color.getBrightness());
@@ -112,7 +111,7 @@ public class ColorSelector {
         RenderManager.setAlpha(vg, 1f);
 
         // hex parser
-        if(hexInput.isToggled()) {
+        if (hexInput.isToggled()) {
             parseHex();
         }
 
@@ -126,6 +125,11 @@ public class ColorSelector {
             recentColors.get(i).draw(vg, x + 104 + i * 44, y + 720);
         }
 
+        RenderManager.drawRoundedRect(vg, x + 16, y + 64, 384, 32, OneConfigConfig.GRAY_500, 12f);
+        if (!barMoveAnimation.isFinished())
+            RenderManager.drawRoundedRect(vg, x + barMoveAnimation.get() - (barSizeAnimation.get() - 124) / 2, y + 66, barSizeAnimation.get(0), 28, OneConfigConfig.PRIMARY_600, 10f);
+        else buttons.get(mode).setColorPalette(ColorPalette.PRIMARY);
+
         int i = 18;
         for (BasicElement button : buttons) {
             button.draw(vg, x + i, y + 66);
@@ -133,21 +137,15 @@ public class ColorSelector {
                 prevMode = mode;
                 mode = buttons.indexOf(button);
                 setXYFromColor();
-                barMoveAnimation = new EaseInOutQuart(200, 18 + prevMode * 128, 18 + mode * 128, false);
-                barSizeAnimation = new EaseInQuartReversed(200, 124, 186, false);
-                moveAnimation = new EaseInOutQuad(200, 0, 1, false);
+                barMoveAnimation = new EaseInOutQuart(300, 18 + prevMode * 128, 18 + mode * 128, false);
+                barSizeAnimation = new EaseInQuartReversed(300, 124, 186, false);
+                moveAnimation = new EaseInOutQuad(300, 0, 1, false);
+                for (BasicElement button1 : buttons) button1.setColorPalette(ColorPalette.TERTIARY);
             }
             i += 128;
         }
         float percentMoveMain = moveAnimation.get();
 
-        RenderManager.drawRoundedRect(vg, x + 16, y + 64, 384, 32, OneConfigConfig.GRAY_500, 12f);
-        RenderManager.drawRoundedRect(vg, x + barMoveAnimation.get(), y + 66, barSizeAnimation.get(), 28, OneConfigConfig.PRIMARY_600, 10f);
-
-        RenderManager.drawText(vg, "HSB Box", x + 55, y + 81, OneConfigConfig.WHITE, 12f, Fonts.MEDIUM);
-        RenderManager.drawText(vg, "Color Wheel", x + 172.5f, y + 81, OneConfigConfig.WHITE, 12f, Fonts.MEDIUM);
-        RenderManager.drawText(vg, "Chroma", x + 313, y + 81, OneConfigConfig.WHITE, 12f, Fonts.MEDIUM);
-
         RenderManager.drawText(vg, "Saturation", x + 224, y + 560, OneConfigConfig.WHITE_80, 12f, Fonts.MEDIUM);
         saturationInput.draw(vg, x + 312, y + 544);
         RenderManager.drawText(vg, "Brightness", x + 16, y + 599, OneConfigConfig.WHITE_80, 12f, Fonts.MEDIUM);
@@ -159,7 +157,7 @@ public class ColorSelector {
 
         copyBtn.draw(vg, x + 204, y + 624);
         pasteBtn.draw(vg, x + 244, y + 624);
-        if(mode != 2) {
+        if (mode != 2) {
             RenderManager.drawText(vg, "Hue", x + 16, y + 560, OneConfigConfig.WHITE_80, 12f, Fonts.MEDIUM);
             hueInput.draw(vg, x + 104, y + 544);
         } else {
@@ -180,7 +178,7 @@ public class ColorSelector {
         RenderManager.drawRoundImage(vg, Images.ALPHA_GRID, x + 16, y + 456, 384, 16, 8f);
         bottomSlider.draw(vg, x + 16, y + 456);
 
-        if(percentMoveMain > 0.96f) {
+        if (percentMoveMain > 0.96f) {
             RenderManager.drawRoundedRect(vg, mouseX - 7, mouseY - 7, 14, 14, OneConfigConfig.WHITE, 14f);
             RenderManager.drawRoundedRect(vg, mouseX - 6, mouseY - 6, 12, 12, OneConfigConfig.BLACK, 12f);
             RenderManager.drawRoundedRect(vg, mouseX - 5, mouseY - 5, 10, 10, color.getRGBMax(true), 10f);
@@ -207,7 +205,7 @@ public class ColorSelector {
             default:
             case 0:
             case 2:
-                //buttons.get(mode).currentColor = OneConfigConfig.TRANSPARENT;
+                //buttons.get(mode).colorAnimation.setPalette(ColorPalette.TERTIARY);
                 topSlider.setImage(Images.HUE_GRADIENT);
                 RenderManager.drawHSBBox(vg, x + 16, y + 120, 384, 288, color.getRGBMax(true));
 
@@ -222,7 +220,7 @@ public class ColorSelector {
                 }
                 break;
             case 1:
-                //buttons.get(1).currentColor = OneConfigConfig.TRANSPARENT;
+                //buttons.get(1).colorAnimation.setPalette(ColorPalette.TERTIARY);
                 topSlider.setImage(null);
                 RenderManager.drawRoundImage(vg, Images.COLOR_WHEEL, x + 64, y + 120, 288, 288, 144f);
 
@@ -235,8 +233,8 @@ public class ColorSelector {
 
     private void doDrag() {
         if (InputUtils.isAreaHovered(x, y, 368, 64) && Mouse.isButtonDown(0) && !dragging) {
-            int dx = Mouse.getDX();
-            int dy = Mouse.getDY();
+            int dx = (int) (Mouse.getDX() / (OneConfigGui.INSTANCE == null ? 1 : OneConfigGui.INSTANCE.getScaleFactor()));
+            int dy = (int) (Mouse.getDY() / (OneConfigGui.INSTANCE == null ? 1 : OneConfigGui.INSTANCE.getScaleFactor()));
             x += dx;
             mouseX += dx;
             y -= dy;
@@ -263,9 +261,9 @@ public class ColorSelector {
                 float progressX = (mouseX - x - 16f) / 384f;
                 float progressY = Math.abs((mouseY - y - 120f) / 288f - 1f);
                 color.setHSBA((int) topSlider.getValue(), Math.round(progressX * 100), Math.round(progressY * 100), (int) bottomSlider.getValue());
-                if(mode == 2) {
+                if (mode == 2) {
                     if (!speedSlider.isDragging()) {
-                        if(!speedInput.isToggled()) {
+                        if (!speedInput.isToggled()) {
                             color.setChromaSpeed((int) Math.abs(speedSlider.getValue() - 31));
                             speedInput.setCurrentValue(color.getDataBit());
                         }
@@ -328,7 +326,7 @@ public class ColorSelector {
         } else if (OneConfigGui.INSTANCE.mouseDown) {
             saturationInput.setInput(String.format("%.01f", (float) color.getSaturation()));
             brightnessInput.setInput(String.format("%.01f", (float) color.getBrightness()));
-            if(!alphaInput.arrowsClicked()) {
+            if (!alphaInput.arrowsClicked()) {
                 alphaInput.setInput(String.format("%.01f", color.getAlpha() / 255f * 100f));
             }
             if (hexInput.isToggled()) return;
@@ -433,7 +431,7 @@ public class ColorSelector {
             RenderManager.drawHollowRoundRect(vg, x - 0.5f, y - 0.5f, width, height, new Color(204, 204, 204, 80).getRGB(), 8f, 1f);
             RenderManager.drawHollowRoundRect(vg, currentDragPoint - 1, y - 1, 18, 18, OneConfigConfig.WHITE, 9f, 1f);
             RenderManager.drawHollowRoundRect(vg, currentDragPoint, y, 16, 16, OneConfigConfig.BLACK, 8f, 1f);
-                RenderManager.drawRoundedRect(vg, currentDragPoint + 1.5f, y + 1.5f, 14, 14, color, 7f);
+            RenderManager.drawRoundedRect(vg, currentDragPoint + 1.5f, y + 1.5f, 14, 14, color, 7f);
         }
 
         public void setGradient(int start, int end) {
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java
index ad3e998..21d2004 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java
@@ -4,6 +4,7 @@ import cc.polyfrost.oneconfig.OneConfig;
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
 import cc.polyfrost.oneconfig.config.data.Mod;
 import cc.polyfrost.oneconfig.gui.OneConfigGui;
+import cc.polyfrost.oneconfig.gui.animations.ColorAnimation;
 import cc.polyfrost.oneconfig.gui.pages.ModConfigPage;
 import cc.polyfrost.oneconfig.libs.universal.wrappers.UPlayer;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
@@ -15,15 +16,16 @@ import cc.polyfrost.oneconfig.utils.InputUtils;
 import net.minecraftforge.client.ClientCommandHandler;
 import net.minecraftforge.fml.common.ModMetadata;
 import org.jetbrains.annotations.NotNull;
+import org.lwjgl.input.Mouse;
 
 import java.util.ArrayList;
 
 public class ModCard extends BasicElement {
     private final Mod modData;
-    private final BasicElement favoriteHitbox = new BasicElement(32, 32, ColorPalette.PRIMARY, true);
+    private final BasicButton favoriteButton = new BasicButton(32, 32, SVGs.HEART_OUTLINE, BasicButton.ALIGNMENT_CENTER, ColorPalette.TERTIARY);
     private boolean active, disabled, favorite;
-    private int colorGray = OneConfigConfig.GRAY_600;
-    private int colorPrimary = OneConfigConfig.PRIMARY_600;
+    private final ColorAnimation colorGray = new ColorAnimation(ColorPalette.SECONDARY);
+    private final ColorAnimation colorPrimary = new ColorAnimation(ColorPalette.PRIMARY);
     private boolean isHoveredMain = false;
 
     public ModCard(@NotNull Mod mod, boolean active, boolean disabled, boolean favorite) {
@@ -33,15 +35,18 @@ public class ModCard extends BasicElement {
         toggled = active;
         this.disabled = disabled;
         this.favorite = favorite;
-        favoriteHitbox.setToggled(favorite);
+        favoriteButton.setToggled(favorite);
         toggled = active;
     }
 
     @Override
     public void draw(long vg, int x, int y) {
+        super.update(x, y);
+        isHoveredMain = InputUtils.isAreaHovered(x, y, width, 87);
+        boolean isHoveredSecondary = InputUtils.isAreaHovered(x, y + 87, width - 32, 32) && !disabled;
         if (disabled) RenderManager.setAlpha(vg, 0.5f);
-        RenderManager.drawRoundedRectVaried(vg, x, y, width, 87, colorGray, 12f, 12f, 0f, 0f);
-        RenderManager.drawRoundedRectVaried(vg, x, y + 87, width, 32, colorPrimary, 0f, 0f, 12f, 12f);
+        RenderManager.drawRoundedRectVaried(vg, x, y, width, 87, colorGray.getColor(isHoveredMain, isHoveredMain && Mouse.isButtonDown(0)), 12f, 12f, 0f, 0f);
+        RenderManager.drawRoundedRectVaried(vg, x, y + 87, width, 32, colorPrimary.getColor(isHoveredSecondary, isHoveredSecondary && Mouse.isButtonDown(0)), 0f, 0f, 12f, 12f);
         RenderManager.drawLine(vg, x, y + 86, x + width, y + 86, 2, OneConfigConfig.GRAY_300);
         if (modData.modIcon != null) {
             if (modData.modIcon.toLowerCase().endsWith(".svg"))
@@ -50,29 +55,16 @@ public class ModCard extends BasicElement {
         } else {
             RenderManager.drawSvg(vg, SVGs.BOX, x + 98, y + 19, 48, 48);
         }
-        favoriteHitbox.update(x + 212, y + 87);
-        //favoriteHitbox.currentColor = ColorUtils.getColor(favoriteHitbox.currentColor, favoriteHitbox.colorPalette, favoriteHitbox.hovered, favoriteHitbox.clicked);
-        //RenderManager.drawRoundedRectVaried(vg, x + 212, y + 87, 32, 32, favoriteHitbox.currentColor, 0f, 0f, 12f, 0f);
-        favorite = favoriteHitbox.isToggled();
+        favoriteButton.draw(vg, x + 212, y + 87);
+        favorite = favoriteButton.isToggled();
         RenderManager.drawText(vg, modData.name, x + 12, y + 103, OneConfigConfig.WHITE, 14f, Fonts.MEDIUM);
-        if (favorite) {
-            RenderManager.drawSvg(vg, SVGs.HEART_FILL, x + 220, y + 95, 16, 16);
-        } else {
-            RenderManager.drawSvg(vg, SVGs.HEART_OUTLINE, x + 220, y + 95, 16, 16);
-        }
-        super.update(x, y);
-        isHoveredMain = InputUtils.isAreaHovered(x, y, width, 87);
-        boolean isHoveredSecondary = InputUtils.isAreaHovered(x, y + 87, width - 32, 32) && !disabled;
-        colorGray = ColorUtils.getColor(colorGray, ColorPalette.SECONDARY, isHoveredMain, clicked && isHoveredMain);
-        if (active && !disabled) {
-            colorPrimary = ColorUtils.getColor(colorPrimary, ColorPalette.PRIMARY, isHoveredSecondary, clicked && isHoveredSecondary);
-        } else {
-            colorPrimary = ColorUtils.getColor(colorPrimary, ColorPalette.SECONDARY, isHoveredSecondary, false);
-        }
+        if (favorite) favoriteButton.setLeftIcon(SVGs.HEART_FILL);
+        else favoriteButton.setLeftIcon(SVGs.HEART_OUTLINE);
+
         if (clicked && isHoveredMain) {
             if (!active) toggled = false;
         }
-        if (clicked && favoriteHitbox.hovered) toggled = false;
+        if (clicked && favoriteButton.hovered) toggled = false;
         if (clicked && !isHoveredSecondary && active) toggled = true;
         if (!active & disabled) toggled = false;
 
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java
index a3da96e..4b38dd6 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java
@@ -3,6 +3,7 @@ package cc.polyfrost.oneconfig.gui.elements.config;
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
 import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
 import cc.polyfrost.oneconfig.gui.animations.Animation;
+import cc.polyfrost.oneconfig.gui.animations.ColorAnimation;
 import cc.polyfrost.oneconfig.gui.animations.DummyAnimation;
 import cc.polyfrost.oneconfig.gui.animations.EaseInOutQuad;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
@@ -11,12 +12,13 @@ import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
 import cc.polyfrost.oneconfig.utils.InputUtils;
 import cc.polyfrost.oneconfig.utils.color.ColorPalette;
 import cc.polyfrost.oneconfig.utils.color.ColorUtils;
+import org.lwjgl.input.Mouse;
 
 import java.awt.*;
 import java.lang.reflect.Field;
 
 public class ConfigCheckbox extends BasicOption {
-    private int color;
+    private final ColorAnimation color = new ColorAnimation(ColorPalette.SECONDARY);
     private Animation animation;
 
     public ConfigCheckbox(Field field, Object parent, String name, int size) {
@@ -29,7 +31,7 @@ public class ConfigCheckbox extends BasicOption {
         boolean toggled = false;
         try {
             toggled = (boolean) get();
-            if (animation == null) animation = new DummyAnimation(toggled ? 0 : 1);
+            if (animation == null) animation = new DummyAnimation(toggled ? 1 : 0);
         } catch (IllegalAccessException ignored) {
         }
         boolean hover = InputUtils.isAreaHovered(x, y + 4, 24, 24);
@@ -45,20 +47,16 @@ public class ConfigCheckbox extends BasicOption {
                 e.printStackTrace();
             }
         }
-        color = ColorUtils.getColor(color, ColorPalette.SECONDARY, hover, false);
         float percentOn = animation.get();
-        if (percentOn != 1f) {
-            RenderManager.drawRoundedRect(vg, x, y + 4, 24, 24, color, 6f);
-            RenderManager.drawHollowRoundRect(vg, x, y + 4, 23.5f, 23.5f, OneConfigConfig.GRAY_300, 6f, 1f);        // the 0.5f is to make it look better ok
-        }
+
         RenderManager.drawText(vg, name, x + 32, y + 17, OneConfigConfig.WHITE_90, 14f, Fonts.MEDIUM);
-        if (percentOn != 0 && percentOn != 1f) {
-            RenderManager.drawRoundedRect(vg, x, y + 4, 24, 24, ColorUtils.setAlpha(OneConfigConfig.PRIMARY_500, (int) (percentOn * 255)), 6f);
-            RenderManager.drawSvg(vg, SVGs.CHECKBOX_TICK, x, y + 4, 24, 24, new Color(1f, 1f, 1f, percentOn).getRGB());
-        } else if (percentOn != 0) {
-            RenderManager.drawRoundedRect(vg, x, y + 4, 24, 24, OneConfigConfig.PRIMARY_500, 6f);
-            RenderManager.drawSvg(vg, SVGs.CHECKBOX_TICK, x, y + 4, 24, 24);
-        }
+
+        RenderManager.drawRoundedRect(vg, x, y + 4, 24, 24, color.getColor(hover, hover && Mouse.isButtonDown(0)), 6f);
+        RenderManager.drawHollowRoundRect(vg, x, y + 4, 23.5f, 23.5f, OneConfigConfig.GRAY_300, 6f, 1f);        // the 0.5f is to make it look better ok
+
+        RenderManager.drawRoundedRect(vg, x, y + 4, 24, 24, ColorUtils.setAlpha(OneConfigConfig.PRIMARY_500, (int) (percentOn * 255)), 6f);
+        RenderManager.drawSvg(vg, SVGs.CHECKBOX_TICK, x, y + 4, 24, 24, new Color(1f, 1f, 1f, percentOn).getRGB());
+
         if (toggled && hover)
             RenderManager.drawHollowRoundRect(vg, x - 1, y + 3, 24, 24, OneConfigConfig.PRIMARY_600, 6f, 2f);
         RenderManager.setAlpha(vg, 1f);
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java
index 51d3fec..84ba5fb 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java
@@ -2,6 +2,7 @@ package cc.polyfrost.oneconfig.gui.elements.config;
 
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
 import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
+import cc.polyfrost.oneconfig.gui.animations.ColorAnimation;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
 import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
@@ -16,7 +17,7 @@ import java.util.Arrays;
 
 public class ConfigDropdown extends BasicOption { // TODO: remove dividers and fix corners
     private final String[] options;
-    private int backgroundColor = OneConfigConfig.GRAY_500;
+    private final ColorAnimation backgroundColor = new ColorAnimation(ColorPalette.SECONDARY);
     private boolean opened = false;
 
     public ConfigDropdown(Field field, Object parent, String name, int size, String[] options) {
@@ -37,11 +38,11 @@ public class ConfigDropdown extends BasicOption { // TODO: remove dividers and f
                 (size == 1 && !InputUtils.isAreaHovered(x + 224, y + 40, 256, options.length * 32) ||
                         size == 2 && !InputUtils.isAreaHovered(x + 352, y + 40, 640, options.length * 32))) {
             opened = !opened;
+            backgroundColor.setPalette(opened ? ColorPalette.PRIMARY : ColorPalette.SECONDARY);
             InputUtils.blockClicks(opened);
         }
         if (opened) return;
 
-        backgroundColor = ColorUtils.getColor(backgroundColor, ColorPalette.SECONDARY, hovered, false);
         int selected = 0;
         try {
             selected = (int) get();
@@ -50,12 +51,12 @@ public class ConfigDropdown extends BasicOption { // TODO: remove dividers and f
 
         if (hovered && Mouse.isButtonDown(0)) RenderManager.setAlpha(vg, 0.8f);
         if (size == 1) {
-            RenderManager.drawRoundedRect(vg, x + 224, y, 256, 32, backgroundColor, 12);
+            RenderManager.drawRoundedRect(vg, x + 224, y, 256, 32, backgroundColor.getColor(hovered, hovered && Mouse.isButtonDown(0)), 12);
             RenderManager.drawText(vg, options[selected], x + 236, y + 16, OneConfigConfig.WHITE_80, 14f, Fonts.MEDIUM);
             RenderManager.drawRoundedRect(vg, x + 452, y + 4, 24, 24, hovered ? OneConfigConfig.PRIMARY_500 : OneConfigConfig.PRIMARY_600, 8);
             RenderManager.drawSvg(vg, SVGs.DROPDOWN_LIST, x + 452, y + 4, 24, 24);
         } else {
-            RenderManager.drawRoundedRect(vg, x + 352, y, 640, 32, backgroundColor, 12);
+            RenderManager.drawRoundedRect(vg, x + 352, y, 640, 32, backgroundColor.getColor(hovered, hovered && Mouse.isButtonDown(0)), 12);
             RenderManager.drawText(vg, options[selected], x + 364, y + 16, OneConfigConfig.WHITE_80, 14f, Fonts.MEDIUM);
             RenderManager.drawRoundedRect(vg, x + 964, y + 4, 24, 24, hovered ? OneConfigConfig.PRIMARY_500 : OneConfigConfig.PRIMARY_600, 8);
             RenderManager.drawSvg(vg, SVGs.DROPDOWN_LIST, x + 964, y + 4, 24, 24);
@@ -71,7 +72,6 @@ public class ConfigDropdown extends BasicOption { // TODO: remove dividers and f
         if (size == 1) hovered = InputUtils.isAreaHovered(x + 224, y, 256, 32);
         else hovered = InputUtils.isAreaHovered(x + 352, y, 640, 32);
 
-        backgroundColor = ColorUtils.smoothColor(backgroundColor, OneConfigConfig.PRIMARY_800, OneConfigConfig.PRIMARY_700, hovered, 100);
         int selected = 0;
         try {
             selected = (int) get();
@@ -80,7 +80,7 @@ public class ConfigDropdown extends BasicOption { // TODO: remove dividers and f
 
         if (hovered && Mouse.isButtonDown(0)) RenderManager.setAlpha(vg, 0.8f);
         if (size == 1) {
-            RenderManager.drawRoundedRect(vg, x + 224, y, 256, 32, backgroundColor, 12);
+            RenderManager.drawRoundedRect(vg, x + 224, y, 256, 32, backgroundColor.getColor(hovered, hovered && Mouse.isButtonDown(0)), 12);
             RenderManager.drawText(vg, options[selected], x + 236, y + 16, OneConfigConfig.WHITE_80, 14f, Fonts.MEDIUM);
             if (hovered && Mouse.isButtonDown(0)) RenderManager.setAlpha(vg, 0.8f);
             RenderManager.drawRoundedRect(vg, x + 452, y + 4, 24, 24, hovered ? OneConfigConfig.PRIMARY_500 : OneConfigConfig.PRIMARY_600, 8);
@@ -105,6 +105,7 @@ public class ConfigDropdown extends BasicOption { // TODO: remove dividers and f
                     } catch (IllegalAccessException ignored) {
                     }
                     opened = false;
+                    backgroundColor.setPalette(ColorPalette.SECONDARY);
                     InputUtils.blockClicks(false);
                 }
 
@@ -112,7 +113,7 @@ public class ConfigDropdown extends BasicOption { // TODO: remove dividers and f
                 optionY += 32;
             }
         } else {
-            RenderManager.drawRoundedRect(vg, x + 352, y, 640, 32, backgroundColor, 12);
+            RenderManager.drawRoundedRect(vg, x + 352, y, 640, 32, backgroundColor.getColor(hovered, hovered && Mouse.isButtonDown(0)), 12);
             RenderManager.drawText(vg, options[selected], x + 364, y + 16, OneConfigConfig.WHITE_80, 14f, Fonts.MEDIUM);
             if (hovered && Mouse.isButtonDown(0)) RenderManager.setAlpha(vg, 0.8f);
             RenderManager.drawRoundedRect(vg, x + 964, y + 4, 24, 24, hovered ? OneConfigConfig.PRIMARY_500 : OneConfigConfig.PRIMARY_600, 8);
@@ -140,6 +141,7 @@ public class ConfigDropdown extends BasicOption { // TODO: remove dividers and f
                     } catch (IllegalAccessException ignored) {
                     }
                     opened = false;
+                    backgroundColor.setPalette(ColorPalette.SECONDARY);
                     InputUtils.blockClicks(false);
                 }
                 optionY += 32;
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDualOption.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDualOption.java
index 7754912..1331f3f 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDualOption.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDualOption.java
@@ -43,7 +43,7 @@ public class ConfigDualOption extends BasicOption {
         boolean hoveredRight = InputUtils.isAreaHovered(x + 354, y, 128, 32) && isEnabled();
         RenderManager.drawText(vg, name, x, y + 16, OneConfigConfig.WHITE_90, 14f, Fonts.MEDIUM);
         RenderManager.drawRoundedRect(vg, x + 226, y, 256, 32, OneConfigConfig.GRAY_600, 12f);
-        RenderManager.drawRoundedRect(vg, x + posAnimation.get(), y + 2, sizeAnimation.get(), 28, OneConfigConfig.PRIMARY_600, 10f);
+        RenderManager.drawRoundedRect(vg, x + posAnimation.get() - (sizeAnimation.get() - 124) / 2f, y + 2, sizeAnimation.get(0), 28, OneConfigConfig.PRIMARY_600, 10f);
         if (!hoveredLeft && isEnabled()) RenderManager.setAlpha(vg, 0.8f);
         RenderManager.drawText(vg, left, x + 290 - RenderManager.getTextWidth(vg, left, 12f, Fonts.MEDIUM) / 2, y + 17, OneConfigConfig.WHITE, 12f, Fonts.MEDIUM);
         if (isEnabled()) RenderManager.setAlpha(vg, 1f);
@@ -53,8 +53,8 @@ public class ConfigDualOption extends BasicOption {
         RenderManager.setAlpha(vg, 1);
         if ((hoveredLeft && toggled || hoveredRight && !toggled) && InputUtils.isClicked()) {
             toggled = !toggled;
-            posAnimation = new EaseInOutQuart(200, 228, 356, !toggled);
-            sizeAnimation = new EaseInQuartReversed(200, 124, 186, false);
+            posAnimation = new EaseInOutQuart(300, 228, 356, !toggled);
+            sizeAnimation = new EaseInQuartReversed(300, 124, 186, false);
             try {
                 set(toggled);
             } catch (IllegalAccessException e) {
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java
index a68370a..ed1f0e0 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java
@@ -4,6 +4,7 @@ import cc.polyfrost.oneconfig.config.OneConfigConfig;
 import cc.polyfrost.oneconfig.config.data.OptionPage;
 import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
 import cc.polyfrost.oneconfig.gui.OneConfigGui;
+import cc.polyfrost.oneconfig.gui.animations.ColorAnimation;
 import cc.polyfrost.oneconfig.gui.pages.ModConfigPage;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
@@ -18,7 +19,7 @@ import java.lang.reflect.Field;
 public class ConfigPageButton extends BasicOption {
     public final OptionPage page;
     public final String description;
-    private int backgroundColor = OneConfigConfig.GRAY_500;
+    private ColorAnimation backgroundColor = new ColorAnimation(ColorPalette.SECONDARY);
 
     public ConfigPageButton(Field field, Object parent, String name, String description, OptionPage page) {
         super(field, parent, name, 2);
@@ -31,12 +32,10 @@ public class ConfigPageButton extends BasicOption {
         int height = description.equals("") ? 64 : 96;
         boolean hovered = InputUtils.isAreaHovered(x - 2, y, 1024, height) && isEnabled();
         boolean clicked = hovered && InputUtils.isClicked();
-        backgroundColor = ColorUtils.getColor(backgroundColor, ColorPalette.SECONDARY, hovered, false);
 
-        if (hovered && Mouse.isButtonDown(0)) RenderManager.setAlpha(vg, 0.8f);
         if (!isEnabled()) RenderManager.setAlpha(vg, 0.5f);
 
-        RenderManager.drawRoundedRect(vg, x - 16, y, 1024, height, backgroundColor, 20);
+        RenderManager.drawRoundedRect(vg, x - 16, y, 1024, height, backgroundColor.getColor(hovered, hovered && Mouse.isButtonDown(0)), 20);
         RenderManager.drawText(vg, name, x + 10, y + 32, OneConfigConfig.WHITE_90, 24, Fonts.MEDIUM);
         if (!description.equals(""))
             RenderManager.drawText(vg, name, x + 10, y + 70, OneConfigConfig.WHITE_90, 14, Fonts.MEDIUM);
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java
index 91271e2..cb54f9b 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java
@@ -3,6 +3,7 @@ package cc.polyfrost.oneconfig.gui.elements.config;
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
 import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
 import cc.polyfrost.oneconfig.gui.animations.Animation;
+import cc.polyfrost.oneconfig.gui.animations.ColorAnimation;
 import cc.polyfrost.oneconfig.gui.animations.DummyAnimation;
 import cc.polyfrost.oneconfig.gui.animations.EaseInOutQuad;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
@@ -11,12 +12,12 @@ import cc.polyfrost.oneconfig.utils.color.ColorPalette;
 import cc.polyfrost.oneconfig.utils.color.ColorUtils;
 import cc.polyfrost.oneconfig.utils.InputUtils;
 import cc.polyfrost.oneconfig.utils.MathUtils;
+import org.lwjgl.input.Mouse;
 
 import java.lang.reflect.Field;
 
 public class ConfigSwitch extends BasicOption {
-    private int colorEnabled;
-    private int colorDisabled;
+    private ColorAnimation color;
     private Animation animation;
 
     public ConfigSwitch(Field field, Object parent, String name, int size) {
@@ -28,24 +29,24 @@ public class ConfigSwitch extends BasicOption {
         boolean toggled = false;
         try {
             toggled = (boolean) get();
-            if (animation == null) animation = new DummyAnimation(toggled ? 0 : 1);
+            if (animation == null) {
+                animation = new DummyAnimation(toggled ? 1 : 0);
+                color = new ColorAnimation(toggled ? ColorPalette.PRIMARY : ColorPalette.SECONDARY);
+            }
         } catch (IllegalAccessException ignored) {
         }
         float percentOn = animation.get();
         int x2 = x + 3 + (int) (percentOn * 18);
         boolean hovered = InputUtils.isAreaHovered(x, y, 42, 32);
-        colorDisabled = ColorUtils.getColor(colorDisabled, ColorPalette.SECONDARY, hovered, false);
-        colorEnabled = ColorUtils.smoothColor(colorEnabled, OneConfigConfig.PRIMARY_600, OneConfigConfig.PRIMARY_500, hovered, 40f);
         if (!isEnabled()) RenderManager.setAlpha(vg, 0.5f);
-        RenderManager.drawRoundedRect(vg, x, y + 4, 42, 24, colorDisabled, 12f);
-        if (percentOn != 0)
-            RenderManager.drawRoundedRect(vg, x, y + 4, 42, 24, ColorUtils.setAlpha(colorEnabled, (int) (255 * percentOn)), 12f);
+        RenderManager.drawRoundedRect(vg, x, y + 4, 42, 24, color.getColor(hovered, hovered && Mouse.isButtonDown(0)), 12f);
         RenderManager.drawRoundedRect(vg, x2, y + 7, 18, 18, OneConfigConfig.WHITE, 9f);
         RenderManager.drawText(vg, name, x + 50, y + 17, OneConfigConfig.WHITE, 14f, Fonts.MEDIUM);
 
         if (InputUtils.isAreaClicked(x, y, 42, 32) && isEnabled()) {
             toggled = !toggled;
             animation = new EaseInOutQuad(200, 0, 1, !toggled);
+            color.setPalette(toggled ? ColorPalette.PRIMARY : ColorPalette.SECONDARY);
             try {
                 set(toggled);
             } catch (IllegalAccessException e) {
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/NumberInputField.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/NumberInputField.java
index bdf3dfa..69b1584 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/NumberInputField.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/NumberInputField.java
@@ -1,6 +1,7 @@
 package cc.polyfrost.oneconfig.gui.elements.text;
 
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.gui.animations.ColorAnimation;
 import cc.polyfrost.oneconfig.gui.elements.BasicElement;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
@@ -13,7 +14,8 @@ public class NumberInputField extends TextInputField {
     private float min;
     private float max;
     private float step;
-    private int colorTop, colorBottom;
+    private final ColorAnimation colorTop = new ColorAnimation(ColorPalette.SECONDARY);
+    private final ColorAnimation colorBottom  = new ColorAnimation(ColorPalette.SECONDARY);
     private float current;
 
     public NumberInputField(int width, int height, float defaultValue, float min, float max, float step) {
@@ -45,11 +47,7 @@ public class NumberInputField extends TextInputField {
             upArrow.disable(false);
             downArrow.disable(false);
         }
-        if (current == max) colorTop = OneConfigConfig.GRAY_500_80;
-        if (current == min) colorBottom = OneConfigConfig.GRAY_500_80;
 
-        colorTop = ColorUtils.getColor(colorTop, ColorPalette.SECONDARY, upArrow.isHovered(), upArrow.isClicked());
-        colorBottom = ColorUtils.getColor(colorBottom, ColorPalette.SECONDARY, downArrow.isHovered(), downArrow.isClicked());
         if (upArrow.isClicked()) {
             current += step;
             if (current > max) current = max;
@@ -64,7 +62,7 @@ public class NumberInputField extends TextInputField {
             RenderManager.setAlpha(vg, 0.3f);
             upArrow.disable(true);
         }
-        RenderManager.drawRoundedRectVaried(vg, x + width + 4, y, 12, 14, colorTop, 6f, 6f, 0f, 0f);
+        RenderManager.drawRoundedRectVaried(vg, x + width + 4, y, 12, 14, colorTop.getColor(upArrow.isHovered(), upArrow.isPressed()), 6f, 6f, 0f, 0f);
         RenderManager.drawSvg(vg, SVGs.CHEVRON_UP, x + width + 5, y + 2, 10, 10);
         if (current >= max && !disabled) RenderManager.setAlpha(vg, 1f);
 
@@ -72,7 +70,7 @@ public class NumberInputField extends TextInputField {
             RenderManager.setAlpha(vg, 0.3f);
             downArrow.disable(true);
         }
-        RenderManager.drawRoundedRectVaried(vg, x + width + 4, y + 14, 12, 14, colorBottom, 0f, 0f, 6f, 6f);
+        RenderManager.drawRoundedRectVaried(vg, x + width + 4, y + 14, 12, 14, colorBottom.getColor(downArrow.isHovered(), downArrow.isPressed()), 0f, 0f, 6f, 6f);
         RenderManager.drawSvg(vg, SVGs.CHEVRON_DOWN, x + width + 5, y + 15, 10, 10);
         RenderManager.setAlpha(vg, 1f);
 
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModsPage.java b/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModsPage.java
index 6df01e1..2866008 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModsPage.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModsPage.java
@@ -32,14 +32,12 @@ public class ModsPage extends Page {
         modCategories.add(new BasicButton(80, 32, "Hypixel", BasicButton.ALIGNMENT_CENTER, ColorPalette.SECONDARY));
         modCategories.add(new BasicButton(80, 32, "Skyblock", BasicButton.ALIGNMENT_CENTER, ColorPalette.SECONDARY));
         modCategories.add(new BasicButton(88, 32, "3rd Party", BasicButton.ALIGNMENT_CENTER, ColorPalette.SECONDARY));
-        modCategories.get(0).setToggled(true);
-        int i = 0;
-        for (BasicButton button : modCategories) {
-            button.setToggleable(true);
+        for (int i = 0; i < modCategories.size(); i++) {
+            modCategories.get(i).setToggleable(true);
             int finalI = i;
-            button.setClickAction(() -> unselect(finalI));
-            i++;
+            modCategories.get(i).setClickAction(() -> unselect(finalI));
         }
+        modCategories.get(0).setToggled(true);
     }
 
     public void draw(long vg, int x, int y) {
diff --git a/src/main/java/cc/polyfrost/oneconfig/utils/color/ColorUtils.java b/src/main/java/cc/polyfrost/oneconfig/utils/color/ColorUtils.java
index a419766..ebf0100 100644
--- a/src/main/java/cc/polyfrost/oneconfig/utils/color/ColorUtils.java
+++ b/src/main/java/cc/polyfrost/oneconfig/utils/color/ColorUtils.java
@@ -1,64 +1,9 @@
 package cc.polyfrost.oneconfig.utils.color;
 
-import cc.polyfrost.oneconfig.utils.MathUtils;
-
 /**
  * A class to help with color manipulation.
  */
 public final class ColorUtils {
-
-    public static int getColor(int currentColor, ColorPalette colorPalette, boolean hover, boolean click) {
-        float[] color = splitColor(currentColor);
-        if (click) {
-            return colorPalette.getPressedColor();
-        }
-
-        return getColorComponents(color, colorPalette.getNormalColorf(), colorPalette.getHoveredColorf(), hover, 20f);
-    }
-
-    /**
-     * Smooths the transition of a color between two colors.
-     *
-     * @param currentColor the current color (also the one you want to change)
-     * @param direction    false to move towards initColor, true to move towards finalColor
-     * @param speed        speed of the transition
-     */
-    public static int smoothColor(int currentColor, int initColor, int finalColor, boolean direction, float speed) {
-        float[] init = splitColor(initColor);
-        float[] finalC = splitColor(finalColor);
-        float[] current = splitColor(currentColor);
-        return getColorComponents(current, init, finalC, direction, speed);
-    }
-
-    private static float[] splitColor(int color) {
-        return new float[]{getRed(color) / 255f, getGreen(color) / 255f, getBlue(color) / 255f, getAlpha(color) / 255f};
-    }
-
-    private static int getColorComponents(float[] currentColor, float[] initColor, float[] finalColor, boolean hover, float speed) {
-        currentColor[0] = smooth(currentColor[0], initColor[0], finalColor[0], hover, speed);
-        currentColor[1] = smooth(currentColor[1], initColor[1], finalColor[1], hover, speed);
-        currentColor[2] = smooth(currentColor[2], initColor[2], finalColor[2], hover, speed);
-        currentColor[3] = smooth(currentColor[3], initColor[3], finalColor[3], hover, speed);
-
-        return ((int) (currentColor[3] * 255) << 24) |
-                ((int) (currentColor[0] * 255) << 16) |
-                ((int) (currentColor[1] * 255) << 8) |
-                ((int) (currentColor[2] * 255));
-
-    }
-
-    private static float smooth(float current, float min, float max, boolean moveToFinal, float speed) {
-        current = MathUtils.easeOut(current, moveToFinal ? max : min, speed);
-        if (current < min) {
-            current = min;
-        }
-
-        if (current > max) {
-            current = max;
-        }
-        return current;
-    }
-
     /**
      * Get the red component of an RGB color.
      *