added login, icons and theming to user dropdown

build/darwin/Info.plist

@@ -1,6 +1,11 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
     <dict>
+        <key>NSAppTransportSecurity</key>
+        <dict>
+            <key>NSAllowsLocalNetworking</key>
+            <true />
+        </dict>
         <key>CFBundlePackageType</key>
         <string>APPL</string>
         <key>CFBundleName</key>

frontend/src/helperComponents/AvatarMenu.svelte

@@ -4,20 +4,31 @@
     import {
         aniListLoggedIn,
         aniListUser,
+        malUser,
+        simklUser,
         malLoggedIn,
         simklLoggedIn,
+        loginToAniList,
+        loginToMAL,
+        loginToSimkl,
         logoutOfAniList,
         logoutOfMAL,
         logoutOfSimkl,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import * as runtime from "../../wailsjs/runtime";
+    import type {MyAnimeListUser} from "../mal/types/MALTypes";
+    import type {SimklUser} from "../simkl/types/simklTypes";
 
     let currentAniListUser: AniListUser;
+    let currentMALUser: MyAnimeListUser;
+    let currentSimklUser: SimklUser;
     let isAniListLoggedIn: boolean;
     let isSimklLoggedIn: boolean;
     let isMALLoggedIn: boolean;
 
     aniListUser.subscribe((value) => (currentAniListUser = value));
+    malUser.subscribe((value) => (currentMALUser = value))
+    simklUser.subscribe(value => currentSimklUser = value)
     aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
     simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
     malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
@@ -59,9 +70,16 @@
                 <li>
                     <button
                         on:click={logoutOfAniList}
-                        class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
+                        class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
                     >
-                        Logout Anilist
+                        <span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser.data.Viewer.name}
+                    </button>
+                </li>
+                {:else}
+                <li>
+                    <button on:click={loginToAniList}
+                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+                        <span class="maple-font text-lg mr-4">A</span>Login to AniList
                     </button>
                 </li>
             {/if}
@@ -69,9 +87,16 @@
                 <li>
                     <button
                         on:click={logoutOfMAL}
-                        class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
+                        class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
                     >
-                        Logout MAL
+                        <span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
+                    </button>
+                </li>
+            {:else}
+                <li>
+                    <button on:click={loginToMAL}
+                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+                        <span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
                     </button>
                 </li>
             {/if}
@@ -79,9 +104,16 @@
                 <li>
                     <button
                         on:click={logoutOfSimkl}
-                        class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
+                        class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
                     >
-                        Logout Simkl
+                        <span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser.user.name}
+                    </button>
+                </li>
+            {:else}
+                <li>
+                    <button on:click={loginToSimkl}
+                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+                        <span class="maple-font text-lg mr-4">S</span>Login to Simkl
                     </button>
                 </li>
             {/if}
@@ -95,5 +127,4 @@
             </button>
         </div>
     </div>
-</div>
-
+</div>

frontend/src/style.css

@@ -16,6 +16,12 @@ body {
     sans-serif;
 }
 
+.maple-font {
+    font-family: "Maple Mono NF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+}
+
 @font-face {
     font-family: "Nunito";
     font-style: normal;
@@ -24,6 +30,14 @@ body {
     url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
 }
 
+@font-face {
+    font-family: "Maple Mono NF";
+    font-style: normal;
+    font-weight: 800;
+    src: local(""),
+    url("assets/fonts/MapleMono-Bold.woff2") format("woff2");
+}
+
 #app {
     height: 100vh;
     text-align: center;