Fixed Share button position and icon

This commit is contained in:
Lucas Oliveira 2023-12-11 00:18:14 -03:00
commit 89e7469032
6 changed files with 30 additions and 19 deletions

View file

@ -4,13 +4,20 @@ import { nodeIconsLucide } from "../../utils/styleUtils";
const ForwardedIconComponent = forwardRef( const ForwardedIconComponent = forwardRef(
( (
{ name, className, iconColor, stroke, id = "" }: IconComponentProps, {
name,
className,
iconColor,
stroke,
strokeWidth,
id = "",
}: IconComponentProps,
ref ref
) => { ) => {
const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"]; const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
const style = { const style = {
strokeWidth: 1.5, strokeWidth: strokeWidth ?? 1.5,
...(stroke && { stroke: stroke }), ...(stroke && { stroke: stroke }),
...(iconColor && { color: iconColor, stroke: stroke }), ...(iconColor && { color: iconColor, stroke: stroke }),
}; };

View file

@ -209,7 +209,7 @@ export default function ShareModal({
> >
<span className="pr-2">Share</span> <span className="pr-2">Share</span>
<IconComponent <IconComponent
name="Share" name="Forward"
className="h-6 w-6 pl-1 text-foreground" className="h-6 w-6 pl-1 text-foreground"
aria-hidden="true" aria-hidden="true"
/> />

View file

@ -193,14 +193,15 @@ export default function ExtraSidebar(): JSX.Element {
<button <button
disabled={!hasApiKey || !validApiKey || !hasStore} disabled={!hasApiKey || !validApiKey || !hasStore}
className={classNames( className={classNames(
"extra-side-bar-buttons gap-2 text-sm", "extra-side-bar-buttons gap-1.5 text-sm font-semibold",
!hasApiKey || !validApiKey || !hasStore !hasApiKey || !validApiKey || !hasStore
? "button-disable cursor-default text-muted-foreground" ? "button-disable cursor-default text-muted-foreground"
: "" : ""
)} )}
> >
<IconComponent <IconComponent
name="Share" name="Forward"
strokeWidth={2.5}
className={classNames( className={classNames(
"side-bar-button-size", "side-bar-button-size",
!hasApiKey || !validApiKey || !hasStore !hasApiKey || !validApiKey || !hasStore
@ -231,6 +232,19 @@ export default function ExtraSidebar(): JSX.Element {
return ( return (
<div className="side-bar-arrangement"> <div className="side-bar-arrangement">
<div className="side-bar-buttons-arrangement"> <div className="side-bar-buttons-arrangement">
{hasStore && (
<ShadTooltip
content={
!hasApiKey || !validApiKey
? "Please review your API key."
: "Share"
}
side="top"
styleClasses="cursor-default"
>
<div className="side-bar-button">{ModalMemo}</div>
</ShadTooltip>
)}
<div className="side-bar-button"> <div className="side-bar-button">
<ShadTooltip content="Import" side="top"> <ShadTooltip content="Import" side="top">
<button <button
@ -300,19 +314,6 @@ export default function ExtraSidebar(): JSX.Element {
</ShadTooltip> </ShadTooltip>
)} )}
</div> </div>
{hasStore && (
<ShadTooltip
content={
!hasApiKey || !validApiKey
? "Please review your API key."
: "Share"
}
side="top"
styleClasses="cursor-default"
>
<div className="side-bar-button">{ModalMemo}</div>
</ShadTooltip>
)}
</div> </div>
<Separator /> <Separator />
<div className="side-bar-search-div-placement"> <div className="side-bar-search-div-placement">

View file

@ -250,7 +250,7 @@ export default function NodeToolbarComponent({
> >
<div className="flex"> <div className="flex">
<IconComponent <IconComponent
name="Share" name="Forward"
className="relative top-0.5 mr-2 h-4 w-4" className="relative top-0.5 mr-2 h-4 w-4"
/>{" "} />{" "}
Share{" "} Share{" "}

View file

@ -233,6 +233,7 @@ export type IconComponentProps = {
iconColor?: string; iconColor?: string;
onClick?: () => void; onClick?: () => void;
stroke?: string; stroke?: string;
strokeWidth?: number;
id?: string; id?: string;
}; };

View file

@ -35,6 +35,7 @@ import {
FileUp, FileUp,
Fingerprint, Fingerprint,
FolderPlus, FolderPlus,
Forward,
Gift, Gift,
GitBranchPlus, GitBranchPlus,
GitFork, GitFork,
@ -358,6 +359,7 @@ export const nodeIconsLucide: iconsType = {
Minimize2, Minimize2,
Maximize2, Maximize2,
SaveAll, SaveAll,
Forward,
Share2, Share2,
Share, Share,
GitBranchPlus, GitBranchPlus,