assets/images/logo/welcome.svg

@@ -0,0 +1,10 @@
+<svg width="132" height="132" viewBox="0 0 132 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_248_2340" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="132" height="132">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.169312 0.167984H131.57V131.504H0.169312V0.167984Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_248_2340)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.3651 10.0417C20.7686 10.0417 10.0443 21.4111 10.0443 39.0017V92.6691C10.0443 110.266 20.7686 121.629 37.3651 121.629H94.311C110.947 121.629 121.698 110.266 121.698 92.6691V39.0017C121.698 21.4111 110.947 10.0417 94.311 10.0417H37.3651ZM94.311 131.504H37.3651C15.1135 131.504 0.169312 115.895 0.169312 92.6691V39.0017C0.169312 15.7757 15.1135 0.166667 37.3651 0.166667H94.311C116.596 0.166667 131.573 15.7757 131.573 39.0017V92.6691C131.573 115.895 116.596 131.504 94.311 131.504V131.504Z" fill="#4A40EC"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7692 100.104C20.5447 100.104 19.3268 99.6566 18.3722 98.7481C16.3906 96.8785 16.3116 93.7448 18.1879 91.7764L28.2472 81.1575C33.5731 75.5024 42.5594 75.2259 48.2408 80.5584L54.5476 86.9574C56.3054 88.7349 59.1625 88.7678 60.9269 87.0298C61.5918 86.2464 75.9303 68.8335 75.9303 68.8335C78.6558 65.5286 82.5005 63.4878 86.773 63.0665C91.0522 62.6912 95.2063 63.9355 98.5177 66.6544C98.8008 66.8848 99.0575 67.1086 113.515 81.954C115.417 83.9027 115.384 87.0298 113.429 88.9324C111.48 90.8481 108.347 90.7889 106.444 88.8402C106.444 88.8402 92.9548 74.9955 91.9936 74.0606C90.9732 73.2246 89.334 72.7374 87.721 72.8954C86.0818 73.06 84.6071 73.8434 83.5604 75.114C68.2607 93.6724 68.0764 93.8501 67.8262 94.0937C62.1777 99.6369 53.0598 99.5447 47.51 93.883C47.51 93.883 41.3875 87.6684 41.2822 87.5433C39.7615 86.1345 37.0491 86.2266 35.423 87.9449L25.3505 98.5638C24.3762 99.5908 23.0727 100.104 21.7692 100.104V100.104Z" fill="#4A40EC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.3375 40.5153C39.6969 40.5153 36.7344 43.4778 36.7344 47.1249C36.7344 50.7721 39.6969 53.7412 43.3441 53.7412C46.9913 53.7412 49.9604 50.7721 49.9604 47.1249C49.9604 43.4843 46.9913 40.5218 43.3375 40.5153M43.3441 63.6162C34.2525 63.6162 26.8594 56.2165 26.8594 47.1249C26.8594 38.0333 34.2525 30.6403 43.3441 30.6403C52.4423 30.6468 59.8354 38.0465 59.8354 47.1249C59.8354 56.2165 52.4357 63.6162 43.3441 63.6162" fill="#4A40EC"/>
+</svg>

lib/main.dart

@@ -3,6 +3,8 @@ import 'dart:io';
 import 'package:drifter/pages/login_screen/login_screen.dart';
 import 'package:drifter/pages/main_screen/main_screen_widget.dart';
 import 'package:drifter/pages/splash_screen/splash_screen.dart';
+import 'package:drifter/pages/terms_of_service/terms_of_service.dart';
+import 'package:drifter/pages/welcome_screen/welcome_screen.dart';
 import 'package:drifter/theme/app_colors.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -27,8 +29,11 @@ class MyApp extends StatelessWidget {
         ),
       ),
       routes: {
-        '/': (context) => const Splash(),
+        '/': (context) => const WelcomeScreen()
+        // Splash()
+        ,
         '/login': (context) => const LoginScreen(),
+        '/terms': (context) => const TermsOfServiceScreen(),
       },
     );
   }

