IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixing modal styles for some modals (#26635)

Browse Source 
* Updating modal styles

* Updating modal header for notices

* Updating dispatch

* Updating padding

* Fixing css

* Updating modal

* Updating css

* Updating modal scss
This commit is contained in:
Asaad Mahmood 2024-04-12 10:23:25 -07:00 committed by GitHub
parent b336fb9a45
commit 460b228837
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 92 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
View File

@ -35,6 +35,9 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
bsClass="modal-header"
closeButton={true}
closeLabel="Close"
>
<div
className="d-flex align-items-center"
>
<button
aria-label="Back"
@ -61,6 +64,7 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
}
/>
</ModalTitle>
</div>
</ModalHeader>
<ModalBody
bsClass="modal-body"

2
webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
View File

@ -100,6 +100,7 @@ const AddUsersToGroupModal = (props: Props) => {
id='addUsersToGroupsModal'
>
<Modal.Header closeButton={true}>
<div className='d-flex align-items-center'>
<button
type='button'
className='modal-header-back-button btn btn-icon'
@ -118,6 +119,7 @@ const AddUsersToGroupModal = (props: Props) => {
values={titleValue}
/>
</Modal.Title>
</div>
</Modal.Header>
<Modal.Body
className='overflow--visible'

2
webapp/channels/src/components/admin_console/billing/delete_workspace/result_modal.scss
View File

@ -66,7 +66,7 @@
.IconMessage-buttons {
justify-content: right;
padding-right: 24px;
margin-top: 60px;
margin-top: 32px;
.btn {
font-family: 'Open sans', sans-serif;

17
webapp/channels/src/components/browse_channels/browse_channels.scss
View File

@ -1,11 +1,6 @@
@charset 'UTF-8';
#browseChannelsModal {
.modal-content {
min-height: 600px;
max-height: calc(50vh - 240px);
}
.modal-dialog {
margin-top: calc(45vh - 240px) !important;
}
@ -21,6 +16,7 @@
#searchIcon {
position: absolute;
z-index: 2;
top: 16px;
left: 46px;
color: rgba(var(--center-channel-color-rgb), 0.64);
@ -227,19 +223,10 @@
justify-content: space-between;
padding-right: 4px;
}
.close {
top: 22px;
}
}
.filter-controls {
padding: 0;
button {
min-width: 72px;
margin: 8px 32px;
}
padding-top: 24px;
}
}

122
webapp/channels/src/components/product_notices_modal/product_notices_modal.scss
View File

@ -3,25 +3,23 @@
.productNotices {
width: 692px;
.app__body .modal & .modal-content {
padding: 40px;
}
.GenericModal__header {
padding: 0;
margin-bottom: 16px;
}
.GenericModal__body {
padding: 0;
}
.productNotices__helpText {
margin-top: 8px;
p {
margin-bottom: 16px;
.modal-title {
font-size: 22px;
line-height: 28px;
}
.modal-header {
min-height: auto;
padding-top: 48px;
padding-bottom: 0px;
}
.productNotices__helpText {
opacity: 0.75;
}
.productNotices__img {
@ -36,10 +34,6 @@
margin: 0 auto;
}
.modal-footer {
margin-top: 32px;
}
.productNotices__info {
position: fixed;
z-index: 1;
@ -59,96 +53,4 @@
margin-left: 23px;
vertical-align: middle;
}
.app__body .modal &.modal-dialog {
height: unset;
margin-top: calc(50vh - 307px);
}
.app__body .modal & .modal-footer {
position: relative;
padding: 0;
}
.GenericModal__button {
display: inline-flex;
align-items: center;
padding: 13px 20px;
border: none;
font-size: 14px;
line-height: 14px;
&.confirm {
background: var(--button-bg);
color: var(--button-color);
&:hover:not(.disabled) {
background:
linear-gradient(
0deg,
rgba(var(--center-channel-color-rgb), 0.16),
rgba(var(--center-channel-color-rgb), 0.16)
),
var(--button-bg);
}
&:active {
background:
linear-gradient(
0deg,
rgba(var(--center-channel-color-rgb), 0.32),
rgba(var(--center-channel-color-rgb), 0.32)
),
var(--button-bg);
}
&:focus {
box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
}
}
&.cancel,
&.actionButton {
display: inline-flex;
align-items: center;
border-radius: 4px;
background: var(--center-channel-bg);
color: var(--button-bg);
text-decoration: none;
&:hover {
background: rgba(var(--button-bg-rgb), 0.04);
}
&:active {
background: rgba(var(--button-bg-rgb), 0.08);
}
&:focus {
box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
}
}
&.actionButton {
box-shadow: inset 0 0 0 1px var(--button-bg);
}
&.cancel {
margin-right: 12px;
}
.fa {
font-size: 14px;
// only target `.fa` that is the first child (left aligned icon)
&:first-child {
margin-right: 7px;
}
}
// only target `.fa` that follows a `span` (right aligned icon)
span ~ .fa {
margin-left: 7px;
}
}
}

4
webapp/channels/src/components/searchable_channel_list.tsx
View File

@ -377,7 +377,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
if (channelsToDisplay.length >= this.props.channelsPerPage && pageEnd < this.props.channels.length) {
nextButton = (
<button
className='btn btn-sm filter-control filter-control__next outlineButton'
className='btn btn-sm btn-tertiary filter-control filter-control__next'
onClick={this.nextPage}
disabled={this.state.nextDisabled}
aria-label={localizeMessage('more_channels.next', 'Next')}
@ -393,7 +393,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
if (this.state.page > 0) {
previousButton = (
<button
className='btn btn-sm filter-control filter-control__prev outlineButton'
className='btn btn-sm btn-tertiary filter-control filter-control__prev'
onClick={this.previousPage}
aria-label={localizeMessage('more_channels.prev', 'Previous')}
>

17
webapp/channels/src/components/tours/crt_tour/collapsed_reply_threads_modal.scss
View File

@ -3,26 +3,11 @@
.GenericModal.CollapsedReplyThreadsModal {
width: 692px;
padding: 0 1.6rem;
.modal-content {
padding: 16px 15px;
@media screen and (max-width: 767px) {
.app__body .modal & {
padding: 24px;
}
}
}
.CollapsedReplyThreadsModal__img {
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
border-radius: 4px;
margin-top: 40px;
}
.modal-footer {
margin-top: 20px;
margin-top: 22px;
}
}

10
webapp/channels/src/components/view_user_group_modal/view_user_group_modal.scss
View File

@ -1,10 +1,11 @@
.view-user-groups-modal {
.modal-content .modal-header {
overflow: visible;
padding-top: 0;
padding-bottom: 0;
.modal-title {
margin-left: 46px;
margin-left: 16px;
i {
margin-left: 5px;
@ -13,8 +14,6 @@
}
.details-action {
margin-right: 42px;
.MenuWrapper {
margin-left: auto;
}
@ -22,12 +21,14 @@
}
.modal-body {
overflow: visible;
.no-results__wrapper {
padding-bottom: 60px;
}
.group-mention-name {
margin-bottom: 25px;
margin: -24px 0 24px 6px;
span.group-name {
margin-left: 70px;
@ -90,7 +91,6 @@
}
.group-member-username {
padding-left: 8px;
color: rgba(var(--center-channel-color-rgb), 0.75);
font-size: 12px;
line-height: 18px;

4
webapp/channels/src/components/view_user_group_modal/view_user_group_modal_header/view_user_group_modal_header.tsx
View File

@ -161,6 +161,7 @@ const ViewUserGroupModalHeader = ({
return (
<Modal.Header closeButton={true}>
<div className='d-flex align-items-center'>
<button
type='button'
className='modal-header-back-button btn btn-icon'
@ -172,9 +173,12 @@ const ViewUserGroupModalHeader = ({
/>
</button>
{modalTitle()}
</div>
<div className='d-flex align-items-center'>
{addPeopleButton()}
{restoreGroupButton()}
{subMenuButton()}
</div>
</Modal.Header>
);
};

4
webapp/channels/src/sass/components/_modal.scss
View File

@ -268,6 +268,10 @@
content: none;
}
.modal-header-back-button {
margin-left: -12px;
}
.btn {
position: relative;
top: -2px;