Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Refine menu, toast, and popover colors #12247

Merged
merged 1 commit into from
Feb 14, 2024
Merged

Refine menu, toast, and popover colors #12247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...c.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions res/css/structures/_ContextualMenu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,10 @@ limitations under the License.
}

.mx_ContextualMenu {
border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
background-color: $menu-bg-color;
border-radius: 12px;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
background-color: var(--cpd-color-bg-canvas-default);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
color: $primary-content;
position: absolute;
z-index: 5001;
Expand Down
8 changes: 4 additions & 4 deletions res/css/structures/_QuickSettingsButton.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ limitations under the License.
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
color: var(--cpd-color-text-secondary);
margin: 0 0 16px;
}

Expand All @@ -76,7 +76,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
text-transform: uppercase;
color: $tertiary-content;
color: var(--cpd-color-text-secondary);
margin: 20px 0 12px;
}

Expand All @@ -97,7 +97,7 @@ limitations under the License.
margin-left: 6px;
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-content;
color: var(--cpd-color-text-primary);
}
}

Expand All @@ -106,7 +106,7 @@ limitations under the License.
margin-left: 22px;
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-content;
color: var(--cpd-color-text-primary);
position: relative;
margin-bottom: 16px;
}
Expand Down
9 changes: 5 additions & 4 deletions res/css/structures/_ToastContainer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,17 @@ limitations under the License.
.mx_Toast_toast {
grid-row: 1 / 3;
grid-column: 1;
background-color: $system;
background-color: var(--cpd-color-bg-canvas-default);
color: $primary-content;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
border-radius: 12px;
overflow: hidden;
display: grid;
grid-template-columns: 22px 1fr;
column-gap: 8px;
row-gap: 4px;
padding: 8px;
padding: var(--cpd-space-3x);

&.mx_Toast_hasIcon {
&::before,
Expand Down
29 changes: 5 additions & 24 deletions res/css/views/context_menus/_IconizedContextMenu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,7 @@ limitations under the License.
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
&:nth-child(n + 2),
.mx_IconizedContextMenu_optionList_notFirst {
/* This is a bit of a hack when we could just use a simple border-top property, */
/* however we have a (kinda) good reason for doing it this way: we need opacity. */
/* To get the right color, we need an opacity modifier which means we have to work */
/* around the problem. PostCSS doesn't support the opacity() function, and if we */
/* use something like postcss-functions we quickly run into an issue where the */
/* function we would define gets passed a CSS variable for custom themes, which */
/* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
//
/* Therefore, we just hack in a line and border the thing ourselves */
&::before {
border-top: 1px solid $primary-content;
opacity: 0.1;
content: "";

/* Counteract the padding problems (width: 100% ignores the 40px padding, */
/* unless we position it absolutely then it does the right thing). */
width: 100%;
position: absolute;
left: 0;
}
border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
}

/* round the top corners of the top button for the hover effect to be bounded */
Expand Down Expand Up @@ -87,7 +68,7 @@ limitations under the License.

&:hover,
&:focus-visible {
background-color: $menu-selected-color;
background-color: var(--cpd-color-bg-action-secondary-hovered);
}

&.mx_AccessibleButton_disabled {
Expand Down Expand Up @@ -137,7 +118,7 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $icon-button-color;
background-color: var(--cpd-color-icon-primary);
}
}

Expand All @@ -147,7 +128,7 @@ limitations under the License.
}

.mx_IconizedContextMenu_icon::before {
background-color: $alert;
background-color: var(--cpd-color-icon-critical-primary);
}
}

Expand All @@ -172,7 +153,7 @@ limitations under the License.

&.mx_IconizedContextMenu_compact {
.mx_IconizedContextMenu_optionList > * {
padding: 8px 16px 8px 11px;
padding: 8px 16px 8px 12px;
}
}

Expand Down
1 change: 0 additions & 1 deletion res/css/views/context_menus/_MessageContextMenu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ limitations under the License.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $icon-button-color;
}
}

