-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Mark/update notification settings design (#18159)
* Update Notification Settings design - Removed styled-components - Added new behavior 'Test' and 'Submit' buttons
- Loading branch information
Mark Berger
authored and
nataly
committed
Nov 3, 2022
1 parent
494ce1c
commit 0b3e8cd
Showing
10 changed files
with
441 additions
and
199 deletions.
There are no files selected for viewing
4 changes: 1 addition & 3 deletions
4
...ws/layout/SideBar/components/DocsIcon.tsx → ...-webapp/src/components/icons/DocsIcon.tsx
This file contains 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,10 +1,8 @@ | ||
| const DocsIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => ( | ||
| export const DocsIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => ( | ||
| <svg width="18" height="20" viewBox="0 0 18 20" fill="none"> | ||
| <path | ||
| d="M18 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H18V20H3C2.20435 20 1.44129 19.6839 0.87868 19.1213C0.316071 18.5587 0 17.7956 0 17V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H18V16ZM2 14.05C2.162 14.017 2.329 14 2.5 14H16V2H2V14.05ZM13 7H5V5H13V7Z" | ||
| fill={color} | ||
| /> | ||
| </svg> | ||
| ); | ||
|
|
||
| export default DocsIcon; |
This file contains 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,12 @@ | ||
| interface Props { | ||
| color?: string; | ||
| } | ||
|
|
||
| export const PlayIcon = ({ color = "currentColor" }: Props): JSX.Element => ( | ||
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none" role="img" data-icon="play"> | ||
| <path | ||
| d="M0 0.993C0 0.445 0.445 0 0.993 0H17.007C17.555 0 18 0.445 18 0.993V17.007C17.9997 17.2703 17.895 17.5227 17.7089 17.7089C17.5227 17.895 17.2703 17.9997 17.007 18H0.993C0.729721 17.9997 0.477302 17.895 0.291135 17.7089C0.104969 17.5227 0.000264735 17.2703 0 17.007V0.993ZM2 2V16H16V2H2ZM7.622 5.415L12.501 8.667C12.5559 8.70351 12.6009 8.75302 12.632 8.81111C12.6631 8.86921 12.6794 8.93409 12.6794 9C12.6794 9.06591 12.6631 9.13079 12.632 9.18889C12.6009 9.24698 12.5559 9.29649 12.501 9.333L7.621 12.585C7.56083 12.6249 7.49098 12.6477 7.41887 12.6512C7.34676 12.6546 7.27507 12.6384 7.21141 12.6043C7.14774 12.5703 7.09448 12.5197 7.05726 12.4578C7.02004 12.396 7.00025 12.3252 7 12.253V5.747C7.00013 5.67465 7.01989 5.60369 7.05716 5.54168C7.09443 5.47967 7.14782 5.42893 7.21165 5.39486C7.27547 5.36079 7.34734 5.34467 7.41961 5.34822C7.49187 5.35177 7.56182 5.37485 7.622 5.415V5.415Z" | ||
| fill={color} | ||
| /> | ||
| </svg> | ||
| ); |
This file contains 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 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 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
168 changes: 168 additions & 0 deletions
168
...e-webapp/src/pages/SettingsPage/pages/NotificationPage/components/WebHookForm.module.scss
This file contains 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,168 @@ | ||
| @use "scss/colors"; | ||
| @use "scss/variables"; | ||
|
|
||
| .webhookGuide { | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| height: 0; | ||
| max-height: 0; | ||
| padding: 0 variables.$spacing-xl; | ||
| margin-bottom: 0; | ||
| background-color: colors.$grey-50; | ||
| border-radius: variables.$border-radius-xs; | ||
| transition: variables.$transition-out; | ||
|
|
||
| &.active { | ||
| opacity: 1; | ||
| visibility: visible; | ||
| height: 150px; | ||
| max-height: 100%; | ||
| margin-bottom: variables.$spacing-xl; | ||
| } | ||
|
|
||
| .webhookGuideTitle { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| padding-bottom: variables.$spacing-lg; | ||
|
|
||
| .crossIcon { | ||
| font-size: 22px; | ||
| } | ||
| } | ||
|
|
||
| ul { | ||
| list-style-type: none; | ||
| list-style-position: inside; | ||
| margin: 0; | ||
| padding: 0; | ||
|
|
||
| li + li { | ||
| padding-top: variables.$spacing-md; | ||
| } | ||
| } | ||
|
|
||
| .webhookGuideLink { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| padding: variables.$spacing-sm 0; | ||
| color: colors.$blue; | ||
|
|
||
| .text { | ||
| color: colors.$blue; | ||
| padding-left: variables.$spacing-md; | ||
| } | ||
| } | ||
|
|
||
| .webhookGuideImg { | ||
| position: absolute; | ||
| right: 60px; | ||
| bottom: -20px; | ||
| width: 106px; | ||
| height: 125px; | ||
| } | ||
| } | ||
|
|
||
| .webhookUrlLabelRow { | ||
| position: relative; | ||
| margin-bottom: variables.$spacing-md; | ||
|
|
||
| .webhookUrlLabelCell { | ||
| flex: auto; | ||
| width: 100%; | ||
|
|
||
| label { | ||
| padding-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| .webhookGuideButtonCell { | ||
| position: relative; | ||
| flex: auto; | ||
| padding: 0; | ||
|
|
||
| .webhookGuideButton { | ||
| color: colors.$blue; | ||
| text-decoration: underline; | ||
| padding-left: 0; | ||
| padding-right: 0; | ||
| white-space: nowrap; | ||
| margin-right: 45px; | ||
|
|
||
| &:hover { | ||
| color: colors.$blue; | ||
| } | ||
| } | ||
|
|
||
| .webhookGuideButtonImg { | ||
| position: absolute; | ||
| bottom: 6px; | ||
| right: 0; | ||
| width: 34px; | ||
| height: 40px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .webhookUrlRow { | ||
| margin-bottom: variables.$spacing-xl; | ||
|
|
||
| .webhookUrlInputCell { | ||
| position: relative; | ||
| flex: auto; | ||
| width: 100%; | ||
|
|
||
| .webhookErrorMessage { | ||
| position: absolute; | ||
| bottom: -16px; | ||
| left: 0; | ||
| color: colors.$red-600; | ||
| } | ||
| } | ||
|
|
||
| .testButtonCell { | ||
| flex: auto; | ||
| padding: 0; | ||
|
|
||
| .testButton { | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .notificationSettingsLabelRow { | ||
| margin-bottom: variables.$spacing-md; | ||
|
|
||
| .notificationSettingsLabelCell { | ||
| label { | ||
| padding-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .notificationSettingsRow { | ||
| margin-bottom: variables.$spacing-md; | ||
|
|
||
| .notificationSettingsCell { | ||
| position: relative; | ||
| display: flex; | ||
|
|
||
| .sendOnFailure { | ||
| margin-right: variables.$spacing-xl; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .tooltip { | ||
| transform: translate(0, -#{variables.$spacing-md}); | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .action { | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| margin-top: variables.$spacing-xl; | ||
| } |
Oops, something went wrong.