feat: redesign bottom bar screen topbar

whitescent · Apr 17, 2024 · 4a2b288 · 4a2b288
1 parent f698772
commit 4a2b288
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 32 deletions.
diff --git a/app/src/main/java/com/github/whitescent/mastify/screen/explore/Explore.kt b/app/src/main/java/com/github/whitescent/mastify/screen/explore/Explore.kt
@@ -85,6 +85,7 @@ import com.github.whitescent.mastify.ui.component.AppHorizontalDivider
 import com.github.whitescent.mastify.ui.component.CenterRow
 import com.github.whitescent.mastify.ui.component.CircleShapeAsyncImage
 import com.github.whitescent.mastify.ui.component.HeightSpacer
+import com.github.whitescent.mastify.ui.component.WidthSpacer
 import com.github.whitescent.mastify.ui.component.status.StatusSnackBar
 import com.github.whitescent.mastify.ui.component.status.rememberStatusSnackBarState
 import com.github.whitescent.mastify.ui.theme.AppTheme
@@ -153,13 +154,6 @@ fun Explore(
         ) {
           Column {
             CenterRow {
-              Text(
-                text = stringResource(id = R.string.explore_instance, activeAccount.domain),
-                fontSize = 24.sp,
-                fontWeight = FontWeight.Bold,
-                color = AppTheme.colors.primaryContent,
-                modifier = Modifier.weight(1f),
-              )
               CircleShapeAsyncImage(
                 model = activeAccount.profilePictureUrl,
                 modifier = Modifier
@@ -172,6 +166,13 @@ fun Explore(
                   }
                 }
               )
+              WidthSpacer(value = 6.dp)
+              Text(
+                text = stringResource(id = R.string.explore_instance, activeAccount.domain),
+                fontSize = 24.sp,
+                fontWeight = FontWeight.Bold,
+                color = AppTheme.colors.primaryContent
+              )
             }
             HeightSpacer(value = 6.dp)
           }

diff --git a/app/src/main/java/com/github/whitescent/mastify/screen/home/Home.kt b/app/src/main/java/com/github/whitescent/mastify/screen/home/Home.kt
@@ -183,7 +183,7 @@ fun Home(
               drawerState.open()
             }
           },
-          modifier = Modifier.padding(horizontal = 24.dp, vertical = 12.dp)
+          modifier = Modifier.padding(horizontal = 12.dp, vertical = 12.dp)
         )
         HorizontalDivider(thickness = 0.5.dp, color = AppTheme.colors.divider)
         Box {

diff --git a/app/src/main/java/com/github/whitescent/mastify/screen/home/HomeTopBar.kt b/app/src/main/java/com/github/whitescent/mastify/screen/home/HomeTopBar.kt
@@ -18,21 +18,21 @@
 package com.github.whitescent.mastify.screen.home
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import com.github.whitescent.R
-import com.github.whitescent.mastify.ui.component.CenterRow
 import com.github.whitescent.mastify.ui.component.CircleShapeAsyncImage
-import com.github.whitescent.mastify.ui.component.WidthSpacer
 import com.github.whitescent.mastify.ui.theme.AppTheme
 
 @Composable
@@ -41,32 +41,29 @@ fun HomeTopBar(
   modifier: Modifier = Modifier,
   openDrawer: () -> Unit
 ) {
-  CenterRow(
-    modifier = modifier.statusBarsPadding().fillMaxWidth()
+  Box(
+    modifier = modifier.statusBarsPadding().fillMaxWidth(),
+    contentAlignment = Alignment.Center
   ) {
+    CircleShapeAsyncImage(
+      model = avatar,
+      modifier = Modifier
+        .size(36.dp)
+        .shadow(12.dp, AppTheme.shape.betweenSmallAndMediumAvatar)
+        .align(Alignment.CenterStart),
+      shape = AppTheme.shape.betweenSmallAndMediumAvatar,
+      onClick = openDrawer
+    )
     Icon(
       painter = painterResource(id = R.drawable.logo_text),
       contentDescription = null,
       tint = AppTheme.colors.primaryContent,
-      modifier = Modifier.heightIn(max = 32.dp).wrapContentSize()
+      modifier = Modifier.heightIn(max = 28.dp).wrapContentSize().align(Alignment.Center)
+    )
+    Image(
+      painter = painterResource(id = R.drawable.filter),
+      contentDescription = null,
+      modifier = Modifier.size(24.dp).align(Alignment.CenterEnd)
     )
-    Spacer(modifier = Modifier.weight(1f))
-    CenterRow {
-      Image(
-        painter = painterResource(id = R.drawable.filter),
-        contentDescription = null,
-        modifier = Modifier.size(24.dp)
-      )
-      WidthSpacer(value = 8.dp)
-      CircleShapeAsyncImage(
-        model = avatar,
-        modifier = Modifier
-          .size(36.dp),
-        onClick = {
-          openDrawer()
-        },
-        shape = AppTheme.shape.betweenSmallAndMediumAvatar
-      )
-    }
   }
 }