From e17e85f2643d3fafee262268a1a671a27ef9af42 Mon Sep 17 00:00:00 2001
From: Samiur Prapon <samiur.prapon@gmail.com>
Date: Thu, 15 Jul 2021 07:24:50 +0600
Subject: [PATCH] #7 Android: Registration page UI implemented

---
 android/app/src/main/AndroidManifest.xml      |   7 +-
 .../res/drawable/ic_logo_title_sub_title.xml  |  15 +
 android/app/src/main/res/font/montserrat.xml  |   7 +
 .../app/src/main/res/font/montserrat_bold.xml |   7 +
 .../main/res/layout/activity_registration.xml | 374 +++++++++++-------
 .../app/src/main/res/values-night/themes.xml  |   3 +-
 android/app/src/main/res/values/colors.xml    |   5 +
 .../src/main/res/values/preloaded_fonts.xml   |   2 +
 android/app/src/main/res/values/strings.xml   |   6 +-
 android/app/src/main/res/values/themes.xml    |  11 +-
 10 files changed, 277 insertions(+), 160 deletions(-)
 create mode 100644 android/app/src/main/res/drawable/ic_logo_title_sub_title.xml
 create mode 100644 android/app/src/main/res/font/montserrat.xml
 create mode 100644 android/app/src/main/res/font/montserrat_bold.xml

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 8a4ad1df..06cb0a4c 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -22,14 +22,17 @@
 
         <activity
             android:name=".SplashActivity"
-            android:launchMode="singleTask"
-            android:screenOrientation="portrait">
+            android:launchMode="singleTask">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
+
+        <meta-data
+            android:name="preloaded_fonts"
+            android:resource="@array/preloaded_fonts" />
     </application>
 
 </manifest>
