From 08d0323e48a9cbeda34d4b5b4ce8b534a55c4a52 Mon Sep 17 00:00:00 2001
From: Abdelilah El Aissaoui <aeab13@gmail.com>
Date: Sat, 9 Apr 2022 18:59:10 +0200
Subject: [PATCH] Improved tab's design

---
 .../app/ui/components/RepositoriesTabPanel.kt | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt b/src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt
index 61212d1..211f894 100644
--- a/src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt
+++ b/src/main/kotlin/app/ui/components/RepositoriesTabPanel.kt
@@ -2,10 +2,7 @@ package app.ui.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyListScope
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
@@ -19,7 +16,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import app.AppStateManager
 import app.di.AppComponent
 import app.di.DaggerTabComponent
@@ -105,7 +104,8 @@ fun TabPanel(
     tabs: LazyListScope.() -> Unit
 ) {
     LazyRow(
-        modifier = modifier,
+        modifier = modifier
+            .height(36.dp),
     ) {
         this.tabs()
 
@@ -137,26 +137,30 @@ fun Tab(title: MutableState<String>, selected: Boolean, onClick: () -> Unit, onC
         else
             MaterialTheme.colors.tabColorInactive
 
-        Box(
+        Row(
             modifier = Modifier
                 .width(180.dp)
+                .fillMaxHeight()
                 .shadow(elevation = elevation)
                 .padding(start = 2.dp, end = 2.dp, top = 2.dp)
                 .clip(RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp))
                 .clickable { onClick() }
                 .background(backgroundColor),
+            verticalAlignment = Alignment.CenterVertically,
         ) {
             Text(
                 text = title.value,
                 modifier = Modifier
-                    .padding(vertical = 8.dp, horizontal = 16.dp),
-                color = contentColorFor(backgroundColor),
+                    .padding(start = 16.dp, end = 8.dp)
+                    .weight(1f),
+                color = MaterialTheme.colors.primaryTextColor,
+                overflow = TextOverflow.Visible,
+                fontSize = 14.sp,
                 maxLines = 1,
             )
             IconButton(
                 onClick = onCloseTab,
                 modifier = Modifier
-                    .align(Alignment.CenterEnd)
                     .padding(horizontal = 8.dp)
                     .size(14.dp)
             ) {