Simpler input styles

src/components/Input/Input.module.css

@@ -0,0 +1,79 @@
+.input {
+	height: 2.5rem;
+	width: 100%;
+	border: 1px solid #28123e; /* border-primary */
+	border-radius: 3px;
+	padding-top: 0.25rem;
+	padding-inline: 0.5rem;
+	color: #28123e; /* text-primary */
+	background: white;
+}
+
+.polkadot {
+	composes: input;
+	padding-right: 2.5rem;
+	background:
+		url(coin.svg) no-repeat center right 7px/20px,
+		url(bar.svg) no-repeat center right 35px;
+	background-color: white;
+}
+
+.switch {
+	--width: 52px;
+	--height: 26px;
+	--offset: 2px;
+	--knob: calc(var(--height) - var(--offset) * 2);
+
+	appearance: none;
+	cursor: pointer;
+	margin: 0;
+	padding: 0;
+	display: inline-grid;
+	flex-shrink: 0;
+	inline-size: var(--width);
+	block-size: var(--height);
+	place-items: center;
+	position: relative;
+}
+
+.switch[data-inverted='true'] {
+	--toggle-background: rgba(101, 112, 139, 0.5);
+	--switch-background: theme('colors.white');
+	--switch-checked-background: theme('colors.childBountyGray');
+}
+
+.switchInverted {
+	composes: switch;
+	--toggle-background: rgba(101, 112, 139, 0.5);
+	--switch-background: theme('colors.white');
+	--switch-checked-background: theme('colors.childBountyGray');
+}
+
+.switch::before {
+	content: '';
+	display: block;
+	inline-size: var(--width);
+	block-size: var(--height);
+	border-radius: calc(var(--height) / 2);
+	background: var(--toggle-background, white);
+	position: absolute;
+}
+
+.switch::after {
+	display: block;
+	background-color: var(--switch-background, theme('colors.curatorMainBackground'));
+	content: '';
+	inline-size: var(--knob);
+	block-size: var(--knob);
+	border-radius: 50%;
+	position: absolute;
+	inset-inline-start: var(--offset);
+	transition:
+		left 0.3s,
+		background-color 0.3s;
+}
+
+.switch:checked::after {
+	background: var(--switch-checked-background, theme('colors.accent'));
+	inset-inline-start: calc(var(--width) - var(--knob) - var(--offset));
+}

src/components/curator-actions/child-bounties/operations/AcceptSubCuratorRole.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { dotApi } from '../../../../stores';
-	import ToggleIcon from '../../../ToggleIcon.svelte';
+	import Input from '../../../Input/Input.module.css';
 	import type { ChildBounty } from '../../../../types/child-bounty';
 	import { calculateDeposit } from '../../operations/calculateDeposit';
 	import Dialog from '../../../common/Dialog.svelte';
@@ -43,7 +43,7 @@
 			<p class="text-xs">Accept Sub-curator role</p>
 			<label class="flex justify-between items-start cursor-pointer">
 				<span>I agree</span>
-				<ToggleIcon bind:checked={isToggled} inverted />
+				<input type="checkbox" bind:checked={isToggled} class={Input.switchInverted} />
 			</label>
 		</div>
 

src/components/curator-actions/child-bounties/operations/AddChildBounty.svelte

@@ -4,13 +4,12 @@
 	import { dotApi } from '../../../../stores';
 	import { showErrorDialog } from '../../../../utils/loading-screen';
 	import { isPositiveNumber } from '../../../../utils/common';
-	import PolkaCoin from '../../../svg/PolkaCoin.svg';
+	import Input from '../../../Input/Input.module.css';
 	import Dialog from '../../../common/Dialog.svelte';
 	import { Binary } from 'polkadot-api';
 	import { maybeTransaction, submitTransaction } from '../../../../utils/transaction';
 	import { batchExtendBounty } from '../../../../utils/batchExtendBounty';
 	import ExtendBountyLabel from '../../../ExtendBountyLabel.svelte';
-	import ToggleIcon from '../../../ToggleIcon.svelte';
 	import Fee from '../../../Fee.svelte';
 
 	export let open = true;
@@ -70,29 +69,17 @@
 	</div>
 
 	<div class="flex flex-col gap-6 mt-6">