\ No newline at end of file
diff --git a/android/app/src/main/res/drawable/ic_logo_title_sub_title.xml b/android/app/src/main/res/drawable/ic_logo_title_sub_title.xml
new file mode 100644
index 00000000..389663ca
--- /dev/null
+++ b/android/app/src/main/res/drawable/ic_logo_title_sub_title.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="168dp"
+    android:height="97dp"
+    android:viewportWidth="168"
+    android:viewportHeight="97">
+  <path
+      android:pathData="M14.53,75L14.5,69.435L11.8,73.965H10.48L7.795,69.585V75H5.05V64.5H7.495L11.185,70.56L14.785,64.5H17.23L17.26,75H14.53ZM22.691,66.735C24.042,66.735 25.072,67.045 25.781,67.665C26.492,68.275 26.847,69.215 26.847,70.485V75H24.191V73.95C23.781,74.74 22.982,75.135 21.792,75.135C21.162,75.135 20.617,75.025 20.156,74.805C19.697,74.585 19.347,74.29 19.107,73.92C18.876,73.54 18.761,73.11 18.761,72.63C18.761,71.86 19.056,71.265 19.646,70.845C20.236,70.415 21.146,70.2 22.376,70.2H23.997C23.947,69.34 23.372,68.91 22.271,68.91C21.882,68.91 21.486,68.975 21.087,69.105C20.687,69.225 20.347,69.395 20.066,69.615L19.107,67.68C19.556,67.38 20.101,67.15 20.742,66.99C21.392,66.82 22.042,66.735 22.691,66.735ZM22.587,73.335C22.917,73.335 23.206,73.255 23.456,73.095C23.706,72.935 23.886,72.7 23.997,72.39V71.685H22.767C21.937,71.685 21.521,71.96 21.521,72.51C21.521,72.76 21.617,72.96 21.806,73.11C21.997,73.26 22.257,73.335 22.587,73.335ZM32.335,72.15L31.496,73.005V75H28.646V63.87H31.496V69.705L34.405,66.87H37.78L34.405,70.35L38.065,75H34.616L32.335,72.15ZM46.873,70.95C46.873,70.97 46.857,71.205 46.827,71.655H40.917C41.037,72.075 41.268,72.4 41.607,72.63C41.958,72.85 42.393,72.96 42.912,72.96C43.303,72.96 43.638,72.905 43.917,72.795C44.208,72.685 44.498,72.505 44.787,72.255L46.287,73.815C45.498,74.695 44.342,75.135 42.822,75.135C41.873,75.135 41.037,74.955 40.318,74.595C39.597,74.235 39.037,73.735 38.638,73.095C38.248,72.455 38.053,71.73 38.053,70.92C38.053,70.12 38.243,69.405 38.623,68.775C39.013,68.135 39.548,67.635 40.228,67.275C40.908,66.915 41.673,66.735 42.522,66.735C43.333,66.735 44.068,66.905 44.728,67.245C45.388,67.575 45.908,68.06 46.287,68.7C46.678,69.33 46.873,70.08 46.873,70.95ZM42.537,68.76C42.097,68.76 41.728,68.885 41.428,69.135C41.138,69.385 40.952,69.725 40.873,70.155H44.202C44.123,69.725 43.932,69.385 43.632,69.135C43.342,68.885 42.978,68.76 42.537,68.76ZM52.552,63.87H55.402V75H52.552V63.87ZM65.564,70.95C65.564,70.97 65.549,71.205 65.519,71.655H59.609C59.729,72.075 59.959,72.4 60.299,72.63C60.649,72.85 61.084,72.96 61.604,72.96C61.994,72.96 62.329,72.905 62.609,72.795C62.899,72.685 63.189,72.505 63.479,72.255L64.979,73.815C64.189,74.695 63.034,75.135 61.514,75.135C60.564,75.135 59.729,74.955 59.009,74.595C58.289,74.235 57.729,73.735 57.329,73.095C56.939,72.455 56.744,71.73 56.744,70.92C56.744,70.12 56.934,69.405 57.314,68.775C57.704,68.135 58.239,67.635 58.919,67.275C59.599,66.915 60.364,66.735 61.214,66.735C62.024,66.735 62.759,66.905 63.419,67.245C64.079,67.575 64.599,68.06 64.979,68.7C65.369,69.33 65.564,70.08 65.564,70.95ZM61.229,68.76C60.789,68.76 60.419,68.885 60.119,69.135C59.829,69.385 59.644,69.725 59.564,70.155H62.894C62.814,69.725 62.624,69.385 62.324,69.135C62.034,68.885 61.669,68.76 61.229,68.76ZM70.123,66.735C71.473,66.735 72.503,67.045 73.213,67.665C73.923,68.275 74.278,69.215 74.278,70.485V75H71.623V73.95C71.213,74.74 70.413,75.135 69.223,75.135C68.593,75.135 68.048,75.025 67.588,74.805C67.128,74.585 66.778,74.29 66.538,73.92C66.308,73.54 66.193,73.11 66.193,72.63C66.193,71.86 66.488,71.265 67.078,70.845C67.668,70.415 68.578,70.2 69.808,70.2H71.428C71.378,69.34 70.803,68.91 69.703,68.91C69.313,68.91 68.918,68.975 68.518,69.105C68.118,69.225 67.778,69.395 67.498,69.615L66.538,67.68C66.988,67.38 67.533,67.15 68.173,66.99C68.823,66.82 69.473,66.735 70.123,66.735ZM70.018,73.335C70.348,73.335 70.638,73.255 70.888,73.095C71.138,72.935 71.318,72.7 71.428,72.39V71.685H70.198C69.368,71.685 68.953,71.96 68.953,72.51C68.953,72.76 69.048,72.96 69.238,73.11C69.428,73.26 69.688,73.335 70.018,73.335ZM78.792,67.845C79.082,67.475 79.457,67.2 79.917,67.02C80.387,66.83 80.922,66.735 81.522,66.735V69.3C81.262,69.27 81.047,69.255 80.877,69.255C80.267,69.255 79.787,69.42 79.437,69.75C79.097,70.08 78.927,70.585 78.927,71.265V75H76.077V66.87H78.792V67.845ZM87.993,66.735C89.003,66.735 89.813,67.035 90.423,67.635C91.043,68.235 91.353,69.14 91.353,70.35V75H88.503V70.815C88.503,69.705 88.058,69.15 87.168,69.15C86.678,69.15 86.283,69.31 85.983,69.63C85.693,69.95 85.548,70.43 85.548,71.07V75H82.698V66.87H85.413V67.755C85.733,67.425 86.113,67.175 86.553,67.005C86.993,66.825 87.473,66.735 87.993,66.735ZM93.143,66.87H95.993V75H93.143V66.87ZM94.567,65.97C94.048,65.97 93.628,65.825 93.308,65.535C92.988,65.245 92.827,64.885 92.827,64.455C92.827,64.025 92.988,63.665 93.308,63.375C93.628,63.085 94.048,62.94 94.567,62.94C95.088,62.94 95.507,63.08 95.827,63.36C96.147,63.63 96.308,63.98 96.308,64.41C96.308,64.86 96.147,65.235 95.827,65.535C95.507,65.825 95.088,65.97 94.567,65.97ZM103.14,66.735C104.15,66.735 104.96,67.035 105.57,67.635C106.19,68.235 106.5,69.14 106.5,70.35V75H103.65V70.815C103.65,69.705 103.205,69.15 102.315,69.15C101.825,69.15 101.43,69.31 101.13,69.63C100.84,69.95 100.695,70.43 100.695,71.07V75H97.845V66.87H100.56V67.755C100.88,67.425 101.26,67.175 101.7,67.005C102.14,66.825 102.62,66.735 103.14,66.735ZM117.151,66.87V73.515C117.151,75.025 116.741,76.155 115.921,76.905C115.101,77.665 113.921,78.045 112.381,78.045C111.581,78.045 110.831,77.955 110.131,77.775C109.431,77.595 108.836,77.33 108.346,76.98L109.381,74.985C109.711,75.255 110.126,75.465 110.626,75.615C111.136,75.775 111.636,75.855 112.126,75.855C112.876,75.855 113.426,75.69 113.776,75.36C114.126,75.03 114.301,74.54 114.301,73.89V73.62C113.751,74.26 112.946,74.58 111.886,74.58C111.166,74.58 110.501,74.42 109.891,74.1C109.281,73.77 108.796,73.31 108.436,72.72C108.076,72.12 107.896,71.43 107.896,70.65C107.896,69.88 108.076,69.2 108.436,68.61C108.796,68.01 109.281,67.55 109.891,67.23C110.501,66.9 111.166,66.735 111.886,66.735C113.046,66.735 113.896,67.11 114.436,67.86V66.87H117.151ZM112.561,72.315C113.071,72.315 113.491,72.16 113.821,71.85C114.161,71.54 114.331,71.14 114.331,70.65C114.331,70.16 114.166,69.765 113.836,69.465C113.506,69.155 113.081,69 112.561,69C112.041,69 111.611,69.155 111.271,69.465C110.941,69.765 110.776,70.16 110.776,70.65C110.776,71.14 110.946,71.54 111.286,71.85C111.626,72.16 112.051,72.315 112.561,72.315ZM126.453,67.17H128.388V69.3H126.528V75H123.678V69.3H122.493V67.17H123.678V66.96C123.678,65.97 123.973,65.185 124.563,64.605C125.163,64.025 125.998,63.735 127.068,63.735C127.428,63.735 127.778,63.77 128.118,63.84C128.458,63.91 128.738,64.015 128.958,64.155L128.253,66.165C127.973,66.005 127.688,65.925 127.398,65.925C127.098,65.925 126.863,66.015 126.693,66.195C126.533,66.375 126.453,66.64 126.453,66.99V67.17ZM137.991,66.87V75H135.276V74.13C134.976,74.46 134.616,74.71 134.196,74.88C133.776,75.05 133.331,75.135 132.861,75.135C131.811,75.135 130.971,74.825 130.341,74.205C129.721,73.585 129.411,72.655 129.411,71.415V66.87H132.261V70.95C132.261,71.56 132.376,72.005 132.606,72.285C132.836,72.565 133.171,72.705 133.611,72.705C134.061,72.705 134.426,72.55 134.706,72.24C134.996,71.92 135.141,71.435 135.141,70.785V66.87H137.991ZM145.122,66.735C146.132,66.735 146.942,67.035 147.552,67.635C148.172,68.235 148.482,69.14 148.482,70.35V75H145.632V70.815C145.632,69.705 145.187,69.15 144.297,69.15C143.807,69.15 143.412,69.31 143.112,69.63C142.822,69.95 142.677,70.43 142.677,71.07V75H139.827V66.87H142.542V67.755C142.862,67.425 143.242,67.175 143.682,67.005C144.122,66.825 144.602,66.735 145.122,66.735ZM149.926,64.5H153.316L152.746,71.175H150.481L149.926,64.5ZM151.621,75.135C151.121,75.135 150.711,74.985 150.391,74.685C150.071,74.375 149.911,74 149.911,73.56C149.911,73.11 150.071,72.74 150.391,72.45C150.711,72.16 151.121,72.015 151.621,72.015C152.121,72.015 152.526,72.16 152.836,72.45C153.156,72.74 153.316,73.11 153.316,73.56C153.316,74 153.156,74.375 152.836,74.685C152.516,74.985 152.111,75.135 151.621,75.135Z"
+      android:fillColor="#2F281E"/>
+  <path
+      android:pathData="M1.584,40.608C1.584,37.92 2.112,35.536 3.168,33.456C4.256,31.376 5.712,29.776 7.536,28.656C9.392,27.536 11.456,26.976 13.728,26.976C15.712,26.976 17.44,27.376 18.912,28.176C20.416,28.976 21.616,29.984 22.512,31.2V27.408H29.28V54H22.512V50.112C21.648,51.36 20.448,52.4 18.912,53.232C17.408,54.032 15.664,54.432 13.68,54.432C11.44,54.432 9.392,53.856 7.536,52.704C5.712,51.552 4.256,49.936 3.168,47.856C2.112,45.744 1.584,43.328 1.584,40.608ZM22.512,40.704C22.512,39.072 22.192,37.68 21.552,36.528C20.912,35.344 20.048,34.448 18.96,33.84C17.872,33.2 16.704,32.88 15.456,32.88C14.208,32.88 13.056,33.184 12,33.792C10.944,34.4 10.08,35.296 9.408,36.48C8.768,37.632 8.448,39.008 8.448,40.608C8.448,42.208 8.768,43.616 9.408,44.832C10.08,46.016 10.944,46.928 12,47.568C13.088,48.208 14.24,48.528 15.456,48.528C16.704,48.528 17.872,48.224 18.96,47.616C20.048,46.976 20.912,46.08 21.552,44.928C22.192,43.744 22.512,42.336 22.512,40.704ZM59.563,40.128C59.563,41.088 59.499,41.952 59.371,42.72H39.931C40.091,44.64 40.763,46.144 41.947,47.232C43.131,48.32 44.587,48.864 46.315,48.864C48.811,48.864 50.587,47.792 51.643,45.648H58.891C58.123,48.208 56.651,50.32 54.475,51.984C52.299,53.616 49.627,54.432 46.459,54.432C43.899,54.432 41.595,53.872 39.547,52.752C37.531,51.6 35.947,49.984 34.795,47.904C33.675,45.824 33.115,43.424 33.115,40.704C33.115,37.952 33.675,35.536 34.795,33.456C35.915,31.376 37.483,29.776 39.499,28.656C41.515,27.536 43.835,26.976 46.459,26.976C48.987,26.976 51.243,27.52 53.227,28.608C55.243,29.696 56.795,31.248 57.883,33.264C59.003,35.248 59.563,37.536 59.563,40.128ZM52.603,38.208C52.571,36.48 51.947,35.104 50.731,34.08C49.515,33.024 48.027,32.496 46.267,32.496C44.603,32.496 43.195,33.008 42.043,34.032C40.923,35.024 40.235,36.416 39.979,38.208H52.603ZM71.292,32.928V45.792C71.292,46.688 71.5,47.344 71.916,47.76C72.364,48.144 73.1,48.336 74.124,48.336H77.244V54H73.02C67.356,54 64.524,51.248 64.524,45.744V32.928H61.356V27.408H64.524V20.832H71.292V27.408H77.244V32.928H71.292ZM96.054,27.024C98.07,27.024 99.862,27.472 101.43,28.368C102.998,29.232 104.214,30.528 105.078,32.256C105.974,33.952 106.422,36 106.422,38.4V54H99.702V39.312C99.702,37.2 99.174,35.584 98.118,34.464C97.062,33.312 95.622,32.736 93.798,32.736C91.942,32.736 90.47,33.312 89.382,34.464C88.326,35.584 87.798,37.2 87.798,39.312V54H81.078V18.48H87.798V30.72C88.662,29.568 89.814,28.672 91.254,28.032C92.694,27.36 94.294,27.024 96.054,27.024ZM136.532,40.128C136.532,41.088 136.468,41.952 136.34,42.72H116.9C117.06,44.64 117.732,46.144 118.916,47.232C120.1,48.32 121.556,48.864 123.284,48.864C125.78,48.864 127.556,47.792 128.612,45.648H135.86C135.092,48.208 133.62,50.32 131.444,51.984C129.268,53.616 126.596,54.432 123.428,54.432C120.868,54.432 118.564,53.872 116.516,52.752C114.5,51.6 112.916,49.984 111.764,47.904C110.644,45.824 110.084,43.424 110.084,40.704C110.084,37.952 110.644,35.536 111.764,33.456C112.884,31.376 114.452,29.776 116.468,28.656C118.484,27.536 120.804,26.976 123.428,26.976C125.956,26.976 128.212,27.52 130.196,28.608C132.212,29.696 133.764,31.248 134.852,33.264C135.972,35.248 136.532,37.536 136.532,40.128ZM129.572,38.208C129.54,36.48 128.916,35.104 127.7,34.08C126.484,33.024 124.996,32.496 123.236,32.496C121.572,32.496 120.164,33.008 119.012,34.032C117.892,35.024 117.204,36.416 116.948,38.208H129.572ZM147.157,31.536C148.021,30.128 149.141,29.024 150.517,28.224C151.925,27.424 153.525,27.024 155.317,27.024V34.08H153.541C151.429,34.08 149.829,34.576 148.741,35.568C147.685,36.56 147.157,38.288 147.157,40.752V54H140.437V27.408H147.157V31.536Z"
+      android:fillColor="#2F281E"/>
+  <path
+      android:pathData="M161.819,54.336C160.603,54.336 159.595,53.968 158.795,53.232C158.027,52.464 157.643,51.52 157.643,50.4C157.643,49.28 158.027,48.352 158.795,47.616C159.595,46.848 160.603,46.464 161.819,46.464C163.003,46.464 163.979,46.848 164.747,47.616C165.515,48.352 165.899,49.28 165.899,50.4C165.899,51.52 165.515,52.464 164.747,53.232C163.979,53.968 163.003,54.336 161.819,54.336Z"
+      android:fillColor="#FF7C5D"/>
+</vector>
diff --git a/android/app/src/main/res/font/montserrat.xml b/android/app/src/main/res/font/montserrat.xml
new file mode 100644
index 00000000..0421f22c
--- /dev/null
+++ b/android/app/src/main/res/font/montserrat.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto"
+        app:fontProviderAuthority="com.google.android.gms.fonts"
+        app:fontProviderPackage="com.google.android.gms"
+        app:fontProviderQuery="Montserrat"
+        app:fontProviderCerts="@array/com_google_android_gms_fonts_certs">
+</font-family>
diff --git a/android/app/src/main/res/font/montserrat_bold.xml b/android/app/src/main/res/font/montserrat_bold.xml
new file mode 100644
index 00000000..afbba1bf
--- /dev/null
+++ b/android/app/src/main/res/font/montserrat_bold.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<font-family xmlns:app="http://schemas.android.com/apk/res-auto"
+        app:fontProviderAuthority="com.google.android.gms.fonts"
+        app:fontProviderPackage="com.google.android.gms"
+        app:fontProviderQuery="name=Montserrat&amp;weight=700"
+        app:fontProviderCerts="@array/com_google_android_gms_fonts_certs">
+</font-family>
diff --git a/android/app/src/main/res/layout/activity_registration.xml b/android/app/src/main/res/layout/activity_registration.xml
index fff6fc33..18a2f168 100644
--- a/android/app/src/main/res/layout/activity_registration.xml
+++ b/android/app/src/main/res/layout/activity_registration.xml
@@ -5,166 +5,238 @@
   ~
   -->
 
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".views.RegistrationActivity">
 
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
 
