feat(ui): add Button, Modal, Spinner, Toast, and Tooltip components with styles
All checks were successful
Build and Release / build-and-release (push) Successful in 13m12s
All checks were successful
Build and Release / build-and-release (push) Successful in 13m12s
- Implemented Button component with various props for customization. - Created Modal component with header, content, and footer subcomponents. - Added Spinner component for loading indicators. - Developed Toast component for displaying notifications. - Introduced Tooltip component for contextual hints with keyboard shortcuts. - Added corresponding CSS modules for styling each component. - Updated index file to export new components. - Configured TypeScript settings for the UI package.
This commit is contained in:
Bryan1029384756
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,160 +0,0 @@
|
||||
.loadingWrapper__5a143 {
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 16px;
|
||||
justify-content: center;
|
||||
margin: 2px 0;
|
||||
padding: 8px 4px
|
||||
}
|
||||
|
||||
.list_c47777 {
|
||||
max-height: 500px
|
||||
}
|
||||
|
||||
.actionContainer_bc4513 {
|
||||
background-color: var(--background-mod-normal);
|
||||
border-radius: 80px;
|
||||
flex-direction: row;
|
||||
padding-inline:6px 8px;padding-bottom: 4px;
|
||||
padding-top: 4px
|
||||
}
|
||||
|
||||
.actionContainer_bc4513,.actionIconContainer_bc4513 {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.actionIconContainer_bc4513 {
|
||||
height: 16px;
|
||||
margin-inline-end:4px;width: 16px
|
||||
}
|
||||
|
||||
.actionIcon_bc4513 {
|
||||
color: var(--text-muted)
|
||||
}
|
||||
|
||||
.actionTextContainer_bc4513 {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
.actionTextHeader_bc4513 {
|
||||
word-wrap: normal;
|
||||
text-transform: lowercase
|
||||
}
|
||||
|
||||
.actionTextHelper_bc4513 {
|
||||
margin-inline-start:4px;text-transform: lowercase
|
||||
}
|
||||
|
||||
.emoji_ab6c65 {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain
|
||||
}
|
||||
|
||||
.pro__30cbe {
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.tip__30cbe {
|
||||
line-height: 16px;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.block__30cbe .pro__30cbe,.block__30cbe .tip__30cbe,.tip__30cbe {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.inline__30cbe .pro__30cbe,.inline__30cbe .tip__30cbe {
|
||||
display: inline;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.inline__30cbe .pro__30cbe {
|
||||
margin-inline-end:3px}
|
||||
|
||||
.enable-forced-colors .tip__30cbe {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.spacing_fd14e0 {
|
||||
margin-bottom: 20px
|
||||
}
|
||||
|
||||
.spacingTop_fd14e0 {
|
||||
margin-top: 20px
|
||||
}
|
||||
|
||||
.message_fd14e0 {
|
||||
background-color: var(--background-base-low);
|
||||
border-radius: 3px;
|
||||
box-shadow: var(--legacy-elevation-border),var(--legacy-elevation-high);
|
||||
overflow: hidden;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
pointer-events: none;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.closeButton_fd14e0 {
|
||||
justify-content: flex-end
|
||||
}
|
||||
|
||||
.wrapper_f563df {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
grid-template-rows: 1fr;
|
||||
justify-items: center;
|
||||
padding: 8px
|
||||
}
|
||||
|
||||
.button_f563df,.wrapper_f563df {
|
||||
align-items: center
|
||||
}
|
||||
|
||||
.button_f563df {
|
||||
background-color: var(--background-mod-subtle);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 44px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
width: 44px
|
||||
}
|
||||
|
||||
.button_f563df:hover {
|
||||
background-color: var(--background-mod-strong)
|
||||
}
|
||||
|
||||
.button_f563df:active {
|
||||
background-color: var(--background-mod-muted)
|
||||
}
|
||||
|
||||
.button_f563df:hover {
|
||||
background-color: var(--background-mod-normal)
|
||||
}
|
||||
|
||||
.keyboard-mode .button_f563df.focused_f563df {
|
||||
background-color: var(--background-mod-normal);
|
||||
box-shadow: 0 0 0 2px var(--blue-345)
|
||||
}
|
||||
|
||||
.icon_f563df {
|
||||
display: block;
|
||||
height: 20px;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
width: 20px
|
||||
}
|
||||
|
||||
.flagIcon__45b6e {
|
||||
height: 12px;
|
||||
width: 16px
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=59c6d21704b78874.css.map*/
|
||||
@@ -1,13 +0,0 @@
|
||||
.highlight-mana-components [data-mana-component] {
|
||||
box-shadow: 0 0 6px 2px var(--pink-51),0 0 8px 4px var(--opacity-blurple-80)
|
||||
}
|
||||
|
||||
.highlight-mana-components [data-mana-component=text-area],.highlight-mana-components [data-mana-component=text-input] {
|
||||
box-shadow: 0 0 6px 2px var(--pink-51),0 0 8px 4px var(--opacity-blurple-80)
|
||||
}
|
||||
|
||||
.highlight-mana-buttons [data-mana-component=button] {
|
||||
box-shadow: 0 0 6px 2px var(--pink-51),0 0 8px 4px var(--opacity-blurple-80)
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=6f7713d5b10d7cb3.css.map*/
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,212 +0,0 @@
|
||||
.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content {
|
||||
height: inherit;
|
||||
text-align: initial
|
||||
}
|
||||
|
||||
.public-DraftEditor-content[contenteditable=true] {
|
||||
-webkit-user-modify: read-write-plaintext-only
|
||||
}
|
||||
|
||||
.DraftEditor-root {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.DraftEditor-editorContainer {
|
||||
background-color: hsla(0,0%,100%,0);
|
||||
border-left: .1px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.public-DraftEditor-block {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.DraftEditor-alignLeft .public-DraftStyleDefault-block {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root {
|
||||
left: 0;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.DraftEditor-alignCenter .public-DraftStyleDefault-block {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.DraftEditor-alignRight .public-DraftStyleDefault-block {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.DraftEditor-alignRight .public-DraftEditorPlaceholder-root {
|
||||
right: 0;
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.public-DraftEditorPlaceholder-root {
|
||||
color: #9197a3;
|
||||
position: absolute;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.public-DraftEditorPlaceholder-hasFocus {
|
||||
color: #bdc1c9
|
||||
}
|
||||
|
||||
.DraftEditorPlaceholder-hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-block {
|
||||
position: relative;
|
||||
white-space: pre-wrap
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-ltr {
|
||||
direction: ltr;
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-rtl {
|
||||
direction: rtl;
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-listLTR {
|
||||
direction: ltr
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-listRTL {
|
||||
direction: rtl
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul {
|
||||
margin: 16px 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
|
||||
margin-left: 1.5em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL {
|
||||
margin-right: 1.5em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR {
|
||||
margin-left: 3em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL {
|
||||
margin-right: 3em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR {
|
||||
margin-left: 4.5em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL {
|
||||
margin-right: 4.5em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR {
|
||||
margin-left: 6em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL {
|
||||
margin-right: 6em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR {
|
||||
margin-left: 7.5em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL {
|
||||
margin-right: 7.5em
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-unorderedListItem {
|
||||
list-style-type: square;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 {
|
||||
list-style-type: disc
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1 {
|
||||
list-style-type: circle
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-orderedListItem {
|
||||
list-style-type: none;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before {
|
||||
left: -36px;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before {
|
||||
position: absolute;
|
||||
right: -36px;
|
||||
text-align: left;
|
||||
width: 30px
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-orderedListItem:before {
|
||||
content: counter(ol0) ". ";
|
||||
counter-increment: ol0
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before {
|
||||
content: counter(ol1,lower-alpha) ". ";
|
||||
counter-increment: ol1
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before {
|
||||
content: counter(ol2,lower-roman) ". ";
|
||||
counter-increment: ol2
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before {
|
||||
content: counter(ol3) ". ";
|
||||
counter-increment: ol3
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before {
|
||||
content: counter(ol4,lower-alpha) ". ";
|
||||
counter-increment: ol4
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
|
||||
counter-reset: ol0
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset {
|
||||
counter-reset: ol1
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset {
|
||||
counter-reset: ol2
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset {
|
||||
counter-reset: ol3
|
||||
}
|
||||
|
||||
.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
|
||||
counter-reset: ol4
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=9296efc0128dcaf8.css.map*/
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,65 +0,0 @@
|
||||
.activeWrapper__452c3,.wrapper__452c3 {
|
||||
height: 100%;
|
||||
inset-inline-start: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1002
|
||||
}
|
||||
|
||||
.videoWrapper__452c3,.wrapper__452c3 {
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.videoWrapper__452c3 {
|
||||
height: 100%;
|
||||
inset-inline-start: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: auto;
|
||||
z-index: 200
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 45/32) {
|
||||
.videoWrapper__452c3 {
|
||||
height:auto;
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.videoWrapperForHelper__452c3 {
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
z-index: 200
|
||||
}
|
||||
|
||||
.gadientHighlight__452c3,.videoWrapperForHelper__452c3 {
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.gadientHighlight__452c3 {
|
||||
background-image: linear-gradient(90deg,var(--premium-tier-2-purple-for-gradients) 0,var(--premium-tier-2-purple-for-gradients-2) 50%,var(--premium-tier-2-pink-for-gradients) 100%)
|
||||
}
|
||||
|
||||
.swipeWrapper__452c3 {
|
||||
pointer-events: none;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.swipe__452c3,.swipeWrapper__452c3 {
|
||||
height: 100%;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.swipe__452c3 {
|
||||
inset-inline-end: 0;
|
||||
opacity: .1;
|
||||
top: 0;
|
||||
width: auto
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=a06f142ee55db4f5.css.map*/
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user