new: small gui changes (#132)

* remove background from HUD and close buttons

* Gui improvements (#126)

* Fix drop shadow

* Add credit to the best team member in polyfrost :>

* Removed some unused buttons & improved line spacing

* new logo

* new arrows

* Added new animations & tweaked timings

* Update new page animation, and sidebar animations

* Update EaseOutBump.java

* apiDump

Co-authored-by: Wyvest <45589059+Wyvest@users.noreply.github.com>
Co-authored-by: CaledonianEH <62163840+CaledonianEH@users.noreply.github.com>

18 files changed, 155 insertions, 140 deletions

diff --git a/api/OneConfig.api b/api/OneConfig.api
index 3e5688f..721769a 100644
--- a/api/OneConfig.api
+++ b/api/OneConfig.api
@@ -609,6 +609,16 @@ public class cc/polyfrost/oneconfig/gui/animations/EaseInOutQuart : cc/polyfrost
 	protected fun animate (F)F
 }
 
+public class cc/polyfrost/oneconfig/gui/animations/EaseOutBump : cc/polyfrost/oneconfig/gui/animations/Animation {
+	public fun <init> (IFFZ)V
+	protected fun animate (F)F
+}
+
+public class cc/polyfrost/oneconfig/gui/animations/EaseOutExpo : cc/polyfrost/oneconfig/gui/animations/Animation {
+	public fun <init> (IFFZ)V
+	protected fun animate (F)F
+}
+
 public class cc/polyfrost/oneconfig/gui/animations/EaseOutQuad : cc/polyfrost/oneconfig/gui/animations/Animation {
 	public fun <init> (IFFZ)V
 	protected fun animate (F)F
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/OneConfigGui.java b/src/main/java/cc/polyfrost/oneconfig/gui/OneConfigGui.java
index db2ea8b..867fdbc 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/OneConfigGui.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/OneConfigGui.java
@@ -29,6 +29,7 @@ package cc.polyfrost.oneconfig.gui;
 import cc.polyfrost.oneconfig.config.core.OneColor;
 import cc.polyfrost.oneconfig.gui.animations.Animation;
 import cc.polyfrost.oneconfig.gui.animations.EaseInOutQuad;
+import cc.polyfrost.oneconfig.gui.animations.EaseOutExpo;
 import cc.polyfrost.oneconfig.gui.elements.BasicElement;
 import cc.polyfrost.oneconfig.gui.elements.ColorSelector;
 import cc.polyfrost.oneconfig.gui.elements.text.TextInputField;
@@ -60,8 +61,8 @@ public class OneConfigGui extends OneUIScreen {
     private final TextInputField textInputField = new TextInputField(248, 40, "Search...", false, false, SVGs.MAGNIFYING_GLASS_BOLD);
     private final ArrayList<Page> previousPages = new ArrayList<>();
     private final ArrayList<Page> nextPages = new ArrayList<>();
-    private final BasicElement backArrow = new BasicElement(40, 40, new ColorPalette(Colors.GRAY_700, Colors.GRAY_500, Colors.GRAY_500_80), true);
-    private final BasicElement forwardArrow = new BasicElement(40, 40, new ColorPalette(Colors.GRAY_700, Colors.GRAY_500, Colors.GRAY_500_80), true);
+    private final BasicElement backArrow = new BasicElement(40, 40, ColorPalette.TERTIARY, true);
+    private final BasicElement forwardArrow = new BasicElement(40, 40, ColorPalette.TERTIARY, true);
     public ColorSelector currentColorSelector;
     public boolean allowClose = true;
     protected Page currentPage;
@@ -83,7 +84,6 @@ public class OneConfigGui extends OneUIScreen {
 
     @Override
     public void draw(long vg, float partialTicks, InputHandler inputHandler) {
-        long start = System.nanoTime();
         if (currentPage == null) {
             currentPage = new ModsPage();
             currentPage.parents.add(currentPage);
@@ -98,7 +98,7 @@ public class OneConfigGui extends OneUIScreen {
         RenderManager.scale(vg, scale, scale);
         inputHandler.scale(scale, scale);
 
-        RenderManager.drawDropShadow(vg, x, y, 1280, 800, 32, 0, 20);
+        RenderManager.drawDropShadow(vg, x, y, 1280, 800, 64, 0, 20);
         RenderManager.drawRoundedRect(vg, x + 224, y, 1056, 800, Colors.GRAY_800, 20f);
         RenderManager.drawRoundedRect(vg, x, y, 244, 800, Colors.GRAY_800_95, 20f);
         RenderManager.drawRect(vg, x + 224, y, 20, 800, Colors.GRAY_800);
@@ -107,14 +107,12 @@ public class OneConfigGui extends OneUIScreen {
         RenderManager.drawLine(vg, x + 224, y + 72, x + 1280, y + 72, 1, Colors.GRAY_700);
         RenderManager.drawLine(vg, x + 224, y, x + 222, y + 800, 1, Colors.GRAY_700);
 
-        RenderManager.drawSvg(vg, SVGs.ONECONFIG, x + 19, y + 19, 42, 42);
-        RenderManager.drawText(vg, "OneConfig", x + 69, y + 32, -1, 18f, Fonts.BOLD);        // added half line height to center text
-        RenderManager.drawText(vg, "By Polyfrost", x + 69, y + 51, -1, 12f, Fonts.REGULAR);
+        RenderManager.drawSvg(vg, SVGs.ONECONFIG_FULL_DARK, x + 33f, y + 22f, 158f, 34f);
 
         textInputField.draw(vg, x + 1020, y + 16, inputHandler);
         sideBar.draw(vg, x, y, inputHandler);
-        backArrow.draw(vg, x + 240, y + 16, inputHandler);
-        forwardArrow.draw(vg, x + 288, y + 16, inputHandler);
+        backArrow.update(x + 240, y + 16, inputHandler);
+        forwardArrow.update(x + 280, y + 16, inputHandler);
 
         if (previousPages.size() == 0) {
             backArrow.disable(true);
@@ -124,7 +122,7 @@ public class OneConfigGui extends OneUIScreen {
             if (!backArrow.isHovered() || Platform.getMousePlatform().isButtonDown(0))
                 RenderManager.setAlpha(vg, 0.8f);
         }
-        RenderManager.drawSvg(vg, SVGs.CARET_LEFT, x + 246, y + 22, 28, 28);
+        RenderManager.drawSvg(vg, SVGs.ARROW_LEFT, x + 250, y + 26, 20, 20, backArrow.currentColor);
         RenderManager.setAlpha(vg, 1f);
         if (nextPages.size() == 0) {
             forwardArrow.disable(true);
@@ -134,7 +132,7 @@ public class OneConfigGui extends OneUIScreen {
             if (!forwardArrow.isHovered() || Platform.getMousePlatform().isButtonDown(0))
                 RenderManager.setAlpha(vg, 0.8f);
         }
-        RenderManager.drawSvg(vg, SVGs.CARET_RIGHT, x + 294, y + 22, 28, 28);
+        RenderManager.drawSvg(vg, SVGs.ARROW_RIGHT, x + 290, y + 26, 20, 20, forwardArrow.currentColor);
         RenderManager.setAlpha(vg, 1f);
 
         if (backArrow.isClicked() && previousPages.size() > 0) {
@@ -147,7 +145,7 @@ public class OneConfigGui extends OneUIScreen {
         } else if (forwardArrow.isClicked() && nextPages.size() > 0) {
             try {
                 previousPages.add(0, currentPage);
-                openPage(nextPages.get(0), new EaseInOutQuad(300, 224, 2128, true), false);
+                openPage(nextPages.get(0), new EaseOutExpo(300, 224, 2128, true), false);
                 nextPages.remove(0);
             } catch (Exception ignored) {
             }
@@ -173,7 +171,7 @@ public class OneConfigGui extends OneUIScreen {
         ScissorManager.clearScissors(vg);
         inputHandler.stopBlock(blockedClicks);
 
-        float breadcrumbX = x + 352;
+        float breadcrumbX = x + 336;
         for (int i = 0; i < currentPage.parents.size(); i++) {
             String title = currentPage.parents.get(i).getTitle();
             float width = RenderManager.getTextWidth(vg, title, 24f, Fonts.SEMIBOLD);
@@ -188,9 +186,6 @@ public class OneConfigGui extends OneUIScreen {
             breadcrumbX += width + 32;
         }
 
-        long end = System.nanoTime() - start;
-        String s = (" draw: " + end / 1000000f + "ms");
-        RenderManager.drawText(vg, s, x + 1170, y + 792, Colors.GRAY_300, 10f, Fonts.MEDIUM);
         if (currentColorSelector != null) {
             currentColorSelector.draw(vg);
         }
@@ -215,7 +210,7 @@ public class OneConfigGui extends OneUIScreen {
     }
 
     public void openPage(@NotNull Page page, boolean addToPrevious) {
-        openPage(page, new EaseInOutQuad(300, 224, 2128, false), addToPrevious);
+        openPage(page, new EaseOutExpo(300, 224, 2128, false), addToPrevious);
     }
 
     public void openPage(@NotNull Page page, Animation animation, boolean addToPrevious) {
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java b/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
index bd0503c..cdcc571 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
@@ -29,6 +29,7 @@ package cc.polyfrost.oneconfig.gui;
 import cc.polyfrost.oneconfig.gui.animations.Animation;
 import cc.polyfrost.oneconfig.gui.animations.CubicBezier;
 import cc.polyfrost.oneconfig.gui.animations.DummyAnimation;
+import cc.polyfrost.oneconfig.gui.animations.EaseOutExpo;
 import cc.polyfrost.oneconfig.gui.elements.BasicButton;
 import cc.polyfrost.oneconfig.gui.pages.CreditsPage;
 import cc.polyfrost.oneconfig.gui.pages.ModConfigPage;
@@ -37,6 +38,9 @@ import cc.polyfrost.oneconfig.internal.assets.Colors;
 import cc.polyfrost.oneconfig.internal.assets.SVGs;
 import cc.polyfrost.oneconfig.internal.config.Preferences;
 import cc.polyfrost.oneconfig.internal.gui.HudGui;
+import cc.polyfrost.oneconfig.libs.universal.UMinecraft;
+import cc.polyfrost.oneconfig.libs.universal.wrappers.UPlayer;
+import cc.polyfrost.oneconfig.libs.universal.wrappers.message.UTextComponent;
 import cc.polyfrost.oneconfig.renderer.RenderManager;
 import cc.polyfrost.oneconfig.renderer.font.Fonts;
 import cc.polyfrost.oneconfig.utils.InputHandler;
@@ -50,29 +54,31 @@ import static cc.polyfrost.oneconfig.gui.elements.BasicButton.SIZE_36;
 
 public class SideBar {
     private final ArrayList<BasicButton> buttons = new ArrayList<BasicButton>() {{
-        add(new BasicButton(192, SIZE_36, "Credits", SVGs.COPYRIGHT_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
-        add(new BasicButton(192, SIZE_36, "Global Search", SVGs.MAGNIFYING_GLASS_BOLD, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
-        add(new BasicButton(192, SIZE_36, "Mods", SVGs.FADERS_HORIZONTAL_BOLD, null, ALIGNMENT_LEFT, ColorPalette.PRIMARY));
-        add(new BasicButton(192, SIZE_36, "Profiles", SVGs.USER_SWITCH_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
-        add(new BasicButton(192, SIZE_36, "Performance", SVGs.GAUGE_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
-        add(new BasicButton(192, SIZE_36, "Updates", SVGs.ARROWS_CLOCKWISE_BOLD, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
-        add(new BasicButton(192, SIZE_36, "Themes", SVGs.PAINT_BRUSH_BROAD_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
-        add(new BasicButton(192, SIZE_36, "Screenshots", SVGs.APERTURE_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
-        add(new BasicButton(192, SIZE_36, "Preferences", SVGs.GEAR_SIX_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
+        int width = 192;
+        add(new BasicButton(width, SIZE_36, "Credits", SVGs.COPYRIGHT_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
+
+        add(new BasicButton(width, SIZE_36, "Mods", SVGs.FADERS_HORIZONTAL_BOLD, null, ALIGNMENT_LEFT, ColorPalette.PRIMARY));
+        add(new BasicButton(width, SIZE_36, "Profiles", SVGs.USER_SWITCH_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
+        add(new BasicButton(width, SIZE_36, "Performance", SVGs.GAUGE_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
+
+        add(new BasicButton(width, SIZE_36, "Themes", SVGs.PAINT_BRUSH_BROAD_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
+        add(new BasicButton(width, SIZE_36, "Screenshots", SVGs.APERTURE_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
+        add(new BasicButton(width, SIZE_36, "Preferences", SVGs.GEAR_SIX_FILL, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY));
     }};
-    private final BasicButton HUDButton = new BasicButton(192, SIZE_36, "Edit HUD", SVGs.NOTE_PENCIL_BOLD, null, ALIGNMENT_LEFT, ColorPalette.SECONDARY);
-    private final BasicButton CloseButton = new BasicButton(192, SIZE_36, "Close", SVGs.X_CIRCLE_BOLD, null, ALIGNMENT_LEFT, ColorPalette.SECONDARY_DESTRUCTIVE);
+    private final BasicButton hudButton = new BasicButton(192, SIZE_36, "Edit HUD", SVGs.NOTE_PENCIL_BOLD, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY);
+    private final BasicButton closeButton = new BasicButton(192, SIZE_36, "Close", SVGs.X_CIRCLE_BOLD, null, ALIGNMENT_LEFT, ColorPalette.TERTIARY_DESTRUCTIVE);
     private int selected = 2;
     private Animation moveAnimation = null;
     private Animation sizeAnimation = null;
     private int y;
+    private int sidebarY;
 
     public SideBar() {
         buttons.get(0).setClickAction(new CreditsPage());
-        buttons.get(2).setClickAction(new ModsPage());
-        buttons.get(8).setClickAction(new ModConfigPage(Preferences.getInstance().mod.defaultPage, true));
-        HUDButton.setClickAction(() -> GuiUtils.displayScreen(new HudGui()));
-        CloseButton.setClickAction(GuiUtils::closeScreen);
+        buttons.get(1).setClickAction(new ModsPage());
+        buttons.get(6).setClickAction(new ModConfigPage(Preferences.getInstance().mod.defaultPage, true));
+        hudButton.setClickAction(() -> GuiUtils.displayScreen(new HudGui()));
+        closeButton.setClickAction(GuiUtils::closeScreen);
         for (BasicButton button : buttons) {
             if (button.hasClickAction()) continue;
             button.disable(true);
@@ -95,19 +101,24 @@ public class SideBar {
             }
         }
 
-        buttons.get(0).draw(vg, x + 16, y + 80, inputHandler);
-        buttons.get(1).draw(vg, x + 16, y + 116, inputHandler);
-        RenderManager.drawText(vg, "MOD CONFIG", x + 16, y + 178, Colors.WHITE, 12, Fonts.SEMIBOLD);
-        buttons.get(2).draw(vg, x + 16, y + 192, inputHandler);
-        buttons.get(3).draw(vg, x + 16, y + 228, inputHandler);
-        buttons.get(4).draw(vg, x + 16, y + 264, inputHandler);
-        buttons.get(5).draw(vg, x + 16, y + 300, inputHandler);
-        RenderManager.drawText(vg, "PERSONALIZATION", x + 16, y + 362, Colors.WHITE, 12, Fonts.SEMIBOLD);
-        buttons.get(6).draw(vg, x + 16, y + 376, inputHandler);
-        buttons.get(7).draw(vg, x + 16, y + 412, inputHandler);
-        buttons.get(8).draw(vg, x + 16, y + 448, inputHandler);
-        HUDButton.draw(vg, x + 16, y + 704, inputHandler);
-        CloseButton.draw(vg, x + 16, y + 748, inputHandler);
+        sidebarY = y + 44;
+        buttons.get(0).draw(vg, x + 16, calcAndIncrementLn(sidebarY), inputHandler);
+//        buttons.get(1).draw(vg, x + 16, y + 116, inputHandler);
+        RenderManager.drawText(vg, "MOD CONFIG", x + 16, calcAndIncrementLn(sidebarY + 26), Colors.WHITE_50, 12, Fonts.SEMIBOLD);
+        sidebarY = sidebarY - 26;
+        buttons.get(1).draw(vg, x + 16, calcAndIncrementLn(sidebarY), inputHandler);
+        buttons.get(2).draw(vg, x + 16, calcAndIncrementLn(sidebarY), inputHandler);
+        buttons.get(3).draw(vg, x + 16, calcAndIncrementLn(sidebarY), inputHandler);
+//        buttons.get(5).draw(vg, x + 16, listNewLn(sidebarY), inputHandler);
+        RenderManager.drawText(vg, "PERSONALIZATION", x + 16, calcAndIncrementLn(sidebarY + 26), Colors.WHITE_50, 12, Fonts.SEMIBOLD);
+        sidebarY = sidebarY - 26;
+        buttons.get(4).draw(vg, x + 16, calcAndIncrementLn(sidebarY), inputHandler);
+        buttons.get(5).draw(vg, x + 16, calcAndIncrementLn(sidebarY), inputHandler);
+        buttons.get(6).draw(vg, x + 16, calcAndIncrementLn(sidebarY), inputHandler);
+        sidebarY = 0;
+
+        hudButton.draw(vg, x + 16, y + 704, inputHandler);
+        closeButton.draw(vg, x + 16, y + 748, inputHandler);
     }
 
     public void pageOpened(String page) {
@@ -121,8 +132,14 @@ public class SideBar {
     private void moveSideBar(BasicButton button) {
         if (button.equals(buttons.get(selected))) return;
         buttons.get(selected).setColorPalette(ColorPalette.TERTIARY);
-        moveAnimation = new CubicBezier(0.76f, 0, 0.24f, 1, 300, buttons.get(selected).y - y, button.y - y, false);
+        moveAnimation = new EaseOutExpo(300, buttons.get(selected).y - y, button.y - y, false);
         sizeAnimation = new DummyAnimation(36);
         selected = buttons.indexOf(button);
     }
+
+    // Utils
+    private int calcAndIncrementLn(int n) {
+        sidebarY = n + 36;
+        return sidebarY;
+    }
 }
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseOutBump.java b/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseOutBump.java
new file mode 100644
index 0000000..44fd56e
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseOutBump.java
@@ -0,0 +1,23 @@
+package cc.polyfrost.oneconfig.gui.animations;
+
+public class EaseOutBump extends Animation {
+    private static final double CONSTANT_1 = 1.7;
+    private static final double CONSTANT_2 = 2.7;
+
+    /**
+     * @param duration The duration of the animation
+     * @param start    The start of the animation
+     * @param end      The end of the animation
+     * @param reverse  Reverse the animation
+     */
+    public EaseOutBump(int duration, float start, float end, boolean reverse) {
+        super(duration, start, end, reverse);
+    }
+
+    // Courtesy of https://easings.net/
+    @Override
+    protected float animate(float x) {
+        // return x == 0 ? 0 : (float) (x == 1 ? 1 : Math.pow(2, -0.5 * x) * Math.sin((x * 100 - 2) * c4) + 1);
+        return (float) (1 + CONSTANT_2 * Math.pow(x-1, 3) + CONSTANT_1 * 1.2 * Math.pow(x-1, 2));
+    }
+}
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseOutExpo.java b/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseOutExpo.java
new file mode 100644
index 0000000..0f4cb68
--- /dev/null
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/animations/EaseOutExpo.java
@@ -0,0 +1,20 @@
+package cc.polyfrost.oneconfig.gui.animations;
+
+public class EaseOutExpo extends Animation {
+
+    /**
+     * @param duration The duration of the animation
+     * @param start    The start of the animation
+     * @param end      The end of the animation
+     * @param reverse  Reverse the animation
+     */
+    public EaseOutExpo(int duration, float start, float end, boolean reverse) {
+        super(duration, start, end, reverse);
+    }
+
+    // Courtesy of https://easings.net/
+    @Override
+    protected float animate(float x) {
+        return x == 1 ? 1 : 1 - (float) Math.pow(2, -10 * x);
+    }
+}
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 d93445b..1c220d9 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
@@ -271,8 +271,8 @@ public class ColorSelector {
 
     private void doDrag() {
         if (inputHandler.isAreaHovered(x, y, 368, 64) && Platform.getMousePlatform().isButtonDown(0) && !dragging) {
-            float dx = (float) (Platform.getMousePlatform().getMouseDX() / (OneConfigGui.INSTANCE == null ? 1 : OneConfigGui.INSTANCE.getScaleFactor()));
-            float dy = (float) (Platform.getMousePlatform().getMouseDY() / (OneConfigGui.INSTANCE == null ? 1 : OneConfigGui.INSTANCE.getScaleFactor()));
+            float dx = (float) (Platform.getMousePlatform().getMouseDX() / (OneConfigGui.INSTANCE == null ? 1 : OneConfigGui.getScaleFactor()));
+            float dy = (float) (Platform.getMousePlatform().getMouseDY() / (OneConfigGui.INSTANCE == null ? 1 : OneConfigGui.getScaleFactor()));
             x += dx;
             mouseX += dx;
             y -= dy;
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 102eab3..d3ad0b7 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
@@ -27,11 +27,9 @@
 package cc.polyfrost.oneconfig.gui.elements.config;
 
 import cc.polyfrost.oneconfig.config.annotations.DualOption;
+import cc.polyfrost.oneconfig.gui.animations.*;
 import cc.polyfrost.oneconfig.internal.assets.Colors;
 import cc.polyfrost.oneconfig.config.elements.BasicOption;
-import cc.polyfrost.oneconfig.gui.animations.Animation;
-import cc.polyfrost.oneconfig.gui.animations.DummyAnimation;
-import cc.polyfrost.oneconfig.gui.animations.EaseInOutCubic;
 import cc.polyfrost.oneconfig.renderer.RenderManager;
 import cc.polyfrost.oneconfig.renderer.font.Fonts;
 import cc.polyfrost.oneconfig.utils.InputHandler;
@@ -81,7 +79,7 @@ public class ConfigDualOption extends BasicOption {
         RenderManager.setAlpha(vg, 1);
         if ((hoveredLeft && toggled || hoveredRight && !toggled) && inputHandler.isClicked()) {
             toggled = !toggled;
-            posAnimation = new EaseInOutCubic(175, 228, 356, !toggled);
+            posAnimation = new EaseOutExpo(300, 228, 356, !toggled);
             try {
                 set(toggled);
             } catch (IllegalAccessException e) {
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 a62afb7..de6b786 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
@@ -27,12 +27,9 @@
 package cc.polyfrost.oneconfig.gui.elements.config;
 
 import cc.polyfrost.oneconfig.config.annotations.Switch;
+import cc.polyfrost.oneconfig.gui.animations.*;
 import cc.polyfrost.oneconfig.internal.assets.Colors;
 import cc.polyfrost.oneconfig.config.elements.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.platform.Platform;
 import cc.polyfrost.oneconfig.renderer.RenderManager;
 import cc.polyfrost.oneconfig.renderer.font.Fonts;
@@ -75,7 +72,7 @@ public class ConfigSwitch extends BasicOption {
 
         if (inputHandler.isAreaClicked(x, y, 42, 32) && isEnabled()) {
             toggled = !toggled;
-            animation = new EaseInOutQuad(200, 0, 1, !toggled);
+            animation = new EaseOutBump(200, 0, 1, !toggled);
             color.setPalette(toggled ? ColorPalette.PRIMARY : ColorPalette.SECONDARY);
             try {
                 set(toggled);
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/pages/CreditsPage.java b/src/main/java/cc/polyfrost/oneconfig/gui/pages/CreditsPage.java
index 89e2d9d..02cfc83 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/pages/CreditsPage.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/pages/CreditsPage.java
@@ -38,10 +38,8 @@ public class CreditsPage extends Page {
 
     @Override
     public void draw(long vg, int x, int y, InputHandler inputHandler) {
-        RenderManager.drawSvg(vg, SVGs.ONECONFIG, x + 20f, y + 20f, 96, 96);
-        RenderManager.drawText(vg, "OneConfig", x + 130, y + 46, -1, 42, Fonts.BOLD);
-        RenderManager.drawText(vg, "ALPHA - By Polyfrost", x + 132, y + 76, -1, 18, Fonts.MEDIUM);
-        RenderManager.drawText(vg, "v0.1", x + 132, y + 96, -1, 18, Fonts.MEDIUM);
+        RenderManager.drawSvg(vg, SVGs.ONECONFIG_FULL_DARK, x + 15f, y + 20f, 474, 102);
+        y -= 32;
 
         RenderManager.drawText(vg, "Development Team", x + 20, y + 180, -1, 24, Fonts.SEMIBOLD);
         RenderManager.drawText(vg, " - MoonTidez - Founder and lead designer", x + 20, y + 205, -1, 12, Fonts.REGULAR);
@@ -49,6 +47,7 @@ public class CreditsPage extends Page {
         RenderManager.drawText(vg, " - nextdaydelivery - GUI frontend, Render Manager, Utilities", x + 20, y + 235, -1, 12, Fonts.REGULAR);
         RenderManager.drawText(vg, " - Wyvest - Gradle, Render Manager, VCAL, Utilities", x + 20, y + 250, -1, 12, Fonts.REGULAR);
         RenderManager.drawText(vg, " - Pauline - Utilities", x + 20, y + 265, -1, 12, Fonts.REGULAR);
+        RenderManager.drawText(vg, " - Caledonian - Designer", x + 20, y + 280, -1, 12, Fonts.REGULAR);
 
         RenderManager.drawText(vg, "Libraries", x + 20, y + 318, -1, 24, Fonts.SEMIBOLD);
         RenderManager.drawText(vg, " - LWJGLTwoPointFive (DJTheRedstoner) - LWJGL3 loading hack", x + 20, y + 340, -1, 12, Fonts.REGULAR);
diff --git a/src/main/java/cc/polyfrost/oneconfig/internal/assets/SVGs.java b/src/main/java/cc/polyfrost/oneconfig/internal/assets/SVGs.java
index 5ccf384..a65c847 100644
--- a/src/main/java/cc/polyfrost/oneconfig/internal/assets/SVGs.java
+++ b/src/main/java/cc/polyfrost/oneconfig/internal/assets/SVGs.java
@@ -36,8 +36,7 @@ import cc.polyfrost.oneconfig.renderer.SVG;
  * @see AssetLoader
  */
 public class SVGs {
-    public static final SVG ONECONFIG = new SVG("/assets/oneconfig/icons/OneConfig.svg");
-    public static final SVG ONECONFIG_OFF = new SVG("/assets/oneconfig/icons/OneConfigOff.svg");
+    public static final SVG ONECONFIG_FULL_DARK = new SVG("/assets/oneconfig/icons/OneConfigFullDark.svg");
     public static final SVG COPYRIGHT_FILL = new SVG("/assets/oneconfig/icons/CopyrightFill.svg");
     public static final SVG APERTURE_FILL = new SVG("/assets/oneconfig/icons/ApertureFill.svg");
     public static final SVG ARROWS_CLOCKWISE_BOLD = new SVG("/assets/oneconfig/icons/ArrowsClockwiseBold.svg");
@@ -51,6 +50,8 @@ public class SVGs {
     public static final SVG X_CIRCLE_BOLD = new SVG("/assets/oneconfig/icons/XCircleBold.svg");
     public static final SVG CARET_LEFT = new SVG("/assets/oneconfig/icons/CaretLeftBold.svg");
     public static final SVG CARET_RIGHT = new SVG("/assets/oneconfig/icons/CaretRightBold.svg");
+    public static final SVG ARROW_LEFT = new SVG("/assets/oneconfig/icons/ArrowLeft.svg");
+    public static final SVG ARROW_RIGHT = new SVG("/assets/oneconfig/icons/ArrowRight.svg");
     public static final SVG INFO_ARROW = new SVG("/assets/oneconfig/icons/InfoArrow.svg");
 
     // OLD ICONS
diff --git a/src/main/java/cc/polyfrost/oneconfig/renderer/RenderManager.java b/src/main/java/cc/polyfrost/oneconfig/renderer/RenderManager.java
index 4d54621..2e78e6f 100644
--- a/src/main/java/cc/polyfrost/oneconfig/renderer/RenderManager.java
+++ b/src/main/java/cc/polyfrost/oneconfig/renderer/RenderManager.java
@@ -621,10 +621,6 @@ public final class RenderManager {
     public static void drawSvg(long vg, String filePath, float x, float y, float width, float height, float scale) {
         float w = width * scale;
         float h = height * scale;
-        if (OneConfigGui.INSTANCE != null && OneConfigGui.isOpen()) {
-            w *= OneConfigGui.INSTANCE.getScaleFactor();
-            h *= OneConfigGui.INSTANCE.getScaleFactor();
-        }
         if (AssetLoader.INSTANCE.loadSVG(vg, filePath, w, h)) {
             NVGPaint imagePaint = NVGPaint.calloc();
             int image = AssetLoader.INSTANCE.getSVG(filePath, w, h);
@@ -648,11 +644,8 @@ public final class RenderManager {
      * @param height   The height.
      */
     public static void drawSvg(long vg, String filePath, float x, float y, float width, float height) {
-        float scale = 1;
-        if (OneConfigGui.isOpen()) {
-            scale = OneConfigGui.getScaleFactor();
-        }
-        drawSvg(vg, filePath, x, y, width, height, scale);
+        if (OneConfigGui.isOpen()) drawSvg(vg, filePath, x, y, width, height, OneConfigGui.getScaleFactor());
+        else drawSvg(vg, filePath, x, y, width, height, 1f);
     }
 
     /**
@@ -695,11 +688,8 @@ public final class RenderManager {
      * @param color    The color.
      */
     public static void drawSvg(long vg, String filePath, float x, float y, float width, float height, int color) {
-        float scale = 1;
-        if (OneConfigGui.isOpen()) {
-            scale = OneConfigGui.getScaleFactor();
-        }
-        drawSvg(vg, filePath, x, y, width, height, color, scale);
+        if (OneConfigGui.isOpen()) drawSvg(vg, filePath, x, y, width, height, color, OneConfigGui.getScaleFactor());
+        else drawSvg(vg, filePath, x, y, width, height, color, 1f);
     }
 
     /**
@@ -708,11 +698,7 @@ public final class RenderManager {
      * @see RenderManager#drawSvg(long, String, float, float, float, float)
      */
     public static void drawSvg(long vg, SVG svg, float x, float y, float width, float height, float scale) {
-        float w = width * scale;
-        float h = height * scale;
-        if (AssetLoader.INSTANCE.loadSVG(vg, svg, w, h)) {
-            drawSvg(vg, svg.filePath, x, y, width, height);
-        }
+        drawSvg(vg, svg.filePath, x, y, width, height, scale);
     }
 
     /**
@@ -721,11 +707,7 @@ public final class RenderManager {
      * @see RenderManager#drawSvg(long, String, float, float, float, float)
      */
     public static void drawSvg(long vg, SVG svg, float x, float y, float width, float height) {
-        float scale = 1;
-        if (OneConfigGui.isOpen()) {
-            scale = OneConfigGui.getScaleFactor();
-        }
-        drawSvg(vg, svg, x, y, width, height, scale);
+        drawSvg(vg, svg.filePath, x, y, width, height);
     }
 
     /**
@@ -734,11 +716,7 @@ public final class RenderManager {
      * @see RenderManager#drawSvg(long, String, float, float, float, float, int)
      */
     public static void drawSvg(long vg, SVG svg, float x, float y, float width, float height, int color, float scale) {
-        float w = width * scale;
-        float h = height * scale;
-        if (AssetLoader.INSTANCE.loadSVG(vg, svg, w, h)) {
-            drawSvg(vg, svg.filePath, x, y, width, height, color);
-        }
+        drawSvg(vg, svg.filePath, x, y, width, height, color, scale);
     }
 
     /**
@@ -747,15 +725,12 @@ public final class RenderManager {
      * @see RenderManager#drawSvg(long, String, float, float, float, float)
      */
     public static void drawSvg(long vg, SVG svg, float x, float y, float width, float height, int color) {
-        float scale = 1;
-        if (OneConfigGui.isOpen()) {
-            scale = OneConfigGui.getScaleFactor();
-        }
-        drawSvg(vg, svg, x, y, width, height, color, scale);
+        if (OneConfigGui.isOpen()) drawSvg(vg, svg, x, y, width, height, color, OneConfigGui.getScaleFactor());
+        else drawSvg(vg, svg, x, y, width, height, color, 1f);
     }
 
     /**
-     * Draw a circle with an info icon inside of it
+     * Draw a circle with an info icon inside it
      *
      * @param vg   The NanoVG context.
      * @param type The icon type.
diff --git a/src/main/java/cc/polyfrost/oneconfig/utils/Notifications.java b/src/main/java/cc/polyfrost/oneconfig/utils/Notifications.java
index 2e64040..5ce15d4 100644
--- a/src/main/java/cc/polyfrost/oneconfig/utils/Notifications.java
+++ b/src/main/java/cc/polyfrost/oneconfig/utils/Notifications.java
@@ -226,6 +226,7 @@ public final class Notifications {
 
     @Subscribe
     private void onHudRender(HudRenderEvent event) {
+        if (notifications.size() == 0) return;
         RenderManager.setupAndDraw((vg) -> {
             float desiredPosition = -16f;
             float scale = OneConfigGui.getScaleFactor();
diff --git a/src/main/resources/assets/oneconfig/icons/ArrowLeft.svg b/src/main/resources/assets/oneconfig/icons/ArrowLeft.svg
new file mode 100644
index 0000000..3d3f360
--- /dev/null
+++ b/src/main/resources/assets/oneconfig/icons/ArrowLeft.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.6663 10H3.33301M3.33301 10L8.33301 5M3.33301 10L8.33301 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/src/main/resources/assets/oneconfig/icons/ArrowRight.svg b/src/main/resources/assets/oneconfig/icons/ArrowRight.svg
new file mode 100644
index 0000000..86df1ab
--- /dev/null
+++ b/src/main/resources/assets/oneconfig/icons/ArrowRight.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.33366 9C2.78137 9 2.33366 9.44771 2.33366 10C2.33366 10.5523 2.78137 11 3.33366 11L3.33366 9ZM16.667 10L17.3741 10.7071C17.5616 10.5196 17.667 10.2652 17.667 10C17.667 9.73478 17.5616 9.48043 17.3741 9.29289L16.667 10ZM10.9599 14.2929C10.5694 14.6834 10.5694 15.3166 10.9599 15.7071C11.3504 16.0976 11.9836 16.0976 12.3741 15.7071L10.9599 14.2929ZM12.3741 4.29289C11.9836 3.90237 11.3504 3.90237 10.9599 4.29289C10.5694 4.68342 10.5694 5.31658 10.9599 5.70711L12.3741 4.29289ZM3.33366 11L16.667 11L16.667 9L3.33366 9L3.33366 11ZM15.9599 9.29289L10.9599 14.2929L12.3741 15.7071L17.3741 10.7071L15.9599 9.29289ZM17.3741 9.29289L12.3741 4.29289L10.9599 5.70711L15.9599 10.7071L17.3741 9.29289Z" fill="white"/></svg>
diff --git a/src/main/resources/assets/oneconfig/icons/OneConfig.svg b/src/main/resources/assets/oneconfig/icons/OneConfig.svg
deleted file mode 100644
index 3580acd..0000000
--- a/src/main/resources/assets/oneconfig/icons/OneConfig.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C18.623 0 24 5.377 24 12C24 18.623 18.623 24 12 24C5.377 24 0 18.623 0 12C0 5.377 5.377 0 12 0ZM13.914 3.7896C14.0794 3.52813 14.3316 3.33328 14.6264 3.23929C14.9211 3.14529 15.2396 3.15815 15.5258 3.2756C16.3391 3.60566 17.1024 4.04773 17.7934 4.589C18.0372 4.77823 18.2068 5.04716 18.2724 5.34875C18.3379 5.65034 18.2954 5.9654 18.1522 6.2388C17.9732 6.57679 17.883 6.95468 17.89 7.33706C17.897 7.71944 18.001 8.09379 18.1922 8.425C18.3834 8.75635 18.6558 9.03366 18.9836 9.23087C19.3115 9.42807 19.6841 9.53872 20.0664 9.5524C20.3743 9.56497 20.6681 9.68521 20.8964 9.89215C21.1248 10.0991 21.2733 10.3796 21.316 10.6848C21.4385 11.5573 21.4387 12.4426 21.3166 13.3152C21.2739 13.6206 21.1254 13.9013 20.8969 14.1083C20.6684 14.3154 20.3745 14.4357 20.0664 14.4482C19.6841 14.4616 19.3115 14.5721 18.9836 14.7692C18.6557 14.9663 18.3834 15.2436 18.1922 15.575C18.001 15.9062 17.897 16.2805 17.89 16.6629C17.8831 17.0452 17.9733 17.4231 18.1524 17.761C18.2956 18.0345 18.3381 18.3496 18.2725 18.6513C18.2069 18.9529 18.0373 19.2219 17.7934 19.4112C17.1024 19.9525 16.3391 20.3944 15.5256 20.724C15.2395 20.8414 14.9211 20.8543 14.6265 20.7603C14.3318 20.6664 14.0797 20.4716 13.9144 20.2102C13.7113 19.8857 13.429 19.6182 13.0942 19.4328C12.7593 19.2473 12.3828 19.15 12 19.15C11.6172 19.15 11.2407 19.2473 10.9059 19.4328C10.5711 19.6183 10.289 19.8859 10.086 20.2104C9.92062 20.4719 9.6684 20.6667 9.37364 20.7607C9.07888 20.8547 8.76042 20.8419 8.4742 20.7244C7.66085 20.3943 6.89761 19.9523 6.2066 19.411C5.96277 19.2218 5.79323 18.9528 5.72764 18.6512C5.66205 18.3497 5.70458 18.0346 5.8478 17.7612C6.02677 17.4232 6.11699 17.0453 6.10999 16.6629C6.10299 16.2806 5.99902 15.9062 5.8078 15.575C5.61655 15.2436 5.34421 14.9663 5.01637 14.7691C4.68853 14.5719 4.31594 14.4613 3.9336 14.4476C3.62568 14.435 3.33194 14.3148 3.10359 14.1079C2.87523 13.9009 2.72674 13.6204 2.684 13.3152C2.56153 12.4427 2.56132 11.5574 2.6834 10.6848C2.7261 10.3794 2.87465 10.0987 3.10312 9.89168C3.3316 9.68462 3.62551 9.56433 3.9336 9.5518C4.31593 9.53836 4.68855 9.42789 5.01642 9.23077C5.34429 9.03365 5.61662 8.75637 5.8078 8.425C5.99904 8.09383 6.10302 7.7195 6.10998 7.33714C6.11694 6.95478 6.02666 6.57692 5.8476 6.239C5.70438 5.96551 5.66186 5.65038 5.72749 5.34872C5.79311 5.04706 5.96271 4.77807 6.2066 4.5888C6.89758 4.04753 7.66092 3.