lib/pages/login_screen/login_screen.dart

@@ -6,6 +6,7 @@ import 'package:drifter/pages/profile_screen/profile_screen.dart';
 import 'package:drifter/pages/profile_screen/widgets/keys_option_modal_bottom_sheet.dart';
 import 'package:drifter/pages/profile_screen/widgets/message_snack_bar.dart';
 import 'package:drifter/pages/profile_screen/widgets/ok_button_widget.dart';
+import 'package:drifter/pages/terms_of_service/button_continue.dart';
 
 import 'package:drifter/theme/app_colors.dart';
 import 'package:drifter/utilities/assets.dart';
@@ -13,6 +14,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:nostr_tools/nostr_tools.dart';
+import 'package:sliding_switch/sliding_switch.dart';
+import 'package:toggle_switch/toggle_switch.dart';
 
 class LoginScreen extends StatefulWidget {
   const LoginScreen({super.key});
@@ -28,142 +31,187 @@ class LoginScreenState extends State<LoginScreen> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-        appBar: AppBar(
+      appBar: AppBar(
-          title: Row(
+        leading: IconButton(
-            // mainAxisAlignment: MainAxisAlignment.center,
+          icon: Icon(
-            children: [
+            Icons.arrow_back,
-              SvgPicture.asset(
+            color: AppColors.topNavIconBack,
-                Assets.svg.drifterIcon,
-                height: 30,
-                width: 30,
-                alignment: Alignment.centerLeft,
-              ),
-              const SizedBox(
-                width: 125,
-              ),
-              const Text(
-                "Login",
-                style: TextStyle(
-                  color: AppColors.mainAccent,
-                ),
-                // textAlign: TextAlign.center,
-              ),
-            ],
           ),
-          centerTitle: true,
+          onPressed: () => Navigator.of(context).pop(),
         ),
-        body: ListView(
+        elevation: 0,
+        backgroundColor: AppColors.mainBackground,
+      ),
+      backgroundColor: AppColors.mainBackground,
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
           children: [
             const SizedBox(
-              height: 200,
+              height: 56,
             ),
-            Padding(
+            ToggleSwitch(
-              padding: const EdgeInsets.all(16.0),
+              minWidth: double.infinity,
-              child: Column(
+              minHeight: 56,
-                children: [
+              totalSwitches: 2,
-                  const Text(
+              labels: ['Login', 'View only'],
-                    'Enter your private key',
+              activeBgColor: [AppColors.ToggleSwitchActiveBg],
-                    style: TextStyle(
+              activeFgColor: AppColors.ToggleSwitchTextActive,
-                      fontSize: 20,
+              inactiveBgColor: AppColors.ToggleSwitchBg,
-                    ),
+              inactiveFgColor: AppColors.ToggleSwitchTextInactive,
-                  ),
+              activeBorders: [
-                  const SizedBox(height: 30),
+                Border.all(
-                  TextFormField(
+                  color: AppColors.ToggleSwitchBg,
-                      decoration: const InputDecoration(
+                  width: 4,
-                        labelText: 'Enter nsec or hex',
-                        border: OutlineInputBorder(),
-                      ),
-                      maxLength: 64,
-                      controller: keyController,
-                      key: formKey,
-                      validator: (value) {
-                        if (value == null || value.isEmpty) {
-                          return 'Please enter your private key';
-                        }
-                        try {
-                          bool isValidHexKey = Nostr.instance.keysService
-                              .isValidPrivateKey(value);
-                          bool isValidNSec = value.trim().startsWith('nsec') &&
-                              Nostr.instance.keysService.isValidPrivateKey(Nostr
-                                  .instance.keysService
-                                  .decodeNsecKeyToPrivateKey(value));
-                          if (!(isValidHexKey || isValidNSec)) {
-                            return 'Your private key is not valid.';
-                          }
-                        } on ChecksumVerificationException catch (e) {
-                          return e.message;
-                        } catch (e) {
-                          return 'Error: $e';
-                        }
-                        return null;
-                      }),
-                ],
-              ),
-            ),
-            SizedBox(height: 20),
-            Padding(
-              padding: const EdgeInsets.all(16.0),
-              child: ElevatedButton(
-                style: ButtonStyle(
-                    backgroundColor:
-                        MaterialStateProperty.all(AppColors.background)),
-                child: const Text(
-                  'Login',
                 ),
-                onPressed: () {
+              ],
-                  if (formKey.currentState!.validate()) {
+              radiusStyle: true,
-                    String privateKeyHex = keyController.text.trim();
+              cornerRadius: 8,
-                    String publicKeyHex;
+              customTextStyles: [
-                    String nsecKey;
+                TextStyle(fontSize: 14, fontWeight: FontWeight.w600)
-                    String npubKey;
+              ],
-
+              onToggle: (index) {},
-                    // if (privateKeyHex.startsWith('nsec')) {
+            ),
-                    //   nsecKey = privateKeyHex;
+            SizedBox(
-                    //   final decoded = Nostr.instance.keysService
+              height: 56,
-                    //       .decodeNsecKeyToPrivateKey(privateKeyHex);
+            ),
-                    //   privateKeyHex = decoded;
+            const Text(
-                    //   publicKeyHex = Nostr.instance.keysService
+              'Login',
-                    //       .derivePublicKey(privateKey: 'privateKeyHex');
+              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
-                    //   npubKey = Nostr.instance.keysService
+            ),
-                    //       .encodePublicKeyToNpub(publicKeyHex);
+            const SizedBox(height: 13),
-                    // } else {
+            const Text(
-                    //   publicKeyHex = Nostr.instance.keysService
+              'Paste your password (AKA Private Key)',
-                    //       .derivePublicKey(privateKey: 'privateKeyHex');
+              style: TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
-                    //   nsecKey = Nostr.instance.keysService
+            ),
-                    //       .encodePrivateKeyToNsec(privateKeyHex);
+            const SizedBox(height: 24),
-                    //   npubKey = Nostr.instance.keysService
+            TextFormField(
-                    //       .encodePublicKeyToNpub(publicKeyHex);
+                decoration: const InputDecoration(
-                    // }
+                  labelText: 'nsec... / hex...',
-
+                  border: OutlineInputBorder(),
-                    if (privateKeyHex.startsWith('nsec')) {
+                ),
-                      final decoded = nip19.decode(privateKeyHex);
+                controller: keyController,
-                      privateKeyHex = decoded['data'];
+                key: formKey,
-                      publicKeyHex = keyGenerator.getPublicKey(privateKeyHex);
+                validator: (value) {
-                      nsecKey = nip19.nsecEncode(privateKeyHex);
+                  if (value == null || value.isEmpty) {
-                      npubKey = nip19.npubEncode(publicKeyHex);
+                    return 'Please enter your private key';
-                    } else {
-                      publicKeyHex = keyGenerator.getPublicKey(privateKeyHex);
-                      nsecKey = nip19.nsecEncode(privateKeyHex);
-                      npubKey = nip19.npubEncode(publicKeyHex);
-                    }
-                    try {
-                      ProfileScreenState().addKeyToStorage(
-                          privateKeyHex, publicKeyHex, nsecKey, npubKey);
-
-                      keyController.clear();
-                      ScaffoldMessenger.of(context).showSnackBar(
-                        MessageSnackBar(label: 'Congratulations! Keys Stored!'),
-                      );
-
-                      Navigator.of(context).pop(true);
-                    } catch (e) {}
-                  } else {
-                    formKey.currentState?.setState(() {});
                   }
-                },
+                  try {
+                    bool isValidHexKey =
+                        Nostr.instance.keysService.isValidPrivateKey(value);
+                    bool isValidNSec = value.trim().startsWith('nsec') &&
+                        Nostr.instance.keysService.isValidPrivateKey(Nostr
+                            .instance.keysService
+                            .decodeNsecKeyToPrivateKey(value));
+                    if (!(isValidHexKey || isValidNSec)) {
+                      return 'Your private key is not valid.';
+                    }
+                  } on ChecksumVerificationException catch (e) {
+                    return e.message;
+                  } catch (e) {
+                    return 'Error: $e';
+                  }
+                  return null;
+                }),
+            const SizedBox(height: 10),
+            Container(
+              padding: EdgeInsets.all(12),
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(8),
+                color: Colors.white,
               ),
-            )
+              height: 168,
+              child: Note.note,
+            ),
+            Expanded(child: SizedBox()),
+            SizedBox(
+                width: double.infinity,
+                height: 56,
+                child: ElevatedButton(
+                  onPressed: () {
+                    if (formKey.currentState!.validate()) {
+                      String privateKeyHex = keyController.text.trim();
+                      String publicKeyHex;
+                      String nsecKey;
+                      String npubKey;
+
+                      // if (privateKeyHex.startsWith('nsec')) {
+                      //   nsecKey = privateKeyHex;
+                      //   final decoded = Nostr.instance.keysService
+                      //       .decodeNsecKeyToPrivateKey(privateKeyHex);
+                      //   privateKeyHex = decoded;
+                      //   publicKeyHex = Nostr.instance.keysService
+                      //       .derivePublicKey(privateKey: 'privateKeyHex');
+                      //   npubKey = Nostr.instance.keysService
+                      //       .encodePublicKeyToNpub(publicKeyHex);
+                      // } else {
+                      //   publicKeyHex = Nostr.instance.keysService
+                      //       .derivePublicKey(privateKey: 'privateKeyHex');
+                      //   nsecKey = Nostr.instance.keysService
+                      //       .encodePrivateKeyToNsec(privateKeyHex);
+                      //   npubKey = Nostr.instance.keysService
+                      //       .encodePublicKeyToNpub(publicKeyHex);
+                      // }
+
+                      if (privateKeyHex.startsWith('nsec')) {
+                        final decoded = nip19.decode(privateKeyHex);
+                        privateKeyHex = decoded['data'];
+                        publicKeyHex = keyGenerator.getPublicKey(privateKeyHex);
+                        nsecKey = nip19.nsecEncode(privateKeyHex);
+                        npubKey = nip19.npubEncode(publicKeyHex);
+                      } else {
+                        publicKeyHex = keyGenerator.getPublicKey(privateKeyHex);
+                        nsecKey = nip19.nsecEncode(privateKeyHex);
+                        npubKey = nip19.npubEncode(publicKeyHex);
+                      }
+                      try {
+                        ProfileScreenState().addKeyToStorage(
+                            privateKeyHex, publicKeyHex, nsecKey, npubKey);
+
+                        keyController.clear();
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          MessageSnackBar(
+                              label: 'Congratulations! Keys Stored!'),
+                        );
+
+                        Navigator.of(context).pop(true);
+                      } catch (e) {}
+                    } else {
+                      formKey.currentState?.setState(() {});
+                    }
+                  },
+                  child: Text(
+                    'Continue',
+                    style: TextStyle(fontSize: 16),
+                  ),
+                  style: ButtonStyle(
+                      shape: MaterialStatePropertyAll(RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(100))),
+                      backgroundColor: const MaterialStatePropertyAll(
+                          AppColors.buttonPrimaryDefaultBg),
+                      foregroundColor: const MaterialStatePropertyAll(
+                          AppColors.buttonPrimaryDefaultText)),
+                )),
           ],
-        ));
+        ),
+      ),
+    );
   }
 }
