phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix color issues in Downloads dropdown (#2298)

Browse Source 
* Fix color issues in Downloads dropdown

* More styling changes
This commit is contained in:
Tasos Boulis
2022-10-21 12:52:52 +03:00
committed by GitHub
parent 1f5f5ef71d
commit aa28948800
4 changed files with 72 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/DownloadsDropdown/Thumbnail.tsx
View File

@@ -12,7 +12,7 @@ type OwnProps = {
item: DownloadedItem;
}
const iconSize = 12;
const iconSize = 14;
const colorGreen = '#3DB887';
const colorRed = '#D24B4E';

13
src/renderer/css/components/DownloadsDropdown/DownloadsDropdownButton.scss
View File

@@ -40,10 +40,17 @@
color: rgba(221, 223, 228, 0.56);
}
&:hover, &:focus, &.isDownloadsDropdownOpen {
background-color: rgba(56, 111, 229, 0.08);
&:hover, &:focus {
background: rgba(221, 223, 228, 0.08);
}
&.isDownloadsDropdownOpen {
background: rgba(28, 88, 217, 0.08);
i {
color: rgba(56, 111, 229, 1);
color: rgba(28, 88, 217, 1);
}
&:hover {
background: rgba(28, 88, 217, 0.16);
}
}
}

94
src/renderer/css/downloadsDropdown.scss
View File

@@ -70,7 +70,7 @@ body {
> svg {
background: #ffffff;
border-radius: 50%;
border: 2px solid #ffffff;
border: 1px solid #ffffff;
position: absolute;
right: 0;
top: 0;
@@ -351,6 +351,10 @@ body {
background-color: rgba(63, 67, 80, 0.08);
color: rgba(63, 67, 80, 0.72)
}
*.active:hover {
background: rgba(28, 88, 217, 0.16);
color: rgba(28, 88, 217, 1);
}
&:active {
background: rgba(28, 88, 217, 0.08);
color: rgba(28, 88, 217, 1);
@@ -440,72 +444,86 @@ body {
border: 1px solid rgba(221, 223, 228, 0.16);
.DownloadsDropdown__header {
.DownloadsDropdown__Downloads {
color: #DDD;
}
.DownloadsDropdown__clearAllButton {
color: rgb(56, 111, 229);
&:hover {
background: rgba(56, 111, 229, 0.08);
}
&.disabled {
background: transparent;
color: rgba(63, 67, 80, 0.52);
}
}
.DownloadsDropdown__Downloads {
color: #DDD;
}
}
.DownloadsDropdown__divider {
border-color: rgba(221, 221, 221, 0.08);
}
.DownloadsDropdown__Thumbnail__Container {
background: rgba(221, 223, 228, 0.08);
> svg {
background: #1f1f1f;
border: 2px solid #1f1f1f;
}
}
.DownloadsDropdown__list {
color: #DDD;
.DownloadsDropdown__File .DownloadsDropdown__File__Body {
align-items: flex-start;
.DownloadsDropdown__File {
&:hover {
background: rgba(221, 223, 228, 0.08);
}
.DownloadsDropdown__File__Body__Thumbnail__Container {
.DownloadsDropdown__Thumbnail__Container {
background: rgba(221, 223, 228, 0.08);
> svg {
background: #1f1f1f;
border-color: #1f1f1f;
border: 1px solid transparent;
}
}
.DownloadsDropdown__File__Body__Details {
.DownloadsDropdown__File__Body__Details__Filename {
color: rgba(221, 223, 228, 1);
}
.DownloadsDropdown__File__Body {
align-items: flex-start;
.DownloadsDropdown__File__Body__Details__FileSizeAndStatus {
color: rgba(221, 223, 228, 0.64);
.DownloadsDropdown__File__Body__Thumbnail__Container {
background: rgba(221, 223, 228, 0.08);
&.cancelled {
color: #D24B4E;
> svg {
background: #1f1f1f;
border-color: #1f1f1f;
}
}
}
.DownloadsDropdown__File__Body__ThreeDotButton {
color: rgba(221, 223, 228, 0.56);
.DownloadsDropdown__File__Body__Details {
.DownloadsDropdown__File__Body__Details__Filename {
color: rgba(221, 223, 228, 1);
}
&:hover {
background: rgba(56, 111, 229, 0.08);
color: rgba(28, 88, 217, 0.72);
.DownloadsDropdown__File__Body__Details__FileSizeAndStatus {
color: rgba(221, 223, 228, 0.64);
&.cancelled {
color: #D24B4E;
}
}
}
&:active {
background: rgba(56, 111, 229, 0.08);
color: rgba(28, 88, 217, 1);
}
&.active {
color: rgba(28, 88, 217, 1);
.DownloadsDropdown__File__Body__ThreeDotButton {
color: rgba(221, 223, 228, 0.56);
&:hover {
background: rgba(221, 223, 228, 0.08);
}
&:active {
background: rgba(56, 111, 229, 0.08);
color: rgb(56, 111, 229);
}
&.active {
background: rgba(56, 111, 229, 0.08);
color: rgb(56, 111, 229);
}
&.active:hover {
background: rgba(56, 111, 229, 0.16);
color: rgba(28, 88, 217, 1);
}
}
}
}

5
src/renderer/css/downloadsDropdownMenu.scss
View File

@@ -75,7 +75,12 @@ body {
.DownloadsDropdownMenu__MenuItem {
color: rgba(221, 223, 228, 1);
&:hover {
background: rgba(221, 223, 228, 0.08);
}
&.disabled {
background: #1f1f1f;
color: rgba(221, 223, 228, 0.32);
}
}