From 136be83ed5c840ea3e2e615283f61119d9853e2a Mon Sep 17 00:00:00 2001
From: 0xd9a <0xd9a@noreply.codeberg.org>
Date: Sat, 24 Dec 2022 15:00:01 +0530
Subject: [PATCH] Update compose UI

---
 .../drawable/ic_compose_attachment_play.xml   |   6 +-
 .../res/layout/compose_attachment_item.xml    |  66 ++-
 .../main/res/layout/drawer_status_compose.xml | 426 ++++++++----------
 app/src/main/res/values/themes.xml            |   5 +
 4 files changed, 212 insertions(+), 291 deletions(-)

diff --git a/app/src/main/res/drawable/ic_compose_attachment_play.xml b/app/src/main/res/drawable/ic_compose_attachment_play.xml
index 9b7ecb7f..cabd5d80 100644
--- a/app/src/main/res/drawable/ic_compose_attachment_play.xml
+++ b/app/src/main/res/drawable/ic_compose_attachment_play.xml
@@ -4,9 +4,9 @@
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
-        android:fillColor="?attr/colorControlNormal"
+        android:fillColor="?attr/colorTertiary"
         android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />
     <path
-        android:fillColor="?attr/colorPrimary"
-        android:pathData="M10,16.5v-9l6,4.5 -6,4.5z" />
+        android:fillColor="?attr/colorOnTertiary"
+        android:pathData="M10,15.5v-7c0,-0.41 0.47,-0.65 0.8,-0.4l4.67,3.5c0.27,0.2 0.27,0.6 0,0.8l-4.67,3.5c-0.33,0.25 -0.8,0.01 -0.8,-0.4z" />
 </vector>
diff --git a/app/src/main/res/layout/compose_attachment_item.xml b/app/src/main/res/layout/compose_attachment_item.xml
index 77b32b69..ebf9c3b0 100644
--- a/app/src/main/res/layout/compose_attachment_item.xml
+++ b/app/src/main/res/layout/compose_attachment_item.xml
@@ -15,7 +15,7 @@
         <androidx.appcompat.widget.AppCompatImageView
             android:id="@+id/preview"
             android:layout_width="0dp"
-            android:layout_height="100dp"
+            android:layout_height="108dp"
             android:adjustViewBounds="true"
             android:scaleType="centerCrop"
             app:layout_constraintEnd_toEndOf="parent"
@@ -23,56 +23,44 @@
             app:layout_constraintTop_toTopOf="parent"
             tools:src="@tools:sample/backgrounds/scenic" />
 
-
-         <com.google.android.material.button.MaterialButton
-             android:id="@+id/button_play"
-             style="@style/Widget.AppCompat.Button.Borderless"
-             android:layout_width="48dp"
-             android:layout_height="48dp"
-             android:adjustViewBounds="true"
-             android:padding="0dp"
-             app:icon="@drawable/ic_compose_attachment_play"
-             app:iconGravity="textStart"
-             android:scaleType="fitCenter"
-             app:iconPadding="0dp"
-             app:layout_constraintBottom_toBottomOf="@id/preview"
-             app:layout_constraintEnd_toEndOf="@id/preview"
-             app:layout_constraintStart_toStartOf="@id/preview"
-             app:layout_constraintTop_toTopOf="@id/preview" />
+        <androidx.appcompat.widget.AppCompatImageView
+            android:id="@+id/button_play"
+            app:srcCompat="@drawable/ic_compose_attachment_play"
+            android:layout_width="36dp"
+            android:layout_height="36dp"
+            android:scaleType="fitCenter"
+            app:layout_constraintBottom_toBottomOf="@id/preview"
+            app:layout_constraintEnd_toEndOf="@id/preview"
+            app:layout_constraintStart_toStartOf="@id/preview"
+            app:layout_constraintTop_toTopOf="@id/preview" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/edit_preview"
-            style="@style/Widget.Material3.Button.Icon"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
+            style="@style/Widget.Material3.Button.IconButton.Filled"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             android:adjustViewBounds="true"
-            android:padding="0dp"
-            app:iconGravity="textStart"
-            app:iconPadding="0dp"
-            android:backgroundTint="@color/editColor"
             app:icon="@drawable/ic_baseline_mode_edit_24"
