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; item: DownloadedItem;
} }
const iconSize = 12; const iconSize = 14;
const colorGreen = '#3DB887'; const colorGreen = '#3DB887';
const colorRed = '#D24B4E'; const colorRed = '#D24B4E';

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

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

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

@@ -70,7 +70,7 @@ body {
> svg { > svg {
background: #ffffff; background: #ffffff;
border-radius: 50%; border-radius: 50%;
border: 2px solid #ffffff; border: 1px solid #ffffff;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@@ -351,6 +351,10 @@ body {
background-color: rgba(63, 67, 80, 0.08); background-color: rgba(63, 67, 80, 0.08);
color: rgba(63, 67, 80, 0.72) color: rgba(63, 67, 80, 0.72)
} }
*.active:hover {
background: rgba(28, 88, 217, 0.16);
color: rgba(28, 88, 217, 1);
}
&:active { &:active {
background: rgba(28, 88, 217, 0.08); background: rgba(28, 88, 217, 0.08);
color: rgba(28, 88, 217, 1); color: rgba(28, 88, 217, 1);
@@ -440,34 +444,43 @@ body {
border: 1px solid rgba(221, 223, 228, 0.16); border: 1px solid rgba(221, 223, 228, 0.16);
.DownloadsDropdown__header { .DownloadsDropdown__header {
.DownloadsDropdown__Downloads {
color: #DDD;
}
.DownloadsDropdown__clearAllButton { .DownloadsDropdown__clearAllButton {
color: rgb(56, 111, 229);
&:hover {
background: rgba(56, 111, 229, 0.08);
}
&.disabled { &.disabled {
background: transparent;
color: rgba(63, 67, 80, 0.52); color: rgba(63, 67, 80, 0.52);
} }
} }
.DownloadsDropdown__Downloads {
color: #DDD;
}
} }
.DownloadsDropdown__divider { .DownloadsDropdown__divider {
border-color: rgba(221, 221, 221, 0.08); border-color: rgba(221, 221, 221, 0.08);
} }
.DownloadsDropdown__list {
color: #DDD;
.DownloadsDropdown__File {
&:hover {
background: rgba(221, 223, 228, 0.08);
}
.DownloadsDropdown__Thumbnail__Container { .DownloadsDropdown__Thumbnail__Container {
background: rgba(221, 223, 228, 0.08); background: rgba(221, 223, 228, 0.08);
> svg { > svg {
background: #1f1f1f; background: #1f1f1f;
border: 2px solid #1f1f1f; border: 1px solid transparent;
} }
} }
.DownloadsDropdown__list { .DownloadsDropdown__File__Body {
color: #DDD;
.DownloadsDropdown__File .DownloadsDropdown__File__Body {
align-items: flex-start; align-items: flex-start;
.DownloadsDropdown__File__Body__Thumbnail__Container { .DownloadsDropdown__File__Body__Thumbnail__Container {
@@ -497,18 +510,23 @@ body {
color: rgba(221, 223, 228, 0.56); color: rgba(221, 223, 228, 0.56);
&:hover { &:hover {
background: rgba(56, 111, 229, 0.08); background: rgba(221, 223, 228, 0.08);
color: rgba(28, 88, 217, 0.72);
} }
&:active { &:active {
background: rgba(56, 111, 229, 0.08); background: rgba(56, 111, 229, 0.08);
color: rgba(28, 88, 217, 1); color: rgb(56, 111, 229);
} }
&.active { &.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); color: rgba(28, 88, 217, 1);
} }
} }
} }
}
.DownloadsDropdown__Update .DownloadsDropdown__Update__Details { .DownloadsDropdown__Update .DownloadsDropdown__Update__Details {
.DownloadsDropdown__Update__Details__Title { .DownloadsDropdown__Update__Details__Title {

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

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