Skip to content

Commit

Permalink
tootips fix (#277)
Browse files Browse the repository at this point in the history 
Co-authored-by: Vlad Nikolaev <[email protected]>
  • Loading branch information
@sktbrd
sktbrd and Vlad Nikolaev authored Jul 29, 2024
1 parent 92f14ce commit fa21b11
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 33 deletions.
28 changes: 26 additions & 2 deletions src/common/components/organisms/FidgetTray.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ import { FidgetInstanceData } from "@/common/fidgets";
import { CompleteFidgets } from "@/fidgets";
import { Button } from "@/common/components/atoms/button";
import { FaPlus } from "react-icons/fa6";

import {
Tooltip,
TooltipContent,
TooltipTrigger,
TooltipProvider,
} from "@/common/components/atoms/tooltip";
import { FaInfoCircle } from "react-icons/fa";
export interface FidgetTrayProps {
setExternalDraggedItem: Dispatch<
SetStateAction<{ i: string; w: number; h: number } | undefined>
Expand All @@ -23,7 +29,25 @@ export const FidgetTray: React.FC<FidgetTrayProps> = ({
openFidgetPicker,
}) => {
return (
<div className="w-full h-screen flex flex-col justify-start items-center gap-2 bg-sky-50 py-8 px-6 overflow-auto">
<div className="w-full h-screen flex flex-col justify-start items-center gap-2 bg-sky-50 py-7 px-6 overflow-auto">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<center>
<FaInfoCircle color="#D1D5DB" />
</center>
</TooltipTrigger>
<TooltipContent side="left">
<div className="flex flex-col gap-1">
<div>
Click the + to browse Fidgets.
<br />
Then, drag them to your Space
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<h5 className="text-xs font-medium text-center -mx-3 mb-3">
Fidget Tray
</h5>
Expand Down
86 changes: 55 additions & 31 deletions src/common/lib/theme/ThemeSettingsEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export function ThemeSettingsEditor({
cancelExitEditMode,
}: ThemeSettingsEditorArgs) {
const [showConfirmCancel, setShowConfirmCancel] = useState(false);
const [displayToolTips, setDisplayToolTips] = useState(false);

function themePropSetter<T extends string>(
property: string,
Expand Down Expand Up @@ -83,26 +82,13 @@ export function ThemeSettingsEditor({
cancelExitEditMode();
}

function toggleToolTips() {
setDisplayToolTips(!displayToolTips);
}

return (
<>
<div className="flex flex-col h-full gap-6">
{/* Back */}
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
<div>Customize</div>
<FaInfoCircle onClick={toggleToolTips} color="grey" />
</div>
</TooltipTrigger>
<TooltipContent>Little Help?</TooltipContent>
</Tooltip>
</TooltipProvider>

<div className="flex items-center gap-1">
<div>Customize</div>
</div>
{/* Content */}
<div className="h-full overflow-auto flex flex-col gap-4">
<div className="flex flex-col gap-2">
Expand All @@ -123,7 +109,26 @@ export function ThemeSettingsEditor({
</TabsList>
<TabsContent value="fonts" className={tabContentClasses}>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Headings</h4>
<div className="flex flex-row gap-1">
<h4 className="text-sm">Headings</h4>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1 pl-1">
<FaInfoCircle color="#D1D5DB" />
</div>
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-1">
<div>
The primary, or header font that Fidgets can
inherit.
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div className="flex items-center gap-1">
<ColorSelector
className="rounded-full overflow-hidden w-6 h-6 shrink-0"
Expand All @@ -140,7 +145,26 @@ export function ThemeSettingsEditor({
</div>
</div>
<div className="flex flex-col gap-1">
<h4 className="text-sm">Body</h4>
<div className="flex flex-row gap-1">
<h4 className="text-sm">Body</h4>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1 pl-1">
<FaInfoCircle color="#D1D5DB" />
</div>
</TooltipTrigger>
<TooltipContent>
<div className="flex flex-col gap-1">
<div>
The secondary, or body font that Fidgets can
inherit.
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<div className="flex items-center gap-1">
<ColorSelector
className="rounded-full overflow-hidden w-6 h-6 shrink-0"
Expand All @@ -165,8 +189,8 @@ export function ThemeSettingsEditor({
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
<div className="flex items-center gap-1 pl-1">
<FaInfoCircle color="#D1D5DB" />
</div>
</TooltipTrigger>
<TooltipContent>
Expand Down Expand Up @@ -201,8 +225,8 @@ export function ThemeSettingsEditor({
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
<div className="flex items-center gap-1 pl-1">
<FaInfoCircle color="#D1D5DB" />
</div>
</TooltipTrigger>
<TooltipContent>
Expand All @@ -229,8 +253,8 @@ export function ThemeSettingsEditor({
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
<div className="flex items-center gap-1 pl-1">
<FaInfoCircle color="#D1D5DB" />
</div>
</TooltipTrigger>
<TooltipContent>
Expand Down Expand Up @@ -266,8 +290,8 @@ export function ThemeSettingsEditor({
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
<div className="flex items-center gap-1 pl-1">
<FaInfoCircle color="#D1D5DB" />
</div>
</TooltipTrigger>
<TooltipContent>
Expand Down Expand Up @@ -298,8 +322,8 @@ export function ThemeSettingsEditor({
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
<div className="flex items-center gap-1 pl-1">
<FaInfoCircle color="#D1D5DB" />
</div>
</TooltipTrigger>
<TooltipContent>
Expand Down Expand Up @@ -333,8 +357,8 @@ export function ThemeSettingsEditor({
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1">
{displayToolTips && <FaInfoCircle color="grey" />}
<div className="flex items-center gap-1 pl-1">
<FaInfoCircle color="#D1D5DB" />
</div>
</TooltipTrigger>
<TooltipContent>
Expand Down

0 comments on commit fa21b11

Please sign in to comment.