+            app:iconGravity="textStart"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_remove"
-            android:padding="0dp"
-            app:iconGravity="textStart"
-            app:iconPadding="0dp"
-            style="@style/Widget.Material3.Button.Icon"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
-            android:adjustViewBounds="true"
+            style="@style/Widget.Material3.Button.IconButton.Filled"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             android:backgroundTint="@color/errorColor"
             app:icon="@drawable/ic_compose_attachment_remove"
+            app:iconGravity="textStart"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_order_up"
-            style="@style/Widget.Material3.Button.Icon"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
+            style="@style/Widget.Material3.Button.IconButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
             android:adjustViewBounds="true"
             app:icon="@drawable/ic_compose_attachment_order_up"
             app:layout_constraintStart_toStartOf="parent"
@@ -80,26 +68,24 @@
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_description"
-            style="@style/Widget.Material3.Button"
             android:layout_width="match_parent"
-            android:layout_height="48dp"
+            android:layout_height="wrap_content"
             android:layout_marginStart="2dp"
             android:layout_marginEnd="2dp"
             android:text="@string/description"
-            android:textColor="@color/black"
             android:textAlignment="textStart"
+            android:textColor="@color/black"
             app:backgroundTint="@color/no_description"
             app:icon="@drawable/ic_baseline_warning_24"
-            app:iconGravity="end"
+            app:iconGravity="textStart"
             app:iconTint="@color/black"
             app:layout_constraintEnd_toStartOf="@id/button_order_down"
             app:layout_constraintStart_toEndOf="@id/button_order_up"
             app:layout_constraintTop_toBottomOf="@id/preview" />
 
-
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_order_down"
-            style="@style/Widget.Material3.Button.Icon"
+            style="@style/Widget.Material3.Button.IconButton"
             android:layout_width="48dp"
             android:layout_height="48dp"
             android:adjustViewBounds="true"
diff --git a/app/src/main/res/layout/drawer_status_compose.xml b/app/src/main/res/layout/drawer_status_compose.xml
index 1be888c3..5ad3ce8c 100644
--- a/app/src/main/res/layout/drawer_status_compose.xml
+++ b/app/src/main/res/layout/drawer_status_compose.xml
@@ -18,96 +18,78 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/cardview_container"
+    style="@style/Widget.Material3.CardView.Elevated"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_marginHorizontal="6dp"
+    android:layout_marginTop="6dp"
     android:clipChildren="false"
-    android:layout_marginTop="10dp"
-    android:clipToPadding="false"
-    app:cardElevation="5dp"
-    app:strokeWidth="0dp">
+    android:clipToPadding="false">
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:clipToPadding="false"
-        android:orientation="vertical"
-        android:paddingBottom="6dp">
-
-        <com.google.android.material.button.MaterialButton
-            android:id="@+id/add_remove_status"
-            style="@style/Widget.Material3.Button.OutlinedButton.Icon"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
-            android:layout_marginEnd="6dp"
-            android:contentDescription="@string/add_status"
-            android:padding="0dp"
-            app:iconGravity="textStart"
-            app:iconPadding="0dp"
-            app:icon="@drawable/ic_compose_thread_add_status"
-            app:strokeColor="?colorPrimary"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
+        android:orientation="vertical">
 
         <com.google.android.material.textfield.MaterialAutoCompleteTextView
             android:id="@+id/content_spoiler"
-            android:layout_width="match_parent"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginHorizontal="6dp"
+            android:layout_marginStart="6dp"
+            android:layout_marginTop="6dp"
             android:hint="@string/eg_sensitive_content"
             android:inputType="textMultiLine|textCapSentences"
             android:singleLine="true"
             android:visibility="gone"
-            app:layout_constraintTop_toBottomOf="@id/add_remove_status" />
+            app:layout_constraintEnd_toStartOf="@id/button_emoji"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:visibility="visible" />
+
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/add_remove_status"
+            style="@style/Fedilab.SmallIconButton"
+            android:layout_marginTop="6dp"
+            android:layout_marginEnd="6dp"
+            android:contentDescription="@string/add_status"
+            app:icon="@drawable/ic_compose_thread_add_status"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
 
         <app.fedilab.android.helper.FedilabAutoCompleteTextView
             android:id="@+id/content"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginHorizontal="6dp"
