Skip to content

Commit

Permalink
UI tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericvolp12
ericvolp12 committed Apr 22, 2024
1 parent d054314 commit 7f9b0d9
Showing 1 changed file with 79 additions and 73 deletions.
152 changes: 79 additions & 73 deletions ts/bgs-dash/src/components/Dash/Dash.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -504,75 +504,79 @@ const Dash: FC<{}> = () => {
A list of all PDS connections and their current status.
</p>
</div>

<div className="inline-flex mt-5 sm:mt-0 flex-col">
<Switch.Group as="div" className="flex items-center justify-between">
<span className="flex flex-grow flex-col mr-5">
<Switch.Label as="span" className="text-gray-900" passive>
{slurpsEnabled ? (
<ShieldCheckIcon
className="h-5 w-5 mr-2 mb-1 inline-block"
aria-hidden="true"
/>
) : (
<ShieldExclamationIcon
className="h-5 w-5 mr-2 mb-1 inline-block"
aria-hidden="true"
/>
)}
<span className="text-md font-medium leading-6">
New Connections {slurpsEnabled ? "Enabled" : "Disabled"}
</span>
</Switch.Label>
</span>
<Switch
checked={slurpsEnabled}
onChange={requestSlurpsEnabledStateChange}
disabled={!canToggleSlurps}
className={classNames(
slurpsEnabled ? "bg-green-600" : "bg-red-400",
canToggleSlurps ? "cursor-pointer" : "cursor-not-allowed",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2"
)}
>
<span
aria-hidden="true"
<div className="flex flex-col mt-5">
<div className="inline-flex mt-5 sm:mt-0 flex-col">
<Switch.Group as="div" className="flex items-center justify-between">
<span className="flex flex-grow flex-col mr-5">
<Switch.Label as="span" className="text-gray-900" passive>
{slurpsEnabled ? (
<ShieldCheckIcon
className="h-5 w-5 mr-2 mb-1 inline-block"
aria-hidden="true"
/>
) : (
<ShieldExclamationIcon
className="h-5 w-5 mr-2 mb-1 inline-block"
aria-hidden="true"
/>
)}
<span className="text-md font-medium leading-6">
New Connections {slurpsEnabled ? "Enabled" : "Disabled"}
</span>
</Switch.Label>
</span>
<Switch
checked={slurpsEnabled}
onChange={requestSlurpsEnabledStateChange}
disabled={!canToggleSlurps}
className={classNames(
slurpsEnabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
slurpsEnabled ? "bg-green-600" : "bg-red-400",
canToggleSlurps ? "cursor-pointer" : "cursor-not-allowed",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2"
)}
/>
</Switch>
</Switch.Group>
</div>
<div className="ml-4">
<label htmlFor="new-pds-rate-limit" className="block text-sm font-medium leading-6 text-gray-900">
New PDSs Per Day Limit
</label>
<div className="mt-2 flex rounded-md shadow-sm">
<div className="relative flex flex-grow items-stretch focus-within:z-10">
<input
type="number"
id="new-pds-rate-limit"
name="new-pds-rate-limit"
className="block w-full rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
value={newPDSLimit}
aria-describedby="rate-limit"
onChange={(e) => {
setNewPDSLimit(parseInt(e.target.value));
>
<span
aria-hidden="true"
className={classNames(
slurpsEnabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
)}
/>
</Switch>
</Switch.Group>
</div>
<div className="ml-4">
<div className="mt-2 flex rounded-md shadow-sm">
<div className="relative flex flex-grow items-stretch focus-within:z-10">
<input
type="number"
id="new-pds-rate-limit"
name="new-pds-rate-limit"
// Hides the up/down arrows on number inputs
className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none block w-full rounded-none rounded-l-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
value={newPDSLimit}
aria-describedby="rate-limit"
onChange={(e) => {
setNewPDSLimit(parseInt(e.target.value));
}}
/>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<span className="text-gray-500 sm:text-sm" id="price-currency">
PDS / Day
</span>
</div>
</div>
<button
type="button"
className="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
disabled={!canSetNewPDSLimit}
onClick={() => {
setNewPDSRateLimit(newPDSLimit);
}}
/>
>
Update
</button>
</div>
<button
type="button"
className="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
disabled={!canSetNewPDSLimit}
onClick={() => {
setNewPDSRateLimit(newPDSLimit);
}}
>
Update
</button>
</div>
</div>

Expand Down Expand Up @@ -1287,14 +1291,16 @@ const Dash: FC<{}> = () => {
</table>
</div>
</div>
{modalAction && (
<ConfirmModal
action={modalAction}
onConfirm={modalConfirm}
onCancel={modalCancel}
/>
)}
</div>
{
modalAction && (
<ConfirmModal
action={modalAction}
onConfirm={modalConfirm}
onCancel={modalCancel}
/>
)
}
</div >
);
};

Expand Down

0 comments on commit 7f9b0d9

Please sign in to comment.