expo-dev-launcher 6.0.5 → 6.0.6

package/android/src/debug/java/expo/modules/devlauncher/compose/screens/HomeScreen.kt

@@ -1,110 +1,40 @@
 package expo.modules.devlauncher.compose.screens
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.displayCutoutPadding
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.SolidColor
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import com.composables.core.Dialog
-import com.composables.core.DialogPanel
-import com.composables.core.DialogState
-import com.composables.core.Scrim
 import com.composables.core.rememberDialogState
 import com.composeunstyled.Button
-import com.composeunstyled.Icon
-import expo.modules.core.utilities.EmulatorUtilities
-import expo.modules.devlauncher.R
 import expo.modules.devlauncher.compose.DefaultScreenContainer
 import expo.modules.devlauncher.compose.models.HomeAction
 import expo.modules.devlauncher.compose.models.HomeState
 import expo.modules.devlauncher.compose.primitives.Accordion
 import expo.modules.devlauncher.compose.ui.AppHeader
 import expo.modules.devlauncher.compose.ui.AppLoadingErrorDialog
-import expo.modules.devlauncher.compose.ui.DevelopmentSessionHelper
+import expo.modules.devlauncher.compose.ui.DevelopmentSessionActions
+import expo.modules.devlauncher.compose.ui.DevelopmentSessionSection
 import expo.modules.devlauncher.compose.ui.RunningAppCard
-import expo.modules.devlauncher.compose.ui.ServerUrlInput
 import expo.modules.devlauncher.launcher.DevLauncherAppEntry
 import expo.modules.devlauncher.launcher.errors.DevLauncherErrorInstance
 import expo.modules.devlauncher.services.PackagerInfo
 import expo.modules.devmenu.compose.newtheme.NewAppTheme
-import expo.modules.devmenu.compose.primitives.DayNighIcon
-import expo.modules.devmenu.compose.primitives.Divider
-import expo.modules.devmenu.compose.primitives.Heading
 import expo.modules.devmenu.compose.primitives.NewText
-import expo.modules.devmenu.compose.primitives.RowLayout
 import expo.modules.devmenu.compose.primitives.Spacer
-import expo.modules.devmenu.compose.primitives.pulseEffect
 import expo.modules.devmenu.compose.ui.Warning
-import kotlinx.coroutines.delay
-import kotlin.time.Clock
-import kotlin.time.Duration.Companion.seconds
 import kotlin.time.ExperimentalTime
-import kotlin.time.Instant
 
 @Composable