Expand Down
2 changes: 1 addition & 1 deletion res/css/views/elements/_AccessibleButton.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ limitations under the License.
&.mx_AccessibleButton_kind_danger_outline {
color: var(--cpd-color-text-critical-primary);
background-color: transparent;
border: 1px solid var(--cpd-color-border-critical-primary);
border: 1px solid var(--cpd-color-border-critical-subtle);

&.mx_AccessibleButton_disabled {
color: var(--cpd-color-text-disabled);
Expand Down
8 changes: 4 additions & 4 deletions res/css/views/messages/_MessageActionBar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ limitations under the License.
.mx_MessageActionBar {
--MessageActionBar-size-button: 28px;
--MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
--MessageActionBar-item-hover-background: $panel-actions;
--MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
--MessageActionBar-item-hover-borderRadius: 6px;
--MessageActionBar-item-hover-zIndex: 1;

Expand All @@ -30,7 +30,7 @@ limitations under the License.
line-height: $font-24px;
border-radius: 8px;
background: $background;
border: 1px solid $input-border-color;
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
top: -32px;
right: 8px;
user-select: none;
Expand Down Expand Up @@ -96,7 +96,7 @@ limitations under the License.
--MessageActionBar-icon-size: 18px;
width: var(--MessageActionBar-size-button);
height: var(--MessageActionBar-size-button);
color: $secondary-content;
color: var(--cpd-color-icon-secondary);
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -114,7 +114,7 @@ limitations under the License.
}

&:hover {
color: $primary-content;
color: var(--cpd-color-icon-primary);
}

&.mx_MessageActionBar_downloadButton {
Expand Down
8 changes: 4 additions & 4 deletions res/css/views/right_panel/_BaseCard.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,19 +214,19 @@ limitations under the License.
padding-top: 10px;
padding-bottom: 10px;

border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
}

.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px;
border-bottom-color: $quinary-content;
border-bottom-color: var(--cpd-color-border-interactive-secondary);

&::after {
content: "";
border: inherit;
border-bottom-color: $menu-bg-color;
border-bottom-color: var(--cpd-color-bg-canvas-default);
position: absolute;
top: 1px;
left: -8px;
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/right_panel/_PinnedMessagesCard.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ limitations under the License.
background: var(--MessageActionBar-item-hover-background);
border-radius: var(--MessageActionBar-item-hover-borderRadius);
z-index: var(--MessageActionBar-item-hover-zIndex);
color: $primary-content;
color: var(--cpd-color-icon-primary);
}
}

Expand Down
68 changes: 0 additions & 68 deletions res/css/views/rooms/_MessageComposer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,74 +314,6 @@ limitations under the License.
}
}

.mx_MessageComposer_formatting {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While updating the colors of the message action bar and composer formatting bar, I found that none of these classes are used anymore

cursor: pointer;
margin: 0 11px;
width: 24px;
height: 18px;
}

.mx_MessageComposer_formatbar_wrapper {
width: 100%;
background-color: $menu-bg-color;
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
}

.mx_MessageComposer_formatbar {
margin: auto;
display: flex;

height: 30px;

box-sizing: border-box;
padding-left: 62px;

flex-direction: row;
align-items: center;
font-size: $font-10px;
color: $info-plinth-fg-color;

* {
margin-right: 4px;
}
}

.mx_MessageComposer_format_button,
.mx_MessageComposer_formatbar_cancel,
.mx_MessageComposer_formatbar_markdown {
cursor: pointer;
}

.mx_MessageComposer_formatbar_cancel {
margin-right: 22px;
}

.mx_MessageComposer_formatbar_markdown {
height: 17px;
width: 30px;
margin-right: 64px;
}

.mx_MessageComposer_input_markdownIndicator {
height: 10px;
width: 12px;
padding: 4px 4px 4px 0;
}

.mx_MessageComposer_formatbar_markdown,
.mx_MessageComposer_input_markdownIndicator {
cursor: pointer;
mask-image: url("$(res)/img/markdown.svg");
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: $icon-button-color;

&.mx_MessageComposer_markdownDisabled {
opacity: 0.2;
}
}

.mx_MatrixChat_useCompactLayout {
.mx_MessageComposer_input {
min-height: 50px;
Expand Down
8 changes: 4 additions & 4 deletions res/css/views/rooms/_MessageComposerFormatBar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ limitations under the License.
cursor: pointer;
border-radius: 8px;
background-color: $background;
border: 1px solid $input-border-color;
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
user-select: none;
/* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
/* but as it appears after them in the DOM, will appear on top. */
Expand All @@ -48,7 +48,7 @@ limitations under the License.
border: none;

&:hover {
background: $panel-actions;
background: var(--cpd-color-bg-subtle-secondary);
border-radius: 6px;
z-index: 1;
}
Expand All @@ -63,11 +63,11 @@ limitations under the License.
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-content;
background-color: var(--cpd-color-icon-secondary);
}

.mx_MessageComposerFormatBar_button:hover::after {
background-color: $primary-content;
background-color: var(--cpd-color-icon-primary);
}

.mx_MessageComposerFormatBar_buttonIconBold::after {
Expand Down
Loading