Merge pull request #30 from Infomaniak/settings-theme

Use real wordings and icons for Theme Settings

app/src/main/java/com/infomaniak/swisstransfer/ui/icons/app/BlackAndWhiteCircle.kt

@@ -0,0 +1,105 @@
+package com.infomaniak.swisstransfer.ui.icons.app
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.PathData
+import androidx.compose.ui.graphics.vector.group
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.infomaniak.swisstransfer.ui.icons.AppIcons
+
+val AppIcons.BlackAndWhiteCircle: ImageVector
+    get() {
+        if (_blackAndWhiteCircle != null) {
+            return _blackAndWhiteCircle!!
+        }
+        _blackAndWhiteCircle = Builder(
+            name = "BlackAndWhiteCircle",
+            defaultWidth = 24.0.dp,
+            defaultHeight = 24.0.dp,
+            viewportWidth = 24.0f,
+            viewportHeight = 24.0f
+        ).apply {
+            path(
+                fill = SolidColor(Color(0xFF000000)),
+                stroke = null,
+                strokeLineWidth = 0.0f,
+                strokeLineCap = Butt,
+                strokeLineJoin = Miter,
+                strokeLineMiter = 4.0f,
+                pathFillType = NonZero
+            ) {
+                moveTo(12.0f, 0.0f)
+                arcToRelative(12.0f, 12.0f, 0.0f, false, true, 12.0f, 12.0f)
+                arcToRelative(12.0f, 12.0f, 0.0f, false, true, -12.0f, 12.0f)
+                arcTo(12.0f, 12.0f, 0.0f, false, true, 0.0f, 12.0f)
+                arcTo(12.0f, 12.0f, 0.0f, false, true, 12.0f, 0.0f)
+                close()
+            }
+            group(clipPathData = PathData {
+                moveTo(12.0f, 0.0f)
+                arcToRelative(12.0f, 12.0f, 0.0f, false, true, 12.0f, 12.0f)
+                arcToRelative(12.0f, 12.0f, 0.0f, false, true, -12.0f, 12.0f)
+                arcTo(12.0f, 12.0f, 0.0f, false, true, 0.0f, 12.0f)
+                arcTo(12.0f, 12.0f, 0.0f, false, true, 12.0f, 0.0f)
+                close()
+            }) {
+                path(
+                    fill = SolidColor(Color(0xFFF5F5F5)),
+                    stroke = null,
+                    strokeLineWidth = 0.0f,
+                    strokeLineCap = Butt,
+                    strokeLineJoin = Miter,
+                    strokeLineMiter = 4.0f,
+                    pathFillType = NonZero
+                ) {
+                    moveTo(-4.5f, 27.5f)
+                    lineTo(27.0f, -2.5f)
+                    lineToRelative(-30.5f, -1.0f)
+                    close()
+                }
+                path(
+                    fill = null,
+                    stroke = SolidColor(Color(0xFF000000)),
+                    strokeLineWidth = 0.3f,
+                    strokeLineCap = Butt,
+                    strokeLineJoin = Miter,
+                    strokeLineMiter = 4.0f,
+                    pathFillType = NonZero
+                ) {
+                    moveTo(12.0f, 0.15f)
+                    arcTo(11.85f, 11.85f, 0.0f, false, true, 23.85f, 12.0f)
+                    arcTo(11.85f, 11.85f, 0.0f, false, true, 12.0f, 23.85f)
+                    arcTo(11.85f, 11.85f, 0.0f, false, true, 0.15f, 12.0f)
+                    arcTo(11.85f, 11.85f, 0.0f, false, true, 12.0f, 0.15f)
+                    close()
+                }
+            }
+        }.build()
+        return _blackAndWhiteCircle!!
+    }
+
+private var _blackAndWhiteCircle: ImageVector? = null
+
+@Preview
+@Composable
+private fun Preview() {
+    Box {
+        Image(
+            imageVector = AppIcons.BlackAndWhiteCircle,
+            contentDescription = null,
+            modifier = Modifier.size(AppIcons.previewSize)
+        )
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/icons/app/BlackCircle.kt

@@ -0,0 +1,61 @@
+package com.infomaniak.swisstransfer.ui.icons.app
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.infomaniak.swisstransfer.ui.icons.AppIcons
+
+val AppIcons.BlackCircle: ImageVector
+    get() {
+        if (_blackCircle != null) {
+            return _blackCircle!!
+        }
+        _blackCircle = Builder(
+            name = "BlackCircle",
+            defaultWidth = 24.0.dp,
+            defaultHeight = 24.0.dp,
+            viewportWidth = 24.0f,
+            viewportHeight = 24.0f
+        ).apply {
+            path(
+                fill = SolidColor(Color(0xFF000000)), stroke = SolidColor(Color(0xFF000000)),
+                strokeLineWidth = 0.3f, strokeLineCap = Butt, strokeLineJoin = Miter,
+                strokeLineMiter = 4.0f, pathFillType = NonZero
+            ) {
+                moveTo(12.0f, 0.15f)
+                arcTo(11.85f, 11.85f, 0.0f, false, true, 23.85f, 12.0f)
+                arcTo(11.85f, 11.85f, 0.0f, false, true, 12.0f, 23.85f)
+                arcTo(11.85f, 11.85f, 0.0f, false, true, 0.15f, 12.0f)
+                arcTo(11.85f, 11.85f, 0.0f, false, true, 12.0f, 0.15f)
+                close()
+            }
+        }
+            .build()
+        return _blackCircle!!
+    }
+
+private var _blackCircle: ImageVector? = null
+
+@Preview
+@Composable
+private fun Preview() {
+    Box {
+        Image(
+            imageVector = AppIcons.BlackCircle,
+            contentDescription = null,
+            modifier = Modifier.size(AppIcons.previewSize)
+        )
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/icons/app/WhiteCircle.kt

@@ -0,0 +1,64 @@
+package com.infomaniak.swisstransfer.ui.icons.app
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.infomaniak.swisstransfer.ui.icons.AppIcons
+
+val AppIcons.WhiteCircle: ImageVector
+    get() {
+        if (_whiteCircle != null) {
+            return _whiteCircle!!
+        }
+        _whiteCircle = Builder(
+            name = "WhiteCircle",
+            defaultWidth = 24.0.dp,
+            defaultHeight = 24.0.dp,
+            viewportWidth = 24.0f,
+            viewportHeight = 24.0f
+        ).apply {
+            path(
+                fill = SolidColor(Color(0xFFF5F5F5)),
+                stroke = SolidColor(Color(0xFF000000)),
+                strokeLineWidth = 0.3f,
+                strokeLineCap = Butt,
+                strokeLineJoin = Miter,
+                strokeLineMiter = 4.0f,
+                pathFillType = NonZero
+            ) {
+                moveTo(12.0f, 0.15f)
+                arcTo(11.85f, 11.85f, 0.0f, false, true, 23.85f, 12.0f)
+                arcTo(11.85f, 11.85f, 0.0f, false, true, 12.0f, 23.85f)
+                arcTo(11.85f, 11.85f, 0.0f, false, true, 0.15f, 12.0f)
+                arcTo(11.85f, 11.85f, 0.0f, false, true, 12.0f, 0.15f)
+                close()
+            }
+        }.build()
+        return _whiteCircle!!
+    }
+
+private var _whiteCircle: ImageVector? = null
+
+@Preview
+@Composable
+private fun Preview() {
+    Box {
+        Image(
+            imageVector = AppIcons.WhiteCircle,
+            contentDescription = null,
+            modifier = Modifier.size(AppIcons.previewSize)
+        )
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/SettingsThemeScreen.kt

@@ -31,7 +31,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import com.infomaniak.swisstransfer.R
 import com.infomaniak.swisstransfer.ui.icons.AppIcons
-import com.infomaniak.swisstransfer.ui.icons.app.Add
+import com.infomaniak.swisstransfer.ui.icons.app.BlackAndWhiteCircle
+import com.infomaniak.swisstransfer.ui.icons.app.BlackCircle
+import com.infomaniak.swisstransfer.ui.icons.app.WhiteCircle
 import com.infomaniak.swisstransfer.ui.screen.main.settings.components.SettingOption
 import com.infomaniak.swisstransfer.ui.screen.main.settings.components.SettingTitle
 import com.infomaniak.swisstransfer.ui.screen.main.settings.components.SingleSelectOptions
@@ -42,17 +44,17 @@ import com.infomaniak.swisstransfer.ui.utils.PreviewTablet
 @Composable
 fun SettingsThemeScreen() {
     Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
-        SettingTitle(titleRes = R.string.appName)
+        SettingTitle(titleRes = R.string.settingsThemeTitle)
 
         var selectedItem by rememberSaveable { mutableIntStateOf(0) } // TODO: Use DataStore or Realm
         SingleSelectOptions(ThemeOption.entries, { selectedItem }, { selectedItem = it })
     }
 }
 
 enum class ThemeOption(override val title: Int, override val icon: ImageVector) : SettingOption {
-    SYSTEM(R.string.appName, AppIcons.Add),
-    LIGHT(R.string.appName, AppIcons.Add),
-    DARK(R.string.appName, AppIcons.Add),
+    SYSTEM(R.string.settingsOptionThemeSystem, AppIcons.BlackAndWhiteCircle),
+    LIGHT(R.string.settingsOptionThemeLight, AppIcons.WhiteCircle),
+    DARK(R.string.settingsOptionThemeDark, AppIcons.BlackCircle),
 }
 
 @PreviewMobile

app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/components/SettingTitle.kt

@@ -18,12 +18,17 @@
 
 package com.infomaniak.swisstransfer.ui.screen.main.settings.components
 
+import android.content.res.Configuration
 import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import com.infomaniak.swisstransfer.R
 import com.infomaniak.swisstransfer.ui.theme.Dimens
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 
@@ -36,3 +41,16 @@ fun SettingTitle(@StringRes titleRes: Int) {
         color = SwissTransferTheme.colors.secondaryTextColor,
     )
 }
+
+@Preview(name = "Light")
+@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
+@Composable
+private fun SettingTitlePreview() {
+    SwissTransferTheme {
+        Surface {
+            Box {
+                SettingTitle(titleRes = R.string.appName)
+            }
+        }
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/components/SingleSelectOptions.kt

@@ -23,6 +23,7 @@ import androidx.annotation.StringRes
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.scaleIn
 import androidx.compose.animation.scaleOut
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.selection.selectable
 import androidx.compose.foundation.selection.selectableGroup
@@ -67,7 +68,7 @@ private fun SettingOptionItem(item: SettingOption, isSelected: Boolean, onClick:
             verticalAlignment = Alignment.CenterVertically,
         ) {
             item.icon?.let {
-                Icon(imageVector = it, contentDescription = null)
+                Image(imageVector = it, contentDescription = null)
                 Spacer(modifier = Modifier.width(Margin.Medium))
             }
 

app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt

@@ -30,7 +30,7 @@ val LocalCustomColorScheme: ProvidableCompositionLocal<CustomColorScheme> = stat
 
 @Composable
 fun SwissTransferTheme(
-    darkTheme: Boolean = isSystemInDarkTheme(),
+    darkTheme: Boolean = isDarkTheme(),
     content: @Composable () -> Unit,
 ) {
     val customColors = if (darkTheme) CustomDarkColorScheme else CustomLightColorScheme
@@ -47,6 +47,13 @@ fun SwissTransferTheme(
     }
 }
 
+@Composable
+fun isDarkTheme(): Boolean {
+    // rememberMutableStateOf
+    // TODO check in realm. If system, isSystemDark, otherwise,
+    return isSystemInDarkTheme()
+}
+
 object SwissTransferTheme {
     val typography: CustomTypography
         @Composable

app/src/main/res/values-de/strings.xml

@@ -36,7 +36,11 @@
     <string name="settingsOptionNotifications">Benachrichtigungen</string>
     <string name="settingsOptionShareIdeas">Teile deine Ideen</string>
     <string name="settingsOptionTheme">Thema</string>
+    <string name="settingsOptionThemeDark">Dunkel</string>
+    <string name="settingsOptionThemeLight">Hell</string>
+    <string name="settingsOptionThemeSystem">System</string>
     <string name="settingsOptionValidityPeriod">Dauer der Gültigkeit</string>
+    <string name="settingsThemeTitle">Wähle ein Thema aus</string>
     <string name="settingsTitle">Einstellungen</string>
     <string name="transferTypeEmail">E-Mail</string>
     <string name="transferTypeLink">Link</string>

app/src/main/res/values-es/strings.xml

@@ -36,7 +36,11 @@
     <string name="settingsOptionNotifications">Notificaciones</string>
     <string name="settingsOptionShareIdeas">Comparte tus ideas</string>
     <string name="settingsOptionTheme">Tema</string>
+    <string name="settingsOptionThemeDark">Oscuro</string>
+    <string name="settingsOptionThemeLight">Luz</string>
+    <string name="settingsOptionThemeSystem">Sistema</string>
     <string name="settingsOptionValidityPeriod">Periodo de validez</string>
+    <string name="settingsThemeTitle">Seleccione un tema</string>
     <string name="settingsTitle">Parámetros</string>
     <string name="transferTypeEmail">Correo electrónico</string>
     <string name="transferTypeLink">Enlace</string>

app/src/main/res/values-fr/strings.xml

@@ -36,7 +36,11 @@
     <string name="settingsOptionNotifications">Notifications</string>
     <string name="settingsOptionShareIdeas">Partage tes idées</string>
     <string name="settingsOptionTheme">Thème</string>
+    <string name="settingsOptionThemeDark">Sombre</string>
+    <string name="settingsOptionThemeLight">Clair</string>
+    <string name="settingsOptionThemeSystem">Système</string>
     <string name="settingsOptionValidityPeriod">Durée de validité</string>
+    <string name="settingsThemeTitle">Sélectionne un thème</string>
     <string name="settingsTitle">Paramètres</string>
     <string name="transferTypeEmail">E-mail</string>
     <string name="transferTypeLink">Lien</string>

app/src/main/res/values-it/strings.xml

@@ -36,7 +36,11 @@
     <string name="settingsOptionNotifications">Notifiche</string>
     <string name="settingsOptionShareIdeas">Condividete le vostre idee</string>
     <string name="settingsOptionTheme">Tema</string>
+    <string name="settingsOptionThemeDark">Scuro</string>
+    <string name="settingsOptionThemeLight">Chiaro</string>
+    <string name="settingsOptionThemeSystem">Sistema</string>
     <string name="settingsOptionValidityPeriod">Periodo di validità</string>
+    <string name="settingsThemeTitle">Seleziona un tema</string>
     <string name="settingsTitle">Parametri</string>
     <string name="transferTypeEmail">Email</string>
     <string name="transferTypeLink">Link</string>