-		<section class="relative">
+		<section>
 			<p class="text-xs">Value</p>
-			<input
-				bind:value={bountyValue}
-				class="border border-black pt-1 pl-2 rounded-[3px] bg-white h-10 w-full"
-				placeholder="00.00"
-			/>
-			<div class="border border-accent absolute right-9 top-9 transform -translate-y-1/2 h-6"></div>
-			<div class="absolute right-2 top-[26px]">
-				<img src={PolkaCoin} width="20" height="20" alt="PolkaCoin" />
-			</div>
+			<input bind:value={bountyValue} class={Input.polkadot} placeholder="00.00" />
 		</section>
 		<section>
 			<p class="text-xs">Title</p>
-			<input
-				bind:value={bountyTitle}
-				class="border border-black rounded-[3px] bg-white pl-2 pt-1 h-10 w-full"
-				placeholder="Child bounty name"
-			/>
+			<input bind:value={bountyTitle} class={Input.input} placeholder="Child bounty name" />
 		</section>
 
 		<label class="flex gap-4 items-center cursor-pointer">
-			<ToggleIcon bind:checked={extend} />
+			<input type="checkbox" bind:checked={extend} class={Input.switch} />
 			<ExtendBountyLabel />
 		</label>
 

src/components/curator-actions/child-bounties/operations/AssignSubCurator.svelte

@@ -4,13 +4,12 @@
 	import { showErrorDialog } from '../../../../utils/loading-screen';
 	import type { ChildBounty } from '../../../../types/child-bounty';
 	import { isPositiveNumber } from '../../../../utils/common';
-	import PolkaCoin from '../../../svg/PolkaCoin.svg';
+	import Input from '../../../Input/Input.module.css';
 	import Dialog from '../../../common/Dialog.svelte';
 	import { MultiAddress } from '@polkadot-api/descriptors';
 	import { maybeTransaction, submitTransaction } from '../../../../utils/transaction';
 	import { batchExtendBounty } from '../../../../utils/batchExtendBounty';
 	import ExtendBountyLabel from '../../../ExtendBountyLabel.svelte';
-	import ToggleIcon from '../../../ToggleIcon.svelte';
 	import Fee from '../../../Fee.svelte';
 
 	export let open = true;
@@ -67,27 +66,16 @@
 
 		<div class="my-4">
 			<p class="text-xs">Sub-curator address:</p>
-			<input
-				bind:value={curatorAddress}
-				class="border border-primary rounded-[3px] bg-white pl-2 pt-1 h-10 w-full"
-			/>
+			<input bind:value={curatorAddress} class={Input.input} />
 		</div>
 
-		<div class="my-4 relative">
+		<div class="my-4">
 			<p class="text-xs">Sub-curator fee:</p>
-			<input
-				bind:value={curatorFee}
-				class="border border-primary rounded-[3px] bg-white pl-2 pt-1 h-10 w-full"
-				placeholder="00.00"
-			/>
-			<div class="border border-accent absolute right-9 top-9 transform -translate-y-1/2 h-6"></div>
-			<div class="absolute right-2 top-[26px]">
-				<img src={PolkaCoin} width="20" height="20" alt="PolkaCoin" />
-			</div>
+			<input bind:value={curatorFee} class={Input.polkadot} placeholder="00.00" />
 		</div>
 
 		<label class="my-4 flex gap-4 items-center cursor-pointer">
-			<ToggleIcon bind:checked={extend} inverted />
+			<input type="checkbox" bind:checked={extend} class={Input.switchInverted} />
 			<ExtendBountyLabel />
 		</label>
 

src/components/curator-actions/child-bounties/operations/AwardChildBounty.svelte

@@ -8,7 +8,7 @@
 	import { maybeTransaction, submitTransaction } from '../../../../utils/transaction';
 	import { batchExtendBounty } from '../../../../utils/batchExtendBounty';
 	import ExtendBountyLabel from '../../../ExtendBountyLabel.svelte';
-	import ToggleIcon from '../../../ToggleIcon.svelte';
+	import Input from '../../../Input/Input.module.css';
 	import Fee from '../../../Fee.svelte';
 
 	export let open = true;
