-
+
{bumperKey}
-
+
@@ -39,17 +42,17 @@ const ControllerOverlay = ({ gamepadSteering, gamepadGas, gamepadBrake, gamepadL
-
+
{triggerKey}
-
+
{directionLabel}
- L Stick — Steering
-
{battery && (
{
-
- {'\u25C0'}
- {'\u25B6'}
+ L Stick — Steering
+
);
@@ -72,7 +75,7 @@ const TouchJoystick = ({ className, thumbPos, joystickAreaRef, onTouchStart, onT
return (
+
+ {'\u25C0'}
+ {'\u25B6'}
@@ -58,7 +61,7 @@ const ControllerOverlay = ({ gamepadSteering, gamepadGas, gamepadBrake, gamepadL
e.preventDefault()}
>
-
-
-
+
+
+
diff --git a/src/components/BodyTeleop/SettingsMenu.jsx b/src/components/BodyTeleop/SettingsMenu.jsx
index bed124b57..9421ec8fd 100644
--- a/src/components/BodyTeleop/SettingsMenu.jsx
+++ b/src/components/BodyTeleop/SettingsMenu.jsx
@@ -14,7 +14,7 @@ const QUALITY_OPTIONS = [
{ key: 'low', label: 'low', bitrate: '500 kbps' },
];
-const rowClass = 'flex items-center h-9 px-3.5 gap-3 cursor-pointer select-none text-[13px] text-white/85 hover:bg-white/10 transition-colors whitespace-nowrap';
+const rowClass = 'flex items-center h-9 px-3.5 gap-3 cursor-pointer select-none text-[13px] text-content/85 hover:bg-content/10 transition-colors whitespace-nowrap';
const pageClass = 'absolute top-0 left-0 w-max min-w-[200px] py-1.5 transition-all duration-200 ease-out';
const SettingsMenu = ({ onQualityChange, options = QUALITY_OPTIONS }) => {
@@ -58,7 +58,7 @@ const SettingsMenu = ({ onQualityChange, options = QUALITY_OPTIONS }) => {
return (
@@ -89,7 +89,7 @@ const SettingsMenu = ({ onQualityChange, options = QUALITY_OPTIONS }) => {
>
);
};
@@ -309,11 +309,11 @@ const StatsMenu = ({
return (
setView('quality')}>
Quality
-
+
{selected?.label}
- {!compact && }
+ {!compact && }
setView('main')}>
-
diff --git a/src/components/BodyTeleop/StatusBar.jsx b/src/components/BodyTeleop/StatusBar.jsx
index 5288643a9..c4287748f 100644
--- a/src/components/BodyTeleop/StatusBar.jsx
+++ b/src/components/BodyTeleop/StatusBar.jsx
@@ -13,8 +13,8 @@ const PACKET_LOSS_POOR = 0.02;
const RTT_POOR_MS = 250;
const QUALITY_INDICATOR = {
- good: { color: '#22c967', label: 'connected' },
- poor: { color: '#f5c542', label: 'poor connection' },
+ good: { color: 'var(--color-success)', label: 'connected' },
+ poor: { color: 'var(--color-warning)', label: 'poor connection' },
};
const STATS_ROWS = [
@@ -273,28 +273,28 @@ export const StatsPanel = ({ isLandscape, stats, latency, latencyHistory }) => {
if (showInCompact == false && compact) return;
return (
setView('main')}>
+
-
+
{options.map((opt) => (
selectQuality(opt.key)}>
- {opt.key === quality &&
))}
- {label}
- {stats?.[key] ?? '--'}
+ {label}
+ {stats?.[key] ?? '--'}
)
})}
- {!compact &&
-
- {!compact && }
+
+ {!compact && }
{"FRAME LATENCY"}
}
+ {!compact && {"FRAME LATENCY"}
}
{LATENCY_LAYERS.map(({ label, key, labelColor }) => (
{label}
- {fmtMs(latency?.[key])}
+ {fmtMs(latency?.[key])}
))}
- Frame Latency
- {fmtMs(latency?.totalMs)}
+ Frame Latency
+ {fmtMs(latency?.totalMs)}
-
+
stats
@@ -341,12 +341,12 @@ const StatusBar = ({
style={{ backgroundColor: indicator.color }}
title={indicator.label}
/>
- {stats?.rtt ?? '--'}
+ {stats?.rtt ?? '--'}
-
)}
{connecting ? (
<>
-
+
{error}
)}
@@ -70,7 +70,7 @@ const Video = ({
}, [connectionTimeLabel]);
return (
-
+
{connected && connectionTimeLabel && (
-
+
{`connected in ${connectionTimeLabel}`}
)}
diff --git a/src/components/BodyTeleop/index.jsx b/src/components/BodyTeleop/index.jsx
index 6213c04cc..a6a4bbceb 100644
--- a/src/components/BodyTeleop/index.jsx
+++ b/src/components/BodyTeleop/index.jsx
@@ -127,26 +127,26 @@ const BodyTeleop = ({ dongleId, device, onClose }) => {
};
return (
-
+
{deviceName}
@@ -170,7 +170,7 @@ const BodyTeleop = ({ dongleId, device, onClose }) => {
{ connected && notCar && !started && (
+
+
-
+
+
)
: (
- Turn on comma body ignition to remote control
+ Turn on comma body ignition to remote control
)}
{connected && (
diff --git a/src/components/CommacareBadge.jsx b/src/components/CommacareBadge.jsx
index a35e0f69c..d9e1e30e2 100644
--- a/src/components/CommacareBadge.jsx
+++ b/src/components/CommacareBadge.jsx
@@ -21,7 +21,7 @@ const styles = () => ({
cursor: 'pointer',
transition: 'background-color 150ms',
'&:hover': {
- backgroundColor: 'rgba(81, 191, 135, 0.1)',
+ backgroundColor: 'color-mix(in srgb, var(--color-success) 10%, transparent)',
},
},
pillIcon: {
diff --git a/src/components/Dashboard/AddDevice.jsx b/src/components/Dashboard/AddDevice.jsx
index 73e475748..d3e8f03ac 100644
--- a/src/components/Dashboard/AddDevice.jsx
+++ b/src/components/Dashboard/AddDevice.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import Obstruction from 'obstruction';
import qs from 'query-string';
import { BarcodeDetector } from 'barcode-detector/ponyfill';
-import { withStyles, Typography, Button, Modal, Paper, Divider, CircularProgress } from '@material-ui/core';
+import { withStyles, Button, Modal, Paper, Divider, CircularProgress } from '@material-ui/core';
import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
import * as Sentry from '@sentry/react';
@@ -67,7 +67,7 @@ const styles = (theme) => ({
'&::before': {
content: '\'\'',
position: 'absolute',
- backgroundColor: 'rgba(0, 0, 0, 0.8)',
+ backgroundColor: 'color-mix(in srgb, var(--color-scrim) 80%, transparent)',
top: -1,
bottom: -1,
right: -1,
@@ -385,38 +385,38 @@ class AddDevice extends Component {
<>
- Pair device
-
+
+
Pair device
+ scan QR code -{ cameraError || 'Camera not found, please enable camera access.' } -
-
You can also scan the QR code using any other QR code reader application. -
- { pairLoading && { pairError }
+
+
+
diff --git a/src/components/Dashboard/DeviceList.jsx b/src/components/Dashboard/DeviceList.jsx
index d99accb3f..8c6660d61 100644
--- a/src/components/Dashboard/DeviceList.jsx
+++ b/src/components/Dashboard/DeviceList.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
import Obstruction from 'obstruction';
import * as Sentry from '@sentry/react';
-import { withStyles, Typography, IconButton } from '@material-ui/core';
+import { withStyles, IconButton } from '@material-ui/core';
import SettingsIcon from '@material-ui/icons/Settings';
import MyCommaAuth from '@commaai/my-comma-auth';
@@ -17,7 +17,7 @@ import VisibilityHandler from '../VisibilityHandler';
import AddDevice from './AddDevice';
import DeviceSettingsModal from './DeviceSettingsModal';
-const styles = (theme) => ({
+const styles = () => ({
deviceList: {
overflow: 'auto',
},
@@ -28,7 +28,7 @@ const styles = (theme) => ({
justifyContent: 'space-between',
padding: '16px 32px',
'&.isSelected': {
- backgroundColor: 'rgba(0, 0, 0, 0.25)',
+ backgroundColor: 'color-mix(in srgb, var(--color-scrim) 25%, transparent)',
},
},
settingsButton: {
@@ -63,25 +63,10 @@ const styles = (theme) => ({
fontWeight: 600,
},
deviceId: {
- color: '#74838e',
- },
- editDeviceIcon: {
- color: 'white',
- '&:hover': {
- color: theme.palette.grey[100],
- },
- },
- nameField: {
- marginRight: theme.spacing.unit,
- },
- saveButton: {
- marginRight: theme.spacing.unit,
- },
- textField: {
- marginBottom: theme.spacing.unit,
+ color: 'var(--color-content-subtle)',
},
addDeviceContainer: {
- '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.25)' },
+ '&:hover': { backgroundColor: 'color-mix(in srgb, var(--color-scrim) 25%, transparent)' },
},
});
@@ -136,12 +121,12 @@ class DeviceList extends Component {
{ (device.is_owner || (profile && profile.superuser))
diff --git a/src/components/Dashboard/DeviceSettingsModal.jsx b/src/components/Dashboard/DeviceSettingsModal.jsx
index 264a03e7f..3021716db 100644
--- a/src/components/Dashboard/DeviceSettingsModal.jsx
+++ b/src/components/Dashboard/DeviceSettingsModal.jsx
@@ -10,7 +10,6 @@ import {
Modal,
Paper,
TextField,
- Typography,
withStyles,
} from '@material-ui/core';
import CheckIcon from '@material-ui/icons/Check';
@@ -98,7 +97,7 @@ const styles = (theme) => ({
padding: 10,
display: 'flex',
alignItems: 'center',
- backgroundColor: 'rgba(255, 0, 0, 0.3)',
+ backgroundColor: 'color-mix(in srgb, var(--color-feedback-error) 30%, transparent)',
'& p': { display: 'inline-block', marginLeft: 10 },
color: Colors.white,
},
@@ -280,12 +279,12 @@ class DeviceSettingsModal extends Component {
>
make sure to enable the “Record and Upload Driver Camera” toggle
+
{ pairError }
@@ -424,10 +424,10 @@ class AddDevice extends Component { ) } { pairDongleId && ( <> -{'Successfully paired device '} { pairDongleId } -
-
+
-
+
+
{ device.dongle_id }
-
+
{deviceNamePretty(device)} -
-
+
-
+
+
{ device.dongle_id }
-
+
Device settings -
@@ -313,7 +312,7 @@ class DeviceSettingsModal extends Component {
@@ -806,7 +754,7 @@ class Media extends Component {
anchorEl={ dcamUploadInfo }
className={ classes.dcameraUploadInfo }
>
-
{ this.state.error && (
- { this.state.error }
+
) }
{ this.state.error }
@@ -372,19 +371,19 @@ class DeviceSettingsModal extends Component {
>
{ this.state.unpairError }
+
)}
{ this.props.device.prime
@@ -392,7 +391,7 @@ class DeviceSettingsModal extends Component {
+
+
) : (
- Unpairing will also cancel the comma prime subscription for this device.
+
)}
@@ -415,7 +414,7 @@ class DeviceSettingsModal extends Component {
{ this.state.unpaired ? 'Close' : 'Cancel' }
{ this.state.unpaired
- ? Unpaired
+ ?
: (
-
+
-
+
+
{ device.dongle_id }
-
+
Unpair device -
{ this.state.unpairError }
Unpairing will also cancel comma prime and {' '} permanently end your commacare extended warranty. @@ -400,9 +399,9 @@ class DeviceSettingsModal extends Component { Your standard 1-year warranty still applies for any remaining time. {' '} What is commacare? -
Unpairing will also cancel the comma prime subscription for this device.
)} this.setState({ moreInfoMenu: ev.target }) }
>
- More info
+
More info
make sure to enable the “Record and Upload Driver Camera” toggle
); diff --git a/src/components/DriveView/index.jsx b/src/components/DriveView/index.jsx index ef21a19ab..16e95b0be 100644 --- a/src/components/DriveView/index.jsx +++ b/src/components/DriveView/index.jsx @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import Obstruction from 'obstruction'; import dayjs from 'dayjs'; -import { IconButton, Typography } from '@material-ui/core'; +import { IconButton } from '@material-ui/core'; import { popTimelineRange, pushTimelineRange, updateSegmentRange } from '../../actions'; import { ArrowBackBold, CloseBold } from '../../icons'; @@ -48,7 +48,7 @@ class DriveView extends Component { return (
-
+
-
diff --git a/src/components/ErrorFallback.jsx b/src/components/ErrorFallback.jsx
index c4e0f00be..0b53936a0 100644
--- a/src/components/ErrorFallback.jsx
+++ b/src/components/ErrorFallback.jsx
@@ -78,7 +78,7 @@ ${error.toString()}${componentStack}`;
+
{`${startDay} `}
{`${startTime} - ${endTime}`}
@@ -74,7 +74,7 @@ class DriveView extends Component {
{(routes && routes.length === 0)
- ? Route does not exist.
+ ?
Route does not exist.
:Show debugging information
-
+
);
}
diff --git a/src/components/PWAIcon.jsx b/src/components/PWAIcon.jsx
index c90a40622..bf07b4535 100644
--- a/src/components/PWAIcon.jsx
+++ b/src/components/PWAIcon.jsx
@@ -61,14 +61,14 @@ const PWAIcon = ({ immediate }) => {
let callback;
if (needRefresh) {
title = 'Install update';
- icon =
-
{information}
- {deviceNamePretty(device)}
- {`(${device.dongle_id})`}
+
+ {`(${device.dongle_id})`}
comma prime
+comma prime
@@ -416,24 +401,24 @@ class PrimeCheckout extends Component {
-
+
+
-
+
+
)}
{device?.device_type === 'four' && !device?.eligible_features?.commacare && (
{ disabledDataPlanText }
+
) }
{ error }
+
) }
INCLUDES COMMACARE -
-
+
+
)}
@@ -469,26 +454,26 @@ class PrimeCheckout extends Component {
&& (
Fetching SIM data
+
)}
{ disabledDataPlanText && (
Fetching SIM data
{ disabledDataPlanText }
-
+
+
{ error && (
{'Learn more about comma prime from our '} FAQ -
{ error }
@@ -505,7 +490,7 @@ class PrimeCheckout extends Component {
{ chargeText
&& (
diff --git a/src/components/Prime/PrimeManage.jsx b/src/components/Prime/PrimeManage.jsx
index f0e47525e..469603710 100644
--- a/src/components/Prime/PrimeManage.jsx
+++ b/src/components/Prime/PrimeManage.jsx
@@ -4,7 +4,7 @@ import Obstruction from 'obstruction';
import dayjs from 'dayjs';
import * as Sentry from '@sentry/react';
-import { withStyles, Typography, Button, Modal, Paper, IconButton, CircularProgress } from '@material-ui/core';
+import { withStyles, Button, Modal, Paper, IconButton, CircularProgress } from '@material-ui/core';
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
import PriorityHighIcon from '@material-ui/icons/PriorityHigh';
@@ -67,10 +67,7 @@ const styles = (theme) => ({
},
primeContainer: {
borderBottom: `1px solid ${Colors.white10}`,
- color: '#fff',
- },
- primeBlock: {
- marginTop: 10,
+ color: 'var(--color-content)',
},
overviewBlock: {
marginTop: 20,
@@ -80,14 +77,14 @@ const styles = (theme) => ({
padding: 10,
display: 'flex',
alignItems: 'center',
- backgroundColor: 'rgba(255, 0, 0, 0.2)',
+ backgroundColor: 'color-mix(in srgb, var(--color-feedback-error) 20%, transparent)',
'& p': { display: 'inline-block', marginLeft: 10 },
},
overviewBlockSuccess: {
marginTop: 15,
padding: 10,
alignItems: 'center',
- backgroundColor: 'rgba(0, 255, 0, 0.2)',
+ backgroundColor: 'color-mix(in srgb, var(--color-feedback-success) 20%, transparent)',
'& p': {
display: 'inline-block',
marginLeft: 10,
@@ -99,7 +96,7 @@ const styles = (theme) => ({
padding: 10,
display: 'flex',
alignItems: 'center',
- backgroundColor: 'rgba(0, 0, 0, 0.2)',
+ backgroundColor: 'color-mix(in srgb, var(--color-scrim) 20%, transparent)',
'& p': { display: 'inline-block', marginLeft: 10 },
},
overviewBlockDisabled: {
@@ -193,13 +190,13 @@ const styles = (theme) => ({
},
},
cancelError: {
- backgroundColor: 'rgba(255, 0, 0, 0.3)',
+ backgroundColor: 'color-mix(in srgb, var(--color-feedback-error) 30%, transparent)',
marginTop: 10,
padding: 10,
'& p': { margin: 0 },
},
cancelSuccess: {
- backgroundColor: 'rgba(0, 255, 0, 0.3)',
+ backgroundColor: 'color-mix(in srgb, var(--color-feedback-success) 30%, transparent)',
marginTop: 10,
padding: 10,
'& p': { margin: 0 },
@@ -434,84 +431,84 @@ export class PrimeManage extends Component {
- { chargeText }
+
)}
{ chargeText }
- comma prime
+
Waiting for confirmed payment
+
)}
{Boolean(stripeStatus.paid === 'paid' && !hasPrimeSub)
&& (
Processing subscription
+
)}
{Boolean(stripeStatus.paid === 'paid' && hasPrimeSub)
&& (
{this.state.error}
+
)}
comma prime
{stripeStatus && ( <> {stripeStatus.paid !== 'paid' && (Waiting for confirmed payment
Processing subscription
- comma prime activated
+
+
+
)}
)}
)}
comma prime activated
{subscription.is_prime_sim && ( -Connectivity will be enabled as soon as activation propagates to your local cell tower. Rebooting your device may help. -
- Device
+
{hasPrimeSub && (
<>
Device
- {alias}
-
+
+
{`(${device.dongle_id})`}
-
+
- Plan
-
+
+
Plan
+{planName} {` ${planSubtext}`} -
- Joined
- {joinDate}
+
{!hasCancelAt
&& (
Joined
+{joinDate}
- Next payment
- {nextPaymentDate}
+
)}
{hasCancelAt
&& (
Next payment
+{nextPaymentDate}
- Subscription end
- {cancelAtDate}
+
)}
Subscription end
+{cancelAtDate}
- Amount
-
+
+
{commacare && Amount
+{`$${(subscription.amount / 100).toFixed(2)}`} -
{this.state.error}
@@ -558,24 +555,24 @@ export class PrimeManage extends Component {
&& (
+
+
)}
{hasCancelAt && !device.eligible_features?.prime_data && subscription.plan === 'data'
&& (
+
+
)}
@@ -599,17 +596,17 @@ export class PrimeManage extends Component {
{this.state.planSwitchStatus === 'success'
? (
<>
-
+
-
Your prime subscription will be canceled on May 15th unless you replace the SIM card in your device. A new SIM card can be ordered from the shop . Use discount code SIMSWAP at checkout to receive a free SIM card. -
Standard comma prime discontinued for {deviceTypePretty(device.device_type)} -
{`Welcome to ${primePlanName(this.state.planSwitchTarget)}`} -
- {this.state.planSwitchMessage}
+
+
+
+
+
- {this.state.planSwitchMessage}
{this.state.planSwitchTarget === 'data' ? 'Your plan now includes data for $24/month.' : 'Your plan no longer includes data and costs $14/month.'} -