-    <com.google.android.material.textfield.TextInputLayout
-        android:id="@+id/til_email"
-        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center_horizontal"
-        android:layout_marginTop="48dp"
-        android:labelFor="@id/et_email"
-        app:boxStrokeErrorColor="@color/red_800"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:layout_constraintWidth_percent=".80"
-        app:startIconDrawable="@drawable/outline_email_24">
-
-        <com.google.android.material.textfield.TextInputEditText
-            android:id="@+id/et_email"
-            android:layout_width="match_parent"
+        <androidx.appcompat.widget.AppCompatImageView
+            android:id="@+id/appCompatImageView"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:fontFamily="@font/roboto"
-            android:hint="@string/title_email_address"
-            android:importantForAutofill="no"
-            android:inputType="textEmailAddress"
-            android:maxLines="1" />
-
-    </com.google.android.material.textfield.TextInputLayout>
-
-    <com.google.android.material.textfield.TextInputLayout
-        android:id="@+id/til_password"
-        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center_horizontal"
-        android:layout_marginTop="24dp"
-        android:labelFor="@id/et_password"
-        app:layout_constraintEnd_toEndOf="@+id/til_email"
-        app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toStartOf="@+id/til_email"
-        app:layout_constraintTop_toBottomOf="@+id/til_email"
-        app:passwordToggleDrawable="@drawable/toggle_password"
-        app:passwordToggleEnabled="true"
-        app:startIconDrawable="@drawable/outline_password_24">
-
-        <com.google.android.material.textfield.TextInputEditText
-            android:id="@+id/et_password"
-            android:layout_width="match_parent"
+            android:layout_marginStart="24dp"
+            android:layout_marginTop="32dp"
+            android:src="@drawable/ic_logo_title_sub_title"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.041"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <androidx.appcompat.widget.AppCompatTextView
+            android:id="@+id/appCompatTextView"
+            android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:fontFamily="@font/roboto"
-            android:hint="@string/title_password"
-            android:importantForAutofill="no"
-            android:inputType="textPassword"
-            android:maxLines="1" />
-
-    </com.google.android.material.textfield.TextInputLayout>
-
-
-    <com.google.android.material.textfield.TextInputLayout
-        android:id="@+id/til_confirm_password"
-        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center_horizontal"
-        android:layout_marginTop="24dp"
-        android:labelFor="@id/et_password"
-        app:layout_constraintEnd_toEndOf="@+id/til_password"
-        app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toStartOf="@+id/til_password"
-        app:layout_constraintTop_toBottomOf="@+id/til_password"
-        app:passwordToggleDrawable="@drawable/toggle_password"
-        app:passwordToggleEnabled="true"
-        app:startIconDrawable="@drawable/outline_password_24">
-
-        <com.google.android.material.textfield.TextInputEditText
-            android:id="@+id/et_confirm_password"
+            android:layout_marginTop="4dp"
+            android:fontFamily="@font/montserrat_bold"
+            android:text="@string/title_create_an_account"
+            android:textAlignment="textStart"
+            android:textSize="28sp"
+            app:layout_constraintStart_toStartOf="@+id/appCompatImageView"
+            app:layout_constraintTop_toBottomOf="@+id/appCompatImageView"
+            app:lineHeight="34sp" />
+
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/til_email"
+            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:fontFamily="@font/roboto"
-            android:hint="@string/title_password"
-            android:importantForAutofill="no"
-            android:inputType="textPassword"
-            android:maxLines="1" />
-
-    </com.google.android.material.textfield.TextInputLayout>
-
-
-    <TextView
-        android:id="@+id/tv_user_type"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="24dp"
-        android:fontFamily="@font/roboto"
-        android:text="@string/title_select_user_type"
-        android:textColor="@color/text_gray"
-        android:textSize="14sp"
-        app:layout_constraintEnd_toEndOf="@+id/til_confirm_password"
-        app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toStartOf="@+id/til_confirm_password"
-        app:layout_constraintTop_toBottomOf="@+id/til_confirm_password" />
-
-    <RadioGroup
-        android:id="@+id/radioGroup"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="8dp"
-        android:checkedButton="@id/rb_student"
-        android:orientation="horizontal"
-        android:weightSum="2"
-        app:layout_constraintEnd_toEndOf="@+id/til_confirm_password"
-        app:layout_constraintStart_toStartOf="@+id/til_confirm_password"
-        app:layout_constraintTop_toBottomOf="@+id/tv_user_type">
-
-        <com.google.android.material.radiobutton.MaterialRadioButton
-            android:id="@+id/rb_student"
-            style="Widget.MaterialComponents.CompoundButton.RadioButton"
-            android:layout_width="?attr/minTouchTargetSize"
-            android:layout_height="?attr/minTouchTargetSize"
-            android:layout_marginEnd="8dp"
-            android:layout_weight="1"
-            android:text="@string/student"
-            android:textAlignment="center"
+            android:layout_gravity="center_horizontal"
+            android:layout_marginStart="24dp"
+            android:layout_marginTop="18dp"
+            android:layout_marginEnd="24dp"
+            android:labelFor="@id/et_email"
+            app:boxStrokeErrorColor="@color/red_800"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/appCompatTextView"
+            app:layout_constraintWidth_percent=".80"
+            app:startIconDrawable="@drawable/outline_email_24">
+
+            <com.google.android.material.textfield.TextInputEditText
+                android:id="@+id/et_email"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/montserrat"
+                android:hint="@string/title_email_address"
+                android:importantForAutofill="no"
+                android:inputType="textEmailAddress"
+                android:maxLines="1"
+                android:textColor="#2F281E"
+                android:textSize="16sp" />
+
+        </com.google.android.material.textfield.TextInputLayout>
+
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/til_password"
+            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_horizontal"
+            android:layout_marginTop="14dp"
+            android:labelFor="@id/et_password"
+            app:layout_constraintEnd_toEndOf="@+id/til_email"
+            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintStart_toStartOf="@+id/til_email"
+            app:layout_constraintTop_toBottomOf="@+id/til_email"
+            app:passwordToggleDrawable="@drawable/toggle_password"
+            app:passwordToggleEnabled="true"
+            app:startIconDrawable="@drawable/outline_password_24">
+
+            <com.google.android.material.textfield.TextInputEditText
+                android:id="@+id/et_password"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/montserrat"
+                android:hint="@string/title_password"
+                android:importantForAutofill="no"
+                android:inputType="textPassword"
+                android:maxLines="1"
+                android:textColor="#2F281E"
+                android:textSize="16sp" />
+
+        </com.google.android.material.textfield.TextInputLayout>
+
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/til_confirm_password"
+            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_horizontal"
+            android:layout_marginTop="14dp"
+            android:labelFor="@id/et_password"
+            app:layout_constraintEnd_toEndOf="@+id/til_password"
+            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintStart_toStartOf="@+id/til_password"
+            app:layout_constraintTop_toBottomOf="@+id/til_password"
+            app:passwordToggleDrawable="@drawable/toggle_password"
+            app:passwordToggleEnabled="true"
+            app:startIconDrawable="@drawable/outline_password_24">
+
+            <com.google.android.material.textfield.TextInputEditText
+                android:id="@+id/et_confirm_password"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/montserrat"
+                android:hint="@string/title_password"
+                android:importantForAutofill="no"
+                android:inputType="textPassword"
+                android:maxLines="1"
+                android:textColor="#2F281E"
+                android:textSize="16sp" />
+
+        </com.google.android.material.textfield.TextInputLayout>
+
+        <TextView
+            android:id="@+id/tv_user_type"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="16dp"
+            android:fontFamily="@font/montserrat"
+            android:text="@string/title_select_user_type"
+            android:textColor="@color/text_gray"
+            android:textSize="16sp"
+            app:layout_constraintEnd_toEndOf="@+id/til_confirm_password"
+            app:layout_constraintHorizontal_bias="0.0"
+            app:layout_constraintStart_toStartOf="@+id/til_confirm_password"
+            app:layout_constraintTop_toBottomOf="@+id/til_confirm_password" />
+
+        <RadioGroup
+            android:id="@+id/radioGroup"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_margin="4dp"
+            android:checkedButton="@id/rb_student"
+            android:orientation="horizontal"
+            android:weightSum="2"
+            app:layout_constraintEnd_toEndOf="@+id/til_confirm_password"
+            app:layout_constraintStart_toStartOf="@+id/til_confirm_password"
+            app:layout_constraintTop_toBottomOf="@+id/tv_user_type">
+
+            <com.google.android.material.radiobutton.MaterialRadioButton
+                android:id="@+id/rb_student"
+                style="Widget.MaterialComponents.CompoundButton.RadioButton"
+                android:layout_width="?attr/minTouchTargetSize"
+                android:layout_height="?attr/minTouchTargetSize"
+                android:layout_marginEnd="8dp"
+                android:layout_weight="1"
+                android:fontFamily="@font/montserrat"
+                android:padding="12dp"
+                android:text="@string/student"
+                android:textAlignment="textStart"
+                android:textAllCaps="false"
+                app:useMaterialThemeColors="true" />
+
+            <com.google.android.material.radiobutton.MaterialRadioButton
+                android:id="@+id/rb_teacher"
+                style="Widget.MaterialComponents.CompoundButton.RadioButton"
+                android:layout_width="?attr/minTouchTargetSize"
+                android:layout_height="?attr/minTouchTargetSize"
+                android:layout_marginStart="8dp"
+                android:layout_weight="1"
+                android:fontFamily="@font/montserrat"
+                android:padding="12dp"
+                android:text="@string/teacher"
+                android:textAlignment="textStart"
+                android:textAllCaps="false" />
+
+        </RadioGroup>
+
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/mb_sign_up"
+            style="@style/Widget.MaterialComponents.Button"
+            android:layout_width="0dp"
+            android:layout_height="49dp"
+            android:layout_marginTop="32dp"
+            android:background="@color/main_color"
+            android:fontFamily="@font/montserrat_bold"
+            android:text="@string/title_register"
             android:textAllCaps="false"