+            android:layout_marginStart="6dp"
             android:focusable="true"
             android:gravity="top|start"
             android:inputType="textMultiLine|textCapSentences"
             android:minLines="6"
-            app:layout_constraintEnd_toStartOf="@+id/emoji_container"
+            app:layout_constraintEnd_toStartOf="@id/button_emoji"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/content_spoiler" />
 
-        <androidx.appcompat.widget.LinearLayoutCompat
-            android:id="@+id/emoji_container"
-            android:layout_width="36dp"
-            android:layout_height="0dp"
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_emoji"
+            style="@style/Fedilab.SmallIconButton"
+            android:layout_marginTop="6dp"
             android:layout_marginEnd="6dp"
-            android:orientation="vertical"
-            app:layout_constraintBottom_toBottomOf="@id/content"
+            android:contentDescription="@string/emoji_picker"
+            app:icon="@drawable/ic_compose_emoji"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="@id/content">
+            app:layout_constraintTop_toBottomOf="@id/add_remove_status" />
 
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/button_emoji"
-                style="@style/Widget.Material3.Button.OutlinedButton.Icon"
-                android:layout_width="36dp"
-                android:layout_height="36dp"
-                android:padding="0dp"
-                android:layout_marginTop="6dp"
-                app:iconGravity="textStart"
-                app:iconPadding="0dp"
-                android:contentDescription="@string/emoji_picker"
-                app:icon="@drawable/ic_compose_emoji" />
-
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/button_emoji_one"
-                style="@style/Widget.Material3.Button.OutlinedButton.Icon"
-                android:layout_width="36dp"
-                android:layout_height="36dp"
-                android:layout_marginTop="6dp"
-                android:padding="0dp"
-                app:iconGravity="textStart"
-                app:iconPadding="0dp"
-                android:contentDescription="@string/emoji_picker"
-                app:icon="@drawable/ic_baseline_insert_emoticon_24"
-                android:visibility="gone"
-                tools:visibility="visible" />
-        </androidx.appcompat.widget.LinearLayoutCompat>
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_emoji_one"
+            style="@style/Fedilab.SmallIconButton"
+            android:layout_marginEnd="6dp"
+            android:contentDescription="@string/emoji_picker"
+            android:visibility="gone"
+            app:icon="@drawable/ic_baseline_insert_emoticon_24"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/button_emoji"
+            tools:visibility="visible" />
 
         <com.google.android.material.checkbox.MaterialCheckBox
             android:id="@+id/sensitive_media"
@@ -148,56 +130,56 @@
             android:layout_marginHorizontal="6dp"
             app:layout_constraintTop_toBottomOf="@id/attachments_list_container" />
 
-        <com.google.android.material.button.MaterialButtonToggleGroup
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_attach"
+            style="@style/Widget.Material3.Button.IconButton.Outlined"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:id="@+id/action_container"
+            android:layout_marginVertical="6dp"
             android:layout_marginStart="6dp"
