Layouts Fixes and Normalizations

app/(navigation)/(code)/components/Controls.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import styles from "./Controls.module.css";
 import BackgroundControl from "./BackgroundControl";
 import DarkModeControl from "./DarkModeControl";
-import ExportButton from "./ExportButton";
 import LanguageControl from "./LanguageControl";
 import PaddingControl from "./PaddingControl";
 import ThemeControl from "./ThemeControl";

app/(navigation)/(code)/components/ExportButton.tsx

@@ -2,6 +2,7 @@ import React, { MouseEventHandler, useContext, useState } from "react";
 import { track } from "@vercel/analytics";
 
 import ImageIcon from "../assets/icons/image-16.svg";
+import ImageSvgIcon from "../assets/icons/image-svg-16.svg";
 import LinkIcon from "../assets/icons/link-16.svg";
 import ChevronDownIcon from "../assets/icons/chevron-down-16.svg";
 import ClipboardIcon from "../assets/icons/clipboard-16.svg";
@@ -95,7 +96,7 @@ const ExportButton: React.FC = () => {
       throw new Error("Couldn't find a frame to export");
     }
 
-    setFlashMessage({ icon: <ImageIcon />, message: "Exporting SVG" });
+    setFlashMessage({ icon: <ImageSvgIcon />, message: "Exporting SVG" });
 
     const dataUrl = await toSvg(frameContext.current);
     download(dataUrl, `${fileName}.svg`);
@@ -174,16 +175,18 @@ const ExportButton: React.FC = () => {
   return (
     <ButtonGroup>
       <Button onClick={handleExportClick} variant="primary" aria-label="Export as PNG">
-        <DownloadIcon className="w-4 h-4" />
-        Export <span className="hidden md:inline-block">Image</span>
+        <div className="flex flex-row items-center gap-x-2 mr-auto">
+          <DownloadIcon className="w-4 h-4" />
+          <span>Export Image</span>
+        </div>
       </Button>
       <DropdownMenu open={dropdownOpen} onOpenChange={(open) => setDropdownOpen(open)}>
         <DropdownMenuTrigger asChild>
           <Button variant="primary" aria-label="See other export options">
             <ChevronDownIcon className="w-4 h-4" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent side="bottom" align="end">
+        <DropdownMenuContent side="bottom" align="end" className="w-[11rem] md:w-fit">
           <DropdownMenuItem onSelect={dropdownHandler(savePng)}>
             <ImageIcon /> Save PNG{" "}
             <Kbds>
@@ -192,7 +195,7 @@ const ExportButton: React.FC = () => {
             </Kbds>
           </DropdownMenuItem>
           <DropdownMenuItem onSelect={dropdownHandler(saveSvg)}>
-            <ImageIcon /> Save SVG
+            <ImageSvgIcon /> Save SVG
             <Kbds>
               <Kbd>⌘</Kbd>
               <Kbd>⇧</Kbd>

app/(navigation)/(code)/components/LanguageControl.tsx

@@ -6,7 +6,7 @@ import { Language, LANGUAGES } from "../util/languages";
 
 import styles from "./LanguageControl.module.css";
 
-import useHotkeys from "../../../../utils/useHotkeys";
+import useHotkeys from "@/utils/useHotkeys";
 import { loadingLanguageAtom } from "../store";
 import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from "@/components/select";
 import { cn } from "@/utils/cn";
@@ -41,13 +41,13 @@ const LanguageControl: React.FC = () => {
       >
         <SelectTrigger
           size="small"
-          className={cn("w-[146px]", isLoadingLanguage && styles.loadingShimmer)}
+          className={cn("w-[150px]", isLoadingLanguage && styles.loadingShimmer)}
           icon={ChevronUpIcon}
         >
           <SelectValue />
           {autoDetectLanguage ? "(auto)" : ""}
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="absolute bottom-0 left-0 w-[150px] h-[550px] ml-1 mb-11">
           <SelectItem value="auto-detect">
             <SelectItemText>Auto-Detect</SelectItemText>
           </SelectItem>

app/(navigation)/(code)/components/ThemeControl.tsx

@@ -1,4 +1,4 @@
-import { useAtom, useSetAtom } from "jotai";
+import { useAtom } from "jotai";
 import React, { useEffect } from "react";
 import { themeAtom, THEMES, Theme, unlockedThemesAtom } from "../store/themes";
 import ControlContainer from "./ControlContainer";
@@ -69,7 +69,7 @@ const ThemeControl: React.FC = () => {
         <SelectTrigger size="small" className="w-[60px]" icon={ChevronUpIcon}>
           <SelectValue />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent className="w-[160px] h-[550px] ml-1 mb-11">
           <SelectGroup>
             <SelectLabel>Partners</SelectLabel>
             {partnerThemes

app/(navigation)/icon/icon-generator.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { use, useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -749,18 +749,6 @@ export const IconGenerator = () => {
     { value: "0%,50%", label: "Left" },
   ];
 
-  const onShare = async () => {
-    try {
-      const url = window.location.href.split("?")[0] + "?" + new URLSearchParams(settings as any).toString();
-      await navigator.share({
-        title: "Raycast Icon",
-        url,
-      });
-    } catch (err) {
-      console.error("sharing not available");
-    }
-  };
-
   return (
     <div className={styles.container}>
       <ExportModal
@@ -821,25 +809,20 @@ export const IconGenerator = () => {
           {settings.fileName}
         </div>
         <div className={cn(styles.actions, styles.actionsRight)}>
-          <div className="flex gap-2 sm:hidden">
-            <Button variant="primary" className={styles.exportButton} onClick={onShare}>
-              <DownloadIcon /> Share Icon
-            </Button>
-          </div>
-          <div className="sm:flex gap-2 hidden">
+          <div className="flex gap-2">
             <InfoDialog />
             <ButtonGroup>
               <Button variant="primary" className={styles.exportButton} onClick={() => setShowExportModal(true)}>
                 <DownloadIcon />
-                Export icon
+                Export Icon
               </Button>
               <DropdownMenu open={exportDropdownOpen} onOpenChange={setExportDropdownOpen}>
                 <DropdownMenuTrigger asChild>
                   <Button variant="primary" aria-label="See other export options">
                     <ChevronDownIcon className="w-4 h-4" />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent side="bottom" align="end">
+                <DropdownMenuContent side="bottom" align="end" className="w-[10.1rem] md:w-min">
                   <DropdownMenuItem onSelect={() => setShowExportModal(true)}>
                     <ImageIcon /> Download
                     <Kbds>

app/(navigation)/snippets/[[...slug]]/snippets.module.css

@@ -228,7 +228,7 @@
 
 .navControls {
   display: flex;
-  gap: 16px;
+  gap: 8px;
 }
 
 .subtitle {

app/components/page.tsx

@@ -16,7 +16,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/dropdown-menu";
 import { Switch } from "@/components/switch";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip";
 import {
   BrandCplusplusIcon,
   BrandJavascriptIcon,

components/kbd.tsx

@@ -4,7 +4,7 @@ export function Kbd({ children, size = "small" }: { children: React.ReactNode; s
   return (
     <kbd
       className={cn(
-        `inline-flex items-center justify-center px-2 font-medium bg-gray-a4 tracking-[0.1px] font-sans w-auto text-gray-a10`,
+        `hidden md:inline-flex items-center justify-center px-2 font-medium bg-gray-a4 tracking-[0.1px] font-sans w-auto text-gray-a10`,
         size === "small" && "h-[18px] px-1 text-[10px] rounded-[3px] min-w-[18px]",
         size === "medium" && "h-[28px] px-2 text-xs rounded-md min-w-[28px]"
       )}