Improves previews

app/src/main/java/com/vitorpamplona/amethyst/ui/elements/AddRemoveButtons.kt

@@ -35,12 +35,12 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.vitorpamplona.amethyst.R
 import com.vitorpamplona.amethyst.ui.theme.ButtonBorder
-import com.vitorpamplona.amethyst.ui.theme.ThemeComparison
+import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonColumn
 
 @Composable
 @Preview
 fun AddButtonPreview() {
-    ThemeComparison(
+    ThemeComparisonColumn(
         onDark = {
             Row {
                 Column {

app/src/main/java/com/vitorpamplona/amethyst/ui/elements/DisplayPoW.kt

@@ -27,13 +27,13 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import com.vitorpamplona.amethyst.ui.theme.Font14SP
-import com.vitorpamplona.amethyst.ui.theme.ThemeComparison
+import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonColumn
 import com.vitorpamplona.amethyst.ui.theme.lessImportantLink
 
 @Composable
 @Preview
 fun DisplayPoWPreview() {
-    ThemeComparison(
+    ThemeComparisonColumn(
         onDark = { DisplayPoW(pow = 24) },
         onLight = { DisplayPoW(pow = 24) },
     )

app/src/main/java/com/vitorpamplona/amethyst/ui/layouts/LeftPictureLayout.kt

@@ -51,13 +51,13 @@ import com.vitorpamplona.amethyst.ui.theme.QuoteBorder
 import com.vitorpamplona.amethyst.ui.theme.Size16Modifier
 import com.vitorpamplona.amethyst.ui.theme.Size20Modifier
 import com.vitorpamplona.amethyst.ui.theme.StdHorzSpacer
-import com.vitorpamplona.amethyst.ui.theme.ThemeComparison
+import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonColumn
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 
 @Composable
 @Preview
 fun LeftPictureLayoutPreview() {
-    ThemeComparison(
+    ThemeComparisonColumn(
         onDark = { LeftPictureLayoutPreviewCard() },
         onLight = { LeftPictureLayoutPreviewCard() },
     )

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedOff/LoginScreen.kt

@@ -96,6 +96,7 @@ import com.vitorpamplona.amethyst.ui.screen.loggedIn.ConnectOrbotDialog
 import com.vitorpamplona.amethyst.ui.theme.Size20dp
 import com.vitorpamplona.amethyst.ui.theme.Size35dp
 import com.vitorpamplona.amethyst.ui.theme.Size40dp
+import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonRow
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 import com.vitorpamplona.quartz.signers.ExternalSignerLauncher
 import com.vitorpamplona.quartz.signers.SignerType
@@ -103,13 +104,19 @@ import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import java.util.UUID
 
-@Preview
+@Preview(device = "spec:width=2160px,height=2340px,dpi=440")
 @Composable
 fun LoginPage() {
     val accountViewModel: AccountStateViewModel = viewModel()
 
-    LoginPage(accountViewModel, true) {
+    ThemeComparisonRow(
-    }
+        onDark = {
+            LoginPage(accountViewModel, true) {}
+        },
+        onLight = {
+            LoginPage(accountViewModel, true) {}
+        },
+    )
 }
 
 @OptIn(ExperimentalComposeUiApi::class)

app/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedOff/SignUpScreen.kt

@@ -72,16 +72,23 @@ import com.vitorpamplona.amethyst.ui.theme.Size10dp
 import com.vitorpamplona.amethyst.ui.theme.Size20dp
 import com.vitorpamplona.amethyst.ui.theme.Size35dp
 import com.vitorpamplona.amethyst.ui.theme.Size40dp
+import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonRow
 import com.vitorpamplona.amethyst.ui.theme.placeholderText
 import kotlinx.coroutines.launch
 
-@Preview
+@Preview(device = "spec:width=2160px,height=2340px,dpi=440")
 @Composable
 fun SignUpPage() {
     val accountViewModel: AccountStateViewModel = viewModel()
 
-    SignUpPage(accountViewModel) {
+    ThemeComparisonRow(
-    }
+        onDark = {
+            SignUpPage(accountViewModel) {}
+        },
+        onLight = {
+            SignUpPage(accountViewModel) {}
+        },
+    )
 }
 
 @Composable

app/src/main/java/com/vitorpamplona/amethyst/ui/theme/Theme.kt

@@ -24,7 +24,9 @@ import android.app.Activity
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -128,62 +130,92 @@ val RepostPictureBorderDark = Modifier.border(2.dp, DarkColorPalette.background,
 val RepostPictureBorderLight = Modifier.border(2.dp, LightColorPalette.background, CircleShape)
 
 val DarkImageModifier =
-    Modifier.fillMaxWidth().clip(shape = QuoteBorder).border(1.dp, DarkSubtleBorder, QuoteBorder)
+    Modifier
+        .fillMaxWidth()
+        .clip(shape = QuoteBorder)
+        .border(1.dp, DarkSubtleBorder, QuoteBorder)
 
 val LightImageModifier =
-    Modifier.fillMaxWidth().clip(shape = QuoteBorder).border(1.dp, LightSubtleBorder, QuoteBorder)
+    Modifier
+        .fillMaxWidth()
+        .clip(shape = QuoteBorder)
+        .border(1.dp, LightSubtleBorder, QuoteBorder)
 
-val DarkProfile35dpModifier = Modifier.size(Size35dp).clip(shape = CircleShape)
+val DarkProfile35dpModifier =
+    Modifier
+        .size(Size35dp)
+        .clip(shape = CircleShape)
 
-val LightProfile35dpModifier = Modifier.fillMaxWidth().clip(shape = CircleShape)
+val LightProfile35dpModifier =
+    Modifier
+        .fillMaxWidth()
+        .clip(shape = CircleShape)
 
 val DarkReplyBorderModifier =
-    Modifier.padding(top = 5.dp)
+    Modifier
+        .padding(top = 5.dp)
         .fillMaxWidth()
         .clip(shape = QuoteBorder)
         .border(1.dp, DarkSubtleBorder, QuoteBorder)
 
 val LightReplyBorderModifier =
-    Modifier.padding(top = 2.dp, bottom = 0.dp, start = 0.dp, end = 0.dp)
+    Modifier
+        .padding(top = 2.dp, bottom = 0.dp, start = 0.dp, end = 0.dp)
         .fillMaxWidth()
         .clip(shape = QuoteBorder)
         .border(1.dp, LightSubtleBorder, QuoteBorder)
 
 val DarkInnerPostBorderModifier =
-    Modifier.padding(top = 5.dp)
+    Modifier
+        .padding(top = 5.dp)
         .fillMaxWidth()
         .clip(shape = QuoteBorder)
         .border(1.dp, DarkSubtleBorder, QuoteBorder)
 
 val LightInnerPostBorderModifier =
-    Modifier.padding(top = 5.dp)
+    Modifier
+        .padding(top = 5.dp)
         .fillMaxWidth()
         .clip(shape = QuoteBorder)
         .border(1.dp, LightSubtleBorder, QuoteBorder)
 
 val DarkChannelNotePictureModifier =
-    Modifier.size(30.dp)
+    Modifier
+        .size(30.dp)
         .clip(shape = CircleShape)
         .background(DarkColorPalette.background)
         .border(2.dp, DarkColorPalette.background, CircleShape)
 
 val LightChannelNotePictureModifier =
-    Modifier.size(30.dp)
+    Modifier
+        .size(30.dp)
         .clip(shape = CircleShape)
         .background(LightColorPalette.background)
         .border(2.dp, LightColorPalette.background, CircleShape)
 
 val LightRelayIconModifier =
-    Modifier.size(Size13dp).clip(shape = CircleShape).background(LightColorPalette.background)
+    Modifier
+        .size(Size13dp)
+        .clip(shape = CircleShape)
+        .background(LightColorPalette.background)
 
 val DarkRelayIconModifier =
-    Modifier.size(Size13dp).clip(shape = CircleShape).background(DarkColorPalette.background)
+    Modifier
+        .size(Size13dp)
+        .clip(shape = CircleShape)
+        .background(DarkColorPalette.background)
 
 val LightLargeRelayIconModifier =
-    Modifier.size(Size55dp).clip(shape = CircleShape).background(LightColorPalette.background)
+    Modifier
+        .size(Size55dp)
+        .clip(shape = CircleShape)
+        .background(LightColorPalette.background)
 
 val DarkLargeRelayIconModifier =
-    Modifier.size(Size55dp).clip(shape = CircleShape).background(DarkColorPalette.background)
+    Modifier
+        .size(Size55dp)
+        .clip(shape = CircleShape)
+        .background(DarkColorPalette.background)
 
 val RichTextDefaults = RichTextStyle().resolveDefaults()
 
@@ -203,7 +235,8 @@ val MarkDownStyleOnDark =
                         fontSize = Font14SP,
                     ),
                 modifier =
-                    Modifier.padding(0.dp)
+                    Modifier
+                        .padding(0.dp)
                         .fillMaxWidth()
                         .clip(shape = QuoteBorder)
                         .border(1.dp, DarkSubtleBorder, QuoteBorder)
@@ -240,7 +273,8 @@ val MarkDownStyleOnLight =
                         fontSize = Font14SP,
                     ),
                 modifier =
-                    Modifier.padding(0.dp)
+                    Modifier
+                        .padding(0.dp)
                         .fillMaxWidth()
                         .clip(shape = QuoteBorder)
                         .border(1.dp, LightSubtleBorder, QuoteBorder)
@@ -402,19 +436,49 @@ fun AmethystTheme(
 }
 
 @Composable
-fun ThemeComparison(
+fun ThemeComparisonColumn(
     onDark: @Composable () -> Unit,
     onLight: @Composable () -> Unit,
 ) {
     Column {
-        val darkTheme: SharedPreferencesViewModel = viewModel()
+        Box {
-        darkTheme.updateTheme(ThemeType.DARK)
+            val darkTheme: SharedPreferencesViewModel = viewModel()
-        AmethystTheme(darkTheme) { Surface(color = MaterialTheme.colorScheme.background) { onDark() } }
+            darkTheme.updateTheme(ThemeType.DARK)
+            AmethystTheme(darkTheme) {
+                Surface(color = MaterialTheme.colorScheme.background) { onDark() }
+            }
+        }
 
-        val lightTheme: SharedPreferencesViewModel = viewModel()
+        Box {
-        lightTheme.updateTheme(ThemeType.LIGHT)
+            val lightTheme: SharedPreferencesViewModel = viewModel()
-        AmethystTheme(lightTheme) {
+            lightTheme.updateTheme(ThemeType.LIGHT)
-            Surface(color = MaterialTheme.colorScheme.background) { onLight() }
+            AmethystTheme(lightTheme) {
+                Surface(color = MaterialTheme.colorScheme.background) { onLight() }
+            }
+        }
+    }
+}
+
+@Composable
+fun ThemeComparisonRow(
+    onDark: @Composable () -> Unit,
+    onLight: @Composable () -> Unit,
+) {
+    Row {
+        Box(modifier = Modifier.weight(1f)) {
+            val darkTheme: SharedPreferencesViewModel = viewModel()
+            darkTheme.updateTheme(ThemeType.DARK)
+            AmethystTheme(darkTheme) {
+                Surface(color = MaterialTheme.colorScheme.background) { onDark() }
+            }
+        }
+
+        Box(modifier = Modifier.weight(1f)) {
+            val lightTheme: SharedPreferencesViewModel = viewModel()
+            lightTheme.updateTheme(ThemeType.LIGHT)
+            AmethystTheme(lightTheme) {
+                Surface(color = MaterialTheme.colorScheme.background) { onLight() }
+            }
         }
     }
 }