+            app:icon="@drawable/ic_compose_attach"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/text_area_divider">
+            app:layout_constraintTop_toBottomOf="@id/text_area_divider" />
 
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/button_attach"
-                style="@style/Widget.Material3.Button.OutlinedButton.Icon"
-                android:layout_width="48dp"
-                android:layout_height="48dp"
-                app:icon="@drawable/ic_compose_attach"
-                android:padding="0dp"
-                app:iconGravity="textStart"
-                app:iconPadding="0dp" />
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_sensitive"
+            style="@style/Widget.Material3.Button.IconButton.Outlined"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginVertical="6dp"
+            android:checkable="true"
+            app:icon="@drawable/ic_compose_sensitive"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toEndOf="@id/button_attach"
+            app:layout_constraintTop_toBottomOf="@id/text_area_divider"
+            app:toggleCheckedStateOnClick="true" />
 
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/button_sensitive"
-                style="@style/Widget.Material3.Button.OutlinedButton.Icon"
-                android:layout_width="48dp"
-                android:layout_height="48dp"
-                android:layout_marginTop="6dp"
-                app:icon="@drawable/ic_compose_sensitive"
-                android:padding="0dp"
-                app:iconGravity="textStart"
-                app:iconPadding="0dp" />
-
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/button_visibility"
-                style="@style/Widget.Material3.Button.OutlinedButton.Icon"
-                android:layout_width="48dp"
-                android:layout_height="48dp"
-                app:icon="@drawable/ic_compose_visibility_public"
-                android:padding="0dp"
-                app:iconGravity="textStart"
-                app:iconPadding="0dp" />
-
-            <com.google.android.material.button.MaterialButton
-                android:id="@+id/button_language"
-                style="@style/Widget.Material3.Button.OutlinedButton.Icon"
-                android:layout_width="70dp"
-                android:layout_height="wrap_content"
-                android:textColor="?colorPrimary"
-                app:iconGravity="textStart"
-                app:iconPadding="0dp"
-                tools:text="EN" />
-        </com.google.android.material.button.MaterialButtonToggleGroup>
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_visibility"
+            style="@style/Widget.Material3.Button.IconButton.Outlined"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginVertical="6dp"
+            app:icon="@drawable/ic_compose_visibility_public"
+            app:iconGravity="textStart"
+            app:iconPadding="0dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toEndOf="@id/button_sensitive"
+            app:layout_constraintTop_toBottomOf="@id/text_area_divider" />
 
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_language"
+            style="@style/Widget.Material3.Button.TextButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginVertical="6dp"
+            android:fontFamily="monospace"
+            android:minWidth="72dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toEndOf="@id/button_visibility"
+            app:layout_constraintTop_toBottomOf="@id/text_area_divider"
+            tools:text="EN" />
 
         <com.google.android.material.textview.MaterialTextView
             android:id="@+id/character_count"
@@ -207,7 +189,7 @@
             android:text="0"
             app:layout_constraintBottom_toTopOf="@id/character_progress"
             app:layout_constraintEnd_toStartOf="@id/button_post"
-            app:layout_constraintStart_toEndOf="@id/action_container"
+            app:layout_constraintStart_toEndOf="@id/button_language"
             app:layout_constraintTop_toBottomOf="@id/text_area_divider"
             app:layout_constraintVertical_chainStyle="packed"
             tools:ignore="HardcodedText" />
@@ -219,16 +201,18 @@
             android:layout_height="12dp"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@id/button_post"
-            app:layout_constraintStart_toEndOf="@id/action_container"
+            app:layout_constraintStart_toEndOf="@id/button_language"
             app:layout_constraintTop_toBottomOf="@id/character_count" />
 
         <com.google.android.material.button.MaterialButton
             android:id="@+id/button_post"
-            style="@style/Widget.Material3.Button.Icon"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
+            style="@style/Widget.Material3.Button.IconButton.Filled"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginVertical="6dp"
             android:layout_marginEnd="6dp"
             app:icon="@drawable/ic_compose_post"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toBottomOf="@id/text_area_divider" />
 
@@ -236,9 +220,8 @@
             android:id="@+id/attachment_choices_panel"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginStart="6dp"
-            android:elevation="2dp"
-            android:background="?colorSurface"
+            android:background="?colorSurfaceVariant"
+            android:padding="6dp"
             android:visibility="gone"
             app:constraint_referenced_ids="button_attach_image,button_attach_audio,button_attach_video,button_close_attachment_panel,button_poll,button_attach_manual"
             app:flow_maxElementsWrap="3"
@@ -246,177 +229,124 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent" />
 
-        <androidx.appcompat.widget.AppCompatImageButton
+        <com.google.android.material.button.MaterialButton
             android:id="@+id/button_attach_image"
-            style="@style/Widget.AppCompat.Button.Borderless.Colored"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
-            android:src="@drawable/ic_compose_attach_image" />
+            style="@style/Widget.Material3.Button.IconButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:icon="@drawable/ic_compose_attach_image" />
 
-        <androidx.appcompat.widget.AppCompatImageButton
+        <com.google.android.material.button.MaterialButton
             android:id="@+id/button_attach_audio"
-            style="@style/Widget.AppCompat.Button.Borderless.Colored"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
-            android:src="@drawable/ic_compose_attach_audio" />
+            style="@style/Widget.Material3.Button.IconButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:icon="@drawable/ic_compose_attach_audio" />
 
-        <androidx.appcompat.widget.AppCompatImageButton
+        <com.google.android.material.button.MaterialButton
             android:id="@+id/button_attach_video"
