Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Assistant-related icons #210

Merged
merged 5 commits into from
Jun 6, 2024
Merged

Update Assistant-related icons #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
78a6d16
Use @wordpress/icons for Assistant input
derekblank Jun 5, 2024
6352d18
Update AssistantIcon to plain fuction component
derekblank Jun 5, 2024
4291401
Remove extra space on AIInput container
derekblank Jun 5, 2024
acc772f
Update AIInput menu button spacing
derekblank Jun 6, 2024
48a3823
Update AIInput border focus color to match Button focus color
derekblank Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions src/components/ai-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { __ } from '@wordpress/i18n';
import { Icon, moreVertical, keyboardReturn } from '@wordpress/icons';
import React, { useRef, useEffect } from 'react';
import Button from './button';
import { AssistantIcon } from './icons/assistant';
import { MenuIcon } from './icons/menu';
import { ReturnIcon } from './icons/return';

interface AIInputProps {
disabled: boolean;
Expand Down Expand Up @@ -82,7 +81,7 @@ export const AIInput = ( {

return (
<div className="px-8 py-5 bg-white flex items-center border border-gray-200">
<div className="flex w-full border border-gray-300 rounded-sm focus-within:border-blue-500">
<div className="flex w-full border border-gray-300 rounded-sm focus-within:border-a8c-blueberry">
<div className="flex items-end p-3 ltr:pr-2 rtl:pl-2">
<AssistantIcon size={ 28 } aria-hidden="true" />
</div>
Expand All @@ -99,17 +98,17 @@ export const AIInput = ( {
/>
{ input.trim() !== '' && (
<div className="flex items-end py-4 mb-1">
<ReturnIcon />
<Icon icon={ keyboardReturn } size={ 13 } fill="#cccccc" />
</div>
) }
<div className="flex items-end p-2">
<div className="flex items-end py-2 ltr:mr-2 rtl:ml-1">
<Button
disabled={ disabled }
aria-label="menu"
className="p-2 cursor-pointer"
className="py-2 px-1 cursor-pointer"
onClick={ clearInput }
>
<MenuIcon />
<Icon icon={ moreVertical } size={ 22 } />
</Button>
</div>
</div>
Expand Down
30 changes: 16 additions & 14 deletions src/components/icons/assistant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@ interface AssistantIconProps {
size?: number;
}

export const AssistantIcon: React.FC< AssistantIconProps > = ( { size = 14 } ) => (
<svg
width={ size }
height={ size }
viewBox={ `0 0 14 14` }
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.7035 6.58213L10.8309 5.59124C9.69491 5.20089 8.79911 4.30509 8.40876 3.16908L7.41787 0.296515C7.28275 -0.0988382 6.71725 -0.0988382 6.58213 0.296515L5.59124 3.16908C5.20089 4.30509 4.30509 5.20089 3.16908 5.59124L0.296515 6.58213C-0.0988382 6.71725 -0.0988382 7.28275 0.296515 7.41787L3.16908 8.40876C4.30509 8.79911 5.20089 9.69491 5.59124 10.8309L6.58213 13.7035C6.71725 14.0988 7.28275 14.0988 7.41787 13.7035L8.40876 10.8309C8.79911 9.69491 9.69491 8.79911 10.8309 8.40876L13.7035 7.41787C14.0988 7.28275 14.0988 6.71725 13.7035 6.58213ZM10.3505 7.21269L8.91421 7.70813C8.3437 7.90331 7.8983 8.35371 7.70313 8.91921L7.20768 10.3555C7.13762 10.5557 6.85737 10.5557 6.79231 10.3555L6.29687 8.91921C6.1017 8.3487 5.6513 7.90331 5.08579 7.70813L3.64951 7.21269C3.44933 7.14263 3.44933 6.86238 3.64951 6.79232L5.08579 6.29687C5.6563 6.1017 6.1017 5.6513 6.29687 5.08579L6.79231 3.64951C6.86238 3.44933 7.14263 3.44933 7.20768 3.64951L7.70313 5.08579C7.8983 5.6563 8.3487 6.1017 8.91421 6.29687L10.3505 6.79232C10.5507 6.86238 10.5507 7.14263 10.3505 7.21269Z"
fill="blue"
/>
</svg>
);
export function AssistantIcon( { size = 14 }: AssistantIconProps ) {
return (
<svg
width={ size }
height={ size }
viewBox={ `0 0 14 14` }
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.7035 6.58213L10.8309 5.59124C9.69491 5.20089 8.79911 4.30509 8.40876 3.16908L7.41787 0.296515C7.28275 -0.0988382 6.71725 -0.0988382 6.58213 0.296515L5.59124 3.16908C5.20089 4.30509 4.30509 5.20089 3.16908 5.59124L0.296515 6.58213C-0.0988382 6.71725 -0.0988382 7.28275 0.296515 7.41787L3.16908 8.40876C4.30509 8.79911 5.20089 9.69491 5.59124 10.8309L6.58213 13.7035C6.71725 14.0988 7.28275 14.0988 7.41787 13.7035L8.40876 10.8309C8.79911 9.69491 9.69491 8.79911 10.8309 8.40876L13.7035 7.41787C14.0988 7.28275 14.0988 6.71725 13.7035 6.58213ZM10.3505 7.21269L8.91421 7.70813C8.3437 7.90331 7.8983 8.35371 7.70313 8.91921L7.20768 10.3555C7.13762 10.5557 6.85737 10.5557 6.79231 10.3555L6.29687 8.91921C6.1017 8.3487 5.6513 7.90331 5.08579 7.70813L3.64951 7.21269C3.44933 7.14263 3.44933 6.86238 3.64951 6.79232L5.08579 6.29687C5.6563 6.1017 6.1017 5.6513 6.29687 5.08579L6.79231 3.64951C6.86238 3.44933 7.14263 3.44933 7.20768 3.64951L7.70313 5.08579C7.8983 5.6563 8.3487 6.1017 8.91421 6.29687L10.3505 6.79232C10.5507 6.86238 10.5507 7.14263 10.3505 7.21269Z"
fill="blue"
/>
</svg>
);
}
11 changes: 0 additions & 11 deletions src/components/icons/menu.tsx
View file
Open in desktop

This file was deleted.

10 changes: 0 additions & 10 deletions src/components/icons/return.tsx
View file
Open in desktop

This file was deleted.

Loading