Improve asset buttons

Author: Erikvv

webtool/frontend/src/pages/rekentool/components/assets/AssetButtonRow.tsx

@@ -0,0 +1,25 @@
+import {FunctionComponent} from "react"
+import {Local4LocalButton} from "../../../../shared-components/buttons/Local4LocalButton.tsx"
+import {local4localDarkBlue, local4localDarkOrange} from "../../../../colors.ts"
+
+
+export const AssetButtonRow: FunctionComponent<{onClickCancel: () => void}> = ({onClickCancel}) => (
+    <div style={{
+        display: "flex",
+        justifyContent: "space-between",
+        marginTop: "1rem",
+    }}>
+        <Local4LocalButton
+            type="button"
+            onClick={onClickCancel}
+            variant="outline"
+            style={{
+                boxShadow: `inset 0 0 0 1px ${local4localDarkBlue}`,
+                color: local4localDarkBlue,
+            }}
+        >
+            Annuleren
+        </Local4LocalButton>
+        <Local4LocalButton type="submit" style={{backgroundColor: local4localDarkOrange}}>Opslaan</Local4LocalButton>
+    </div>
+)

webtool/frontend/src/pages/rekentool/components/assets/battery.tsx

@@ -1,12 +1,13 @@
 import {FormEvent, FunctionComponent, useState} from "react"
-import {Flex, Button, Card, DataList, Heading} from "@radix-ui/themes"
+import {Flex, Card, DataList, Heading} from "@radix-ui/themes"
 import {Pilot, Battery} from "local4local"
 import {PiCarBatteryLight} from "react-icons/pi"
 import {CostSection, CostDisplay} from "../cost/cost-section.tsx"
 import {CardMenu} from "../card-menu.tsx"
 import {costFromFormData} from "../cost/cost-from-form-data.ts"
 import {DivWithInfo, LabelWithInfo} from "../info/label-with-info.tsx"
 import { titles } from '../info/titles.tsx';
