diff --git a/CHANGES.md b/CHANGES.md index a861d1e51..b2dd5bedf 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -79,6 +79,7 @@ A non exhaustive list of changes: - Create `input*` wrapper component, and `label*`, `input-field*` and `hint-message*` components [Taiga #10713](https://tree.taiga.io/project/penpot/us/10713) - Deselect layers (and path nodes) with Ctrl+Shift+Drag [Github #2509](https://github.com/penpot/penpot/issues/2509) - Copy to SVG from contextual menu [Github #838](https://github.com/penpot/penpot/issues/838) +- Add styles for Inkeep Chat at workspace [Taiga #10708](https://tree.taiga.io/project/penpot/us/10708) ### :bug: Bugs fixed diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index ff13a57b1..f4c3afec5 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -147,6 +147,7 @@ (swap! state* assoc :width width))) [:div {:class (stl/css :palette-wrapper) + :id "palette-wrapper" :style (calculate-palette-padding rulers?) :data-testid "palette"} (when-not workspace-read-only? diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index 9474a7909..c4896a1c1 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -4,6 +4,10 @@ // // Copyright (c) KALEIDOS INC +@use "../ds/spacing.scss" as *; +@use "../ds/z-index.scss" as *; +@use "../ds/_sizes.scss" as *; + @import "refactor/common-refactor.scss"; .palette-wrapper { @@ -12,6 +16,12 @@ left: 0; bottom: 0; padding-bottom: $s-4; + + /** Aligns AI Chat button **/ + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--sp-s); } .palettes { @@ -164,3 +174,27 @@ padding-bottom: $s-8; } } + +/** AI Chat button styles **/ +.help-btn { + z-index: var(--z-index-panels); + flex-shrink: 0; + @extend .button-secondary; + inline-size: $sz-40; + block-size: $sz-40; + border-radius: $br-circle; + border: none; + &.selected { + @extend .button-icon-selected; + } + &:hover { + border: none; + } +} + +.icon-help { + @extend .button-icon; + stroke: var(--icon-foreground); + inline-size: var(--sp-xxl); + block-size: var(--sp-xxl); +}