diff --git a/src/renderer/components/DownloadsDropdown/Thumbnail.tsx b/src/renderer/components/DownloadsDropdown/Thumbnail.tsx index 87a411d9..98eac214 100644 --- a/src/renderer/components/DownloadsDropdown/Thumbnail.tsx +++ b/src/renderer/components/DownloadsDropdown/Thumbnail.tsx @@ -12,7 +12,7 @@ type OwnProps = { item: DownloadedItem; } -const iconSize = 12; +const iconSize = 14; const colorGreen = '#3DB887'; const colorRed = '#D24B4E'; diff --git a/src/renderer/css/components/DownloadsDropdown/DownloadsDropdownButton.scss b/src/renderer/css/components/DownloadsDropdown/DownloadsDropdownButton.scss index 086c6ba0..8c483cdb 100644 --- a/src/renderer/css/components/DownloadsDropdown/DownloadsDropdownButton.scss +++ b/src/renderer/css/components/DownloadsDropdown/DownloadsDropdownButton.scss @@ -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); } } } diff --git a/src/renderer/css/downloadsDropdown.scss b/src/renderer/css/downloadsDropdown.scss index 73e117e9..0ae54a56 100644 --- a/src/renderer/css/downloadsDropdown.scss +++ b/src/renderer/css/downloadsDropdown.scss @@ -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); + } } } } diff --git a/src/renderer/css/downloadsDropdownMenu.scss b/src/renderer/css/downloadsDropdownMenu.scss index edcb91a3..2deb7ef2 100644 --- a/src/renderer/css/downloadsDropdownMenu.scss +++ b/src/renderer/css/downloadsDropdownMenu.scss @@ -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); } }