@@ -58,15 +58,11 @@
 
 		<div class="mt-5">
 			<p class="text-xs">Beneficiary account address</p>
-			<input
-				bind:value={beneficiary}
-				class="border border-primary rounded-[3px] bg-white pl-2 pt-1 h-10 w-full text-primary"
-				placeholder=""
-			/>
+			<input bind:value={beneficiary} class={Input.input} />
 		</div>
 
 		<label class="mt-5 flex gap-4 items-center cursor-pointer">
-			<ToggleIcon bind:checked={extend} inverted />
+			<input type="checkbox" bind:checked={extend} class={Input.switchInverted} />
 			<ExtendBountyLabel />
 		</label>
 

src/components/curator-actions/child-bounties/operations/BatchAllChildBountyCalls.svelte

@@ -5,10 +5,9 @@
 	import { activeAccount, dotApi } from '../../../../stores';
 	import { showErrorDialog } from '../../../../utils/loading-screen';
 	import { isPositiveNumber } from '../../../../utils/common';
-	import PolkaCoin from '../../../svg/PolkaCoin.svg';
+	import Input from '../../../Input/Input.module.css';
 	import { maybeTransaction, submitTransaction } from '../../../../utils/transaction';
 	import ExtendBountyLabel from '../../../ExtendBountyLabel.svelte';
-	import ToggleIcon from '../../../ToggleIcon.svelte';
 	import Fee from '../../../Fee.svelte';
 	import { Binary } from 'polkadot-api';
 	import type { Bounty } from '../../../../types/bounty';
@@ -108,54 +107,31 @@
 				type="number"
 				min={nextAvailableChildBountyId}
 				bind:value={childBountyId}
-				class="border border-black rounded-[3px] bg-white pl-2 pt-1 h-10 w-full"
+				class={Input.input}
 			/>
 		</div>
 
-		<div class="my-4 relative">
+		<div class="my-4">
 			<p class="text-xs">Value</p>
-			<input
-				bind:value={bountyValue}
-				class="border border-black pt-1 pl-2 rounded-[3px] bg-white h-10 w-full"
-				placeholder="00.00"
-			/>
-			<div class="border border-accent absolute right-9 top-9 transform -translate-y-1/2 h-6"></div>
-			<div class="absolute right-2 top-[26px]">
-				<img src={PolkaCoin} width="20" height="20" alt="PolkaCoin" />
-			</div>
+			<input bind:value={bountyValue} class={Input.polkadot} placeholder="00.00" />
 		</div>
 
 		<div class="mt-5">
 			<p class="text-xs">Title</p>
-			<input
-				bind:value={bountyTitle}
-				class="border border-black rounded-[3px] bg-white pl-2 pt-1 h-10 w-full"
-				placeholder="Child bounty name"
-			/>
+			<input bind:value={bountyTitle} class={Input.input} placeholder="Child bounty name" />
 		</div>
-		<div class="mt-5 relative">
+		<div class="mt-5">
 			<p class="text-xs">Sub-curator fee</p>
-			<input
-				bind:value={curatorFee}
-				class="border border-primary rounded-[3px] bg-white pl-2 pt-1 h-10 w-full"
-				placeholder="00.00"
-			/>
-			<div class="border border-accent absolute right-9 top-9 transform -translate-y-1/2 h-6"></div>
-			<div class="absolute right-2 top-[26px]">
-				<img src={PolkaCoin} width="20" height="20" alt="PolkaCoin" />
-			</div>
+			<input bind:value={curatorFee} class={Input.polkadot} placeholder="00.00" />
 		</div>
 
 		<div class="mt-5">
 			<p class="text-xs">Beneficiary account address</p>
-			<input
-				bind:value={beneficiary}
-				class="border border-primary rounded-[3px] bg-white pl-2 pt-1 h-10 w-full text-primary"
-			/>
+			<input bind:value={beneficiary} class={Input.input} />
 		</div>
 
 		<label class="mt-5 flex gap-4 items-center cursor-pointer">
-			<ToggleIcon bind:checked={extend} inverted />
+			<input type="checkbox" bind:checked={extend} class={Input.switchInverted} />
 			<ExtendBountyLabel />
 		</label>