-fun HowToStartDevelopmentServerDialog(dialogState: DialogState) {
-  Dialog(state = dialogState) {
-    Scrim()
-
-    DialogPanel(
-      modifier = Modifier
-        .displayCutoutPadding()
-        .systemBarsPadding()
-        .padding(horizontal = NewAppTheme.spacing.`3`)
-        .clip(RoundedCornerShape(NewAppTheme.borderRadius.xl))
-        .background(NewAppTheme.colors.background.default)
-    ) {
-      Column {
-        RowLayout(
-          rightComponent = {
-            Button(onClick = {
-              dialogState.visible = false
-            }) {
-              DayNighIcon(
-                id = R.drawable.x_icon,
-                contentDescription = "Close dialog"
-              )
-            }
-          },
-          modifier = Modifier.padding(NewAppTheme.spacing.`3`)
-        ) {
-          Heading("Development servers")
-        }
-
-        Divider()
-
-        Row(modifier = Modifier.padding(NewAppTheme.spacing.`3`)) {
-          DevelopmentSessionHelper()
-        }
-      }
-    }
-  }
-}
-
-@Composable
-fun CrashReport(
+private fun CrashReport(
   crashReport: DevLauncherErrorInstance?,
   onClick: (report: DevLauncherErrorInstance) -> Unit = {}
 ) {
@@ -128,10 +58,10 @@ fun CrashReport(
 fun HomeScreen(
   state: HomeState,
   onAction: (HomeAction) -> Unit,
-  onProfileClick: () -> Unit
+  onProfileClick: () -> Unit,
+  onDevServersClick: () -> Unit
 ) {
   val hasPackager = state.runningPackagers.isNotEmpty()
-  val howToStartDevelopmentDialogState = rememberDialogState(initiallyVisible = false)
   val errorDialogState = rememberDialogState(initiallyVisible = false)
   val scrollState = rememberScrollState()
 
@@ -147,8 +77,6 @@ fun HomeScreen(
     }
   }
 
-  HowToStartDevelopmentServerDialog(howToStartDevelopmentDialogState)
-
   AppLoadingErrorDialog(
     errorDialogState,
     currentError = state.loadingError
@@ -195,9 +123,13 @@ fun HomeScreen(
             fontFamily = NewAppTheme.font.mono
           ),
           color = NewAppTheme.colors.text.link,
-          modifier = Modifier.clickable {
-            howToStartDevelopmentDialogState.visible = true
-          }
+          modifier = Modifier.clickable(
+            interactionSource = null,
+            indication = null,
+            onClick = {
+              onDevServersClick()
+            }
+          )
         )
       }
 
@@ -205,7 +137,7 @@ fun HomeScreen(
 
       if (hasPackager) {
         Column(
-          verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`1`)
+          verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`)
         ) {
           for (packager in state.runningPackagers) {
             RunningAppCard(
@@ -216,128 +148,19 @@ fun HomeScreen(
             }
           }
         }
-      } else {
-        DevelopmentSessionHelper()
-        Spacer(NewAppTheme.spacing.`2`)
-      }
-
-      val isFetching = state.isFetchingPackagers
-      var isFetchingUIState by remember { mutableStateOf(isFetching) }
-      var fetchStartTime by remember { mutableStateOf<Instant?>(null) }
-
-      LaunchedEffect(isFetching) {
-        if (isFetching) {
-          isFetchingUIState = true
-          fetchStartTime = Clock.System.now()
-          return@LaunchedEffect
-        }
-
-        if (!isFetchingUIState) {
-          return@LaunchedEffect
-        }
-
-        val startTime = fetchStartTime
-        if (startTime == null) {
-          isFetchingUIState = false
-          return@LaunchedEffect
-        }
-
-        val elapsedTime = startTime - Clock.System.now()
-        val remainingTime = 2.seconds - elapsedTime
 
-        delay(remainingTime)
-
-        isFetchingUIState = state.isFetchingPackagers
-      }
+        Spacer(NewAppTheme.spacing.`2`)
 
-      Button(
-        onClick = {
-          onAction(HomeAction.RefetchRunningApps)
-        },
-        enabled = !isFetchingUIState
-      ) {
-        Row(
-          horizontalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`),
-          verticalAlignment = Alignment.CenterVertically,
+        Accordion(
+          "New development server",
+          initialState = false,
           modifier = Modifier
             .fillMaxWidth()
-            .padding(vertical = 12.dp)
         ) {
-          Icon(
-            painter = painterResource(R.drawable.signal),
-            contentDescription = "Signal Icon",
-            tint = NewAppTheme.colors.text.link,
-            modifier = Modifier
-              .size(16.dp)
-              .then(
-                if (isFetchingUIState) {
-                  Modifier.pulseEffect(
-                    initialScale = 0.2f,
-                    brush = SolidColor(NewAppTheme.colors.text.link.copy(alpha = 0.4f))
-                  )
-                } else {
-                  Modifier
-                }
-              )
-          )
-
-          NewText(
-            if (isFetchingUIState) {
-              "Searching for development servers..."
-            } else {
-              "Fetch development servers"
-            },
-            style = NewAppTheme.font.sm,
-            color = NewAppTheme.colors.text.link
-          )
-        }
-      }
-
-      if (!EmulatorUtilities.isRunningOnEmulator()) {
-        Button(
-          onClick = {
-            onAction(HomeAction.ScanQRCode)
-          }
-        ) {
-          Row(
-            horizontalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`2`),
-            verticalAlignment = Alignment.CenterVertically,
-            modifier = Modifier
-              .fillMaxWidth()
-              .padding(vertical = 12.dp)
-          ) {
-            Icon(
-              painter = painterResource(R.drawable.scan),
-              contentDescription = "QR code",
-              tint = NewAppTheme.colors.text.link,
-              modifier = Modifier
-                .size(16.dp)
-            )
-
-            NewText(
-              "Scan QR code",
-              style = NewAppTheme.font.sm,
-              color = NewAppTheme.colors.text.link
-            )
-          }
-        }
-      }
-
-      Accordion(
-        "Enter URL manually",
-        initialState = false,
-        modifier = Modifier
-          .fillMaxWidth()
-          .padding(vertical = 12.dp)
-      ) {
-        Column {
-          Spacer(NewAppTheme.spacing.`1`)
-          ServerUrlInput(
-            openApp = { urlValue ->
-              onAction(HomeAction.OpenApp(urlValue))
-            }
-          )
+          DevelopmentSessionActions(state.isFetchingPackagers, onAction)
         }
+      } else {
+        DevelopmentSessionSection(state.isFetchingPackagers, onAction)
       }
 
       if (state.recentlyOpenedApps.isNotEmpty()) {
@@ -363,9 +186,13 @@ fun HomeScreen(
               fontFamily = NewAppTheme.font.mono
             ),
             color = NewAppTheme.colors.text.link,
-            modifier = Modifier.clickable {
-              onAction(HomeAction.ResetRecentlyOpenedApps)
-            }
+            modifier = Modifier.clickable(
+              interactionSource = null,
+              indication = null,
+              onClick = {
+                onAction(HomeAction.ResetRecentlyOpenedApps)
+              }
+            )
           )
         }
 