-            style="@style/Widget.AppCompat.Button.Borderless.Colored"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
-            android:src="@drawable/ic_compose_attach_video" />
+            style="@style/Widget.Material3.Button.IconButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:icon="@drawable/ic_compose_attach_video" />
 
-        <androidx.appcompat.widget.AppCompatImageButton
-            android:id="@+id/button_attach_manual"
-            style="@style/Widget.AppCompat.Button.Borderless.Colored"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
-            android:src="@drawable/ic_compose_attach_more" />
-
-        <androidx.appcompat.widget.AppCompatImageButton
+        <com.google.android.material.button.MaterialButton
             android:id="@+id/button_close_attachment_panel"
-            style="@style/Widget.AppCompat.Button.Borderless"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
-            android:src="@drawable/ic_baseline_close_24" />
+            style="@style/Widget.Material3.Button.IconButton.Outlined"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:icon="@drawable/ic_baseline_close_24" />
 
-        <androidx.appcompat.widget.AppCompatImageButton
+        <com.google.android.material.button.MaterialButton
             android:id="@+id/button_poll"
-            style="@style/Widget.AppCompat.Button.Borderless"
-            android:layout_width="48dp"
-            android:layout_height="48dp"
-            android:src="@drawable/ic_compose_poll" />
+            style="@style/Widget.Material3.Button.IconButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:icon="@drawable/ic_compose_poll" />
+
+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/button_attach_manual"
+            style="@style/Widget.Material3.Button.IconButton"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:icon="@drawable/ic_compose_attach_more" />
 
         <androidx.appcompat.widget.LinearLayoutCompat
             android:id="@+id/visibility_panel"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginHorizontal="6dp"
-            android:layout_marginTop="6dp"
-            android:elevation="2dp"
+            android:layout_height="0dp"
+            android:background="?colorSurfaceVariant"
+            android:gravity="bottom"
             android:orientation="vertical"
             android:padding="6dp"
             android:visibility="gone"
-            android:background="?colorSurface"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            app:layout_constraintVertical_bias="1">
+            app:layout_constraintTop_toTopOf="parent">
 
-            <androidx.appcompat.widget.LinearLayoutCompat
+            <com.google.android.material.button.MaterialButtonToggleGroup
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:gravity="center_vertical">
+                android:orientation="vertical"
+                android:padding="6dp"
+                app:singleSelection="true">
 
-                <androidx.appcompat.widget.LinearLayoutCompat
+                <com.google.android.material.button.MaterialButton
                     android:id="@+id/button_visibility_direct"
-                    style="@style/Widget.AppCompat.Button.Borderless.Colored"
-                    android:layout_width="0dp"
+                    style="@style/Widget.Material3.Button.OutlinedButton"
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_weight="1"
-                    android:gravity="center_vertical"
-                    android:minHeight="36dp">
+                    android:insetTop="0dp"
+                    android:insetBottom="0dp"
+                    android:minHeight="36dp"
+                    android:text="@string/v_direct"
+                    android:textAlignment="textStart"
+                    app:icon="@drawable/ic_compose_visibility_direct" />
 
-                    <androidx.appcompat.widget.AppCompatImageView
-                        android:layout_width="24dp"
-                        android:layout_height="24dp"
-                        android:src="@drawable/ic_compose_visibility_direct"
-                        app:layout_constraintEnd_toEndOf="parent"
-                        app:layout_constraintTop_toBottomOf="@id/text_area_divider" />
-
-                    <com.google.android.material.textview.MaterialTextView
-                        android:layout_width="0dp"
-                        android:layout_height="wrap_content"
-                        android:layout_marginStart="6dp"
-                        android:layout_weight="1"
-                        android:text="@string/v_direct"
-                        android:textAppearance="@style/TextAppearance.Material3.BodyMedium" />
-
-                </androidx.appcompat.widget.LinearLayoutCompat>
-
-                <androidx.appcompat.widget.AppCompatImageButton
-                    android:id="@+id/button_close_visibility_panel"
-                    style="@style/Widget.AppCompat.Button.Borderless"
-                    android:layout_width="36dp"
-                    android:layout_height="36dp"
-                    android:src="@drawable/ic_baseline_close_24" />
-
-            </androidx.appcompat.widget.LinearLayoutCompat>
-
-            <androidx.appcompat.widget.LinearLayoutCompat
-                android:id="@+id/button_visibility_private"
-                style="@style/Widget.AppCompat.Button.Borderless.Colored"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:gravity="center_vertical"
-                android:minHeight="36dp">
-
-                <androidx.appcompat.widget.AppCompatImageView
-                    android:layout_width="24dp"
-                    android:layout_height="24dp"
-                    android:src="@drawable/ic_compose_visibility_private"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintTop_toBottomOf="@id/text_area_divider" />
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="0dp"
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/button_visibility_private"
+                    style="@style/Widget.Material3.Button.OutlinedButton"
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_marginStart="6dp"
-                    android:layout_weight="1"
+                    android:insetTop="0dp"
+                    android:insetBottom="0dp"
+                    android:minHeight="36dp"
                     android:text="@string/followers_only"
