fix: Theme, actions

2025-03-07 03:04:24 +05:30
parent 433a301776
commit f6ce710c1b
5 changed files with 74 additions and 84 deletions
@@ -4,77 +4,52 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 344 100% 61%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
-
-    --secondary: 248 24% 14%;
-    --secondary-foreground: 0 0% 100%;
-
+    --secondary: 338 100% 44%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 72.2% 50.6%;
+    --destructive: 0 72.22% 50.59%;
    --destructive-foreground: 210 40% 98%;
-
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
+    --radius: 0.75rem;
  }
-
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 344 100% 61%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 248 24% 14%;
-    --secondary-foreground: 0 0% 100%;
-
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 338 100% 44%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
-
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
-
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
 }

-body {
-  font-family: 'Recursive Variable', sans-serif;
-}
-
@layer base {
  * {
    @apply border-border;
@@ -84,6 +59,10 @@ body {
  }
 }

+body {
+  font-family: 'Recursive Variable', sans-serif;
+}
+
 .d {
  @apply border border-red-500;
 }
@@ -10,6 +10,8 @@
  import dayjs from 'dayjs';
  import { toBase64 } from 'js-base64';
  import { Button } from './ui/Button';
+  import { Separator } from './ui/separator';
+  import { Switch } from './ui/switch';

  const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;

@@ -51,11 +53,11 @@ ${svgString}`);
    const box: DOMRect = svg.getBoundingClientRect();
    canvas.width = box.width;
    canvas.height = box.height;
-    if (imagemodeselected === 'width') {
+    if (imageModeFinal === 'width') {
      const ratio = box.height / box.width;
      canvas.width = userimagesize;
      canvas.height = userimagesize * ratio;
-    } else if (imagemodeselected === 'height') {
+    } else if (imageModeFinal === 'height') {
      const ratio = box.width / box.height;
      canvas.width = userimagesize * ratio;
      canvas.height = userimagesize;
@@ -170,7 +172,11 @@ ${svgString}`);
  let svgUrl: string | undefined = $state();
  let krokiUrl: string | undefined = $state();
  let mdCode: string | undefined = $state();
-  let imagemodeselected = $state('auto');
+  let isAutoImageMode = $state(true);
+  let manualSizingMode: 'width' | 'height' = $state('width');
+  let imageModeFinal: 'auto' | 'width' | 'height' = $derived(
+    isAutoImageMode ? 'auto' : manualSizingMode
+  );
  let userimagesize = $state(1080);

  let isNetlify = $state(false);
@@ -198,53 +204,58 @@ ${svgString}`);
  </div>
 {/snippet}

-<Card title="Actions" isOpen={false} icon="fas fa-share-nodes">
-  <div class="m-2 flex flex-wrap gap-2">
+<Card title="Actions" isOpen={!false} icon="fas fa-share-nodes">
+  <div class="m-2 flex flex-col gap-2">
    {#if isClipboardAvailable()}
      <Button class="action-btn w-full" onclick={onCopyClipboard}>
        <i class="far fa-copy mr-2"></i> Copy Image to clipboard
      </Button>
    {/if}

-    <div class="flex w-full items-center gap-2">
+    <div class="flex w-full items-center gap-2 py-2">
      PNG size
-      <label for="autosize">
-        <input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
-      </label>
+      <Separator orientation="vertical" />
+      <span class="flex items-center gap-2">
+        Auto
+        <Switch id="autosize" bind:checked={isAutoImageMode} />
+      </span>

-      <label for="width">
-        <input type="radio" value="width" id="width" bind:group={imagemodeselected} /> Width
-      </label>
+      {#if !isAutoImageMode}
+        <Separator orientation="vertical" />
+        <div class="flex flex-grow justify-between">
+          <label for="width">
+            <input type="radio" value="width" id="width" bind:group={manualSizingMode} /> Width
+          </label>

-      <label for="height">
-        <input type="radio" value="height" id="height" bind:group={imagemodeselected} /> Height
-      </label>
+          <label for="height">
+            <input type="radio" value="height" id="height" bind:group={manualSizingMode} /> Height
+          </label>

-      {#if imagemodeselected !== 'auto'}
-        <input
-          id="height"
-          class="input"
-          type="number"
-          min="3"
-          max="10000"
-          bind:value={userimagesize} />
+          <input class="input" type="number" min="3" max="10000" bind:value={userimagesize} />
+        </div>
+      {/if}
+    </div>
+    <div class="flex gap-2">
+      {@render dualActionButton('PNG', onDownloadPNG, iUrl)}
+      {@render dualActionButton('SVG', onDownloadSVG, svgUrl)}
+
+      {#if krokiRendererUrl}
+        <a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
+          <Button class="action-btn w-full">
+            <i class="fas fa-external-link-alt mr-2"></i> Kroki
+          </Button>
+        </a>
      {/if}
    </div>

-    {@render dualActionButton('PNG', onDownloadPNG, iUrl)}
-    {@render dualActionButton('SVG', onDownloadSVG, svgUrl)}
-
-    {#if krokiRendererUrl}
-      <a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
-        <Button class="action-btn w-full">
-          <i class="fas fa-external-link-alt mr-2"></i> Kroki
-        </Button>
-      </a>
-    {/if}
-
    {#if rendererUrl}
      <div class="flex w-full items-center gap-2">
-        <input class="input" id="markdown" type="text" value={mdCode} onclick={onCopyMarkdown} />
+        <input
+          class="input flex-grow"
+          id="markdown"
+          type="text"
+          value={mdCode}
+          onclick={onCopyMarkdown} />
        <label for="markdown">
          <Button class="btn btn-primary btn-md flex-auto" onclick={onCopyMarkdown}>
            Copy Markdown
@@ -255,7 +266,7 @@ ${svgString}`);

    <div class="flex w-full items-center gap-2">
      <input
-        class="input"
+        class="input flex-grow"
        id="gist"
        type="text"
        bind:value={gistURL}
@@ -33,7 +33,7 @@
      <Button
        role="tab"
        variant="ghost"
-        class={activeTabID === tab.id ? 'rounded-b-none border-b-2 border-b-secondary/50' : ''}
+        class={activeTabID === tab.id ? 'rounded-b-none border-b-2 border-b-primary/50' : ''}
        onclick={toggleTabs(tab)}
        onkeypress={toggleTabs(tab)}>
        <i class={tab.icon}></i>
@@ -102,6 +102,7 @@
      {#if isEnabledMermaidChartLinks}
        <Switch
          id="editorMode"
+          class="data-[state=checked]:bg-secondary"
          checked={isReferral}
          onclick={() => {
            logEvent('playgroundToggle', { isReferred: isReferral });
@@ -225,7 +225,6 @@ packet-beta
  <div class="flex h-fit flex-wrap gap-2 p-2">
    {#each diagramOrder as sample}
      <Button
-        variant="secondary"
        size="sm"
        class="w-fit min-w-20 flex-grow normal-case"
        onclick={() => loadSampleDiagram(sample)}>