fix progressbars

tgui/packages/tgui/interfaces/@UNUSED/VaultController.js

@@ -21,13 +21,13 @@ export const VaultController = (props, context) => {
             <LabeledList.Item label="Charge">
               <ProgressBar
                 value={data.stored / data.max}
-                content={toFixed(data.stored/1000)
-              + ' / ' + toFixed(data.max/1000) + ' kW'}
                 ranges={{
                   good: [1, Infinity],
                   average: [0.30, 1],
                   bad: [-Infinity, 0.30],
-                }} />
+                }}>
+                {toFixed(data.stored/1000)} / {toFixed(data.max/1000)} kW
+              </ProgressBar>
             </LabeledList.Item>
           </LabeledList>
         </Section>

tgui/packages/tgui/interfaces/BorgPanel.js

@@ -44,8 +44,9 @@ export const BorgPanel = (props, context) => {
             <LabeledList.Item label="Charge">
               {!cell.missing ? (
                 <ProgressBar
-                  value={cellPercent}
-                  content={cell.charge + ' / ' + cell.maxcharge} />
+                  value={cellPercent}>
+                  {cell.charge} / {cell.maxcharge}
+                </ProgressBar>
               ) : (
                 <span className="color-bad">No cell installed</span>
               ) }

tgui/packages/tgui/interfaces/ChemDispenser.js

@@ -39,8 +39,9 @@ export const ChemDispenser = (props, context) => {
           <LabeledList>
             <LabeledList.Item label="Energy">
               <ProgressBar
-                value={data.energy / data.maxEnergy}
-                content={toFixed(data.energy) + ' units'} />
+                value={data.energy / data.maxEnergy}>
+                {toFixed(data.energy)} units
+              </ProgressBar>
             </LabeledList.Item>
           </LabeledList>
         </Section>

tgui/packages/tgui/interfaces/DnaVault.js

@@ -23,18 +23,21 @@ export const DnaVault = (props, context) => {
           <LabeledList>
             <LabeledList.Item label="Human DNA">
               <ProgressBar
-                value={dna / dna_max}
-                content={dna + ' / ' + dna_max + ' Samples'} />
+                value={dna / dna_max}>
+                {dna} / {dna_max} Samples 
+              </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Plant DNA">
               <ProgressBar
-                value={plants / plants_max}
-                content={plants + ' / ' + plants_max + ' Samples'} />
+                value={plants / plants_max}>  
+                {plants} / {plants_max} Samples  
+              </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Animal DNA">
               <ProgressBar
-                value={animals / animals}
-                content={animals + ' / ' + animals_max + ' Samples'} />
+                value={animals / animals}>
+                {animals} / {animals_max} Samples  
+              </ProgressBar>
             </LabeledList.Item>
           </LabeledList>
         </Section>

tgui/packages/tgui/interfaces/OperatingComputer.js

@@ -75,19 +75,17 @@ export const OperatingComputer = (props, context) => {
                         value={patient.health}
                         minValue={patient.minHealth}
                         maxValue={patient.maxHealth}
-                        color={patient.health >= 0 ? 'good' : 'average'}
-                        content={(
-                          <AnimatedNumber value={patient.health} />
-                        )} />
+                        color={patient.health >= 0 ? 'good' : 'average'}>
+                        <AnimatedNumber value={patient.health} />
+                      </ProgressBar>
                     </LabeledList.Item>
                     {damageTypes.map(type => (
                       <LabeledList.Item key={type.type} label={type.label}>
                         <ProgressBar
                           value={patient[type.type] / patient.maxHealth}
-                          color="bad"
-                          content={(
-                            <AnimatedNumber value={patient[type.type]} />
-                          )} />
+                          color="bad">
+                          <AnimatedNumber value={patient[type.type]} />
+                        </ProgressBar>
                       </LabeledList.Item>
                     ))}
                   </LabeledList>

tgui/packages/tgui/interfaces/PowerMonitor.js

@@ -161,8 +161,9 @@ const SupplyDraw = (props, context) => {
           value={supply}
           minValue={0}
           maxValue={maxValue}
-          color="teal"
-          content={toFixed(supply / 1000) + ' kW'} />
+          color="teal">
+          {toFixed(supply / 1000)} kW
+        </ProgressBar>
       </LabeledList.Item>
       <LabeledList.Item label="Draw">
         <ProgressBar
@@ -170,7 +171,9 @@ const SupplyDraw = (props, context) => {
           minValue={0}
           maxValue={maxValue}
           color="pink"
-          content={toFixed(demand / 1000) + ' kW'} />
+          content>
+          {toFixed(demand / 1000)} kW
+        </ProgressBar>
       </LabeledList.Item>
     </LabeledList>
   );

tgui/packages/tgui/interfaces/SatelliteControl.js

@@ -16,13 +16,14 @@ export const SatelliteControl = (props, context) => {
                 <ProgressBar
                   value={data.meteor_shield_coverage
                   / data.meteor_shield_coverage_max}
-                  content={100 * data.meteor_shield_coverage
-                  / data.meteor_shield_coverage_max + '%'}
                   ranges={{
                     good: [1, Infinity],
                     average: [0.30, 1],
                     bad: [-Infinity, 0.30],
-                  }} />
+                  }}>
+                  {100 * data.meteor_shield_coverage
+                  / data.meteor_shield_coverage_max}%
+                </ProgressBar>
               </LabeledListItem>
             </LabeledList>
           </Section>

tgui/packages/tgui/interfaces/Smes.js

@@ -60,8 +60,9 @@ export const Smes = (props, context) => {
             </LabeledList.Item>
             <LabeledList.Item label="Target Input">
               <ProgressBar
-                value={data.inputLevel/data.inputLevelMax}
-                content={data.inputLevel_text} />
+                value={data.inputLevel/data.inputLevelMax}>
+                {data.inputLevel_text}
+              </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Adjust Input">
               <Button
@@ -127,8 +128,9 @@ export const Smes = (props, context) => {
             </LabeledList.Item>
             <LabeledList.Item label="Target Output">
               <ProgressBar
-                value={data.outputLevel/data.outputLevelMax}
-                content={data.outputLevel_text} />
+                value={data.outputLevel/data.outputLevelMax}>
+                {data.outputLevel_text}
+              </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Adjust Output">
               <Button

tgui/packages/tgui/interfaces/SolarControl.js

@@ -119,8 +119,9 @@ const PowerOutput = (props, context) => {
           }}
           minValue={0}
           maxValue={90000}
-          value={generated}
-          content={generated + ' W'} />
+          value={generated}>
+          {generated} W
+        </ProgressBar>
       </LabeledList.Item>
     </LabeledList>
   );

tgui/packages/tgui/interfaces/SpaceHeater.js

@@ -32,12 +32,13 @@ export const SpaceHeater = (props, context) => {
               {data.hasPowercell && (
                 <ProgressBar
                   value={data.powerLevel / 100}
-                  content={data.powerLevel + '%'}
                   ranges={{
                     good: [0.6, Infinity],
                     average: [0.3, 0.6],
                     bad: [-Infinity, 0.3],
-                  }} />
+                  }}>
+                  {data.powerLevel}%  
+                </ProgressBar>
               ) || 'None'}
             </LabeledList.Item>
           </LabeledList>

tgui/packages/tgui/interfaces/Tank.js

@@ -12,12 +12,13 @@ export const Tank = (props, context) => {
             <LabeledList.Item label="Pressure">
               <ProgressBar
                 value={data.tankPressure / 1013}
-                content={data.tankPressure + ' kPa'}
                 ranges={{
                   good: [0.35, Infinity],
                   average: [0.15, 0.35],
                   bad: [-Infinity, 0.15],
-                }} />
+                }}>
+                {data.tankPressure} kPa  
+              </ProgressBar>
             </LabeledList.Item>
             <LabeledList.Item label="Pressure Regulator">
               <Button