non matching drop down background fix

option to add genius access_token on Login Screen
red logout button

lib/components/Login.dart

@@ -1,8 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:spotube/components/Shared/Hyperlink.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/helpers/oauth-login.dart';
+import 'package:spotube/models/LocalStorageKeys.dart';
 import 'package:spotube/provider/Auth.dart';
+import 'package:spotube/provider/UserPreferences.dart';
 
 class Login extends StatefulWidget {
   const Login({Key? key}) : super(key: key);
@@ -14,9 +18,10 @@ class Login extends StatefulWidget {
 class _LoginState extends State<Login> {
   String clientId = "";
   String clientSecret = "";
+  String accessToken = "";
   bool _fieldError = false;
 
-  handleLogin(Auth authState) async {
+  Future handleLogin(Auth authState) async {
     try {
       if (clientId == "" || clientSecret == "") {
         return setState(() {
@@ -35,10 +40,9 @@ class _LoginState extends State<Login> {
       builder: (context, authState, child) {
         return Scaffold(
           appBar: const PageWindowTitleBar(),
-          body: Center(
+          body: SingleChildScrollView(
+            child: Center(
               child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
                 children: [
                   Image.asset(
                     "assets/spotube-logo.png",
@@ -49,6 +53,8 @@ class _LoginState extends State<Login> {
                       style: Theme.of(context).textTheme.headline4),
                   const Text(
                       "Don't worry, any of your credentials won't be collected or shared with anyone"),
+                  const Hyperlink("How to get these client-id & client-secret?",
+                      "https://github.com/KRTirtho/spotube#configuration"),
                   const SizedBox(
                     height: 10,
                   ),
@@ -69,9 +75,7 @@ class _LoginState extends State<Login> {
                             });
                           },
                         ),
-                      const SizedBox(
-                        height: 10,
-                      ),
+                        const SizedBox(height: 10),
                         TextField(
                           decoration: const InputDecoration(
                             hintText: "Spotify Client Secret",
@@ -83,12 +87,36 @@ class _LoginState extends State<Login> {
                             });
                           },
                         ),
+                        const SizedBox(height: 10),
+                        const Divider(color: Colors.grey),
+                        const SizedBox(height: 10),
+                        TextField(
+                          decoration: const InputDecoration(
+                            label: Text("Genius Access Token (optional)"),
+                          ),
+                          onChanged: (value) {
+                            setState(() {
+                              accessToken = value;
+                            });
+                          },
+                        ),
                         const SizedBox(
                           height: 10,
                         ),
                         ElevatedButton(
-                        onPressed: () {
-                          handleLogin(authState);
+                          onPressed: () async {
+                            await handleLogin(authState);
+                            UserPreferences preferences =
+                                context.read<UserPreferences>();
+                            SharedPreferences localStorage =
+                                await SharedPreferences.getInstance();
+                            preferences.setGeniusAccessToken(accessToken);
+                            await localStorage.setString(
+                                LocalStorageKeys.geniusAccessToken,
+                                accessToken);
+                            setState(() {
+                              accessToken = "";
+                            });
                           },
                           child: const Text("Submit"),
                         )
@@ -98,6 +126,7 @@ class _LoginState extends State<Login> {
                 ],
               ),
             ),
+          ),
         );
       },
     );

lib/components/Settings.dart

@@ -135,6 +135,9 @@ class _SettingsState extends State<Settings> {
                   const Text("Log out of this account"),
                   ElevatedButton(
                     child: const Text("Logout"),
+                    style: ButtonStyle(
+                      backgroundColor: MaterialStateProperty.all(Colors.red),
+                    ),
                     onPressed: () async {
                       SharedPreferences localStorage =
                           await SharedPreferences.getInstance();

lib/main.dart

@@ -200,6 +200,7 @@ class _MyAppState extends State<MyApp> {
             color: Colors.blueGrey[900],
             elevation: 20,
           ),
+          canvasColor: Colors.blueGrey[900],
         ),
         themeMode: _themeMode,
         home: const Home(),