+
+abstract class Note {
+  static final note = Text.rich(
+    TextSpan(
+        style: TextStyle(
+          height: 1.6,
+          fontSize: 10,
+          fontWeight: FontWeight.w400,
+        ),
+        children: <TextSpan>[
+          TextSpan(
+              text:
+                  "Your private key starts with “nsec” or “hex” and gives your full access to your account. That means, if you log in using your private key, you will be able to make posts and send and receive private messages.\n\n"
+                  "Your public key starts with “npub” and gives your view-only access to account. If you log in using your public key, you won’t be able to make posts or access private messages, but you will be able to view your feed. Go to “View only” tab to log in via your public key.")
+        ]),
+  );
+}

lib/pages/terms_of_service/button_continue.dart

@@ -0,0 +1,52 @@
+import 'package:drifter/theme/app_colors.dart';
+import 'package:flutter/material.dart';
+
+class DisabledElevatedButton extends StatelessWidget {
+  const DisabledElevatedButton({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: null,
+      child: Text(
+        'Continue',
+        style: TextStyle(fontSize: 16),
+      ),
+      style: ButtonStyle(
+          shape: MaterialStatePropertyAll(
+              RoundedRectangleBorder(borderRadius: BorderRadius.circular(100))),
+          backgroundColor:
+              const MaterialStatePropertyAll(AppColors.buttonPrimaryDisabledBg),
+          foregroundColor: const MaterialStatePropertyAll(
+              AppColors.buttonPrimaryDisabledText)),
+    );
+  }
+}
+
+class ActiveElevatedButton extends StatelessWidget {
+  const ActiveElevatedButton({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: () {
+        Navigator.pushNamed(context, '/login');
+      },
+      child: Text(
+        'Continue',
+        style: TextStyle(fontSize: 16),
+      ),
+      style: ButtonStyle(
+          shape: MaterialStatePropertyAll(
+              RoundedRectangleBorder(borderRadius: BorderRadius.circular(100))),
+          backgroundColor:
+              const MaterialStatePropertyAll(AppColors.buttonPrimaryDefaultBg),
+          foregroundColor: const MaterialStatePropertyAll(
+              AppColors.buttonPrimaryDefaultText)),
+    );
+  }
+}

