Theming and App bar.

2024-11-22 17:14:32 +01:00 · 2020-12-28 21:57:23 +05:30 · 2020-12-28 21:57:23 +05:30 · fa2c295a8b
commit fa2c295a8b
parent 89c45e0de7
33 changed files with 305 additions and 320 deletions
--- a/app/build.gradle
+++ b/app/build.gradle
@ -51,6 +51,19 @@ android {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.4.21'
    }
+
+    packagingOptions {
+        exclude 'META-INF/DEPENDENCIES'
+        exclude 'META-INF/LICENSE'
+        exclude 'META-INF/LICENSE.txt'
+        exclude 'META-INF/license.txt'
+        exclude 'META-INF/NOTICE'
+        exclude 'META-INF/NOTICE.txt'
+        exclude 'META-INF/notice.txt'
+        exclude 'META-INF/ASL2.0'
+        exclude 'META-INF/LGPL2.1'
+        exclude("META-INF/*.kotlin_module")
+    }
 }

 dependencies {
@ -59,7 +72,6 @@ dependencies {
    implementation "androidx.core:core-ktx:1.5.0-alpha05"
    implementation "androidx.palette:palette-ktx:1.0.0"
    implementation 'androidx.appcompat:appcompat:1.2.0'
-    implementation 'com.google.android.material:material:1.2.1'

    //Compose
    implementation "androidx.compose.ui:ui:$compose_version"
@ -69,18 +81,17 @@ dependencies {

    //Lifecycle
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:$lifecycle_version"
-    implementation "androidx.lifecycle:lifecycle-extensions-ktx:$lifecycle_version"
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"

    //Coroutines
-    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:$coroutines_version"
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:$coroutines_version"
-    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:$coroutines_version"
+    //implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:$coroutines_version"
+    //implementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:$coroutines_version"

    //Room
    kapt "androidx.room:room-compiler:$room_version"
-    implementation "androidx.room:room-runtime-ktx:$room_version"
+    implementation "androidx.room:room-runtime:$room_version"
    implementation "androidx.room:room-ktx:$room_version"

    //Okhttp
--- a/app/src/main/AndroidManifest.xml
+++ b/app/src/main/AndroidManifest.xml
@ -12,7 +12,7 @@
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
-            android:theme="@style/Theme.ComposeLearn.NoActionBar">
+            android:theme="@style/Theme.ComposeLearn">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

--- a/app/src/main/ic_launcher-playstore.png
+++ b/app/src/main/ic_launcher-playstore.png
--- a/app/src/main/java/com/example/composelearn/MainActivity.kt
+++ b/app/src/main/java/com/example/composelearn/MainActivity.kt
@ -2,15 +2,26 @@ package com.example.composelearn

 import android.os.Bundle
 import androidx.appcompat.app.AppCompatActivity
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Settings
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Providers
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.setContent
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.core.view.WindowCompat
 import com.example.composelearn.ui.ComposeLearnTheme
+import com.example.composelearn.ui.appNameStyle
+import dev.chrisbanes.accompanist.insets.ProvideWindowInsets
+import dev.chrisbanes.accompanist.insets.statusBarsHeight

 class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
@ -21,27 +32,67 @@ class MainActivity : AppCompatActivity() {

        setContent {
            ComposeLearnTheme {
-                // A surface container using the 'background' color from the theme
-                Surface(
-                    color = MaterialTheme.colors.background,
-                    modifier = Modifier.fillMaxSize()
-                ) {
-                    Statusbar()
+                ProvideWindowInsets {
+                    HomeScreen()
                }
            }
        }
    }
+
+
+}
+
+@Composable
+fun HomeScreen() {
+    Column {
+        val appBarColor = MaterialTheme.colors.surface.copy(alpha = 0.87f)
+
+        // Draw a scrim over the status bar which matches the app bar
+        Spacer(Modifier.background(appBarColor).fillMaxWidth().statusBarsHeight())
+
+        AppBar(
+            backgroundColor = appBarColor,
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
 }

@Composable
-fun Statusbar() {
-
+fun AppBar(
+    backgroundColor: Color,
+    modifier: Modifier = Modifier
+) {
+    TopAppBar(
+        backgroundColor = backgroundColor,
+        title = {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Image(
+                    imageVector = vectorResource(R.drawable.ic_launcher_foreground)
+                )
+                Text(
+                    text = "SpotiFlyer",
+                    style = appNameStyle
+                )
            }
+        },
+        actions = {
+            Providers(AmbientContentAlpha provides ContentAlpha.medium) {
+                IconButton(
+                    onClick = { /* TODO: Open Settings */ }
+                ) {
+                    Icon(Icons.Filled.Settings, tint = Color.Gray)
+                }
+            }
+        },
+        modifier = modifier
+    )
+}
+

@Preview(showBackground = true)
@Composable
 fun DefaultPreview() {
    ComposeLearnTheme {
-        Statusbar()
+        HomeScreen()
    }
 }
--- a/app/src/main/java/com/example/composelearn/ui/Color.kt
+++ b/app/src/main/java/com/example/composelearn/ui/Color.kt
@ -1,8 +1,35 @@
 package com.example.composelearn.ui

+import androidx.compose.material.Colors
+import androidx.compose.material.darkColors
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver

-val purple200 = Color(0xFFBB86FC)
-val purple500 = Color(0xFF6200EE)
-val purple700 = Color(0xFF3700B3)
-val teal200 = Color(0xFF03DAC5)
+val colorPrimary = Color(0xFFFC5C7D)
+val colorPrimaryDark = Color(0xFFCE1CFF)
+val colorAccent = Color(0xFF9AB3FF)
+val colorRedError = Color(0xFFFF9494)
+val colorSuccessGreen = Color(0xFF59C351)
+val darkBackgroundColor = Color(0xFF000000)
+
+val SpotiFlyerColors = darkColors(
+    primary = colorPrimary,
+    onPrimary = Color.Black,
+    primaryVariant = colorPrimaryDark,
+    secondary = colorAccent,
+    onSecondary = Color.Black,
+    error = colorRedError,
+    onError = Color.Black,
+    surface = darkBackgroundColor,
+    background = darkBackgroundColor
+)
+
+/**
+ * Return the fully opaque color that results from compositing [onSurface] atop [surface] with the
+ * given [alpha]. Useful for situations where semi-transparent colors are undesirable.
+ */
+@Composable
+fun Colors.compositedOnSurface(alpha: Float): Color {
+    return onSurface.copy(alpha = alpha).compositeOver(surface)
+}
--- a/app/src/main/java/com/example/composelearn/ui/Shape.kt
+++ b/app/src/main/java/com/example/composelearn/ui/Shape.kt
@ -4,8 +4,8 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Shapes
 import androidx.compose.ui.unit.dp

-val shapes = Shapes(
-        small = RoundedCornerShape(4.dp),
-        medium = RoundedCornerShape(4.dp),
-        large = RoundedCornerShape(0.dp)
+val SpotiFlyerShapes = Shapes(
+        small = RoundedCornerShape(percent = 50),
+        medium = RoundedCornerShape(size = 8.dp),
+        large = RoundedCornerShape(size = 0.dp)
 )
--- a/app/src/main/java/com/example/composelearn/ui/Theme.kt
+++ b/app/src/main/java/com/example/composelearn/ui/Theme.kt
@ -1,44 +1,14 @@
 package com.example.composelearn.ui

-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.darkColors
-import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable

-private val DarkColorPalette = darkColors(
-        primary = purple200,
-        primaryVariant = purple700,
-        secondary = teal200
-)
-
-private val LightColorPalette = lightColors(
-        primary = purple500,
-        primaryVariant = purple700,
-        secondary = teal200
-
-        /* Other default colors to override
-    background = Color.White,
-    surface = Color.White,
-    onPrimary = Color.White,
-    onSecondary = Color.Black,
-    onBackground = Color.Black,
-    onSurface = Color.Black,
-    */
-)
-
@Composable
-fun ComposeLearnTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) {
-    val colors = if (darkTheme) {
-        DarkColorPalette
-    } else {
-        LightColorPalette
-    }
-
+fun ComposeLearnTheme(content: @Composable() () -> Unit) {
    MaterialTheme(
-            colors = colors,
-            typography = typography,
-            shapes = shapes,
+            colors = SpotiFlyerColors,
+            typography = SpotiFlyerTypography,
+            shapes = SpotiFlyerShapes,
            content = content
    )
 }
--- a/app/src/main/java/com/example/composelearn/ui/Type.kt
+++ b/app/src/main/java/com/example/composelearn/ui/Type.kt
@ -1,28 +1,118 @@
 package com.example.composelearn.ui

 import androidx.compose.material.Typography
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontFamily
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.font.*
 import androidx.compose.ui.unit.sp
+import com.example.composelearn.R

-// Set of Material typography styles to start with
-val typography = Typography(
-        body1 = TextStyle(
-                fontFamily = FontFamily.Default,
-                fontWeight = FontWeight.Normal,
-                fontSize = 16.sp
+private val Montserrat = fontFamily(
+        font(R.font.montserrat_light, FontWeight.Light),
+        font(R.font.montserrat_regular, FontWeight.Normal),
+        font(R.font.montserrat_medium, FontWeight.Medium),
+        font(R.font.montserrat_semibold, FontWeight.SemiBold),
 )
-        /* Other default text styles to override
+
+val pristineFont = fontFamily(
+        font(R.font.pristine_script, FontWeight.Bold)
+)
+
+val SpotiFlyerTypography = Typography(
+        h1 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 96.sp,
+                fontWeight = FontWeight.Light,
+                lineHeight = 117.sp,
+                letterSpacing = (-1.5).sp
+        ),
+        h2 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 60.sp,
+                fontWeight = FontWeight.Light,
+                lineHeight = 73.sp,
+                letterSpacing = (-0.5).sp
+        ),
+        h3 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 48.sp,
+                fontWeight = FontWeight.Normal,
+                lineHeight = 59.sp
+        ),
+        h4 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 30.sp,
+                fontWeight = FontWeight.SemiBold,
+                lineHeight = 37.sp
+        ),
+        h5 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 24.sp,
+                fontWeight = FontWeight.SemiBold,
+                lineHeight = 29.sp
+        ),
+        h6 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 20.sp,
+                fontWeight = FontWeight.SemiBold,
+                lineHeight = 24.sp
+        ),
+        subtitle1 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 16.sp,
+                fontWeight = FontWeight.SemiBold,
+                lineHeight = 20.sp,
+                letterSpacing = 0.5.sp
+        ),
+        subtitle2 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 14.sp,
+                fontWeight = FontWeight.Medium,
+                lineHeight = 17.sp,
+                letterSpacing = 0.1.sp
+        ),
+        body1 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 16.sp,
+                fontWeight = FontWeight.Medium,
+                lineHeight = 20.sp,
+                letterSpacing = 0.15.sp
+        ),
+        body2 = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 14.sp,
+                fontWeight = FontWeight.SemiBold,
+                lineHeight = 20.sp,
+                letterSpacing = 0.25.sp
+        ),
        button = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.W500,
-        fontSize = 14.sp
+                fontFamily = Montserrat,
+                fontSize = 14.sp,
+                fontWeight = FontWeight.SemiBold,
+                lineHeight = 16.sp,
+                letterSpacing = 1.25.sp
        ),
        caption = TextStyle(
-        fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 12.sp
+                fontFamily = Montserrat,
+                fontSize = 12.sp,
+                fontWeight = FontWeight.SemiBold,
+                lineHeight = 16.sp,
+                letterSpacing = 0.sp
+        ),
+        overline = TextStyle(
+                fontFamily = Montserrat,
+                fontSize = 12.sp,
+                fontWeight = FontWeight.SemiBold,
+                lineHeight = 16.sp,
+                letterSpacing = 1.sp
        )
-    */
+)
+
+val appNameStyle = TextStyle(
+        fontFamily = pristineFont,
+        fontSize = 42.sp,
+        fontWeight = FontWeight.SemiBold,
+        lineHeight = 42.sp,
+        letterSpacing = (-0.5).sp,
+        color = Color.White
 )
--- a/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
+++ b/app/src/main/res/drawable-v24/ic_launcher_foreground.xml
@ -4,27 +4,56 @@
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
-    <path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
+  <group android:scaleX="0.10546875"
+      android:scaleY="0.10546875"
+      android:translateX="27"
+      android:translateY="27">
+    <path
+        android:pathData="M256,256m-256,0a256,256 0,1 1,512 0a256,256 0,1 1,-512 0">
      <aapt:attr name="android:fillColor">
        <gradient 
-                android:endX="85.84757"
-                android:endY="92.4963"
-                android:startX="42.9492"
-                android:startY="49.59793"
+            android:startY="437.0193"
+            android:startX="74.9807"
+            android:endY="74.9807"
+            android:endX="437.0193"
            android:type="linear">
-                <item
-                    android:color="#44000000"
-                    android:offset="0.0" />
-                <item
-                    android:color="#00000000"
-                    android:offset="1.0" />
+          <item android:offset="0" android:color="#FF736BFD"/>
+          <item android:offset="1" android:color="#FFF54187"/>
        </gradient>
      </aapt:attr>
    </path>
    <path
-        android:fillColor="#FFFFFF"
-        android:fillType="nonZero"
-        android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
-        android:strokeWidth="1"
-        android:strokeColor="#00000000" />
+        android:fillColor="#FF000000"
+        android:pathData="M377,356.7c-68.9,-45.4 -155.6,-56.4 -257.6,-32.7c-20.5,4.8 -13.6,35.8 7.3,31.2C290.7,317 351.6,386 368.2,386C384,386 390.2,365.4 377,356.7z"/>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M112.1,275.1C203.9,253.4 308.1,266 384,308c18.5,10.2 34,-17.8 15.5,-28c-82.7,-45.7 -195.6,-59.5 -294.7,-36C84.2,248.8 91.5,280 112.1,275.1L112.1,275.1z"/>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M100,191.9c96.6,-29.6 232.2,-13.4 308.7,36.9c17.6,11.5 35.3,-15.1 17.6,-26.7c-84.9,-55.8 -229.2,-73.3 -335.6,-40.8C70.4,167.5 79.9,198.1 100,191.9L100,191.9z"/>
+    <path
+        android:pathData="M507.8,438.2c-1.6,97.2 -141.9,97.1 -143.5,0C365.9,341 506.2,341 507.8,438.2z">
+      <aapt:attr name="android:fillColor">
+        <gradient 
+            android:startY="386.3741"
+            android:startX="487.8323"
+            android:endY="490.009"
+            android:endX="384.1974"
+            android:type="linear">
+          <item android:offset="0" android:color="#FF736BFD"/>
+          <item android:offset="1" android:color="#FFF54187"/>
+        </gradient>
+      </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M486.8,456.8c-0.6,-2.4 -6.9,-1 -8.5,-1.4c11.5,-82 -82.4,-86.7 -87.1,-22.2c0.3,1.8 -1,6.7 2.2,6.6c0,0 8.6,0 8.6,0c3.1,0.1 2,-4.7 2.2,-6.6c0.1,-23.3 35,-23.3 35.2,0c0,0 0,6.9 0,6.9c-0.1,2.8 4.4,2.8 4.3,0c5,-35.2 -43.8,-40.1 -43.8,-4.7h-4.3c-1.6,-53.7 77.2,-55.9 78.4,-2.2c0,0 0,24.4 0,24.4c-0.1,2.9 3.8,2.1 5.6,2.2l-20.7,21l-20.7,-21c1.8,-0.1 5.6,0.7 5.6,-2.2c0,0 0,-8.8 0,-8.8c0,-2.8 -4.4,-2.8 -4.3,0c0,0 0,6.6 0,6.6c-2.2,0.2 -11.3,-1.3 -8,3.7c0,0 25.9,26.3 25.9,26.3c0.8,0.9 2.2,0.9 3.1,0C460.6,484.4 489.4,458.3 486.8,456.8z"
+        android:strokeWidth="0.75"
+        android:strokeColor="#000000"/>
+    <path
+        android:pathData="M510,437.5c-1.7,96.2 -142.1,96.2 -143.8,0C367.9,341.3 508.4,341.3 510,437.5z"
+        android:strokeWidth="6"
+        android:fillColor="#00000000"
+        android:strokeColor="#000000"/>
+  </group>
 </vector>
--- a/app/src/main/res/drawable/ic_launcher_background.xml
+++ b/app/src/main/res/drawable/ic_launcher_background.xml
@ -1,170 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="108dp"
-    android:height="108dp"
-    android:viewportWidth="108"
-    android:viewportHeight="108">
-    <path
-        android:fillColor="#3DDC84"
-        android:pathData="M0,0h108v108h-108z" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M9,0L9,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,0L19,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M29,0L29,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M39,0L39,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M49,0L49,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M59,0L59,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M69,0L69,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M79,0L79,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M89,0L89,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M99,0L99,108"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,9L108,9"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,19L108,19"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,29L108,29"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,39L108,39"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,49L108,49"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,59L108,59"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,69L108,69"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,79L108,79"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,89L108,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,99L108,99"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,29L89,29"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,39L89,39"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,49L89,49"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,59L89,59"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,69L89,69"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,79L89,79"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M29,19L29,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M39,19L39,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M49,19L49,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M59,19L59,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M69,19L69,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M79,19L79,89"
-        android:strokeWidth="0.8"
-        android:strokeColor="#33FFFFFF" />
-</vector>
--- a/app/src/main/res/font/montserrat_light.ttf
+++ b/app/src/main/res/font/montserrat_light.ttf
--- a/app/src/main/res/font/montserrat_medium.ttf
+++ b/app/src/main/res/font/montserrat_medium.ttf
--- a/app/src/main/res/font/montserrat_regular.ttf
+++ b/app/src/main/res/font/montserrat_regular.ttf
--- a/app/src/main/res/font/montserrat_semibold.ttf
+++ b/app/src/main/res/font/montserrat_semibold.ttf
--- a/app/src/main/res/font/pristine_script.ttf
+++ b/app/src/main/res/font/pristine_script.ttf
--- a/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
+++ b/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@drawable/ic_launcher_background" />
+    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
 </adaptive-icon>
--- a/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
+++ b/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml
@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@drawable/ic_launcher_background" />
+    <background android:drawable="@color/ic_launcher_background"/>
    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
 </adaptive-icon>
--- a/app/src/main/res/mipmap-hdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-hdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--- a/app/src/main/res/mipmap-mdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-mdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--- a/app/src/main/res/mipmap-xhdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--- a/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--- a/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
+++ b/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--- a/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--- a/app/src/main/res/values-night/themes.xml
+++ b/app/src/main/res/values-night/themes.xml
@ -1,16 +0,0 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
-    <!-- Base application theme. -->
-    <style name="Theme.ComposeLearn" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
-        <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_200</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
-        <item name="colorOnPrimary">@color/black</item>
-        <!-- Secondary brand color. -->
-        <item name="colorSecondary">@color/teal_200</item>
-        <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>
-        <!-- Customize your theme here. -->
-    </style>
-</resources>
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@ -1,10 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="purple_200">#FFBB86FC</color>
-    <color name="purple_500">#FF6200EE</color>
-    <color name="purple_700">#FF3700B3</color>
-    <color name="teal_200">#FF03DAC5</color>
-    <color name="teal_700">#FF018786</color>
-    <color name="black">#FF000000</color>
-    <color name="white">#FFFFFFFF</color>
+    <color name="colorPrimary">#FC5C7D</color>
+    <color name="colorPrimaryDark">#CE1CFF</color>
+    <color name="colorAccent">#9AB3FF</color>
+    <color name="white">#FFFFFF</color>
+    <color name="grey">#99FFFFFF</color>
+    <color name="darkGrey">#E6333333</color>
+    <color name="black">#000000</color>
+    <color name="dark">#121212</color>
+    <color name="successGreen">#59C351</color>
+    <color name="errorRed">#FF9494</color>
 </resources>
--- a/app/src/main/res/values/ic_launcher_background.xml
+++ b/app/src/main/res/values/ic_launcher_background.xml
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#000000</color>
+</resources>
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">ComposeLearn</string>
+    <string name="app_name">SpotiFlyer</string>
 </resources>
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@ -1,25 +1,10 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
+<resources>
    <!-- Base application theme. -->
-    <style name="Theme.ComposeLearn" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="Theme.ComposeLearn" parent="Theme.AppCompat.NoActionBar">
        <!-- Primary brand color. -->
-        <item name="colorPrimary">@color/purple_500</item>
-        <item name="colorPrimaryVariant">@color/purple_700</item>
-        <item name="colorOnPrimary">@color/white</item>
-        <!-- Secondary brand color. -->
-        <item name="colorSecondary">@color/teal_200</item>
-        <item name="colorSecondaryVariant">@color/teal_700</item>
-        <item name="colorOnSecondary">@color/black</item>
-        <!-- Status bar color. -->
-        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
-        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorAccent">@color/colorAccent</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>
-
-    <style name="Theme.ComposeLearn.NoActionBar">
-        <item name="windowActionBar">false</item>
-        <item name="windowNoTitle">true</item>
-    </style>
-
-    <style name="Theme.ComposeLearn.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
-
-    <style name="Theme.ComposeLearn.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
 </resources>
--- a/build.gradle
+++ b/build.gradle
@ -27,6 +27,7 @@ allprojects {
    repositories {
        google()
        jcenter()
+        maven { url "https://jitpack.io" }
    }
 }