fix(desktop): prompt input cleanup

4 files changed, 34 insertions, 28 deletions

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 5128fc0e6..9cc1579fb 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -1343,9 +1343,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
             </div>
           </Show>
-          <div class="absolute top-4.5 right-4">
-            <SessionContextUsage />
-          </div>
         </div>
         <div class="relative p-3 flex items-center justify-between">
           <div class="flex items-center justify-start gap-1">
@@ -1421,7 +1418,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               </Match>
             </Switch>
           </div>
-          <div class="flex items-center gap-1 absolute right-2 bottom-2">
+          <div class="flex items-center gap-3 absolute right-2 bottom-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -1433,17 +1430,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 e.currentTarget.value = ""
               }}
             />
-            <Show when={store.mode === "normal"}>
-              <Tooltip placement="top" value="Attach image">
-                <IconButton
-                  type="button"
-                  icon="photo"
-                  variant="ghost"
-                  class="h-10 w-8"
-                  onClick={() => fileInputRef.click()}
-                />
-              </Tooltip>
-            </Show>
+            <div class="flex items-center gap-2">
+              <SessionContextUsage />
+              <Show when={store.mode === "normal"}>
+                <Tooltip placement="top" value="Attach image">
+                  <Button type="button" variant="ghost" class="size-6" onClick={() => fileInputRef.click()}>
+                    <Icon name="photo" class="size-4.5" />
+                  </Button>
+                </Tooltip>
+              </Show>
+            </div>
             <Tooltip
               placement="top"
               inactive={!prompt.dirty() && !working()}
@@ -1469,7 +1465,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 disabled={!prompt.dirty() && store.imageAttachments.length === 0 && !working()}
                 icon={working() ? "stop" : "arrow-up"}
                 variant="primary"
-                class="h-10 w-8"
+                class="h-6 w-4.5"
               />
             </Tooltip>
           </div>
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx
index 0fa6bc99c..92dcd20d2 100644
--- a/packages/app/src/components/session-context-usage.tsx
+++ b/packages/app/src/components/session-context-usage.tsx
@@ -35,20 +35,25 @@ export function SessionContextUsage() {
       {(ctx) => (
         <Tooltip
           value={
-            <div class="grid grid-cols-2 gap-x-3 gap-y-1">
-              <span class="opacity-70 text-right">Tokens</span>
-              <span class="text-left">{ctx().tokens}</span>
-              <span class="opacity-70 text-right">Usage</span>
-              <span class="text-left">{ctx().percentage ?? 0}%</span>
-              <span class="opacity-70 text-right">Cost</span>
-              <span class="text-left">{cost()}</span>
+            <div class="">
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{ctx().tokens}</span>
+                <span class="text-text-invert-weak">Tokens</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{ctx().percentage ?? 0}%</span>
+                <span class="text-text-invert-weak">Usage</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{cost()}</span>
+                <span class="text-text-invert-weak">Cost</span>
+              </div>
             </div>
           }
           placement="top"
         >
-          <div class="flex items-center gap-1.5">
+          <div class="p-1">
             <ProgressCircle size={16} strokeWidth={2} percentage={ctx().percentage ?? 0} />
-            {/* <span class="text-12-medium text-text-weak">{`${ctx().percentage ?? 0}%`}</span> */}
           </div>
         </Tooltip>
       )}
diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css
index 637986249..f7afe16aa 100644
--- a/packages/ui/src/components/tooltip.css
+++ b/packages/ui/src/components/tooltip.css
@@ -8,9 +8,10 @@
   border-radius: var(--radius-md);
   background-color: var(--surface-float-base);
   color: var(--text-inverted-base);
-  color: rgba(253, 252, 252, 0.94);
-  padding: 2px 8px;
-  border: 0.5px solid rgba(253, 252, 252, 0.2);
+  background: var(--surface-float-base);
+  padding: 6px 12px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+
   box-shadow: var(--shadow-md);
   pointer-events: none !important;
   /* transition: all 150ms ease-out; */
diff --git a/packages/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css
index 59c61952a..376cd35d3 100644
--- a/packages/ui/src/styles/tailwind/colors.css
+++ b/packages/ui/src/styles/tailwind/colors.css
@@ -77,6 +77,10 @@
   --color-text-weaker: var(--text-weaker);
   --color-text-strong: var(--text-strong);
   --color-text-interactive-base: var(--text-interactive-base);
+  --color-text-invert-base: var(--text-invert-base);
+  --color-text-invert-weak: var(--text-invert-weak);
+  --color-text-invert-weaker: var(--text-invert-weaker);
+  --color-text-invert-strong: var(--text-invert-strong);
   --color-text-on-brand-base: var(--text-on-brand-base);
   --color-text-on-interactive-base: var(--text-on-interactive-base);
   --color-text-on-interactive-weak: var(--text-on-interactive-weak);