console: Remove custom live view button component

pkg/webui/console/containers/event-split-frame/event-split-frame.styl

@@ -55,3 +55,23 @@
   bottom: $cs.s
   padding: $cs.xxs
   width: fit-content
+
+.live-data-button
+  position: relative
+  display: inline-flex
+  transition: 80ms background ease-in-out, 80ms color ease-in-out, 80ms border-color ease-in-out, 80ms box-shadow ease-in-out
+  outline: 0
+  cursor: pointer
+  justify-content: center
+  align-items: center
+  gap: $cs.xxs
+  height: $ls.m
+  text-decoration: none
+  padding: 0 $cs.m
+  border-radius: $br.xl3
+  color: var(--c-text-neutral-min)
+  background-color: var(--c-bg-neutral-heavy)
+  border: 1px solid transparent
+
+  &:hover
+    background-color: var(--c-bg-neutral-heavy-hover)

pkg/webui/console/containers/event-split-frame/index.js

@@ -15,10 +15,13 @@
 import React, { useContext, useCallback, useRef, useEffect } from 'react'
 import DOM from 'react-dom'
 import { useDispatch, useSelector } from 'react-redux'
+import { defineMessages } from 'react-intl'
+
+import Button from '@ttn-lw/components/button'
+import { IconChevronUp } from '@ttn-lw/components/icon'
 
 import RequireRequest from '@ttn-lw/lib/components/require-request'
 
-import LiveDataButton from '@console/components/live-data-button'
 import LiveDataTutorial from '@console/components/live-data-tutorial'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
@@ -35,6 +38,10 @@ import EventSplitFrameContext from './context'
 
 import style from './event-split-frame.styl'
 
+const m = defineMessages({
+  liveData: 'Live Data',
+})
+
 const EventSplitFrameInner = ({ children }) => {
   const { isOpen, height, isActive, setHeight, setIsMounted, setIsOpen } =
     useContext(EventSplitFrameContext)
@@ -104,7 +111,12 @@ const EventSplitFrameInner = ({ children }) => {
       {isActive && !isOpen && (
         <div className={style.openButton}>
           <LiveDataTutorial setIsOpen={setIsOpen} setTutorialSeen={setTutorialSeen} seen={seen} />
-          <LiveDataButton setIsOpen={setIsOpen} />
+          <Button
+            icon={IconChevronUp}
+            className={style.liveDataButton}
+            onClick={() => setIsOpen(true)}
+            message={m.liveData}
+          />
         </div>
       )}
     </div>

pkg/webui/locales/en-duplicates.json

@@ -0,0 +1,9 @@
+[
+  {
+    "message": "Live Data",
+    "ids": [
+      "console.components.live-data-button.index.liveData",
+      "console.containers.event-split-frame.index.liveData"
+    ]
+  }
+]

pkg/webui/locales/en.json

@@ -538,6 +538,7 @@
   "console.containers.email-notifications-form.index.unsubscribeDescription": "You will continue to receive notifications in the console.",
   "console.containers.email-notifications-form.index.discardChanges": "Discard changes",
   "console.containers.email-notifications-form.index.updateEmailPreferences": "Updated email preferences",
+  "console.containers.event-split-frame.index.liveData": "Live Data",
   "console.containers.freq-plans-select.utils.warning": "Frequency plans unavailable",
   "console.containers.freq-plans-select.utils.none": "Do not set a frequency plan",
   "console.containers.freq-plans-select.utils.selectFrequencyPlan": "Select a frequency plan...",

pkg/webui/locales/ja.json

@@ -538,6 +538,7 @@
   "console.containers.email-notifications-form.index.unsubscribeDescription": "",
   "console.containers.email-notifications-form.index.discardChanges": "",
   "console.containers.email-notifications-form.index.updateEmailPreferences": "",
+  "console.containers.event-split-frame.index.liveData": "",
   "console.containers.freq-plans-select.utils.warning": "",
   "console.containers.freq-plans-select.utils.none": "",
   "console.containers.freq-plans-select.utils.selectFrequencyPlan": "",