-            app:useMaterialThemeColors="true" />
-
-        <com.google.android.material.radiobutton.MaterialRadioButton
-            android:id="@+id/rb_teacher"
-            style="Widget.MaterialComponents.CompoundButton.RadioButton"
-            android:layout_width="?attr/minTouchTargetSize"
-            android:layout_height="?attr/minTouchTargetSize"
-            android:layout_marginStart="8dp"
-            android:layout_weight="1"
-            android:text="@string/teacher"
-            android:textAlignment="center"
-            android:textAllCaps="false" />
-
-    </RadioGroup>
-
-
-    <com.google.android.material.button.MaterialButton
-        android:id="@+id/mb_sign_up"
-        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginBottom="48dp"
-        android:fontFamily="@font/roboto"
-        android:text="Signup"
-        android:textSize="21sp"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="@+id/til_confirm_password"
-        app:layout_constraintHorizontal_bias="1.0"
-        app:layout_constraintStart_toStartOf="@+id/til_confirm_password"
-        app:layout_constraintTop_toBottomOf="@+id/radioGroup"
-        app:layout_constraintVertical_bias="0.24" />
-
-
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+            android:textColor="@color/white"
+            android:textSize="18sp"
+            app:layout_constraintEnd_toEndOf="@+id/til_confirm_password"
+            app:layout_constraintHorizontal_bias="1.0"
+            app:layout_constraintStart_toStartOf="@+id/til_confirm_password"
+            app:layout_constraintTop_toBottomOf="@+id/radioGroup" />
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="48dp"
+            android:layout_marginTop="24dp"
+            android:layout_marginBottom="32dp"
+            android:gravity="center"
+            android:orientation="horizontal"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="@+id/mb_sign_up"
+            app:layout_constraintStart_toStartOf="@+id/mb_sign_up"
+            app:layout_constraintTop_toBottomOf="@+id/mb_sign_up"
+            app:layout_constraintVertical_bias="0.120000005">
+
+            <androidx.appcompat.widget.AppCompatTextView
+                android:id="@+id/tile_member"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:fontFamily="@font/montserrat"
+                android:text="@string/title_existing_member"
+                android:textAlignment="textStart"
+                android:textColor="#3C3C43"
+                android:textSize="16sp"
+                app:lineHeight="34sp" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/mb_sign_in"
+                style="@style/Widget.MaterialComponents.Button.TextButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/sign_in"
+                android:textColor="@color/text_color_dark" />
+        </LinearLayout>
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</ScrollView>
\ No newline at end of file
diff --git a/android/app/src/main/res/values-night/themes.xml b/android/app/src/main/res/values-night/themes.xml
index 32b36e76..26925de7 100644
--- a/android/app/src/main/res/values-night/themes.xml
+++ b/android/app/src/main/res/values-night/themes.xml
@@ -17,7 +17,8 @@
         <item name="colorSecondaryVariant">@color/teal_200</item>
         <item name="colorOnSecondary">@color/black</item>
         <!-- Status bar color. -->
