imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - design tweaks (#9768)

Browse source 
* hover style on dropdown

* hover states

* device details spacing

* device details h3 -> h4

* missing fullstops

* update snapshots for new copy

* device details expand icon bigger

* hide current session security card when details expanded

* filter dropdown padding and hover state

* update cypress selector for device detail heading
This commit is contained in:
Kerry 2022-12-20 14:17:05 +13:00 • committed by GitHub
parent 2152f2ab8b
commit 0485b74acb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 76 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

13
res/css/components/views/elements/_FilterDropdown.pcss
View file

@ -20,24 +20,29 @@ limitations under the License.
left: unset;
right: -$spacing-12;
width: 232px;
padding: $spacing-12;
border: 1px solid $quinary-content;
border-radius: 8px;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
background-color: $system;
.mx_Dropdown_option_highlight {
background-color: $system;
background-color: transparent;
}
}
.mx_Dropdown_input {
height: 24px;
background-color: $quinary-content;
border-color: $quinary-content;
background-color: transparent;
border-color: transparent;
color: $secondary-content;
border-radius: 4px;
&:focus {
&:focus,
&:hover {
background-color: $quinary-content;
border-color: $quinary-content;
}
}

9
res/css/components/views/settings/devices/_DeviceDetails.pcss
View file

@ -22,18 +22,18 @@ limitations under the License.
width: 100%;
margin-top: $spacing-16;
padding: $spacing-16;
padding: $spacing-24;
border-radius: 8px;
border: 1px solid $quinary-content;
}
.mx_DeviceDetails_section {
padding-bottom: $spacing-16;
margin-bottom: $spacing-16;
padding-bottom: $spacing-20;
margin-bottom: $spacing-20;
border-bottom: 1px solid $quinary-content;
display: grid;
grid-gap: $spacing-16;
grid-gap: $spacing-24;
justify-content: left;
grid-template-columns: 100%;
@ -52,6 +52,7 @@ limitations under the License.
font-size: $font-12px;
color: $secondary-content;
line-height: $font-14px;
margin-top: $spacing-4;
}
}

12
res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss
View file

@ -23,17 +23,25 @@ limitations under the License.
color: $secondary-content;
--icon-transform: rotate(-90deg);
&:hover {
background: $quinary-content;
}
}
.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
--icon-transform: rotate(0deg);
background: $system;
&:hover {
background: $quinary-content;
}
}
.mx_DeviceExpandDetailsButton_icon {
height: 12px;
width: 12px;
height: 16px;
width: 16px;
transition: all 0.3s;
transform: var(--icon-transform);

2
res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
View file

@ -55,7 +55,7 @@ limitations under the License.
box-sizing: border-box;
padding: $spacing-4;
border: 1px solid $system;
border: 1px solid $quinary-content;
border-radius: 50%;
background-color: $background;

2
res/css/components/views/settings/shared/_SettingsSubsection.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
width: 100%;
box-sizing: inherit;
line-height: $font-24px;
margin-bottom: $spacing-32;
margin-bottom: $spacing-24;
color: $secondary-content;
}