@@ -418,7 +245,8 @@ fun HomeScreenPreview() {
         )
       ),
       onAction = {},
-      onProfileClick = {}
+      onProfileClick = {},
+      onDevServersClick = {}
     )
   }
 }

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/DevelopmentSession.kt

@@ -0,0 +1,122 @@
+package expo.modules.devlauncher.compose.ui
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import expo.modules.core.utilities.EmulatorUtilities
+import expo.modules.devlauncher.compose.models.HomeAction
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
+import expo.modules.devmenu.compose.primitives.NewText
+import expo.modules.devmenu.compose.primitives.RoundedSurface
+
+@Composable
+fun DevelopmentSessionSection(
+  isFetching: Boolean = false,
+  onAction: (HomeAction) -> Unit = {}
+) {
+  RoundedSurface(
+    borderRadius = NewAppTheme.borderRadius.xl,
+    color = NewAppTheme.colors.background.subtle
+  ) {
+    Column(
+      verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`),
+      modifier = Modifier.padding(NewAppTheme.spacing.`3`)
+    ) {
+      DevelopmentSessionHelp()
+
+      DevelopmentSessionActions(isFetching, onAction)
+    }
+  }
+}
+
+@Composable
+fun DevelopmentSessionHelp() {
+  Column(
+    verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`)
+  ) {
+    NewText(
+      "Start a local development server with:",
+      color = NewAppTheme.colors.text.secondary,
+      style = NewAppTheme.font.sm
+    )
+
+    RoundedSurface(
+      color = NewAppTheme.colors.background.element,
+      border = BorderStroke(
+        width = 1.dp,
+        color = NewAppTheme.colors.border.default
+      ),
+      modifier = Modifier
+        .fillMaxWidth()
+    ) {
+      Box(modifier = Modifier.padding(NewAppTheme.spacing.`3`)) {
+        NewText(
+          "npx expo start",
+          style = NewAppTheme.font.md.merge(
+            fontFamily = NewAppTheme.font.mono
+          )
+        )
+      }
+    }
+
+    NewText(
+      "Then, select the local server when it appears here.",
+      color = NewAppTheme.colors.text.secondary,
+      style = NewAppTheme.font.sm
+    )
+  }
+}
+
+@Composable
+fun DevelopmentSessionActions(isFetching: Boolean, onAction: (HomeAction) -> Unit) {
+  Column(
+    verticalArrangement = Arrangement.spacedBy(NewAppTheme.spacing.`3`)
+  ) {
+    ServerUrlInput(
+      openApp = { urlValue ->
+        onAction(HomeAction.OpenApp(urlValue))
+      }
+    )
+
+    NewText(
+      "Or",
+      color = NewAppTheme.colors.text.secondary,
+      style = NewAppTheme.font.sm.merge(
+        textAlign = TextAlign.Center
+      ),
+      modifier = Modifier.fillMaxWidth()
+    )
+
+    FetchDevelopmentServersButton(
+      isFetching,
+      onAction
+    )
+
+    if (!EmulatorUtilities.isRunningOnEmulator()) {
+      NewText(
+        "Or",
+        color = NewAppTheme.colors.text.secondary,
+        style = NewAppTheme.font.sm.merge(
+          textAlign = TextAlign.Center
+        ),
+        modifier = Modifier.fillMaxWidth()
+      )
+
+      ScanQRCodeButton(onAction)
+    }
+  }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun DevelopmentSessionHelperPreview() {
+  DevelopmentSessionSection()
+}

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/FetchDevelopmentServersButton.kt

@@ -0,0 +1,118 @@
+package expo.modules.devlauncher.compose.ui
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.composeunstyled.Button
+import com.composeunstyled.Icon
+import expo.modules.devlauncher.R
+import expo.modules.devlauncher.compose.models.HomeAction
+import expo.modules.devlauncher.compose.primitives.CircularProgressBar
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
+import expo.modules.devmenu.compose.primitives.NewText
+import expo.modules.devmenu.compose.primitives.RoundedSurface
+import kotlinx.coroutines.delay
+import kotlin.time.Clock
+import kotlin.time.Duration.Companion.seconds
+import kotlin.time.ExperimentalTime
+import kotlin.time.Instant
+
+@Composable
+@OptIn(ExperimentalTime::class)
+fun FetchDevelopmentServersButton(
+  isFetching: Boolean,
+  onAction: (HomeAction) -> Unit
+) {
+  // Users might spam the button, so after debouncing we need to get the current state.
+  // We can't use `isFetching` directly in the `LaunchedEffect` as it would be captured in the lambda.
+  var getCurrentState by remember { mutableStateOf({ isFetching }) }
+  var isFetchingUIState by remember { mutableStateOf(isFetching) }
+  var fetchStartTime by remember { mutableStateOf<Instant?>(null) }
+
+  LaunchedEffect(isFetching) {
+    getCurrentState = { isFetching }
+  }
+
+  LaunchedEffect(isFetching) {
+    if (isFetching) {
+      isFetchingUIState = true
+      fetchStartTime = Clock.System.now()
+      return@LaunchedEffect
+    }
+
+    val startTime = fetchStartTime
+    if (startTime == null) {
+      isFetchingUIState = false
+      return@LaunchedEffect
+    }
+
+    val elapsedTime = Clock.System.now() - startTime
+    val remainingTime = 2.seconds - elapsedTime
+
+    delay(remainingTime)
+
+    isFetchingUIState = getCurrentState()
+  }
+
+  RoundedSurface(
+    color = NewAppTheme.colors.background.element,
+    borderRadius = NewAppTheme.borderRadius.xl
+  ) {
+    Button(
+      onClick = {
+        onAction(HomeAction.RefetchRunningApps)
+      },
+      enabled = !isFetchingUIState
+    ) {
+      Row(
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.Companion.CenterVertically,
+        modifier = Modifier.Companion
+          .fillMaxWidth()
+          .padding(NewAppTheme.spacing.`3`)
+      ) {
+        NewText(
+          if (isFetchingUIState) {
+            "Searching for development servers..."
+          } else {
+            "Fetch development servers"
+          }
+        )
+
+        if (isFetchingUIState) {
+          CircularProgressBar(size = 20.dp)
+        } else {
+          Icon(
+            painter = painterResource(R.drawable.download),
+            contentDescription = "Fetch development servers icon",
+            tint = NewAppTheme.colors.icon.quaternary,
+            modifier = Modifier
+              .size(20.dp)
+          )
+        }
+      }
+    }
+  }
+}
+
+@Preview(widthDp = 400)
+@Composable
+fun FetchDevelopmentServersButtonPreview() {
+  FetchDevelopmentServersButton(
+    isFetching = false,
+    onAction = {}
+  )
+}

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/ScanQRCodeButton.kt

@@ -0,0 +1,62 @@
+package expo.modules.devlauncher.compose.ui
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.composeunstyled.Button
+import com.composeunstyled.Icon
+import expo.modules.devlauncher.R
+import expo.modules.devlauncher.compose.models.HomeAction
+import expo.modules.devmenu.compose.newtheme.NewAppTheme
+import expo.modules.devmenu.compose.primitives.NewText
+import expo.modules.devmenu.compose.primitives.RoundedSurface
+
+@Composable
+fun ScanQRCodeButton(
+  onAction: (HomeAction) -> Unit = {}
+) {
+  RoundedSurface(
+    color = NewAppTheme.colors.background.element,
+    borderRadius = NewAppTheme.borderRadius.xl
+  ) {
+    Button(
+      onClick = {
+        onAction(HomeAction.ScanQRCode)
+      }
+    ) {
+      Row(
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.Companion.CenterVertically,
+        modifier = Modifier.Companion
+          .fillMaxWidth()
+          .padding(NewAppTheme.spacing.`3`)
+      ) {
+        NewText(
+          "Scan QR Code"
+        )
+
+        Icon(
+          painter = painterResource(R.drawable.scan),
+          contentDescription = "Fetch development servers icon",
+          tint = NewAppTheme.colors.icon.quaternary,
+          modifier = Modifier
+            .size(20.dp)
+        )
+      }
+    }
+  }
+}
+
+@Preview(widthDp = 300)
+@Composable
+fun ScanQRCodeButtonPreview() {
+  ScanQRCodeButton()
+}

package/android/src/debug/java/expo/modules/devlauncher/compose/ui/ServerUrlInput.kt

@@ -1,6 +1,7 @@
 package expo.modules.devlauncher.compose.ui
 
 import android.widget.Toast
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -14,6 +15,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.platform.LocalContext
@@ -53,19 +55,18 @@ fun ServerUrlInput(
         url = newUrl
       },
       textColor = NewAppTheme.colors.text.default,
-      textStyle = NewAppTheme.font.sm.merge(
-        fontFamily = NewAppTheme.font.mono,
-        fontWeight = FontWeight.Light
-      ),
+      textStyle = NewAppTheme.font.md,
       singleLine = true,
       modifier = Modifier
         .fillMaxWidth()
         .border(
           width = 1.dp,
-          shape = RoundedCornerShape(NewAppTheme.borderRadius.sm),
+          shape = RoundedCornerShape(NewAppTheme.borderRadius.xl),
           color = NewAppTheme.colors.border.default
         )
-        .padding(NewAppTheme.spacing.`2`),
+        .clip(RoundedCornerShape(NewAppTheme.borderRadius.xl))
+        .background(NewAppTheme.colors.background.element)
+        .padding(NewAppTheme.spacing.`3`),
       keyboardOptions = KeyboardOptions(
         capitalization = KeyboardCapitalization.None,
         autoCorrectEnabled = false,
@@ -77,11 +78,8 @@ fun ServerUrlInput(
         placeholder = {
           NewText(
             text = "http://localhost:8081",
-            style = NewAppTheme.font.sm.merge(
-              fontFamily = NewAppTheme.font.mono,
-              fontWeight = FontWeight.Light
-            ),
-            color = NewAppTheme.colors.text.quaternary
+            style = NewAppTheme.font.md,
+            color = NewAppTheme.colors.text.secondary
           )
         }
       )
@@ -91,9 +89,9 @@ fun ServerUrlInput(
       text = "Connect",
       foreground = Color.White,
       background = Color.Black,
-      modifier = Modifier.padding(vertical = NewAppTheme.spacing.`2`),
-      borderRadius = NewAppTheme.borderRadius.sm,
-      textStyle = NewAppTheme.font.sm.merge(
+      modifier = Modifier.padding(vertical = NewAppTheme.spacing.`3`),
+      borderRadius = NewAppTheme.borderRadius.xl,
+      textStyle = NewAppTheme.font.md.merge(
         fontWeight = FontWeight.SemiBold
       ),
       onClick = {

package/android/src/main/res/drawable/download.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M6.667,10L10,13.333M10,13.333L13.333,10M10,13.333V6.667M18.333,10C18.333,14.602 14.602,18.333 10,18.333C5.397,18.333 1.666,14.602 1.666,10C1.666,5.397 5.397,1.666 10,1.666C14.602,1.666 18.333,5.397 18.333,10Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.66667"
+      android:fillColor="#00000000"
+      android:strokeColor="#B9BBC6"
+      android:strokeLineCap="round"/>
+</vector>