-        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
+        <item name="android:statusBarColor" tools:targetApi="l">@color/black</item>
+        <item name="android:windowLightStatusBar">false</item>
         <!-- Customize your theme here. -->
     </style>
 </resources>
\ No newline at end of file
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
index ab3436ee..01146b07 100644
--- a/android/app/src/main/res/values/colors.xml
+++ b/android/app/src/main/res/values/colors.xml
@@ -18,6 +18,11 @@
     <color name="_7">#FDE69E</color>
     <color name="_8">#91B1E7</color>
 
+    <color name="main_color">#F37172</color>
+    <color name="text_color_dark">#F37179</color>
+    <color name="border_color">#F37172</color>
+    <color name="black_text">#2F281E</color>
+
     <color name="text_gray">#636364</color>
 
     <!--Material color list from https://material.io/guidelines/style/color.html-->
diff --git a/android/app/src/main/res/values/preloaded_fonts.xml b/android/app/src/main/res/values/preloaded_fonts.xml
index b182313d..e09249dd 100644
--- a/android/app/src/main/res/values/preloaded_fonts.xml
+++ b/android/app/src/main/res/values/preloaded_fonts.xml
@@ -8,6 +8,8 @@
 
 <resources>
     <array name="preloaded_fonts" translatable="false">
+        <item>@font/montserrat</item>
+        <item>@font/montserrat_bold</item>
         <item>@font/roboto</item>
     </array>
 </resources>
diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml
index 1922c08d..cb016287 100644
--- a/android/app/src/main/res/values/strings.xml
+++ b/android/app/src/main/res/values/strings.xml
@@ -11,8 +11,12 @@
     <string name="title_email_address">Email</string>
     <string name="title_password">Password</string>
     <string name="title_re_type_password">Re-type password</string>
-    <string name="title_select_user_type">You are a -</string>
+    <string name="title_select_user_type">I am -</string>
     <string name="student">Student</string>
     <string name="teacher">Teacher</string>
+    <string name="title_create_an_account">Create an Account</string>
+    <string name="title_register">Register</string>
+    <string name="title_existing_member">Already a member?</string>
+    <string name="sign_in">Sign in</string>
 
 </resources>
\ No newline at end of file
diff --git a/android/app/src/main/res/values/themes.xml b/android/app/src/main/res/values/themes.xml
index e9e918f4..e4efeb09 100644
--- a/android/app/src/main/res/values/themes.xml
+++ b/android/app/src/main/res/values/themes.xml
@@ -9,15 +9,16 @@
     <!-- Base application theme. -->
     <style name="Theme.Aether" parent="Theme.MaterialComponents.Light.NoActionBar">
         <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/_8</item>
-        <item name="colorPrimaryVariant">@color/_7</item>
-        <item name="colorOnPrimary">@color/overlay_dark_60</item>
+        <item name="colorPrimary">@color/main_color</item>
+        <item name="colorPrimaryVariant">@color/main_color</item>
+        <item name="colorOnPrimary">@color/black_text</item>
         <!-- Secondary brand color. -->
-        <item name="colorSecondary">@color/_3</item>
+        <item name="colorSecondary">@color/main_color</item>
         <item name="colorSecondaryVariant">@color/_5</item>
         <item name="colorOnSecondary">@color/overlay_dark_60</item>
         <!-- Status bar color. -->
-        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
+        <item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
+        <item name="android:windowLightStatusBar">true</item>
         <!-- Customize your theme here. -->
     </style>
 </resources>
\ No newline at end of file