LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(dashboard-v2): make Button's code more readable

This commit is contained in:
Michał Leszczyk 2022-03-23 10:28:26 +01:00
parent fc4864996a
commit 18600533eb
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
2 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/dashboard-v2/src/components/Button/Button.js
View File

@ -1,3 +1,4 @@
import cn from "classnames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import styled from "styled-components"; import styled from "styled-components";
@ -6,17 +7,12 @@ import styled from "styled-components";
*/ */
export const Button = styled.button.attrs(({ disabled, $primary }) => ({ export const Button = styled.button.attrs(({ disabled, $primary }) => ({
type: "button", type: "button",
className: `px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide transition-[filter] className: cn("px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide transition-[opacity_filter]", {
${ "bg-primary text-palette-600": $primary,
$primary "bg-white border-2 border-black text-palette-600": !$primary,
? `bg-primary ${disabled ? "" : "text-palette-600"}` "cursor-not-allowed opacity-60": disabled,
: `bg-white border-2 ${disabled ? "border-palette-300" : "border-black text-palette-600"}` "hover:brightness-90": !disabled,
} }),
${
disabled
? `${$primary ? "saturate-50 brightness-125 text-palette-400" : "text-palette-300"} cursor-default`
: "hover:brightness-90"
}`,
}))``; }))``;
Button.propTypes = { Button.propTypes = {
/** /**

20
packages/dashboard-v2/src/pages/upgrade.js
View File

@ -82,15 +82,15 @@ const PlansSlider = () => {
<div className="w-full mb-24"> <div className="w-full mb-24">
{!loading && ( {!loading && (
<Slider <Slider
slides={plans.map((p) => { slides={plans.map((plan) => {
const isHigherThanCurrent = p.tier > activePlan?.tier; const isHigherThanCurrent = plan.tier > activePlan?.tier;
const isCurrent = p.tier === activePlan?.tier; const isCurrent = plan.tier === activePlan?.tier;
return ( return (
<Panel className="min-h-[620px] px-6 py-10 flex flex-col"> <Panel className="min-h-[620px] px-6 py-10 flex flex-col">
<h3>{p.name}</h3> <h3>{plan.name}</h3>
<Description>{p.description}</Description> <Description>{plan.description}</Description>
<Price price={p.price} /> <Price price={plan.price} />
<div className="text-center my-6"> <div className="text-center my-6">
<Button $primary={isHigherThanCurrent} disabled={isCurrent}> <Button $primary={isHigherThanCurrent} disabled={isCurrent}>
@ -101,13 +101,13 @@ const PlansSlider = () => {
</div> </div>
<ul className="-ml-2"> <ul className="-ml-2">
<PlanSummaryItem> <PlanSummaryItem>
Pin up to {storage(p.limits.storageLimit)} of censorship-resistant storage Pin up to {storage(plan.limits.storageLimit)} of censorship-resistant storage
</PlanSummaryItem> </PlanSummaryItem>
<PlanSummaryItem> <PlanSummaryItem>
Support for up to {localizedNumber(p.limits.maxNumberUploads)} files Support for up to {localizedNumber(plan.limits.maxNumberUploads)} files
</PlanSummaryItem> </PlanSummaryItem>
<PlanSummaryItem>{bandwidth(p.limits.uploadBandwidth)} mbps upload bandwidth</PlanSummaryItem> <PlanSummaryItem>{bandwidth(plan.limits.uploadBandwidth)} mbps upload bandwidth</PlanSummaryItem>
<PlanSummaryItem>{bandwidth(p.limits.downloadBandwidth)} mbps download bandwidth</PlanSummaryItem> <PlanSummaryItem>{bandwidth(plan.limits.downloadBandwidth)} mbps download bandwidth</PlanSummaryItem>
</ul> </ul>
</Panel> </Panel>
); );