-
Notifications
You must be signed in to change notification settings - Fork 291
feat: refresh MessageComposer design #2919
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.
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
Open
MartinCupela
wants to merge
5
commits into
master
Choose a base branch
from
feat/refresh/message-composer
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
8f407d0
feat: add new CSS variables
MartinCupela 5e4846b
feat: reflect latest design updates in Button.scss
MartinCupela 8811160
feat: reflect latest design updates in variables.css
MartinCupela 4cc512b
feat: add more Button updates
MartinCupela b8e3b52
feat: add styles for SendButton
MartinCupela File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,8 @@ | ||
| import type { ComponentProps } from 'react'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| export const Button = ({ className, ...props }: ComponentProps<'button'>) => ( | ||
| export type ButtonProps = ComponentProps<'button'>; | ||
|
|
||
| export const Button = ({ className, ...props }: ButtonProps) => ( | ||
| <button type='button' {...props} className={clsx('str-chat__button', className)} /> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export * from './Button'; | ||
| export * from './PlayButton'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import clsx from 'clsx'; | ||
| import type { ComponentProps } from 'react'; | ||
|
|
||
| export const IconArrowRotateClockwise = ({ | ||
| className, | ||
| ...props | ||
| }: ComponentProps<'svg'>) => ( | ||
| <svg | ||
| {...props} | ||
| className={clsx('str-chat__icon--arrow-rotate-clockwise', className)} | ||
| viewBox='0 0 16 16' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| > | ||
| <path d='M13.1734 9.83333C12.4183 11.9695 10.3811 13.5 7.98633 13.5C4.94877 13.5 2.48633 11.0375 2.48633 8C2.48633 4.96243 4.94877 2.5 7.98633 2.5C9.86446 2.5 11.1197 3.30292 12.3337 4.67261M12.8337 2.66667V4.83333C12.8337 5.10947 12.6098 5.33333 12.3337 5.33333H10.167' /> | ||
| </svg> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import type { ComponentProps } from 'react'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| export const IconCamera = ({ className, ...props }: ComponentProps<'svg'>) => ( | ||
| <svg | ||
| {...props} | ||
| className={clsx('str-chat__icon--camera', className)} | ||
| viewBox='0 0 10 8' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| > | ||
| <path | ||
| clipRule='evenodd' | ||
| d='M0 1.375C0 0.61561 0.61561 0 1.375 0H5.625C6.3844 0 7 0.61561 7 1.375V2.39346L8.7337 1.52661C9.3155 1.23571 10 1.65878 10 2.30924V5.6912C10 6.34165 9.3155 6.7647 8.7337 6.4738L7 5.607V6.625C7 7.3844 6.3844 8 5.625 8H1.375C0.61561 8 0 7.3844 0 6.625V1.375Z' | ||
| fillRule='evenodd' | ||
| /> | ||
| </svg> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { type ComponentProps } from 'react'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| export const IconClose = ({ className, ...props }: ComponentProps<'svg'>) => ( | ||
| <svg | ||
| {...props} | ||
| className={clsx('str-chat__icon--close', className)} | ||
| viewBox='0 0 8 8' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| > | ||
| <path d='M0.75 0.75L6.41667 6.41667M6.41667 0.75L0.75 6.41667' /> | ||
| </svg> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import type { ComponentProps } from 'react'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| export const IconExclamationCircle = ({ className, ...props }: ComponentProps<'svg'>) => ( | ||
| <svg | ||
| {...props} | ||
| className={clsx('str-chat__icon--exclamation-circle', className)} | ||
| viewBox='0 0 13.3333 13.3333' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| > | ||
| <path | ||
| clipRule='evenodd' | ||
| d='M6.66667 0C10.3485 0 13.3333 2.98477 13.3333 6.66667C13.3333 10.3485 10.3485 13.3333 6.66667 13.3333C2.98477 13.3333 0 10.3485 0 6.66667C0 2.98477 2.98477 0 6.66667 0ZM6.66667 8.33333C6.29847 8.33333 6 8.6318 6 9C6.00007 9.36807 6.29851 9.66667 6.66667 9.66667C7.03482 9.66667 7.33326 9.36807 7.33333 9C7.33333 8.6318 7.03487 8.33333 6.66667 8.33333ZM6.66667 4C6.39053 4 6.16667 4.22385 6.16667 4.5V7.16667C6.16674 7.44274 6.39058 7.66667 6.66667 7.66667C6.94275 7.66667 7.16659 7.44274 7.16667 7.16667V4.5C7.16667 4.22385 6.9428 4 6.66667 4Z' | ||
| fillRule='evenodd' | ||
| /> | ||
| </svg> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import clsx from 'clsx'; | ||
| import type { ComponentProps } from 'react'; | ||
|
|
||
| export const IconExclamationTriangle = ({ | ||
| className, | ||
| ...props | ||
| }: ComponentProps<'svg'>) => ( | ||
| <svg | ||
| {...props} | ||
| className={clsx('str-chat__icon--exclamation-triangle', className)} | ||
| viewBox='0 0 16 16' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| > | ||
| <path | ||
| clipRule='evenodd' | ||
| d='M6.42396 2.17175C7.13457 0.976606 8.86497 0.9766 9.57557 2.17175L14.5649 10.5629C15.2916 11.7849 14.4108 13.3332 12.9891 13.3332H3.01046C1.58868 13.3332 0.708005 11.7849 1.43464 10.5629L6.42396 2.17175ZM7.99984 5.33317C8.27597 5.33317 8.49984 5.55703 8.49984 5.83317V8.49987C8.49984 8.776 8.27597 8.99987 7.99984 8.99987C7.7237 8.99987 7.49984 8.776 7.49984 8.49987V5.83317C7.49984 5.55703 7.7237 5.33317 7.99984 5.33317ZM8.6665 10.3332C8.6665 10.7013 8.36804 10.9999 7.99984 10.9999C7.63164 10.9999 7.33317 10.7013 7.33317 10.3332C7.33317 9.965 7.63164 9.66653 7.99984 9.66653C8.36804 9.66653 8.6665 9.965 8.6665 10.3332Z' | ||
| fillRule='evenodd' | ||
| /> | ||
| </svg> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import type { ComponentProps } from 'react'; | ||
| import clsx from 'clsx'; | ||
|
|
||
| export const IconPause = ({ className, ...props }: ComponentProps<'svg'>) => ( | ||
| <svg | ||
| {...props} | ||
| className={clsx('str-chat__icon--pause', className)} | ||
| viewBox='0 0 20 20' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| > | ||
| <path d='M5.62516 2.5C4.35951 2.5 3.3335 3.52602 3.3335 4.79167V15.2083C3.3335 16.474 4.35951 17.5 5.62516 17.5H6.04183C7.30748 17.5 8.3335 16.474 8.3335 15.2083V4.79167C8.3335 3.52602 7.30748 2.5 6.04183 2.5H5.62516Z' /> | ||
| <path d='M13.9585 2.5C12.6928 2.5 11.6668 3.52602 11.6668 4.79167V15.2083C11.6668 16.474 12.6928 17.5 13.9585 17.5H14.3752C15.6408 17.5 16.6668 16.474 16.6668 15.2083V4.79167C16.6668 3.52602 15.6408 2.5 14.3752 2.5H13.9585Z' /> | ||
| </svg> | ||
| ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import clsx from 'clsx'; | ||
| import type { ComponentProps } from 'react'; | ||
|
|
||
| export const IconPlaySolid = ({ className, ...props }: ComponentProps<'svg'>) => ( | ||
| <svg | ||
| {...props} | ||
| className={clsx('str-chat__icon--play-solid', className)} | ||
| viewBox='0 0 20 20' | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| > | ||
| <path d='M7.70312 1.97298C6.17833 0.986351 4.1665 2.08084 4.1665 3.89699V16.1032C4.1665 17.9193 6.17833 19.0138 7.70312 18.0272L17.1352 11.9241C18.5308 11.0211 18.5308 8.97917 17.1352 8.07608L7.70312 1.97298Z' /> | ||
| </svg> | ||
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,10 @@ | ||
| export * from './IconArrowRotateClockwise'; | ||
| export * from './IconCamera'; | ||
| export * from './IconClose'; | ||
| export * from './IconExclamationCircle'; | ||
| export * from './IconExclamationTriangle'; | ||
| export * from './IconMicrophone'; | ||
| export * from './IconPaperPlane'; | ||
| export * from './IconPause'; | ||
| export * from './IconPlaySolid'; | ||
| export * from './IconPlus'; |
14 changes: 14 additions & 0 deletions
14
src/components/Icons/styling/IconArrowRotateClockwise.scss
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| .str-chat { | ||
| .str-chat__icon--arrow-rotate-clockwise { | ||
| fill: none; | ||
| width: 16px; | ||
| height: 16px; | ||
|
|
||
| path { | ||
| stroke: white; | ||
| stroke-linecap: round; | ||
| stroke-linejoin: round; | ||
| stroke-width: 1.5; | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| .str-chat { | ||
| .str-chat__icon--close { | ||
| fill: none; | ||
| width: 8px; | ||
| height: 8px; | ||
|
|
||
| path { | ||
| stroke: var(--base-white); | ||
| stroke-linecap: round; | ||
| stroke-width: 1.5; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it would be good if all icons have a shared selector
str-chat__iconso one can target all icons at once, instead of writing hundreds of individual class names.