lib/pages/terms_of_service/terms_of_service.dart

@@ -0,0 +1,90 @@
+import 'package:drifter/pages/terms_of_service/button_continue.dart';
+import 'package:drifter/pages/terms_of_service/terms_of_service_text.dart';
+import 'package:drifter/theme/app_colors.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/src/widgets/framework.dart';
+import 'package:flutter/src/widgets/placeholder.dart';
+
+class TermsOfServiceScreen extends StatefulWidget {
+  const TermsOfServiceScreen({super.key});
+
+  @override
+  State<TermsOfServiceScreen> createState() => _TermsOfServiceScreenState();
+}
+
+class _TermsOfServiceScreenState extends State<TermsOfServiceScreen> {
+  bool isChecked = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        leading: IconButton(
+          icon: Icon(
+            Icons.arrow_back,
+            color: AppColors.topNavIconBack,
+          ),
+          onPressed: () => Navigator.of(context).pop(),
+        ),
+        elevation: 0,
+        backgroundColor: AppColors.mainBackground,
+      ),
+      backgroundColor: AppColors.mainBackground,
+      body: Padding(
+        padding: const EdgeInsets.only(top: 10, right: 16, left: 16),
+        child: Center(
+          child: Column(children: [
+            Text(
+              'Terms of service',
+              style: TextStyle(
+                  color: Color(0xFF302F38),
+                  fontSize: 20,
+                  fontWeight: FontWeight.w600),
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: 20, bottom: 14),
+              child: Container(
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(16),
+                  color: Colors.white,
+                ),
+                height: 568,
+                child: ListView(
+                  padding: EdgeInsets.all(16),
+                  children: [TermsOfServiceText.termsOfService],
+                ),
+              ),
+            ),
+            Row(
+              children: [
+                Checkbox(
+                  shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(4)),
+                  checkColor: Colors.white,
+                  activeColor: AppColors.checkboxCheckedBg,
+                  value: isChecked,
+                  onChanged: (bool? value) {
+                    setState(() {
+                      isChecked = value!;
+                    });
+                  },
+                ),
+                const Text(
+                  'I agree to the Terms of Service and Privacy Policy',
+                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+                ),
+              ],
+            ),
+            SizedBox(
+              width: double.infinity,
+              height: 56,
+              child: isChecked
+                  ? const ActiveElevatedButton()
+                  : const DisabledElevatedButton(),
+            ),
+          ]),
+        ),
+      ),
+    );
+  }
+}

