phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 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);
} }
} }
} }

94
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,72 +444,86 @@ 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__Thumbnail__Container {
background: rgba(221, 223, 228, 0.08);
> svg {
background: #1f1f1f;
border: 2px solid #1f1f1f;
}
}
.DownloadsDropdown__list { .DownloadsDropdown__list {
color: #DDD; color: #DDD;
.DownloadsDropdown__File .DownloadsDropdown__File__Body { .DownloadsDropdown__File {
align-items: flex-start; &:hover {
background: rgba(221, 223, 228, 0.08);
}
.DownloadsDropdown__File__Body__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-color: #1f1f1f; border: 1px solid transparent;
} }
} }
.DownloadsDropdown__File__Body__Details { .DownloadsDropdown__File__Body {
.DownloadsDropdown__File__Body__Details__Filename { align-items: flex-start;
color: rgba(221, 223, 228, 1);
}
.DownloadsDropdown__File__Body__Details__FileSizeAndStatus { .DownloadsDropdown__File__Body__Thumbnail__Container {
color: rgba(221, 223, 228, 0.64); background: rgba(221, 223, 228, 0.08);
&.cancelled { > svg {
color: #D24B4E; background: #1f1f1f;
border-color: #1f1f1f;
} }
} }
}
.DownloadsDropdown__File__Body__ThreeDotButton { .DownloadsDropdown__File__Body__Details {
color: rgba(221, 223, 228, 0.56); .DownloadsDropdown__File__Body__Details__Filename {
color: rgba(221, 223, 228, 1);
}
&:hover { .DownloadsDropdown__File__Body__Details__FileSizeAndStatus {
background: rgba(56, 111, 229, 0.08); color: rgba(221, 223, 228, 0.64);
color: rgba(28, 88, 217, 0.72);
&.cancelled {
color: #D24B4E;
}
}
} }
&:active {
background: rgba(56, 111, 229, 0.08); .DownloadsDropdown__File__Body__ThreeDotButton {
color: rgba(28, 88, 217, 1); color: rgba(221, 223, 228, 0.56);
}
&.active { &:hover {
color: rgba(28, 88, 217, 1); 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 { .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);
} }
} }