tui: simplify prompt mode toggle icon colors via CSS and tighten message timeline padding

Author: iamdavidhill

packages/app/src/components/prompt-input.tsx

@@ -1361,14 +1361,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base"
                     classList={{ "hover:bg-transparent": store.mode === "shell" }}
                   >
-                    <Icon
-                      name="console"
-                      class="size-[18px]"
-                      classList={{
-                        "text-icon-strong-base": store.mode === "shell",
-                        "text-icon-weak": store.mode !== "shell",
-                      }}
-                    />
+                    <Icon name="console" class="size-[18px]" />
                   </div>
                 </button>
                 <button
@@ -1381,14 +1374,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base"
                     classList={{ "hover:bg-transparent": store.mode === "normal" }}
                   >
-                    <Icon
-                      name="prompt"
-                      class="size-[18px]"
-                      classList={{
-                        "text-icon-interactive-base": store.mode === "normal",
-                        "text-icon-weak": store.mode !== "normal",
-                      }}
-                    />
+                    <Icon name="prompt" class="size-[18px]" />
                   </div>
                 </button>
               </div>

packages/app/src/index.css

@@ -1 +1,21 @@
 @import "@opencode-ai/ui/styles/tailwind";
+
+[data-component="prompt-mode-toggle"] [data-slot="icon-svg"] {
+  color: var(--icon-base);
+}
+
+[data-component="prompt-mode-toggle"] [data-slot="icon-svg"] * {
+  color: inherit;
+}
+
+[data-component="prompt-mode-toggle"] button[aria-pressed="true"] [data-slot="icon-svg"] {
+  color: var(--icon-strong-base);
+}
+
+[data-component="prompt-mode-toggle"] [data-slot="icon-svg"] [stroke]:not([stroke="none"]) {
+  stroke: currentColor;
+}
+
+[data-component="prompt-mode-toggle"] [data-slot="icon-svg"] [fill]:not([fill="none"]) {
+  fill: currentColor;
+}

packages/app/src/pages/session/message-timeline.tsx

@@ -165,7 +165,7 @@ export function MessageTimeline(props: {
                 "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
                 "w-full": true,
                 "pb-4": true,
-                "pl-2 pr-4 md:pl-4 md:pr-6": true,
+                "pl-2 pr-3 md:pl-4 md:pr-3": true,
                 "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
               }}
             >