diff --git a/src/renderer/components/BatteryDetailsPopup.tsx b/src/renderer/components/BatteryDetailsPopup.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/renderer/components/BatteryStatus.tsx b/src/renderer/components/BatteryStatus.tsx
new file mode 100644
index 00000000..029da6c0
--- /dev/null
+++ b/src/renderer/components/BatteryStatus.tsx
@@ -0,0 +1,54 @@
+import BatteryGauge from 'react-battery-gauge';
+import React from 'react';
+import { styled } from '@/renderer/globalStyles/styled';
+
+interface BatteryStatusProps {
+ name?: string;
+}
+
+const BatteryStatus = ({ name }: BatteryStatusProps) => {
+ const customization = {
+ batteryMeter: {
+ lowBatteryValue: 40,
+ },
+ readingText: {
+ opacity: 0,
+ },
+ batteryBody: {
+ strokeColor: '#fff',
+ strokeWidth: 2,
+ },
+ batteryCap: {
+ strokeColor: '#fff',
+ strokeWidth: 2,
+ },
+ };
+ const batteryLevel = 70;
+ return (
+
+ {name}
+ {batteryLevel}%
+
+
+ );
+};
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+`;
+
+const PercentageText = styled.div`
+ font-size: 12px;
+ margin-right: 5px;
+ font-weight: bold;
+`;
+
+export default BatteryStatus;
diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
index e8afc6bb..44a0cfdb 100644
--- a/src/renderer/components/Header.tsx
+++ b/src/renderer/components/Header.tsx
@@ -3,7 +3,7 @@ import { styled } from '@/renderer/globalStyles/styled';
import { NavLink } from 'react-router-dom';
import { selectDebugTabVisible } from '@/renderer/store/modules/debugTab';
import { useSelector } from 'react-redux';
-import BatteryGauge from 'react-battery-gauge'
+import BatteryStatus from './BatteryStatus';
interface NavLinkDefinition {
to: string;
@@ -47,39 +47,17 @@ export const Header: FC = () => {
))}
-
+
+
);
};
-const BatteryStatus = () => {
- const customization = {
- batteryMeter: {
- lowBatteryValue: 40,
- },
- readingText: {
- opacity: 0,
- },
- }
- const batteryLevel = 40.8;
- return <> {batteryLevel} %
-
-
-
- >
-}
-
-const StyledBatteryGauge = styled.div`
- display:inline-block;
- align-self: center;
- align-content: center;
-`
-
const HeaderGrid = styled.div`
display: grid;
- grid-template-columns: 1fr 215px;
+ grid-template-columns: 1fr 400px;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.25);
`;
@@ -93,8 +71,8 @@ const LeftHeader = styled.div<{
const RightHeader = styled.div`
margin: 2px;
- display : flex;
- justify-content : space-between;
+ display: flex;
+ justify-content: space-between;
`;
const StyledNavLink = styled(NavLink)`
@@ -121,7 +99,3 @@ const StyledLogo = styled.img`
height: auto;
width: 100px;
`;
-
-const StyledP = styled.p`
- font-weight: bold;
-`
\ No newline at end of file