Skip to content

Commit c3a87e3

Browse files
committed
Display a neutral warning icon if version check is disabled
Extend he WarningIcon template to allow custom coloring with fallback to theme's "warningIcon" color. If version check is disabled, show a corresponding info with a "infoIcon" (gray) colored icon instead.
1 parent bc55bce commit c3a87e3

File tree

2 files changed

+11
-3
lines changed

2 files changed

+11
-3
lines changed

frontend/src/components/Version/Version.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useLatestVersion } from 'lib/hooks/api/latestVersion';
55
import { formatTimestamp } from 'lib/dateTimeHelpers';
66

77
import * as S from './Version.styled';
8+
import {useTheme} from "styled-components";
89

910
const Version: React.FC = () => {
1011
const { data: latestVersionInfo = {} } = useLatestVersion();
@@ -19,6 +20,13 @@ const Version: React.FC = () => {
1920

2021
return (
2122
<S.Wrapper>
23+
{isLatestRelease === null && (
24+
<S.OutdatedWarning
25+
title={`Version check disabled.`}
26+
>
27+
<WarningIcon color={useTheme().icons.infoIcon} />
28+
</S.OutdatedWarning>
29+
)}
2230
{isLatestRelease === false && (
2331
<S.OutdatedWarning
2432
title={`Your app version is outdated. Latest version is ${

frontend/src/components/common/Icons/WarningIcon.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import styled from 'styled-components';
2+
import styled, {useTheme} from 'styled-components';
33

44
const WarningIconContainer = styled.span`
55
align-items: center;
@@ -9,7 +9,7 @@ const WarningIconContainer = styled.span`
99
width: 1.5rem;
1010
`;
1111

12-
const WarningIcon: React.FC = () => {
12+
const WarningIcon: React.FC<{color?: string}> = (props) => {
1313
return (
1414
<WarningIconContainer>
1515
<svg
@@ -24,7 +24,7 @@ const WarningIcon: React.FC = () => {
2424
fillRule="evenodd"
2525
clipRule="evenodd"
2626
d="M8.09265 1.06679C7.60703 0.250524 6.39297 0.250524 5.90735 1.06679L0.170916 10.7089C-0.314707 11.5252 0.292322 12.5455 1.26357 12.5455H12.7364C13.7077 12.5455 14.3147 11.5252 13.8291 10.7089L8.09265 1.06679ZM6 5.00006C6 4.44778 6.44772 4.00006 7 4.00006C7.55228 4.00006 8 4.44778 8 5.00006V7.00006C8 7.55235 7.55228 8.00006 7 8.00006C6.44772 8.00006 6 7.55235 6 7.00006V5.00006ZM6 10.0001C6 9.44778 6.44772 9.00006 7 9.00006C7.55228 9.00006 8 9.44778 8 10.0001C8 10.5523 7.55228 11.0001 7 11.0001C6.44772 11.0001 6 10.5523 6 10.0001Z"
27-
fill="#F2C94C"
27+
fill={props.color || useTheme().icons.warningIcon}
2828
/>
2929
</svg>
3030
</WarningIconContainer>

0 commit comments

Comments
 (0)