+import {AssetButtonRow} from "./AssetButtonRow.tsx"
 
 export const BatteryDisplay: FunctionComponent<{
     battery: Battery,
@@ -75,8 +76,7 @@ export const BatteryForm: FunctionComponent<{
                     <input className="form-input" type="number" id="peakPower_kW" name="peakPower_kW" defaultValue={ initialData?.peakPower_kW } />
                 </div>
                 <CostSection showCostPerKwh={false} showTotalCostFactors={true} initialData={initialData?.cost}/>
-                <Button type="button" onClick={hide} style={{ marginRight: '10px' }} highContrast variant="soft">Annuleren</Button>
-                <Button type="submit">Opslaan</Button>
+                <AssetButtonRow onClickCancel={hide} />
             </form>
         </Card>
     )

webtool/frontend/src/pages/rekentool/components/assets/biogas-generator.tsx

@@ -1,12 +1,13 @@
 import {FormEvent, FunctionComponent, useState} from "react"
-import {Flex, Button, Card, DataList, Heading} from "@radix-ui/themes"
+import {Flex, Card, DataList, Heading} from "@radix-ui/themes"
 import {Pilot, BiogasGenerator} from "local4local"
 import {CardMenu} from "../card-menu.tsx"
 import {CostSection, CostDisplay} from "../cost/cost-section.tsx"
 import {ImFire} from "react-icons/im"
 import {costFromFormData} from "../cost/cost-from-form-data.ts"
 import {DivWithInfo, LabelWithInfo} from "../info/label-with-info.tsx"
 import {biogasGeneratorTitles, titles} from "../info/titles.tsx"
+import {AssetButtonRow} from "./AssetButtonRow.tsx"
 
 export const BiogasGeneratorDisplay: FunctionComponent<{
     biogasGenerator: BiogasGenerator,
@@ -74,8 +75,7 @@ export const BiogasGeneratorForm: FunctionComponent<{
                     <input type="checkbox" id="curtailment" name="curtailment" defaultChecked={initialData?.curtailment} />
                 </div>
                 <CostSection initialData={initialData?.cost}/>
-                <Button onClick={hide} style={{ marginRight: '10px' }} highContrast variant="soft">Annuleren</Button>
-                <Button type="submit">Opslaan</Button>
+                <AssetButtonRow onClickCancel={hide} />
             </form>
         </Card>
     )

webtool/frontend/src/pages/rekentool/components/company/company-form.tsx

@@ -1,9 +1,10 @@
 import {FormEvent, FunctionComponent} from "react"
 import {Company} from "local4local"
-import {Button, Card} from "@radix-ui/themes"
+import {Card} from "@radix-ui/themes"
 import {CompanyHeading} from "./company-heading.tsx"
 import { titles } from '../info/titles.tsx';
 import {LabelWithInfo} from "../info/label-with-info.tsx"
+import {AssetButtonRow} from "../assets/AssetButtonRow.tsx"
 
 export const CompanyForm: FunctionComponent<{
     initialData?: Company | null;
@@ -52,8 +53,7 @@ export const CompanyForm: FunctionComponent<{
                 {/*    <input className="form-input" type="number" id="chargePoints_n" name="chargePoints_n"*/}
                 {/*           defaultValue={initialData?.chargePoints_n} min={0} />*/}
                 {/*</div>*/}
-                <Button onClick={hide} style={{marginRight: '10px'}} highContrast variant="soft">Annuleren</Button>
-                <Button type="submit">Opslaan</Button>
+                <AssetButtonRow onClickCancel={hide} />
             </form>
         </Card>
     )

webtool/frontend/src/pages/rekentool/components/heat-storage/heat-storage-form.tsx

@@ -1,11 +1,12 @@
 import {FormEvent, FunctionComponent} from "react"
 import {HeatStorage} from "local4local"
-import {Button, Card} from "@radix-ui/themes"
+import {Card} from "@radix-ui/themes"
 import {HeatStorageHeading} from "./heat-storage-heading.tsx"
 import {CostSection} from "../cost/cost-section.tsx"
 import {costFromFormData} from "../cost/cost-from-form-data.ts"
 import {LabelWithInfo} from "../info/label-with-info.tsx"
 import { titles } from '../info/titles.tsx';
+import {AssetButtonRow} from "../assets/AssetButtonRow.tsx"
 
 export const HeatStorageForm: FunctionComponent<{
     initialData?: HeatStorage | null;
@@ -52,8 +53,7 @@ export const HeatStorageForm: FunctionComponent<{
 
                 <CostSection initialData={initialData?.cost}/>
 
-                <Button type="button" onClick={hide} style={{ marginRight: '10px' }} highContrast variant="soft">Annuleren</Button>
-                <Button type="submit">Opslaan</Button>
+                <AssetButtonRow onClickCancel={hide} />
             </form>
         </Card>
     )

webtool/frontend/src/pages/rekentool/components/household/household-form.tsx

@@ -1,9 +1,10 @@
 import {FormEvent, FunctionComponent} from "react"
 import {HouseholdGroup} from "local4local"
-import {Button, Card} from "@radix-ui/themes"
+import {Card} from "@radix-ui/themes"
 import {HouseholdHeading} from "./household-heading.tsx"
 import {LabelWithInfo} from "../info/label-with-info.tsx"
 import { titles } from '../info/titles.tsx';
+import {AssetButtonRow} from "../assets/AssetButtonRow.tsx"
 
 export const HouseholdForm: FunctionComponent<{
     initialData?: HouseholdGroup,
@@ -59,8 +60,7 @@ export const HouseholdForm: FunctionComponent<{
                     <LabelWithInfo data={titles["annualBaseConsumptionAvg_kWh"]} />
                     <input className="form-input" type="number" id="annualBaseConsumptionAvg_kWh" name="annualBaseConsumptionAvg_kWh" defaultValue={initialData.annualBaseConsumptionAvg_kWh} min={0} />
                 </div>
-                <Button type="button" onClick={hide} style={{ marginRight: '10px' }} highContrast variant="soft">Annuleren</Button>
-                <Button type="submit">Opslaan</Button>
+                <AssetButtonRow onClickCancel={hide} />
             </form>
         </Card>
     )

webtool/frontend/src/pages/rekentool/components/solarfarm/solarfarm-form.tsx

@@ -1,11 +1,12 @@
 import {FormEvent, FunctionComponent} from "react"
-import {Button, Card, RadioGroup} from "@radix-ui/themes"
+import {Card, RadioGroup} from "@radix-ui/themes"
 import {SolarFarm, PVOrientation } from "local4local"
 import {CostSection} from "../cost/cost-section.tsx"
 import {costFromFormData} from "../cost/cost-from-form-data.ts"
 import {SolarFarmHeading} from "./solarfarm-heading.tsx"
 import {LabelWithInfo} from "../info/label-with-info.tsx"
 import {solarFarmTitles, titles} from "../info/titles.tsx"
+import {AssetButtonRow} from "../assets/AssetButtonRow.tsx"
 
 export const SolarFarmForm: FunctionComponent<{
     initialData?: SolarFarm | null
@@ -63,8 +64,7 @@ export const SolarFarmForm: FunctionComponent<{
                     </RadioGroup.Root>
                 </div>
                 <CostSection initialData={ initialData?.cost } />
-                <Button type="button" onClick={hide} style={{ marginRight: '10px' }} highContrast variant="soft">Annuleren</Button>
-                <Button type="submit">Opslaan</Button>
+                <AssetButtonRow onClickCancel={hide} />
             </form>
         </Card>
     )

webtool/frontend/src/pages/rekentool/components/wind-farm/wind-farm.tsx

@@ -1,5 +1,5 @@
 import {FormEvent, FunctionComponent, useState} from "react"
-import {Flex, Button, Card, DataList, Heading} from "@radix-ui/themes"
+import {Flex, Card, DataList, Heading} from "@radix-ui/themes"
 import {Pilot, WindFarm, WindFarmLocation, AssetCost} from "local4local"
 import { GiWindTurbine } from "react-icons/gi";
 import {CostSection, CostDisplay} from "../cost/cost-section.tsx"
@@ -8,6 +8,7 @@ import {costFromFormData} from "../cost/cost-from-form-data.ts"
 import {DivWithInfo, LabelWithInfo} from "../info/label-with-info.tsx"
 import {windFarmTitles} from "../info/titles.tsx"
 import {LocationRadioButtons} from "./location-radio-buttons.tsx"
+import {AssetButtonRow} from "../assets/AssetButtonRow.tsx"
 
 export const WindFarmDisplay: FunctionComponent<{
     windFarm: WindFarm,
@@ -89,8 +90,7 @@ export const WindFarmForm: FunctionComponent<{
                     <input type="checkbox" id="curtailment" name="curtailment" defaultChecked={initialData?.curtailment} />
                 </div>
                 <CostSection initialData={initialData?.cost ?? AssetCost.createForGenerationAsset()}/>
-                <Button onClick={hide} style={{ marginRight: '10px' }} highContrast variant="soft">Annuleren</Button>
-                <Button type="submit">Opslaan</Button>
+                <AssetButtonRow onClickCancel={hide} />
             </form>
         </Card>
     )