Skip to content

Commit

Permalink
Comments Resolved
Browse files Browse the repository at this point in the history
  • Loading branch information
@saadiqbal-dev
saadiqbal-dev committed Apr 27, 2024
1 parent 049ab39 commit 81f41be
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 54 deletions.
112 changes: 63 additions & 49 deletions apps/potlock/widget/Components/ui/Button.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const StyledButton = styled.button`
font-weight: 500;
// font-family: "Mona Sans", sans-serif;
line-height: 22px;
text-align: center;
font-feature-settings: "ss01" on, "salt" on;
/* Mona sans/Text sm/14px:Medium */
Expand All @@ -22,7 +21,15 @@ const StyledButton = styled.button`
font-weight: 500;
line-height: 22px; /* 157.143% */
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
transition: all 50ms ease;
flex-direction: ${(props) => {
if (props.direction === "right") {
return "row";
} else if (props.direction === "left") {
return "row-reverse";
}
}};
svg path {
fill: ${(props) => {
Expand All @@ -35,6 +42,8 @@ const StyledButton = styled.button`
return "#FFFFFF";
case "primary":
return "#FFFFFF";
case "brand-outline":
return "hsla(358, 88%, 71%, 1)";
}
}};
}
Expand All @@ -49,8 +58,8 @@ const StyledButton = styled.button`
return "var(--button-standard-bg, #3D3D3D)";
case "primary":
return "var(--button-primary-bg, #DD3345)";
case "no-border-primary-tonal":
return "#fff";
case "brand-outline":
return "hsla(0, 0%, 100%, 0.01)";
}
}};
Expand All @@ -64,35 +73,46 @@ const StyledButton = styled.button`
return "var(--button-standard-color, #FFFFFF)";
case "primary":
return "var(--button-primary-color, #FFFFFF)";
case "no-border-primary-tonal":
case "brand-outline":
return "hsla(354, 71%, 53%, 1)";
}
}};
box-shadow: ${(props) => {
switch (props.variant) {
case "outline":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 1px 0px rgba(15, 15, 15, 0.15) inset, 0px -1px 4px 0px rgba(5, 5, 5, 0.08) inset;";
return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08);";
case "tonal":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.84);";
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset, 0px 0px 0px 2px #FFF inset, 0px 1.5px 0px 0px rgba(0, 0, 0, 0.84);";
case "standard":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);";
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.40) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.40) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);";
case "primary":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(246, 118, 122, 0.50) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.84);";
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(246, 118, 122, 0.50) inset, 0px 0px 0px 2px rgba(246, 118, 122, 0.50) inset, 0px 1.5px 0px 0px rgba(0, 0, 0, 0.84);";
case "brand-outline":
return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(73, 8, 19, 0.20);";
}
}};
&:hover:not(:disabled) {
transform: ${(props) => {
switch (props.variant) {
case "primary":
case "tonal":
return "translateY(1px)";
}
}};
box-shadow: ${(props) => {
switch (props.variant) {
case "primary":
return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #ED464F inset;";
case "outline":
return " 0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset;";
return " 0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08);";
case "standard":
return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84), 0px 1px 1px 0px rgba(235, 235, 235, 0.15) inset;";
return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.40) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.40) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);";
case "tonal":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;";
case "brand-outline":
return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(73, 8, 19, 0.20);";
}
}};
background: ${(props) => {
Expand All @@ -105,6 +125,8 @@ const StyledButton = styled.button`
return " #525252";
case "tonal":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;";
case "brand-outline":
return "#FEF3F2";
}
}};
}
Expand All @@ -113,47 +135,19 @@ const StyledButton = styled.button`
box-shadow: ${(props) => {
switch (props.variant) {
case "outline":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
case "primary":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
case "standard":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
case "tonal":
return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
case "brand-outline":
return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);";
}
}};
}
/* &:disabled {
color: ${(props) => {
switch (props.variant) {
case "outline":
return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;";
case "standard":
return "Neutral/400";
}
}};
box-shadow: ${(props) => {
switch (props.variant) {
case "outline":
return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;";
case "standard":
return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;";
}
}};
background: ${(props) => {
switch (props.variant) {
case "outline":
return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset, 0px 2px 4px -1px rgba(0, 0, 0, 0.22) inset;";
case "standard":
return "hsla(0, 0%, 65%, 1)";
}
}};
} */
&:disabled {
color: ${(props) => {
switch (props.variant) {
Expand Down Expand Up @@ -189,11 +183,16 @@ const StyledButton = styled.button`
}
`;

const TipOnPotlock = ({ variant, onClick, href, ...restProps }) => {
const TipOnPotlock = ({ direction, variant, onClick, href, ...restProps }) => {
if (href) {
return (
<Link href={href}>
<StyledButton onClick={onClick} {...restProps} variant={variant ?? "primary"}>
<StyledButton
direction={direction ?? "right"}
onClick={onClick}
{...restProps}
variant={variant ?? "primary"}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
Expand All @@ -216,7 +215,12 @@ const TipOnPotlock = ({ variant, onClick, href, ...restProps }) => {
);
}
return (
<StyledButton onClick={onClick} {...restProps} variant={variant ?? "primary"}>
<StyledButton
direction={direction ?? "right"}
onClick={onClick}
{...restProps}
variant={variant ?? "primary"}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
Expand All @@ -238,18 +242,28 @@ const TipOnPotlock = ({ variant, onClick, href, ...restProps }) => {
);
};

const Button = ({ disabled, children, onClick, href, ...restProps }) => {
const Button = ({ direction, disabled, children, onClick, href, ...restProps }) => {
if (href) {
return (
<link to={href}>
<StyledButton onClick={onClick} disabled={disabled} {...restProps}>
<StyledButton
direction={direction ?? "right"}
onClick={onClick}
disabled={disabled}
{...restProps}
>
{children}
</StyledButton>
</link>
);
}
return (
<StyledButton onClick={onClick} disabled={disabled} {...restProps}>
<StyledButton
direction={direction ?? "right"}
onClick={onClick}
disabled={disabled}
{...restProps}
>
{children}
</StyledButton>
);
Expand Down
27 changes: 22 additions & 5 deletions apps/potlock/widget/Library.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,32 @@ const ButtonPreview = (
</svg>
Tonal
</Button>
<Button variant="brand-outline">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path
d="M12.375 9.5625C14.6925 7.455 16.875 5.4825 16.875 3.7875C16.875 2.4 15.7875 1.3125 14.4 1.3125C13.62 1.3125 12.8625 1.68 12.375 2.25C11.88 1.68 11.13 1.3125 10.35 1.3125C8.9625 1.3125 7.875 2.4 7.875 3.7875C7.875 5.4825 10.0575 7.455 12.375 9.5625ZM10.35 2.8125C10.68 2.8125 11.0175 2.97 11.235 3.225L12.375 4.5675L13.515 3.225C13.7325 2.97 14.07 2.8125 14.4 2.8125C14.955 2.8125 15.375 3.2325 15.375 3.7875C15.375 4.6275 13.845 6.165 12.375 7.53C10.905 6.165 9.375 4.62 9.375 3.7875C9.375 3.2325 9.795 2.8125 10.35 2.8125Z"
fill="#DBDBDB"
/>
<path
d="M14.625 11.8125H13.125C13.125 10.9125 12.5625 10.1025 11.7225 9.7875L7.1025 8.0625H1.125V16.3125H5.625V15.2325L10.875 16.6875L16.875 14.8125V14.0625C16.875 12.8175 15.87 11.8125 14.625 11.8125ZM2.625 14.8125V9.5625H4.125V14.8125H2.625ZM10.8525 15.12L5.625 13.6725V9.5625H6.8325L11.1975 11.19C11.4525 11.2875 11.625 11.535 11.625 11.8125C11.625 11.8125 10.1325 11.775 9.9 11.7L8.115 11.1075L7.6425 12.5325L9.4275 13.125C9.81 13.2525 10.2075 13.32 10.6125 13.32H14.625C14.9175 13.32 15.18 13.4925 15.3 13.74L10.8525 15.12Z"
fill="#DBDBDB"
/>
</svg>
Brand Outline
</Button>
</div>
<div className="d-flex align-items-center gap-3 mb-3">
<Button variant="outline">Outline</Button>
<Button variant="primary">Primary</Button>
<Button variant="standard">Standard</Button>
<Button variant="tonal">Tonal</Button>
<Button variant="brand-outline">Brand Outline</Button>
</div>
</div>
);
Expand All @@ -100,6 +120,7 @@ const TipOnPotlockPreview = (
<TipOnPotlock variant="primary" />
<TipOnPotlock variant="standard" />
<TipOnPotlock variant="tonal" />
<TipOnPotlock variant="brand-outline" />
</div>
</div>
);
Expand All @@ -124,8 +145,6 @@ const components = [
embedCode: `
const { Button } = VM.require("potlock.near/widget/Components.ui.Button");
return (
<div>
<div>
<Button
onClick={(e) => {
if (props.disabled || !props.onClick) return;
Expand Down Expand Up @@ -153,10 +172,8 @@ const components = [
fill="#DBDBDB"
/>
</svg>
Tip on Potlock
Donate
</Button>
</div>
</div>
);`,
},
{
Expand Down

0 comments on commit 81f41be

Please sign in to comment.