UI Polish

.continue/rules/css-units.md

@@ -0,0 +1,5 @@
+---
+globs: "gui/**/*.tsx"
+---
+
+You should try to use the `rem` CSS unit whenever possible for scalability instead of `px`.

extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/continue/GetTheme.kt

@@ -166,6 +166,9 @@ class GetTheme {
             val findMatchSelectedBackground = namedColor("SearchMatch.selectedBackground") ?:
             editorScheme.getAttributes(EditorColors.SEARCH_RESULT_ATTRIBUTES)?.backgroundColor
 
+            // Use editor background with slight tint for code blocks
+            val textCodeBlockBackground = slightChange(editorBackground, 3) ?: editorBackground
+
             // These should match the keys in GUI's theme.ts
             val theme = mapOf(
                 "background" to background,
@@ -197,6 +200,7 @@ class GetTheme {
                 "warning" to warningColor,
                 "error" to errorColor,
                 "link" to link,
+                "textCodeBlockBackground" to textCodeBlockBackground,
                 "accent" to accentColor,
                 "find-match" to findMatchBackground,
                 "find-match-selected" to findMatchSelectedBackground,

gui/src/components/Layout.tsx

@@ -2,7 +2,7 @@ import { OnboardingModes } from "core/protocol/core";
 import { useContext, useEffect } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import styled from "styled-components";
-import { CustomScrollbarDiv, defaultBorderRadius } from ".";
+import { CustomScrollbarDiv } from ".";
 import { AuthProvider } from "../context/Auth";
 import { IdeMessengerContext } from "../context/IdeMessenger";
 import { LocalStorageProvider } from "../context/LocalStorage";
@@ -30,7 +30,6 @@ import PostHogPageView from "./PosthogPageView";
 
 const LayoutTopDiv = styled(CustomScrollbarDiv)`
   height: 100%;
-  border-radius: ${defaultBorderRadius};
   position: relative;
   overflow-x: hidden;
 `;

gui/src/components/StyledMarkdownPreview/index.tsx

@@ -76,15 +76,14 @@ const StyledMarkdown = styled.div<{
       display: none;
     }
     word-wrap: break-word;
-    border-radius: ${defaultBorderRadius};
+    border-radius: 0.3125rem;
     background-color: ${vscEditorBackground};
     font-size: ${getFontSize() - 2}px;
     font-family: var(--vscode-editor-font-family);
   }
 
   code:not(pre > code) {
     font-family: var(--vscode-editor-font-family);
-    color: var(--vscode-input-placeholderForeground);
   }
 
   background-color: ${(props) => props.bgColor};

gui/src/components/index.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { varWithFallback } from "../styles/theme";
 
-export const defaultBorderRadius = "5px";
+export const defaultBorderRadius = "0.5rem";
 export const lightGray = "#999998";
 export const greenButtonColor = "#189e72";
 
@@ -12,6 +12,9 @@ export const vscForeground = varWithFallback("foreground");
 export const vscButtonBackground = varWithFallback("primary-background");
 export const vscButtonForeground = varWithFallback("primary-foreground");
 export const vscEditorBackground = varWithFallback("editor-background");
+export const vscTextCodeBlockBackground = varWithFallback(
+  "textCodeBlockBackground",
+);
 export const vscListActiveBackground = varWithFallback("list-active");
 export const vscFocusBorder = varWithFallback("border-focus");
 export const vscListActiveForeground = varWithFallback(

gui/src/components/mainInput/ContinueInputBox.tsx

@@ -1,12 +1,12 @@
 import { Editor, JSONContent } from "@tiptap/react";
 import { ContextItemWithId, InputModifiers, RuleWithSource } from "core";
 import { useMemo } from "react";
-import styled, { keyframes } from "styled-components";
 import { defaultBorderRadius, vscBackground } from "..";
 import { useAppSelector } from "../../redux/hooks";
 import { selectSlashCommandComboBoxInputs } from "../../redux/selectors";
 import { ContextItemsPeek } from "./belowMainInput/ContextItemsPeek";
 import { RulesPeek } from "./belowMainInput/RulesPeek";
+import { GradientBorder } from "./GradientBorder";
 import { ToolbarOptions } from "./InputToolbar";
 import { Lump } from "./Lump";
 import { TipTapEditor } from "./TipTapEditor";
@@ -38,43 +38,6 @@ const EDIT_DISALLOWED_CONTEXT_PROVIDERS = [
   "repo-map",
 ];
 
-const gradient = keyframes`
-  0% {
-    background-position: 0px 0;
-  }
-  100% {
-    background-position: 100em 0;
-  }
-`;
-
-const GradientBorder = styled.div<{
-  borderRadius?: string;
-  borderColor?: string;
-  loading: 0 | 1;
-}>`
-  border-radius: ${(props) => props.borderRadius || "0"};
-  padding: 1px;
-  background: ${(props) =>
-    props.borderColor
-      ? props.borderColor
-      : `repeating-linear-gradient(
-      101.79deg,
-      #1BBE84 0%,
-      #331BBE 16%,
-      #BE1B55 33%,
-      #A6BE1B 55%,
-      #BE1B55 67%,
-      #331BBE 85%,
-      #1BBE84 99%
-    )`};
-  animation: ${(props) => (props.loading ? gradient : "")} 6s linear infinite;
-  background-size: 200% 200%;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
 function ContinueInputBox(props: ContinueInputBoxProps) {
   const isStreaming = useAppSelector((state) => state.session.isStreaming);
   const availableSlashCommands = useAppSelector(
@@ -146,6 +109,7 @@ function ContinueInputBox(props: ContinueInputBoxProps) {
           />
         </GradientBorder>
       </div>
+
       {(appliedRules.length > 0 || contextItems.length > 0) && (
         <div className="mt-2 flex flex-col">
           <RulesPeek appliedRules={props.appliedRules} />

gui/src/components/mainInput/GradientBorder.tsx

@@ -0,0 +1,38 @@
+import styled, { keyframes } from "styled-components";
+
+const gradient = keyframes`
+  0% {
+    background-position: 0px 0;
+  }
+  100% {
+    background-position: 100em 0;
+  }
+`;
+
+export const GradientBorder = styled.div<{
+  borderRadius?: string;
+  borderColor?: string;
+  loading: 0 | 1;
+}>`
+  border-radius: ${(props) => props.borderRadius || "0"};
+  padding: 1px;
+  background: ${(props) =>
+    props.borderColor
+      ? props.borderColor
+      : `repeating-linear-gradient(
+      101.79deg,
+      #1BBE84 0%,
+      #331BBE 16%,
+      #BE1B55 33%,
+      #A6BE1B 55%,
+      #BE1B55 67%,
+      #331BBE 85%,
+      #1BBE84 99%
+    )`};
+  animation: ${(props) => (props.loading ? gradient : "")} 6s linear infinite;
+  background-size: 200% 200%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;

gui/src/components/mainInput/InputToolbar/EnterButton.tsx

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import {
-  defaultBorderRadius,
   lightGray,
   vscButtonBackground,
   vscButtonForeground,
@@ -18,7 +17,7 @@ export const EnterButton = styled.button<{ isPrimary?: boolean }>`
     !props.disabled && props.isPrimary
       ? vscButtonBackground
       : lightGray + "33"};
-  border-radius: ${defaultBorderRadius};
+  border-radius: 0.3125rem;
   color: ${(props) =>
     !props.disabled && props.isPrimary ? vscButtonForeground : vscForeground};
   cursor: pointer;

gui/src/components/mainInput/Lump/index.tsx

@@ -10,8 +10,8 @@ import { SelectedSection } from "./sections/SelectedSection";
 
 const LumpDiv = styled.div`
   background-color: ${vscInputBackground};
-  margin-left: 4px;
-  margin-right: 4px;
+  margin-left: 6px;
+  margin-right: 6px;
   border-radius: ${defaultBorderRadius} ${defaultBorderRadius} 0 0;
   border-top: 1px solid ${vscCommandCenterInactiveBorder};
   border-left: 1px solid ${vscCommandCenterInactiveBorder};

gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx

@@ -179,7 +179,11 @@ export function TipTapEditor(props: TipTapEditorProps) {
       onBlur={handleBlur}
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
-      className={shouldHideToolbar ? "cursor-default" : "cursor-text"}
+      className={
+        !props.isMainInput && shouldHideToolbar
+          ? "cursor-pointer hover:brightness-105"
+          : "cursor-text"
+      }
       onClick={() => {
         editor?.commands.focus();
       }}

gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import {
-  defaultBorderRadius,
   lightGray,
   vscBadgeBackground,
   vscCommandCenterActiveBorder,
@@ -14,7 +13,7 @@ import { getFontSize } from "../../../../util";
 export const InputBoxDiv = styled.div<{}>`
   resize: none;
   font-family: inherit;
-  border-radius: ${defaultBorderRadius};
+  border-radius: 0.5rem;
   padding-bottom: 1px;
   margin: 0;
   height: auto;

gui/src/styles/theme.ts

@@ -140,6 +140,10 @@ export const THEME_COLORS = {
     vars: ["--vscode-textLink-foreground"],
     default: "#5c9ce6", // medium blue
   },
+  textCodeBlockBackground: {
+    vars: ["--vscode-textCodeBlock-background"],
+    default: "#1e1e1e", // same as editor-background
+  },
   accent: {
     vars: ["--vscode-tab-activeBorderTop", "--vscode-focusBorder"],
     default: "#4d8bf0", // bright blue

gui/tailwind.config.cjs

@@ -27,7 +27,7 @@ module.exports = {
         "spin-slow": "spin 6s linear infinite",
       },
       borderRadius: {
-        default: "5px",
+        default: "0.5rem",
       },
       colors: {
         background: varWithFallback("background"),