feat: improve the visuals of the game list header

The left and right sides of the game list header how both fade to the same color.
FlashpointProject · Jul 20, 2019 · 0d89634 · 0d89634
1 parent 9e8df44
commit 0d89634
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/renderer/components/GameListHeader.tsx b/src/renderer/components/GameListHeader.tsx
@@ -12,10 +12,10 @@ export function GameListHeader(props: GameListHeaderProps) {
     <div className='game-list-header'>
       <Column modifier='icon' hideDivider={true} />
       <div className='game-list-header__right'>
-        <Column title='Title'     modifier='title'     />
-        <Column title='Genre'     modifier='genre'     />
-        <Column title='Developer' modifier='developer' />
-        <Column title='Publisher' modifier='publisher' />
+        <Column title='Title'     modifier='title'     hideDivider={true} />
+        <Column title='Genre'     modifier='genre'                        />
+        <Column title='Developer' modifier='developer'                    />
+        <Column title='Publisher' modifier='publisher'                    />
       </div>
       <div className='game-list-header__scroll-fill' />
     </div>

diff --git a/static/window/styles/fancy.css b/static/window/styles/fancy.css
@@ -589,10 +589,16 @@ body {
   image-rendering: var(--layout__game-item-thumb-image-rendering);
 }
 /* GameList Header */
-.game-list-header-column__divider,
-.game-list-header__scroll-fill {
+.game-list-header-column__divider {
   background: var(--layout__browse-sidebar-divider-background);
 }
+.game-list-header__scroll-fill {
+  background: linear-gradient(to left, var(--layout__tertiary-background), #00000000);
+}
+/* GameList Header Column */
+.game-list-header-column--icon {
+  background: linear-gradient(to right, var(--layout__tertiary-background), #00000000);
+}
 
 
 /* GameGrid */