web: move custom toolbar preset to pro features

apps/web/src/components/dialogs/toolbar-config-dialog.tsx

@@ -62,6 +62,8 @@ import {
   PresetId
 } from "../../common/toolbar-config";
 import { showToast } from "../../utils/toast";
+import { isUserPremium } from "../../hooks/use-is-user-premium";
+import { Pro } from "../icons";
 export type ToolbarConfigDialogProps = {
   onClose: Perform;
 };
@@ -126,12 +128,24 @@ export default function ToolbarConfigDialog(props: ToolbarConfigDialogProps) {
                   name="preset"
                   value={preset.id}
                   checked={preset.id === currentPreset.id}
+                  disabled={preset.id === "custom" && !isUserPremium()}
                   onChange={(e) => {
                     const { value } = e.target;
+                    if (preset.id === "custom" && !isUserPremium()) {
+                      showToast(
+                        "info",
+                        "You need to be Pro to use the custom preset."
+                      );
+                      return;
+                    }
+
                     setCurrentPreset(getPreset(value as PresetId));
                   }}
                 />
                 {preset.title}
+                {preset.id === "custom" && !isUserPremium() ? (
+                  <Pro color="primary" size={18} sx={{ ml: 1 }} />
+                ) : null}
               </Label>
             ))}
           </Flex>
@@ -159,6 +173,11 @@ export default function ToolbarConfigDialog(props: ToolbarConfigDialogProps) {
           sensors={sensors}
           collisionDetection={closestCenter}
           onDragStart={(event) => {
+            if (!isUserPremium()) {
+              showToast("info", "You need to be Pro to customize the toolbar.");
+              return;
+            }
+
             if (currentPreset.id !== "custom") {
               setCurrentPreset((c) => ({
                 ...getPreset("custom"),

apps/web/src/utils/toast.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Button, Flex, Text } from "@theme-ui/components";
 import ThemeProvider from "../components/theme-provider";
-import { Error, Warn, Success } from "../components/icons";
+import { Error, Warn, Success, Info } from "../components/icons";
 import { store as appstore } from "../stores/app-store";
 import toast from "react-hot-toast";
 import { Theme } from "@notesnook/theme";
@@ -40,10 +40,16 @@ function showToast(
   if (appstore.get().isFocusMode) return { hide: () => {} }; // TODO
 
   const IconComponent =
-    type === "error" ? Error : type === "success" ? Success : Warn;
+    type === "error"
+      ? Error
+      : type === "success"
+      ? Success
+      : type === "warn"
+      ? Warn
+      : Info;
 
   const RenderedIcon = () => (
-    <IconComponent size={28} color={type as keyof Theme["colors"]} />
+    <IconComponent size={24} color={type as keyof Theme["colors"]} />
   );
 
   const id = toast(<ToastContainer message={message} actions={actions} />, {

packages/theme/src/theme/colorscheme/static.ts

@@ -30,6 +30,8 @@ export type StaticColors = {
   success: string;
   warn: string;
   warnBg: string;
+  info: string;
+  infoBg: string;
   favorite: string;
 
   codeBg: string;
@@ -52,6 +54,8 @@ export function getStaticColors(accent: string): StaticColors {
     success: "#4F8A10",
     warn: "#FF5722",
     warnBg: "#FF572220",
+    info: "#17a2b8",
+    infoBg: "#17a2b820",
     favorite: "#ffd700",
 
     // dracula colors