Update icons (#935)

**Background**

This PR adds new designed icons to remote-controls

**Changes**

- Add designed icons

**Test plan**

- Open infrared remotes and see new icons in setup and remotes

CHANGELOG.md

@@ -14,6 +14,7 @@ Attention: don't forget to add the flag for F-Droid before release
 - [Feature] Skip infrared signals on setup screen
 - [Feature] Better user-ux when configuring remote control
 - [Feature] Add flipper action dialogs into remote control and move it into bottombar
+- [Feature] Add new icons for remote-controls
 - [Refactor] Load RemoteControls from flipper, emulating animation
 - [Refactor] Update to Kotlin 2.0
 - [Refactor] Replace Ktorfit with Ktor requests in remote-controls

components/remote-controls/core-model/src/commonMain/kotlin/com/flipperdevices/ifrmvp/model/buttondata/IconButtonData.kt

@@ -14,15 +14,76 @@ data class IconButtonData(
     override val type: ButtonData.ButtonType = ButtonData.ButtonType.ICON
 
     enum class IconType {
-        BACK, HOME, INFO, MORE, MUTE,
-        POWER, COOL, HEAT, FAN, CAMERA,
-        BRIGHT_MORE, BRIGHT_LESS,
-        PAUSE, PLAY, STOP, EXIT,
-        MENU, ZOOM_IN, ZOOM_OUT,
-        RESET, NEXT, PREVIOUS,
-        EJECT, RECORD, WIND_SPEED,
-        MODE, LIGHT, TIMER, OFF,
-        DELETE, LIVE_TV, FAVORITE,
-        ENERGY_SAVE, VOL_UP, VOL_DOWN
+        ADD_PLUS_MORE,
+        AUX,
+        BACK,
+        BRIGHT_LESS,
+        BRIGHT_MORE,
+        CH_DOWN,
+        CH_UP,
+        COLD_WIND,
+        COOL,
+        DELETE,
+        DOWN,
+        EJECT,
+        ENERGY_SAVE,
+        EXIT,
+        FAN_HIGH,
+        FAN_MEDIUM,
+        FAN_LOW,
+        FAN_OFF,
+        FAN_SPEED,
+        FAN_SPEED_DOWN,
+        FAN_SPEED_UP,
+        FAR,
+        FAVORITE,
+        FOCUS_LESS,
+        FOCUS_MORE,
+        FORWARD,
+        HEAT_ADD,
+        HEAT_REDUCE,
+        HOME,
+        INFO,
+        LEFT,
+        LIGHT,
+        LIVE_TV,
+        MENU,
+        MODE,
+        MUTE,
+        NEAR,
+        NEXT,
+        OK,
+        OSCILLATE,
+        PAUSE,
+        PREVIOUS,
+        POWER,
+        RECORD,
+        REMOVE_MINUS_LESS,
+        RESET,
+        REWIND,
+        RIGHT,
+        SETTINGS,
+        SHAKE_WIND,
+        CAMERA,
+        SLEEP,
+        STOP,
+        SWING,
+        TEMPERATURE_DOWN,
+        TEMPERATURE_UP,
+        TIMER,
+        TIMER_ADD,
+        TIMER_REDUCE,
+        TV,
+        UP,
+        VOD,
+        VOL_DOWN,
+        VOL_UP,
+        WIND_SPEED,
+        WIND_TYPE,
+        ZOOM_OUT,
+        ZOOM_IN,
+        PLAY,
+        MORE,
+        HEAT,
     }
 }

components/remote-controls/core-ui/src/main/kotlin/com/flipperdevices/ifrmvp/core/ui/button/NavigationButton.kt

@@ -11,27 +11,21 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft
-import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
-import androidx.compose.material.icons.filled.KeyboardArrowDown
-import androidx.compose.material.icons.filled.KeyboardArrowUp
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.flipperdevices.core.ui.theme.FlipperThemeInternal
 import com.flipperdevices.core.ui.theme.LocalPalletV2
 import com.flipperdevices.ifrmvp.core.ui.button.core.EmulatingBox
 import com.flipperdevices.ifrmvp.core.ui.button.core.NoConnectionBox
 import com.flipperdevices.ifrmvp.core.ui.button.core.SyncingBox
 import com.flipperdevices.ifrmvp.core.ui.layout.core.sf
-import com.flipperdevices.ifrmvp.core.ui.layout.core.sfp
 import com.flipperdevices.ifrmvp.core.ui.util.GridConstants
+import com.flipperdevices.remotecontrols.core.ui.R as RemoteControlsR
 
 @Suppress("LongMethod")
 @Composable
@@ -44,7 +38,6 @@ fun NavigationButton(
     modifier: Modifier = Modifier,
     background: Color = LocalPalletV2.current.surface.menu.body.dufault,
     iconTint: Color = MaterialTheme.colors.onPrimary,
-    textColor: Color = MaterialTheme.colors.onPrimary,
 ) {
     Box(
         modifier = modifier
@@ -55,7 +48,7 @@ fun NavigationButton(
         contentAlignment = Alignment.Center
     ) {
         Icon(
-            painter = rememberVectorPainter(Icons.Filled.KeyboardArrowUp),
+            painter = painterResource(RemoteControlsR.drawable.ic_rc_up),
             tint = iconTint,
             contentDescription = null,
             modifier = Modifier
@@ -65,7 +58,7 @@ fun NavigationButton(
                 .align(Alignment.TopCenter)
         )
         Icon(
-            painter = rememberVectorPainter(Icons.AutoMirrored.Filled.KeyboardArrowLeft),
+            painter = painterResource(RemoteControlsR.drawable.ic_rc_left),
             tint = iconTint,
             contentDescription = null,
             modifier = Modifier
@@ -88,19 +81,18 @@ fun NavigationButton(
                     .align(Alignment.Center),
                 contentAlignment = Alignment.Center,
                 content = {
-                    Text(
-                        text = "OK",
-                        style = MaterialTheme.typography.caption,
-                        color = textColor,
-                        fontSize = 16.sfp,
-                        lineHeight = 2.sfp
+                    Icon(
+                        painter = painterResource(RemoteControlsR.drawable.ic_rc_ok),
+                        tint = MaterialTheme.colors.onPrimary,
+                        contentDescription = null,
+                        modifier = Modifier.size(48.sf)
                     )
                 }
             )
         }
 
         Icon(
-            painter = rememberVectorPainter(Icons.AutoMirrored.Filled.KeyboardArrowRight),
+            painter = painterResource(RemoteControlsR.drawable.ic_rc_right),
             tint = iconTint,
             contentDescription = null,
             modifier = Modifier
@@ -111,7 +103,7 @@ fun NavigationButton(
         )
 
         Icon(
-            painter = rememberVectorPainter(Icons.Filled.KeyboardArrowDown),
+            painter = painterResource(RemoteControlsR.drawable.ic_rc_down),
             tint = iconTint,
             contentDescription = null,
             modifier = Modifier

components/remote-controls/core-ui/src/main/kotlin/com/flipperdevices/ifrmvp/core/ui/button/ShutterButtonComposable.kt

@@ -10,20 +10,19 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.CameraAlt
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.flipperdevices.core.ui.ktx.clickableRipple
 import com.flipperdevices.core.ui.theme.FlipperThemeInternal
 import com.flipperdevices.core.ui.theme.LocalPalletV2
 import com.flipperdevices.ifrmvp.core.ui.button.core.EmulatingBox
 import com.flipperdevices.ifrmvp.core.ui.button.core.SyncingBox
 import com.flipperdevices.ifrmvp.core.ui.layout.core.sf
+import com.flipperdevices.remotecontrols.core.ui.R as RemoteControlsR
 
 @Composable
 fun ShutterButtonComposable(
@@ -49,7 +48,7 @@ fun ShutterButtonComposable(
             contentAlignment = Alignment.Center
         ) {
             Icon(
-                painter = rememberVectorPainter(Icons.Default.CameraAlt),
+                painter = painterResource(RemoteControlsR.drawable.ic_rc_shutter),
                 tint = MaterialTheme.colors.onPrimary,
                 contentDescription = null,
                 modifier = Modifier.size(48.sf)

components/remote-controls/core-ui/src/main/kotlin/com/flipperdevices/ifrmvp/core/ui/button/core/SquareIconButton.kt

@@ -37,7 +37,7 @@ fun SquareIconButton(
             tint = iconTint,
             modifier = Modifier
                 .fillMaxSize()
-                .padding(12.sf)
+                .padding(8.sf)
         )
     }
 }

components/remote-controls/core-ui/src/main/kotlin/com/flipperdevices/ifrmvp/core/ui/ext/IconTypeExt.kt

@@ -1,84 +1,82 @@
 package com.flipperdevices.ifrmvp.core.ui.ext
 
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.Logout
-import androidx.compose.material.icons.automirrored.filled.Reply
-import androidx.compose.material.icons.automirrored.filled.VolumeDown
-import androidx.compose.material.icons.automirrored.filled.VolumeOff
-import androidx.compose.material.icons.automirrored.filled.VolumeUp
-import androidx.compose.material.icons.filled.Air
-import androidx.compose.material.icons.filled.Brightness2
-import androidx.compose.material.icons.filled.Brightness5
-import androidx.compose.material.icons.filled.CameraAlt
-import androidx.compose.material.icons.filled.Delete
-import androidx.compose.material.icons.filled.Eject
-import androidx.compose.material.icons.filled.EmergencyRecording
-import androidx.compose.material.icons.filled.EnergySavingsLeaf
-import androidx.compose.material.icons.filled.Favorite
-import androidx.compose.material.icons.filled.Fireplace
-import androidx.compose.material.icons.filled.Light
-import androidx.compose.material.icons.filled.LiveTv
-import androidx.compose.material.icons.filled.LockReset
-import androidx.compose.material.icons.filled.Logout
-import androidx.compose.material.icons.filled.Menu
-import androidx.compose.material.icons.filled.Mode
-import androidx.compose.material.icons.filled.MoreHoriz
-import androidx.compose.material.icons.filled.Pause
-import androidx.compose.material.icons.filled.PlayArrow
-import androidx.compose.material.icons.filled.PowerOff
-import androidx.compose.material.icons.filled.SettingsPower
-import androidx.compose.material.icons.filled.SevereCold
-import androidx.compose.material.icons.filled.SkipNext
-import androidx.compose.material.icons.filled.SkipPrevious
-import androidx.compose.material.icons.filled.Stop
-import androidx.compose.material.icons.filled.Timer
-import androidx.compose.material.icons.filled.VolumeDown
-import androidx.compose.material.icons.filled.VolumeUp
-import androidx.compose.material.icons.filled.WindPower
-import androidx.compose.material.icons.filled.ZoomIn
-import androidx.compose.material.icons.filled.ZoomOut
-import androidx.compose.material.icons.outlined.Home
-import androidx.compose.material.icons.outlined.Info
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.res.painterResource
 import com.flipperdevices.ifrmvp.model.buttondata.IconButtonData
+import com.flipperdevices.remotecontrols.core.ui.R as RemoteControlsR
 
-@Suppress("CyclomaticComplexMethod")
+@Suppress("CyclomaticComplexMethod", "LongMethod")
 @Composable
 fun IconButtonData.IconType.asPainter() = when (this) {
-    IconButtonData.IconType.BACK -> rememberVectorPainter(Icons.AutoMirrored.Filled.Reply)
-    IconButtonData.IconType.HOME -> rememberVectorPainter(Icons.Outlined.Home)
-    IconButtonData.IconType.INFO -> rememberVectorPainter(Icons.Outlined.Info)
-    IconButtonData.IconType.MORE -> rememberVectorPainter(Icons.Filled.MoreHoriz)
-    IconButtonData.IconType.MUTE -> rememberVectorPainter(Icons.AutoMirrored.Filled.VolumeOff)
-    IconButtonData.IconType.POWER -> rememberVectorPainter(Icons.Default.SettingsPower)
-    IconButtonData.IconType.COOL -> rememberVectorPainter(Icons.Default.SevereCold)
-    IconButtonData.IconType.HEAT -> rememberVectorPainter(Icons.Default.Fireplace)
-    IconButtonData.IconType.FAN -> rememberVectorPainter(Icons.Default.Air)
-    IconButtonData.IconType.CAMERA -> rememberVectorPainter(Icons.Default.CameraAlt)
-    IconButtonData.IconType.BRIGHT_MORE -> rememberVectorPainter(Icons.Default.Brightness2)
-    IconButtonData.IconType.BRIGHT_LESS -> rememberVectorPainter(Icons.Default.Brightness5)
-    IconButtonData.IconType.PAUSE -> rememberVectorPainter(Icons.Default.Pause)
-    IconButtonData.IconType.PLAY -> rememberVectorPainter(Icons.Default.PlayArrow)
-    IconButtonData.IconType.STOP -> rememberVectorPainter(Icons.Default.Stop)
-    IconButtonData.IconType.ENERGY_SAVE -> rememberVectorPainter(Icons.Default.EnergySavingsLeaf)
-    IconButtonData.IconType.EXIT -> rememberVectorPainter(Icons.AutoMirrored.Filled.Logout)
-    IconButtonData.IconType.MENU -> rememberVectorPainter(Icons.Default.Menu)
-    IconButtonData.IconType.ZOOM_IN -> rememberVectorPainter(Icons.Default.ZoomIn)
-    IconButtonData.IconType.ZOOM_OUT -> rememberVectorPainter(Icons.Default.ZoomOut)
-    IconButtonData.IconType.RESET -> rememberVectorPainter(Icons.Default.LockReset)
-    IconButtonData.IconType.NEXT -> rememberVectorPainter(Icons.Default.SkipNext)
-    IconButtonData.IconType.PREVIOUS -> rememberVectorPainter(Icons.Default.SkipPrevious)
-    IconButtonData.IconType.EJECT -> rememberVectorPainter(Icons.Default.Eject)
-    IconButtonData.IconType.RECORD -> rememberVectorPainter(Icons.Default.EmergencyRecording)
-    IconButtonData.IconType.WIND_SPEED -> rememberVectorPainter(Icons.Default.WindPower)
-    IconButtonData.IconType.MODE -> rememberVectorPainter(Icons.Default.Mode)
-    IconButtonData.IconType.LIGHT -> rememberVectorPainter(Icons.Default.Light)
-    IconButtonData.IconType.TIMER -> rememberVectorPainter(Icons.Default.Timer)
-    IconButtonData.IconType.OFF -> rememberVectorPainter(Icons.Default.PowerOff)
-    IconButtonData.IconType.DELETE -> rememberVectorPainter(Icons.Default.Delete)
-    IconButtonData.IconType.LIVE_TV -> rememberVectorPainter(Icons.Default.LiveTv)
-    IconButtonData.IconType.FAVORITE -> rememberVectorPainter(Icons.Default.Favorite)
-    IconButtonData.IconType.VOL_UP -> rememberVectorPainter(Icons.AutoMirrored.Filled.VolumeUp)
-    IconButtonData.IconType.VOL_DOWN -> rememberVectorPainter(Icons.AutoMirrored.Filled.VolumeDown)
-}
+    IconButtonData.IconType.BACK -> RemoteControlsR.drawable.ic_rc_back
+    IconButtonData.IconType.HOME -> RemoteControlsR.drawable.ic_rc_home
+    IconButtonData.IconType.INFO -> RemoteControlsR.drawable.ic_rc_info
+    IconButtonData.IconType.MORE -> RemoteControlsR.drawable.ic_rc_more_points
+    IconButtonData.IconType.MUTE -> RemoteControlsR.drawable.ic_rc_mute
+    IconButtonData.IconType.POWER -> RemoteControlsR.drawable.ic_rc_pwr
+    IconButtonData.IconType.COOL -> RemoteControlsR.drawable.ic_rc_cool
+    IconButtonData.IconType.HEAT -> RemoteControlsR.drawable.ic_rc_heat_add
+    IconButtonData.IconType.CAMERA -> RemoteControlsR.drawable.ic_rc_shutter
+    IconButtonData.IconType.BRIGHT_MORE -> RemoteControlsR.drawable.ic_rc_brightness_up
+    IconButtonData.IconType.BRIGHT_LESS -> RemoteControlsR.drawable.ic_rc_brightness_down
+    IconButtonData.IconType.PAUSE -> RemoteControlsR.drawable.ic_rc_pause
+    IconButtonData.IconType.PLAY -> RemoteControlsR.drawable.ic_rc_play
+    IconButtonData.IconType.STOP -> RemoteControlsR.drawable.ic_rc_stop
+    IconButtonData.IconType.ENERGY_SAVE -> RemoteControlsR.drawable.ic_rc_energy_save_eco
+    IconButtonData.IconType.EXIT -> RemoteControlsR.drawable.ic_rc_exit
+    IconButtonData.IconType.MENU -> RemoteControlsR.drawable.ic_rc_menu
+    IconButtonData.IconType.ZOOM_IN -> RemoteControlsR.drawable.ic_rc_zoom_up
+    IconButtonData.IconType.ZOOM_OUT -> RemoteControlsR.drawable.ic_rc_zoom_down
+    IconButtonData.IconType.RESET -> RemoteControlsR.drawable.ic_rc_reset
+    IconButtonData.IconType.NEXT -> RemoteControlsR.drawable.ic_rc_next
+    IconButtonData.IconType.PREVIOUS -> RemoteControlsR.drawable.ic_rc_previous
+    IconButtonData.IconType.EJECT -> RemoteControlsR.drawable.ic_rc_eject
+    IconButtonData.IconType.RECORD -> RemoteControlsR.drawable.ic_rc_record
+    IconButtonData.IconType.WIND_SPEED -> RemoteControlsR.drawable.ic_rc_wind_speed
+    IconButtonData.IconType.MODE -> RemoteControlsR.drawable.ic_rc_mode
+    IconButtonData.IconType.LIGHT -> RemoteControlsR.drawable.ic_rc_light
+    IconButtonData.IconType.TIMER -> RemoteControlsR.drawable.ic_rc_timer
+    IconButtonData.IconType.DELETE -> RemoteControlsR.drawable.ic_rc_delete
+    IconButtonData.IconType.LIVE_TV -> RemoteControlsR.drawable.ic_rc_live_tv
+    IconButtonData.IconType.FAVORITE -> RemoteControlsR.drawable.ic_rc_favorite
+    IconButtonData.IconType.VOL_UP -> RemoteControlsR.drawable.ic_rc_vol_up
+    IconButtonData.IconType.VOL_DOWN -> RemoteControlsR.drawable.ic_rc_vol_down
+    IconButtonData.IconType.ADD_PLUS_MORE -> RemoteControlsR.drawable.ic_rc_add_plus_more
+    IconButtonData.IconType.AUX -> RemoteControlsR.drawable.ic_rc_aux
+    IconButtonData.IconType.CH_DOWN -> RemoteControlsR.drawable.ic_rc_ch_down
+    IconButtonData.IconType.CH_UP -> RemoteControlsR.drawable.ic_rc_ch_up
+    IconButtonData.IconType.COLD_WIND -> RemoteControlsR.drawable.ic_rc_cold_wind
+    IconButtonData.IconType.DOWN -> RemoteControlsR.drawable.ic_rc_down
+    IconButtonData.IconType.FAN_HIGH -> RemoteControlsR.drawable.ic_rc_fan_high
+    IconButtonData.IconType.FAN_MEDIUM -> RemoteControlsR.drawable.ic_rc_fan_medium
+    IconButtonData.IconType.FAN_LOW -> RemoteControlsR.drawable.ic_rc_fan_low
+    IconButtonData.IconType.FAN_OFF -> RemoteControlsR.drawable.ic_rc_fan_off
+    IconButtonData.IconType.FAN_SPEED -> RemoteControlsR.drawable.ic_rc_fan_speed
+    IconButtonData.IconType.FAN_SPEED_DOWN -> RemoteControlsR.drawable.ic_rc_fan_speed_down
+    IconButtonData.IconType.FAN_SPEED_UP -> RemoteControlsR.drawable.ic_rc_fan_speed_up
+    IconButtonData.IconType.FAR -> RemoteControlsR.drawable.ic_rc_far
+    IconButtonData.IconType.FOCUS_LESS -> RemoteControlsR.drawable.ic_rc_focus_less
+    IconButtonData.IconType.FOCUS_MORE -> RemoteControlsR.drawable.ic_rc_focus_more
+    IconButtonData.IconType.FORWARD -> RemoteControlsR.drawable.ic_rc_forw_forward
+    IconButtonData.IconType.HEAT_ADD -> RemoteControlsR.drawable.ic_rc_heat_add
+    IconButtonData.IconType.HEAT_REDUCE -> RemoteControlsR.drawable.ic_rc_heat_reduce
+    IconButtonData.IconType.LEFT -> RemoteControlsR.drawable.ic_rc_left
+    IconButtonData.IconType.NEAR -> RemoteControlsR.drawable.ic_rc_near
+    IconButtonData.IconType.OK -> RemoteControlsR.drawable.ic_rc_ok
+    IconButtonData.IconType.OSCILLATE -> RemoteControlsR.drawable.ic_rc_oscillate
+    IconButtonData.IconType.REMOVE_MINUS_LESS -> RemoteControlsR.drawable.ic_rc_remove_minus_less
+    IconButtonData.IconType.REWIND -> RemoteControlsR.drawable.ic_rc_rew_rewind
+    IconButtonData.IconType.RIGHT -> RemoteControlsR.drawable.ic_rc_right
+    IconButtonData.IconType.SETTINGS -> RemoteControlsR.drawable.ic_rc_set_settings
+    IconButtonData.IconType.SHAKE_WIND -> RemoteControlsR.drawable.ic_rc_shake_wind
+    IconButtonData.IconType.SLEEP -> RemoteControlsR.drawable.ic_rc_sleep
+    IconButtonData.IconType.SWING -> RemoteControlsR.drawable.ic_rc_swing
+    IconButtonData.IconType.TEMPERATURE_DOWN -> RemoteControlsR.drawable.ic_rc_temperature_down
+    IconButtonData.IconType.TEMPERATURE_UP -> RemoteControlsR.drawable.ic_rc_temperature_up
+    IconButtonData.IconType.TIMER_ADD -> RemoteControlsR.drawable.ic_rc_timer_add
+    IconButtonData.IconType.TIMER_REDUCE -> RemoteControlsR.drawable.ic_rc_timer_reduce
+    IconButtonData.IconType.TV -> RemoteControlsR.drawable.ic_rc_tv
+    IconButtonData.IconType.UP -> RemoteControlsR.drawable.ic_rc_up
+    IconButtonData.IconType.VOD -> RemoteControlsR.drawable.ic_rc_vod
+    IconButtonData.IconType.WIND_TYPE -> RemoteControlsR.drawable.ic_rc_wind_type
+}.let { painterResource(it) }