-                    android:textAppearance="@style/TextAppearance.Material3.BodyMedium" />
+                    android:textAlignment="textStart"
+                    app:icon="@drawable/ic_compose_visibility_private" />
 
-            </androidx.appcompat.widget.LinearLayoutCompat>
-
-            <androidx.appcompat.widget.LinearLayoutCompat
-                android:id="@+id/button_visibility_unlisted"
-                style="@style/Widget.AppCompat.Button.Borderless.Colored"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:gravity="center_vertical"
-                android:minHeight="36dp">
-
-                <androidx.appcompat.widget.AppCompatImageView
-                    android:layout_width="24dp"
-                    android:layout_height="24dp"
-                    android:src="@drawable/ic_compose_visibility_unlisted"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintTop_toBottomOf="@id/text_area_divider" />
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="0dp"
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/button_visibility_unlisted"
+                    style="@style/Widget.Material3.Button.OutlinedButton"
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_marginStart="6dp"
-                    android:layout_weight="1"
+                    android:insetTop="0dp"
+                    android:insetBottom="0dp"
+                    android:minHeight="36dp"
                     android:text="@string/v_unlisted"
-                    android:textAppearance="@style/TextAppearance.Material3.BodyMedium" />
+                    android:textAlignment="textStart"
+                    app:icon="@drawable/ic_compose_visibility_unlisted" />
 
-            </androidx.appcompat.widget.LinearLayoutCompat>
-
-            <androidx.appcompat.widget.LinearLayoutCompat
-                android:id="@+id/button_visibility_public"
-                style="@style/Widget.AppCompat.Button.Borderless.Colored"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:gravity="center_vertical"
-                android:minHeight="36dp">
-
-                <androidx.appcompat.widget.AppCompatImageView
-                    android:layout_width="24dp"
-                    android:layout_height="24dp"
-                    android:src="@drawable/ic_compose_visibility_public"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintTop_toBottomOf="@id/text_area_divider" />
-
-                <com.google.android.material.textview.MaterialTextView
-                    android:layout_width="0dp"
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/button_visibility_public"
+                    style="@style/Widget.Material3.Button.OutlinedButton"
+                    android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_marginStart="6dp"
-                    android:layout_weight="1"
+                    android:insetTop="0dp"
+                    android:insetBottom="0dp"
+                    android:minHeight="36dp"
                     android:text="@string/v_public"
-                    android:textAppearance="@style/TextAppearance.Material3.BodyMedium" />
+                    android:textAlignment="textStart"
+                    app:icon="@drawable/ic_compose_visibility_public" />
 
-            </androidx.appcompat.widget.LinearLayoutCompat>
+            </com.google.android.material.button.MaterialButtonToggleGroup>
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/button_close_visibility_panel"
+                style="@style/Widget.Material3.Button.IconButton.Outlined"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="96dp"
+                app:icon="@drawable/ic_baseline_close_24" />
 
         </androidx.appcompat.widget.LinearLayoutCompat>
 
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 3235b549..d13d71d9 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -240,4 +240,9 @@
         <item name="colorPrimaryInverse">@color/solarized_md_theme_light_inversePrimary</item>
     </style>
 
+    <style name="Fedilab.SmallIconButton" parent="Widget.Material3.Button.IconButton">
+        <item name="android:layout_width">36dp</item>
+        <item name="android:layout_height">36dp</item>
+        <item name="android:padding">4dp</item>
+    </style>
 </resources>