feat(Badges): added active developer badge + compressed badge size + badges now display in proper order

src/getFlags.ts

@@ -1,17 +1,19 @@
 export const getFlags = (flag: number): string[] => {
     let flags: string[] = [];
 
-    if (flag & 1) flags.push("Discord_Employee");
-    if (flag & 2) flags.push("Partnered_Server_Owner");
-    if (flag & 4) flags.push("HypeSquad_Events");
-    if (flag & 8) flags.push("Bug_Hunter_Level_1");
-    if (flag & 64) flags.push("House_Bravery");
-    if (flag & 128) flags.push("House_Brilliance");
-    if (flag & 256) flags.push("House_Balance");
-    if (flag & 512) flags.push("Early_Supporter");
-    if (flag & 16384) flags.push("Bug_Hunter_Level_2");
-    if (flag & 131072) flags.push("Early_Verified_Bot_Developer");
-    if (flag & 262144) flags.push("Discord_Certified_Moderator");
+    // In the order they appear on profiles
+    if (flag & 1) flags.push("Discord_Employee"); // 1 << 0
+    if (flag & 262144) flags.push("Discord_Certified_Moderator"); // 1 << 18
+    if (flag & 2) flags.push("Partnered_Server_Owner"); // 1 << 1
+    if (flag & 4) flags.push("HypeSquad_Events"); // 1 << 2
+    if (flag & 64) flags.push("House_Bravery"); // 1 << 6
+    if (flag & 128) flags.push("House_Brilliance"); // 1 << 7
+    if (flag & 256) flags.push("House_Balance"); // 1 << 8
+    if (flag & 8) flags.push("Bug_Hunter_Level_1"); // 1 << 3
+    if (flag & 16384) flags.push("Bug_Hunter_Level_2"); // 1 << 14
+    if (flag & 4194304) flags.push("Active_Developer"); // 1 << 22
+    if (flag & 131072) flags.push("Early_Verified_Bot_Developer"); // 1 << 17
+    if (flag & 512) flags.push("Early_Supporter"); // 1 << 9
 
     return flags;
 };

src/renderCard.tsx

@@ -192,7 +192,8 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                 ">
                                     <h1 style="
                                         font-size: 1.15rem;
-                                        margin: 0 5px 0 0;
+                                        margin: 0 12px 0 0;
+                                        white-space: nowrap;
                                     ">
                                     ${escape(data.discord_user.username)}${
                                         discrim !== "hide"
@@ -211,7 +212,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                             position: relative;
                                             top: 50%;
                                             transform: translate(0%, -50%);
-                                            margin: 0 0 0 4px;
+                                            margin-right: 7px;
                                         " />`).join("")
                                     }
                                 </div>
@@ -221,7 +222,7 @@ const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<
                                         font-size: 0.9rem;
                                         margin-top: 16px;
                                         color: ${theme === "dark" ? "#aaa" : "#333"};
-                                        font-weight: lighter;
+                                        font-weight: 400;
                                         overflow: hidden;
                                         white-space: nowrap;
                                         text-overflow: ellipsis;