lib/pages/terms_of_service/terms_of_service_text.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+abstract class TermsOfServiceText {
+  static final termsOfService = Text.rich(
+    TextSpan(
+        style: TextStyle(
+          fontSize: 14,
+        ),
+        children: <TextSpan>[
+          TextSpan(
+              text: 'We do not collect your data\n\n',
+              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)),
+          TextSpan(
+              text:
+                  "Effective as of Jan 20, 2023 for the distributed applications in the Play Store and the F-Droid Catalogue\n\n"
+                  "The Amethyst app for Android does not collect or process any personal information from its users. The app is used to connect to third-party Nostr servers (also called Relays) that may or may not collect personal information and are not covered by this privacy policy. Each third-party relay server comes equipped with its own privacy policy and terms of use that can be viewed through the app or through that server's website. The developers of this open source project or maintainers of the distribution channels (app stores) do not have access to the data located in the user's phone. Accounts are fully maintained by the user. We do not have control over them.\n\n"
+                  "Data from connected accounts is only stored locally on the device when it is required for functionality and performance of Amethyst. This data is strictly confidental and cannot be accessed by other apps (on non-rooted devices). Phone data can be deleted by clearing Amethyst's local storage or uninstalling the app.\n\n"
+                  "You cannot use the Amethyst app for Android to submit Objectionable Content to relays. Objectionable Content includes, but is not limited to: (i) sexually explicit materials; (ii) obscene, defamatory, libelous, slanderous, violent and/or unlawful content or profanity; (iii) content that infringes upon the rights of any third party, including copyright, trademark, privacy, publicity or other personal or proprietary right, or that is deceptive or fraudulent; (iv) content that promotes the use or sale of illegal or regulated substances, tobacco products, ammunition and/or firearms; and (v) illegal content related to gambling.\n\n"
+                  "We reserve the right to modify this Privacy Policy at any time. Any modifications to this Privacy Policy will be effective upon our posting the new terms and/or upon implementation of the new changes on the Service (or as otherwise indicated at the time of posting). In all cases, your continued use of the app after the posting of any modified Privacy Policy indicates your acceptance of the terms of the modified Privacy Policy.\n\n"
+                  "If you have any questions about Amethyst or this privacy policy, you can send a message to amethyst@vitorpamplona.com")
+        ]),
+  );
+}

