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

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

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