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>

16 files changed, 139 insertions, 109 deletions

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.60564 8.4744 3.276C8.76051 3.15857 9.07885 3.1457 9.37351 3.23966C9.66817 3.33363 9.92029 3.52841 10.0856 3.7898C10.2887 4.11425 10.571 4.38176 10.9058 4.56721C11.2407 4.75267 11.6172 4.84997 12 4.85C12.8064 4.85 13.5146 4.4262 13.914 3.7896Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 7.10803C14.6999 7.10803 16.8921 9.30023 16.8921 12.0002C16.8921 14.7002 14.6999 16.8924 11.9999 16.8924C9.29987 16.8924 7.10767 14.7002 7.10767 12.0002C7.10767 9.30023 9.29987 7.10803 11.9999 7.10803ZM11.7741 10.3318V14.599C11.7741 14.7282 11.8255 14.852 11.9167 14.9434C12.0081 15.0348 12.1221 15.086 12.2513 15.086H12.4727C12.7417 15.086 12.9783 14.868 12.9783 14.599V9.55203C12.9783 9.42287 12.927 9.299 12.8356 9.20767C12.7443 9.11634 12.6204 9.06503 12.4913 9.06503H11.7803C11.6779 9.06503 11.5775 9.09463 11.4915 9.15023C11.2781 9.28843 10.7481 9.68123 10.4163 9.89603C10.3617 9.93131 10.3148 9.97715 10.2782 10.0309C10.2416 10.0846 10.2162 10.145 10.2034 10.2087C10.1906 10.2724 10.1906 10.338 10.2035 10.4017C10.2165 10.4654 10.242 10.5258 10.2787 10.5794L10.3795 10.7268C10.4518 10.8328 10.5631 10.9059 10.6891 10.9303C10.8151 10.9547 10.9456 10.9283 11.0523 10.857L11.7741 10.3318Z" fill="white"/>
-</svg>
diff --git a/src/main/resources/assets/oneconfig/icons/OneConfigFullDark.svg b/src/main/resources/assets/oneconfig/icons/OneConfigFullDark.svg
new file mode 100644
index 0000000..d432fbd
--- /dev/null
+++ b/src/main/resources/assets/oneconfig/icons/OneConfigFullDark.svg
@@ -0,0 +1,13 @@
+<svg width="158" height="34" viewBox="0 0 158 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7671 15.2226C21.8017 15.2744 21.8274 15.3351 21.8532 15.3955C22.3289 16.3829 22.3027 17.8118 21.7671 18.7819L20.1069 21.6572C19.6144 20.9036 18.9833 20.2368 18.2227 19.6826C18.5599 18.9204 18.7415 18.037 18.7153 17.0065C18.8191 9.19477 7.37342 9.19477 7.47726 17.0065C7.45151 18.0199 7.62415 18.903 7.95296 19.6566C7.19192 20.2021 6.56087 20.8776 6.07672 21.6398C5.48029 20.6264 4.27013 18.5307 4.27013 18.4529C3.90712 17.5695 3.90712 16.3656 4.28744 15.4909C4.33049 15.3957 4.37397 15.3004 4.42589 15.2226L7.21809 10.364C7.22399 10.3579 7.23033 10.3475 7.23624 10.3388L7.24383 10.3293C7.81451 9.36794 9.18043 8.58859 10.2956 8.58859H15.8885C17.1594 8.58859 18.335 9.26413 18.966 10.364C18.9707 10.3731 19.7469 11.7191 20.4809 12.9917L21.7671 15.2226Z" fill="#5187F1"/>
+<path d="M39.3071 8.93492V25.0691H36.636L29.1323 15.4129V25.0691H25.5276V8.93492H28.0606L35.6766 18.7125V8.93492H39.3071Z" fill="#5187F1"/>
+<path d="M55.68 21.9602V25.0691H44.0701V8.93492H55.5415V12.0439H47.6748V15.3088H54.8585V18.3489H47.6748V21.9602H55.68Z" fill="#5187F1"/>
+<path d="M153.727 16.4526V15.9158H145.264V18.9554L149.863 19.0247C149.776 19.3537 149.664 19.6569 149.517 19.9341C149.333 20.2811 149.114 20.5877 148.855 20.8522C148.728 20.9818 148.592 21.1012 148.446 21.2101C148.303 21.3175 148.15 21.4148 147.987 21.5017C147.638 21.6882 147.252 21.8269 146.831 21.9165C146.599 21.966 146.355 22.0007 146.101 22.0201C145.939 22.0324 145.772 22.0385 145.601 22.0385C144.676 22.0385 143.855 21.822 143.138 21.389C142.428 20.956 141.858 20.3585 141.452 19.5965C141.045 18.8342 140.838 17.9595 140.838 16.9637C140.838 15.9589 141.045 15.0756 141.461 14.3222C141.876 13.5687 142.463 12.9798 143.206 12.5641C143.95 12.1485 144.797 11.9406 145.739 11.9406C146.604 11.9406 147.391 12.1138 148.099 12.4601C148.808 12.798 149.413 13.309 149.915 13.9757L152.379 11.5076C151.635 10.6242 150.693 9.92268 149.552 9.41164C148.41 8.90081 147.148 8.64963 145.766 8.64963C144.564 8.64963 143.449 8.86614 142.403 9.29049C141.365 9.71484 140.44 10.3037 139.654 11.0572C138.858 11.8192 138.245 12.694 137.803 13.69C137.363 14.6946 137.147 15.7858 137.147 16.9721C137.147 18.15 137.363 19.2413 137.795 20.246C138.227 21.2505 138.824 22.1339 139.584 22.8959C140.345 23.6581 141.236 24.2556 142.264 24.6887C143.293 25.1217 144.4 25.3382 145.584 25.3382C147.183 25.3382 148.592 25.0003 149.82 24.325C151.038 23.6495 151.998 22.6447 152.69 21.3197C153.381 19.9948 153.727 18.3752 153.727 16.4526Z" fill="#1878F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.0166 11.0486C90.7945 11.8021 91.3909 12.6853 91.8058 13.6987C92.2208 14.7119 92.4284 15.8118 92.4457 17.0068C92.4457 18.1847 92.2296 19.2759 91.8058 20.2891C91.3825 21.3025 90.786 22.1857 90.025 22.9392C89.2644 23.6928 88.3742 24.2816 87.3539 24.706C86.3337 25.1303 85.2274 25.3469 84.0257 25.3469C82.8071 25.3469 81.683 25.1303 80.6459 24.706C79.6084 24.2816 78.7093 23.6839 77.9314 22.9219C77.1534 22.1599 76.5481 21.2765 76.1248 20.2631C75.6925 19.2499 75.4849 18.15 75.4849 16.981C75.4849 15.7944 75.701 14.6946 76.1248 13.69C76.557 12.6853 77.1446 11.8021 77.9052 11.0486C78.6662 10.295 79.5565 9.70617 80.594 9.29049C81.6311 8.8748 82.7551 8.66696 83.9738 8.66696C85.167 8.66696 86.2822 8.8748 87.3109 9.29049C88.3395 9.70617 89.2386 10.295 90.0166 11.0486ZM86.481 21.415C87.1982 20.982 87.7516 20.3931 88.158 19.6309C88.5557 18.8689 88.7629 17.9855 88.7718 16.9895C88.7718 16.2448 88.6506 15.5606 88.4261 14.9457C88.1927 14.3222 87.8638 13.7938 87.4405 13.3435C87.0082 12.8931 86.4983 12.5555 85.9104 12.3129C85.3224 12.0791 84.674 11.9579 83.9738 11.9579C83.0143 11.9579 82.176 12.1658 81.4496 12.5815C80.7236 12.9972 80.1702 13.586 79.7726 14.3396C79.375 15.1016 79.1761 15.9763 79.1761 16.981C79.1761 17.743 79.2973 18.4359 79.5218 19.0594C79.7553 19.6829 80.0837 20.22 80.5075 20.6701C80.9308 21.1205 81.4323 21.467 82.0203 21.7009C82.6083 21.9347 83.2566 22.0559 83.9738 22.0559C84.9336 22.0559 85.7635 21.8394 86.481 21.415Z" fill="#1878F1"/>
+<path d="M70.6438 24.7147C71.6463 24.3077 72.5285 23.7448 73.2891 23.0086L70.8426 20.575C70.4188 21.0427 69.9005 21.4063 69.2952 21.6575C68.6899 21.9087 67.9727 22.0385 67.1513 22.0385C66.4511 22.0385 65.8116 21.9174 65.232 21.6835C64.6529 21.4497 64.1515 21.1034 63.7281 20.653C63.669 20.59 63.6116 20.5253 63.5559 20.4589C63.4237 20.3012 63.3026 20.1339 63.1924 19.9576C63.0173 19.6779 62.87 19.3751 62.7513 19.0507C62.5179 18.4359 62.4052 17.743 62.4052 16.981C62.4052 16.2535 62.5179 15.5693 62.7513 14.9457C62.9759 14.3135 63.3043 13.7852 63.7281 13.3435C63.9421 13.1204 64.1759 12.9238 64.4296 12.7536C64.6778 12.587 64.9454 12.4459 65.232 12.3303C65.8116 12.0964 66.4511 11.9753 67.1513 11.9753C67.9381 11.9753 68.6384 12.1051 69.2348 12.365C69.8397 12.6248 70.35 12.9798 70.7561 13.4388L73.168 10.9966C72.4246 10.2866 71.5513 9.71484 70.5573 9.30782C69.5632 8.90081 68.4218 8.69297 67.1513 8.69297C65.9323 8.69297 64.8171 8.90081 63.7973 9.31649C62.7771 9.73217 61.8869 10.321 61.1174 11.0659C60.3479 11.8108 59.7515 12.6942 59.3281 13.7074C58.8959 14.7292 58.6882 15.8118 58.6882 16.9897C58.6882 18.1674 58.9043 19.2586 59.3281 20.2718C59.7515 21.2765 60.3479 22.1686 61.1174 22.9306C61.878 23.6928 62.7771 24.2816 63.8057 24.6973C64.8344 25.113 65.9496 25.3209 67.1513 25.3209C68.4738 25.3209 69.6409 25.1217 70.6438 24.7147Z" fill="#1878F1"/>
+<path d="M109.908 8.93549V25.0697H107.237L99.7329 15.4134V25.0697H96.1282V8.93549H98.6612L106.277 18.7131V8.93549H109.908Z" fill="#1878F1"/>
+<path d="M118.275 15.6299V12.0444H125.874V8.93549H114.671V25.0697H118.275V18.7651H125.511V15.6299H118.275Z" fill="#1878F1"/>
+<path d="M133.447 8.93549H129.842V25.0697H133.447V8.93549Z" fill="#1878F1"/>
+<path d="M15.7681 17.8959C15.7136 18.1069 15.6372 18.3014 15.5427 18.4792C14.5659 20.3411 11.6007 20.3325 10.6412 18.4532C10.5826 18.3401 10.5306 18.22 10.4868 18.0927C10.4184 17.8944 10.3703 17.6792 10.3458 17.447C10.331 17.3039 10.3255 17.1544 10.3302 16.9983C10.2782 13.153 15.9057 13.153 15.8626 16.9983C15.8723 17.3248 15.8382 17.624 15.7681 17.8959Z" fill="#1878F1"/>
+<path d="M16.1218 22.0301C14.2979 23.104 11.8772 23.104 10.0621 22.0301C9.07651 22.6449 8.37624 23.563 8.14282 24.6195C8.76542 25.0872 9.53449 25.3902 10.2263 25.4075C10.3259 25.4152 14.6195 25.4094 15.663 25.408L15.8884 25.4075H16.0268C16.7009 25.3729 17.4442 25.0699 18.0495 24.6195C17.8077 23.5717 17.1074 22.6449 16.1218 22.0301Z" fill="#1878F1"/>
+</svg>
diff --git a/src/main/resources/assets/oneconfig/icons/OneConfigOff.svg b/src/main/resources/assets/oneconfig/icons/OneConfigOff.svg
deleted file mode 100644
index cb27861..0000000
--- a/src/main/resources/assets/oneconfig/icons/OneConfigOff.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.51638 20.4836C5.6885 22.6558 8.6885 24 12 24C18.623 24 24 18.623 24 12C24 8.6885 22.6558 5.6885 20.4836 3.51638L18.3005 5.69952C18.2903 5.88649 18.2403 6.07053 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.3835 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.70242 18.5353 5.69318 18.4173 5.69952 18.3005L3.51638 20.4836Z" fill="white"/>
-<path d="M8.54116 15.4588C9.4267 16.3443 10.6497 16.8923 11.9996 16.8923C14.6996 16.8923 16.8918 14.7001 16.8918 12.0001C16.8918 10.6502 16.3438 9.42718 15.4584 8.54165L12.978 11.022V14.5989C12.978 14.8679 12.7414 15.0859 12.4724 15.0859H12.251C12.1218 15.0859 12.0078 15.0347 11.9164 14.9433C11.8252 14.8519 11.7738 14.7281 11.7738 14.5989V12.2262L8.54116 15.4588Z" fill="white"/>
-<path d="M12.6115 7.14588L7.14539 12.612C7.12033 12.4115 7.10742 12.2073 7.10742 12.0001C7.10742 9.30011 9.29962 7.10791 11.9996 7.10791C12.2068 7.10791 12.411 7.12082 12.6115 7.14588Z" fill="white"/>
-<path d="M16.1845 3.57282C15.969 3.46547 15.7493 3.3663 15.5258 3.2756C15.2396 3.15815 14.9211 3.14529 14.6264 3.23929C14.3316 3.33328 14.0794 3.52813 13.914 3.7896C13.5146 4.4262 12.8064 4.85 12 4.85C11.6172 4.84997 11.2407 4.75267 10.9058 4.56721C10.571 4.38176 10.2887 4.11425 10.0856 3.7898C9.92029 3.52841 9.66817 3.33363 9.37351 3.23966C9.07885 3.1457 8.76051 3.15857 8.4744 3.276C7.66092 3.60564 6.89758 4.04753 6.2066 4.5888C5.96271 4.77807 5.79311 5.04706 5.72749 5.34872C5.66186 5.65038 5.70438 5.96552 5.8476 6.239C6.02666 6.57692 6.11694 6.95478 6.10998 7.33714C6.10302 7.7195 5.99904 8.09383 5.8078 8.425C5.61662 8.75637 5.34429 9.03365 5.01642 9.23077C4.68855 9.42789 4.31593 9.53836 3.9336 9.5518C3.62551 9.56433 3.3316 9.68462 3.10312 9.89168C2.87465 10.0987 2.7261 10.3794 2.6834 10.6848C2.56132 11.5574 2.56153 12.4427 2.684 13.3152C2.72674 13.6204 2.87523 13.9009 3.10359 14.1079C3.33194 14.3148 3.62568 14.435 3.9336 14.4476C4.3091 14.461 4.67519 14.568 4.99873 14.7586L1.66281 18.0946C0.606425 16.3079 0 14.2242 0 12C0 5.377 5.377 0 12 0C14.2242 0 16.3079 0.606425 18.0946 1.66281L16.1845 3.57282Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7315 1.26849C23.0895 1.62647 23.0895 2.20687 22.7315 2.56485L2.56485 22.7315C2.20687 23.0895 1.62647 23.0895 1.26849 22.7315C0.910505 22.3735 0.910505 21.7931 1.26849 21.4352L21.4352 1.26849C21.7931 0.910505 22.3735 0.910505 22.7315 1.26849Z" fill="white"/>
-</svg>