diff --git a/.continue/rules/css-units.md b/.continue/rules/css-units.md new file mode 100644 index 0000000000..a270a383dd --- /dev/null +++ b/.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`. diff --git a/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/continue/GetTheme.kt b/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/continue/GetTheme.kt index 0ee4c2bd09..3a01f05fc7 100644 --- a/extensions/intellij/src/main/kotlin/com/github/continuedev/continueintellijextension/continue/GetTheme.kt +++ b/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, diff --git a/gui/src/components/Layout.tsx b/gui/src/components/Layout.tsx index 1e2134e7ac..20d750d420 100644 --- a/gui/src/components/Layout.tsx +++ b/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; `; diff --git a/gui/src/components/StyledMarkdownPreview/index.tsx b/gui/src/components/StyledMarkdownPreview/index.tsx index f648dd61bb..0f2d1af0df 100644 --- a/gui/src/components/StyledMarkdownPreview/index.tsx +++ b/gui/src/components/StyledMarkdownPreview/index.tsx @@ -76,7 +76,7 @@ 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); @@ -84,7 +84,6 @@ const StyledMarkdown = styled.div<{ code:not(pre > code) { font-family: var(--vscode-editor-font-family); - color: var(--vscode-input-placeholderForeground); } background-color: ${(props) => props.bgColor}; diff --git a/gui/src/components/index.ts b/gui/src/components/index.ts index 71fd4ae0c6..ee20d73650 100644 --- a/gui/src/components/index.ts +++ b/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( diff --git a/gui/src/components/mainInput/ContinueInputBox.tsx b/gui/src/components/mainInput/ContinueInputBox.tsx index b50edfdbb1..af75216666 100644 --- a/gui/src/components/mainInput/ContinueInputBox.tsx +++ b/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) { /> + {(appliedRules.length > 0 || contextItems.length > 0) && (
diff --git a/gui/src/components/mainInput/GradientBorder.tsx b/gui/src/components/mainInput/GradientBorder.tsx new file mode 100644 index 0000000000..6cbf263d5b --- /dev/null +++ b/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; +`; diff --git a/gui/src/components/mainInput/InputToolbar/EnterButton.tsx b/gui/src/components/mainInput/InputToolbar/EnterButton.tsx index 21dae2642c..6d26ca690d 100644 --- a/gui/src/components/mainInput/InputToolbar/EnterButton.tsx +++ b/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; diff --git a/gui/src/components/mainInput/Lump/index.tsx b/gui/src/components/mainInput/Lump/index.tsx index f6ff453ced..993ed64cc5 100644 --- a/gui/src/components/mainInput/Lump/index.tsx +++ b/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}; diff --git a/gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx b/gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx index 8e659f1e84..a5f9dbc565 100644 --- a/gui/src/components/mainInput/TipTapEditor/TipTapEditor.tsx +++ b/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(); }} diff --git a/gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts b/gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts index f994b53d60..3889a7ef99 100644 --- a/gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts +++ b/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; diff --git a/gui/src/styles/theme.ts b/gui/src/styles/theme.ts index ad0ee0bd73..144a9d8d6c 100644 --- a/gui/src/styles/theme.ts +++ b/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 diff --git a/gui/tailwind.config.cjs b/gui/tailwind.config.cjs index ed91cee113..d5871cc80d 100644 --- a/gui/tailwind.config.cjs +++ b/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"),