#392 ui tweaks

ruuvi · Apr 10, 2024 · 9685c8c · 9685c8c
1 parent 6f0e256
commit 9685c8c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/src/components/AlertItem.js b/src/components/AlertItem.js
@@ -145,9 +145,11 @@ class AlertItem extends Component {
         const delaySetting = (mobile) => <>
             <div style={{ ...editItemMargins, display: "flex", justifyContent: "flex-end" }}>
                 <span style={{ ...this.props.detailedSubText, width: mobile ? "100%" : undefined }}>
-                    {!this.props.showDelay && !this.props.noUpgradeButton && <span style={{ marginRight: 8 }}><UpgradePlanButton /></span>}
-                    <span style={!this.props.showDelay ? {opacity: 0.5, pointerEvents: "none"} : {}}>
-                        <EditableText spread={mobile} text={this.getDelayText(alert)} onClick={() => this.setState({ ...this.state, delayInputDialog: true })} />
+                    {!mobile && !this.props.showDelay && !this.props.noUpgradeButton && <span style={{ marginRight: 8 }}><UpgradePlanButton /></span>}
+                    <span>
+                        <EditableText spread={mobile} text={this.getDelayText(alert)} onClick={() => this.setState({ ...this.state, delayInputDialog: true })} disabled={!this.props.showDelay } >
+                            {mobile && !this.props.showDelay && !this.props.noUpgradeButton && <span style={{marginLeft: 6, opacity: 1, pointerEvents: undefined, zIndex:99 }}><UpgradePlanButton /></span>}
+                        </EditableText>
                     </span>
                 </span>
             </div>

diff --git a/src/components/EditableText.js b/src/components/EditableText.js
@@ -1,6 +1,4 @@
-import { useColorMode } from "@chakra-ui/react";
 import pen from "../img/pen.svg";
-import penDark from "../img/pen-dark.svg";
 
 function getStyledText(text) {
     var startB = text.split("<b>")
@@ -14,17 +12,20 @@ function getStyledText(text) {
     return output;
 }
 export default function EditableText(props) {
-    let colorMode = useColorMode().colorMode;
+    let disabledStyle = props.disabled ? { opacity: 0.5, pointerEvents: "none" } : {};
     var extraStyle = {};
     if (props.spread) {
         extraStyle.display = "flex"
         extraStyle.justifyContent = "space-between"
         extraStyle.width = "100%"
     }
-    return <span style={{ ...props.style, cursor: "pointer", ...extraStyle }} onClick={props.onClick}>
+    return <span style={{ ...props.style, cursor: !props.disabled ? "pointer" : undefined, ...extraStyle }} onClick={props.disabled ? () => { } : props.onClick}>
         <span style={{ opacity: props.opacity }}>
-            {getStyledText(props.text)}
+            <span style={disabledStyle}>
+                {getStyledText(props.text)}
+            </span>
+            {props.children}
         </span>
-        <img src={pen} style={{ paddingLeft: "10px", display: "inline-block", marginBottom: 2 }} width="23px" height="13px" alt="Pen" />
+        <img src={pen} style={{ paddingLeft: "10px", display: "inline-block", marginBottom: 2, ...disabledStyle }} width="23px" height="13px" alt="Pen" />
     </span>
 }
diff --git a/src/components/SensorCard.js b/src/components/SensorCard.js
@@ -252,7 +252,7 @@ class SensorCard extends Component {
         let noHistoryStr = t(noHistoryStrKey).split("\n").map(x => <div key={x}>{x}</div>)
 
         const noData = (str) =>
-            <div style={{ fontFamily: "mulish", fontSize: 16, fontWeight: "bold", height: graphHeight, marginLeft: simpleView ? 0 : 24, marginRight: 30, paddingTop: simpleView ? 0 : 10 }} className="nodatatext">
+            <div style={{ height: graphHeight, marginLeft: simpleView ? 0 : 24, marginRight: 30, paddingTop: simpleView ? 0 : 10 }} className="nodatatext">
                 <div style={{ position: "relative", top: simpleView ? undefined : this.props.size === "medium" ? "44%" : "50%", transform: simpleView ? undefined : "translateY(-50%)" }}>
                     {str}
                     {freeMode && !isSharedSensor() && <><Box mt={2} /><UpgradePlanButton /></>}

diff --git a/src/components/UpgradePlanButton.js b/src/components/UpgradePlanButton.js
@@ -2,15 +2,18 @@ import React from 'react';
 import { Button } from '@chakra-ui/react';
 import i18next, { t } from 'i18next';
 
+const detailedSubText = {
+    fontFamily: "mulish",
+    fontSize: "14px",
+}
 
 const UpgradePlanButton = () => {
     let url = "https://cloud.ruuvi.com";
     if (i18next.language === 'fi') url += '/fi';
     return (
-        <a href={url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>
+        <a href={url} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', ...detailedSubText }}>
             <Button size="small"
                 borderRadius={3}
-                marginLeft={2} marginRight={2}
                 paddingRight={2} paddingLeft={2} paddingBottom={1} paddingTop={0.5}
                 style={{ opacity: 0.75 }}
                 onClick={e => e.preventDefault() || window.open(url, '_blank').focus()}>

diff --git a/src/states/Sensor.js b/src/states/Sensor.js
@@ -480,6 +480,7 @@ class Sensor extends Component {
         var { t } = this.props
         let lastReading = this.getLatestReading()
         let sensorSubscription = this.props.sensor?.subscription.subscriptionName
+        let freeMode = this.props.sensor?.subscription.maxHistoryDays === 0
         let noHistoryStrKey = "no_data_in_range"
         if (this.props.sensor?.subscription.maxHistoryDays === 0) noHistoryStrKey = "no_data_free_mode"
         let noHistoryStr = t(noHistoryStrKey).split("\n").map(x => <div key={x}>{x}</div>)
@@ -594,8 +595,8 @@ class Sensor extends Component {
                             <Box height={520}>
                                 <> {!this.isLoading && (!this.state.data || !this.state.data?.measurements?.length) ? (
                                     <>
-                                        <center style={{ fontFamily: "montserrat", fontSize: 16, fontWeight: "bold", paddingTop: 240, height: 450 }}>{noHistoryStr}
-                                            {!this.isSharedSensor() && <>
+                                        <center style={{ paddingTop: 240, height: 450 }} className="nodatatext">{noHistoryStr}
+                                            {freeMode && !this.isSharedSensor() && <>
                                                 <Box mt={2} />
                                                 <UpgradePlanButton />
                                             </>}

diff --git a/src/themes.js b/src/themes.js
@@ -145,7 +145,9 @@ export const ruuviTheme = extendTheme({
                 marginTop: "2px",
             },
             ".nodatatext": {
-                color: props.colorMode === "light" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)"
+                color: props.colorMode === "light" ? "#1b484780" : "rgba(255,255,255,0.5)",
+                fontFamily: "mulish", 
+                fontSize: 15, 
             },
             ".ddlItem": {
                 fontFamily: "mulish",