From 95cd09b2c9d7615258fb3373e5058b9dfbabef14 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Mon, 23 Oct 2023 22:19:55 +0300 Subject: [PATCH] UBER-1106,-1108: update navigator and button layout Signed-off-by: Alexander Platov --- dev/storybook/stories/Button.stories.ts | 6 +- .../kanban/src/components/KanbanRow.svelte | 2 +- .../presentation/src/components/Card.svelte | 2 +- .../src/components/MessageBox.svelte | 2 +- .../src/components/PDFViewer.svelte | 4 +- .../src/components/SpaceCreateCard.svelte | 2 +- .../src/components/SpacesMultiPopup.svelte | 6 +- .../src/components/StyleButton.svelte | 2 +- packages/theme/styles/_colors.scss | 53 +++++++---------- packages/theme/styles/_layouts.scss | 8 +-- packages/theme/styles/button.scss | 57 ++++++++++--------- packages/theme/styles/common.scss | 7 ++- packages/theme/styles/components.scss | 24 ++++---- packages/theme/styles/editors.scss | 2 +- packages/ui/src/components/ActionIcon.svelte | 2 +- packages/ui/src/components/Button.svelte | 6 +- packages/ui/src/components/CheckBox.svelte | 18 +++--- .../components/CheckBoxWithLabel.svelte.txt | 2 +- .../ui/src/components/CircleButton.svelte | 18 +++--- .../src/components/DropdownLabelsIntl.svelte | 2 +- .../src/components/DropdownRecordPopup.svelte | 2 +- packages/ui/src/components/Like.svelte | 6 +- packages/ui/src/components/MiniToggle.svelte | 4 +- .../ui/src/components/ProgressCircle.svelte | 4 +- packages/ui/src/components/Scroller.svelte | 2 +- packages/ui/src/components/Separator.svelte | 2 +- packages/ui/src/components/StepsDialog.svelte | 4 +- packages/ui/src/components/TextArea.svelte | 2 +- packages/ui/src/components/Toggle.svelte | 4 +- .../components/calendar/DateInputBox.svelte | 4 +- .../src/components/calendar/DatePopup.svelte | 2 +- .../components/calendar/DatePresenter.svelte | 2 +- .../ui/src/components/calendar/Month.svelte | 8 +-- .../components/calendar/MonthSquare.svelte | 6 +- .../components/calendar/RangeDatePopup.svelte | 2 +- .../components/calendar/TimeInputBox.svelte | 4 +- .../components/calendar/WeekCalendar.svelte | 2 +- packages/ui/src/types.ts | 4 +- .../AttachmentGalleryPresenter.svelte | 4 +- .../src/components/AttachmentPresenter.svelte | 4 +- .../CreateHRApplicationMapping.svelte | 6 +- .../components/popups/DateRangePicker.svelte | 2 +- .../src/components/CreateEvent.svelte | 2 +- .../src/components/Day.svelte | 6 +- .../src/components/DayCalendar.svelte | 4 +- .../src/components/EditEvent.svelte | 2 +- .../components/EventTimeExtraButton.svelte | 2 +- .../src/components/Events.svelte | 2 +- .../src/components/IntegrationConnect.svelte | 2 +- .../src/components/ReccurancePopup.svelte | 4 +- .../components/UpdateRecInstancePopup.svelte | 2 +- .../activity/TxCommentCreate.svelte | 2 +- .../src/components/Avatar.svelte | 4 +- .../src/components/Contacts.svelte | 2 +- .../src/components/EditAvatarPopup.svelte | 2 +- .../src/components/EditOrganization.svelte | 4 +- .../src/components/Chats.svelte | 4 +- .../src/components/Connect.svelte | 2 +- .../src/components/Main.svelte | 2 +- .../src/components/Message.svelte | 4 +- .../src/components/NewMessage.svelte | 2 +- .../src/components/NewMessages.svelte | 4 +- .../src/components/DepartmentCard.svelte | 2 +- .../src/components/Structure.svelte | 2 +- .../src/components/schedule/YearView.svelte | 2 +- .../src/components/Categories.svelte | 2 +- .../src/components/NewItemsHeader.svelte | 2 +- .../src/components/InviteLink.svelte | 4 +- .../src/components/SelectWorkspace.svelte | 2 +- .../src/components/EmployeeInbox.svelte | 2 +- .../src/components/Inbox.svelte | 2 +- .../src/components/CreateCandidate.svelte | 4 +- .../src/components/NewCandidateHeader.svelte | 2 +- .../src/components/Organizations.svelte | 2 +- .../src/components/Vacancies.svelte | 2 +- .../src/components/RequestLabel.svelte | 7 +-- .../src/components/InviteSetting.svelte | 2 +- .../src/components/Owners.svelte | 2 +- .../src/components/Password.svelte | 2 +- .../src/components/PluginCard.svelte | 6 +- .../src/components/TagsCategoryPopup.svelte | 2 +- .../src/components/TagsView.svelte | 2 +- .../src/components/Chat.svelte | 6 +- .../src/components/Connect.svelte | 2 +- .../src/components/Message.svelte | 2 +- .../src/components/PinPad.svelte | 2 +- .../src/components/Reconnect.svelte | 2 +- .../src/components/Templates.svelte | 4 +- .../src/components/FilterMenuSection.svelte | 2 +- .../src/components/NewIssueHeader.svelte | 2 +- .../components/ComponentBrowser.svelte | 2 +- .../issues/edit/SubIssuesSelector.svelte | 2 +- .../related/RelatedIssueSelector.svelte | 2 +- .../EstimationProgressCircle.svelte | 4 +- .../milestones/MilestoneBrowser.svelte | 2 +- .../milestones/MilestoneDatePresenter.svelte | 2 +- .../templates/IssueTemplatesView.svelte | 2 +- .../components/workflow/RemoveStatus.svelte | 2 +- .../components/workflow/StatusEditor.svelte | 2 +- .../src/components/BooleanEditorPopup.svelte | 6 +- .../src/components/ColorsPopup.svelte | 2 +- .../src/components/IconPicker.svelte | 2 +- .../view-resources/src/components/Move.svelte | 2 +- .../components/list/SortableListItem.svelte | 2 +- .../src/components/AppItem.svelte | 2 +- .../src/components/Logo.svelte | 2 +- .../src/components/SpaceBrowser.svelte | 6 +- .../src/components/SpaceHeader.svelte | 2 +- .../src/components/SpecialView.svelte | 2 +- tests/sanity/tests/model/common-page.ts | 2 +- 110 files changed, 238 insertions(+), 250 deletions(-) diff --git a/dev/storybook/stories/Button.stories.ts b/dev/storybook/stories/Button.stories.ts index bf97c1bc1c..536b4cd888 100644 --- a/dev/storybook/stories/Button.stories.ts +++ b/dev/storybook/stories/Button.stories.ts @@ -17,7 +17,7 @@ const meta = { }, kind: { control: 'select', - options: ['accented', 'regular', 'no-border', 'ghost', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'], + options: ['primary', 'regular', 'no-border', 'ghost', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'], description: 'kind description', table: { type: { summary: 'ButtonKind' }, @@ -109,7 +109,7 @@ type Story = StoryObj; export const Ok: Story = { args: { label: uiPlugin.string.Ok, - kind: 'accented', + kind: 'primary', size: 'medium', shape: undefined, justify: 'left', @@ -125,7 +125,7 @@ export const Ok: Story = { export const Cancel: Story = { args: { label: uiPlugin.string.Cancel, - kind: 'accented', + kind: 'primary', size: 'medium', shape: undefined, justify: 'left', diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte index b0f8c7c0b9..d72d74b3e7 100644 --- a/packages/kanban/src/components/KanbanRow.svelte +++ b/packages/kanban/src/components/KanbanRow.svelte @@ -148,7 +148,7 @@ } &.selection, &.checked.selection { - box-shadow: 0 0 1px 1px var(--accented-button-default); + box-shadow: 0 0 1px 1px var(--primary-button-default); animation: anim-border 1s ease-in-out; &:hover { diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte index 86d741b9c0..eeae628128 100644 --- a/packages/presentation/src/components/Card.svelte +++ b/packages/presentation/src/components/Card.svelte @@ -149,7 +149,7 @@ focusIndex={10001} disabled={!canSave} label={okLabel} - kind={'accented'} + kind={'primary'} size={'large'} on:click={() => { if (okProcessing) { diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte index e1dc05384d..78cc159490 100644 --- a/packages/presentation/src/components/MessageBox.svelte +++ b/packages/presentation/src/components/MessageBox.svelte @@ -43,7 +43,7 @@ focusIndex={1} label={okLabel ?? presentation.string.Ok} size={'large'} - kind={'accented'} + kind={'primary'} loading={processing} on:click={() => { processing = true diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte index 82daf25a7c..c86aa1653d 100644 --- a/packages/presentation/src/components/PDFViewer.svelte +++ b/packages/presentation/src/components/PDFViewer.svelte @@ -93,8 +93,8 @@ height: 2rem; font-weight: 500; font-size: 0.625rem; - color: var(--accented-button-color); - background-color: var(--accented-button-default); + color: var(--primary-button-color); + background-color: var(--primary-button-default); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.5rem; cursor: pointer; diff --git a/packages/presentation/src/components/SpaceCreateCard.svelte b/packages/presentation/src/components/SpaceCreateCard.svelte index 872f5b2944..a4afe0f3bc 100644 --- a/packages/presentation/src/components/SpaceCreateCard.svelte +++ b/packages/presentation/src/components/SpaceCreateCard.svelte @@ -42,7 +42,7 @@ diff --git a/packages/ui/src/components/DropdownRecordPopup.svelte b/packages/ui/src/components/DropdownRecordPopup.svelte index 07879936ce..e3ef147610 100644 --- a/packages/ui/src/components/DropdownRecordPopup.svelte +++ b/packages/ui/src/components/DropdownRecordPopup.svelte @@ -70,7 +70,7 @@ >
{#if item[0] === selected} -
+
{/if} diff --git a/packages/ui/src/components/Like.svelte b/packages/ui/src/components/Like.svelte index 1857b3defe..b7a7490865 100644 --- a/packages/ui/src/components/Like.svelte +++ b/packages/ui/src/components/Like.svelte @@ -58,13 +58,13 @@ &.voted { .icon { - color: var(--accented-button-default); + color: var(--primary-button-default); &:hover { - color: var(--accented-button-hovered); + color: var(--primary-button-hovered); } &:active { - color: var(--accented-button-pressed); + color: var(--primary-button-pressed); } } } diff --git a/packages/ui/src/components/MiniToggle.svelte b/packages/ui/src/components/MiniToggle.svelte index b6730c741c..6774d2da21 100644 --- a/packages/ui/src/components/MiniToggle.svelte +++ b/packages/ui/src/components/MiniToggle.svelte @@ -79,9 +79,9 @@ background: #eee; } } - // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); } + // &:focus-within + .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); } } - // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--accented-button-outline); } + // &:active > .toggle-switch { box-shadow: 0 0 0 2px var(--primary-button-outline); } .toggle-switch { position: relative; display: inline-block; diff --git a/packages/ui/src/components/ProgressCircle.svelte b/packages/ui/src/components/ProgressCircle.svelte index f2e4658098..2af05960ae 100644 --- a/packages/ui/src/components/ProgressCircle.svelte +++ b/packages/ui/src/components/ProgressCircle.svelte @@ -22,7 +22,7 @@ export let max: number = 100 export let color: number = 5 export let size: IconSize = 'small' - export let accented: boolean = false + export let primary: boolean = false if (value > max) value = max if (value < min) value = min @@ -49,7 +49,7 @@ cy={8} r={7} class="progress-circle" - style:stroke={accented ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)} + style:stroke={primary ? 'var(--primary-bg-color)' : getPlatformColor(color, $themeStore.dark)} style:opacity={dashOffset === 0 ? 0 : 1} style:transform={'rotate(-82deg)'} style:stroke-dasharray={lenghtC} diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte index d46cd819a7..b33e0aab67 100644 --- a/packages/ui/src/components/Scroller.svelte +++ b/packages/ui/src/components/Scroller.svelte @@ -684,7 +684,7 @@ background-color: var(--theme-button-hovered); } &:focus { - box-shadow: 0 0 0 2px var(--accented-button-outline); + box-shadow: 0 0 0 2px var(--primary-button-outline); } &.vertical { width: 2rem; diff --git a/packages/ui/src/components/Separator.svelte b/packages/ui/src/components/Separator.svelte index d2135d6f3e..9ccbc75ea8 100644 --- a/packages/ui/src/components/Separator.svelte +++ b/packages/ui/src/components/Separator.svelte @@ -424,7 +424,7 @@ z-index: 402; } &::after { - background-color: var(--theme-primary-default); + background-color: var(--primary-button-default); transform-origin: center; transition-property: transform; transition-timing-function: ease-in-out; diff --git a/packages/ui/src/components/StepsDialog.svelte b/packages/ui/src/components/StepsDialog.svelte index d3a1eecdb5..eb0906bb4b 100644 --- a/packages/ui/src/components/StepsDialog.svelte +++ b/packages/ui/src/components/StepsDialog.svelte @@ -114,7 +114,7 @@ /> {/if}