lib/pages/welcome_screen/welcome_screen.dart

@@ -0,0 +1,73 @@
+import 'package:drifter/theme/app_colors.dart';
+import 'package:flutter/material.dart';
+
+class WelcomeScreen extends StatelessWidget {
+  const WelcomeScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppColors.mainBackground,
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            Image(image: AssetImage('assets/images/logo/welcome.png')),
+            SizedBox(
+              height: 270,
+            ),
+            Padding(
+              padding: const EdgeInsets.only(left: 16, right: 16),
+              child: SizedBox(
+                height: 56,
+                width: double.infinity,
+                child: ElevatedButton(
+                  onPressed: () {
+                    Navigator.pushNamed(context, '/terms');
+                  },
+                  child: Text(
+                    'Login',
+                    style: TextStyle(fontSize: 16),
+                  ),
+                  style: ButtonStyle(
+                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(100))),
+                    backgroundColor: const MaterialStatePropertyAll(
+                        AppColors.buttonPrimaryDefaultBg),
+                  ),
+                ),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: SizedBox(
+                height: 56,
+                width: double.infinity,
+                child: OutlinedButton(
+                  onPressed: () {},
+                  child: Text(
+                    'Create an account',
+                    style: TextStyle(fontSize: 16),
+                  ),
+                  style: ButtonStyle(
+                      side: const MaterialStatePropertyAll(BorderSide(
+                          width: 2,
+                          color: AppColors.buttonOutlinedDefaultBorder)),
+                      shape: MaterialStatePropertyAll(RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(100))),
+                      backgroundColor: const MaterialStatePropertyAll(
+                        AppColors.mainBackground,
+                      ),
+                      foregroundColor: const MaterialStatePropertyAll(
+                          AppColors.buttonOutlinedDefaultText),
+                      overlayColor: const MaterialStatePropertyAll(
+                          AppColors.buttonOutlinedPressedBg)),
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/theme/app_colors.dart

@@ -1,9 +1,38 @@
 import 'package:flutter/material.dart';
 
 abstract class AppColors {
-  static const background = const Color(0xFF4f46f1);
+  static const background = Color(0xFF4f46f1);
-  static const mainAccent = const Color(0xFFFFCC11);
+  static const mainAccent = Color(0xFFFFCC11);
-  static const mainBackground = const Color(0xFFF2EFFF);
+  static const mainBackground = Color(0xFFF2EFFF);
+  static const buttonPrimaryDefaultBg = Color(0xFF4F46F1);
+  static const buttonPrimaryDefaultText = Color(0xFFFFFFFF);
+  static const buttonPrimaryDisabledBg = Color(0x1A18171B);
+  static const buttonPrimaryDisabledText = Color(0xFFA7A7A8);
+  static const buttonOutlinedDefaultBorder = Color(0xFF4F46F1);
+  static const buttonOutlinedDefaultText = Color(0xFF4F46F1);
+  static const buttonOutlinedPressedBg = Color(0xFFE3E0F9);
+
+// TopNav
+
+  static const topNavIconPtimary = Color(0xFF787680);
+  static const topNavText = Color(0xFF000000);
+  static const topNavIconBack = Color(0xFF4A40EC);
+  static const topNavIconBg = Color(0xFFE3E0F9);
+
+// Checkbox
+  static const checkboxCheckedIcon = Color(0xFFFFFFFF);
+  static const checkboxCheckedBg = Color(0xFF4A40EC);
+  static const checkboxEmptyBorder = Color(0xFF302F38);
+  static const checkboxTextLabel = Color(0xFF302F38);
+  static const checkboxDisabledBg = Color(0xFFB7B3F7);
+  static const checkboxDisabledIcon = Color(0xFFFFFFFF);
+
+  // ToggleSwitch
+
+  static const ToggleSwitchBg = Color(0xFFE2DFFF);
+  static const ToggleSwitchTextInactive = Color(0xFF837CA3);
+  static const ToggleSwitchActiveBg = Color(0xFFFCF8FF);
+  static const ToggleSwitchTextActive = Color(0xFF4F46F1);
 
   static const mainDarkBlue = Color.fromRGBO(3, 37, 65, 1);
   static const mainLightBlue = Color.fromRGBO(48, 86, 117, 1);

lib/utilities/assets.dart

@@ -13,4 +13,5 @@ class _SVG {
   const _SVG();
 
   String get drifterIcon => "assets/images/logo/drifter_logo_circle.svg";
+  String get welcomeImage => "assets/images/logo/welcome.svg";
 }

pubspec.lock

@@ -357,6 +357,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.99"
+  sliding_switch:
+    dependency: "direct main"
+    description:
+      name: sliding_switch
+      sha256: "049a9582c9bc30913ce4e34eb26063b468acf5fe47a053636bbf950e5b180dc0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   source_span:
     dependency: transitive
     description:
@@ -405,6 +413,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.4.16"
+  toggle_switch:
+    dependency: "direct main"
+    description:
+      name: toggle_switch
+      sha256: "9e6af1f0c5a97d9de41109dc7b9e1b3bbe73417f89b10e0e44dc834fb493d4cb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   typed_data:
     dependency: transitive
     description:

pubspec.yaml

@@ -34,7 +34,8 @@ dependencies:
   nostr_tools: ^1.0.7
   flutter_secure_storage: ^8.0.0
   flutter_svg: ^2.0.5
-
+  toggle_switch: ^2.1.0
+  sliding_switch: ^1.1.0
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
@@ -63,7 +64,7 @@ flutter:
 
   # To add assets to your application, add an assets section, like this:
   assets:
-    - assets/images/logo/
+    - assets/images/
   #   - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see