From b1e9c7da0cc23e8f2717c9c9cd94c0c409d3fcee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 4 Oct 2021 13:07:23 +0200
Subject: [PATCH] Add hovers and fix some styles on Photos filters

---
 src/style/pages/_photos.scss | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss
index 6867d60..8bb79b3 100644
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -44,7 +44,7 @@
             @include bp (sm) {
                 position: absolute;
                 left: 64px;
-                top: 50%;
+                top: 52%;
                 transform: translateY(-50%);
                 margin-bottom: 0;
             }
@@ -54,8 +54,9 @@
             display: flex;
             justify-content: center;
             align-items: center;
+            height: 72px;
             margin: 20px 0;
-            padding: 20px 22px;
+            padding: 0 22px;
             background: $color-primary-darker;
             border-radius: 50vh;
 
@@ -76,7 +77,7 @@
                 color: #fff;
 
                 @include bp (sm) {
-                    margin: 0 16px;
+                    margin: 0 2px;
                 }
             }
             img {
@@ -90,7 +91,12 @@
 
             .select {
                 position: relative;
+                display: flex;
+                align-items: center;
+                padding: 8px 16px;
                 font-weight: 900;
+                border-radius: 100vh;
+                transition: background-color 0.2s;
 
                 select {
                     opacity: 0;
@@ -101,6 +107,10 @@
                     height: 100%;
                     cursor: pointer;
                 }
+
+                &:hover {
+                    background-color: $color-primary-tertiary20;
+                }
             }
         }
 
@@ -112,8 +122,8 @@
 
             @include bp (sm) {
                 position: absolute;
-                right: 64px;
                 top: 50%;
+                right: 56px;
                 transform: translateY(-50%);
             }
 
@@ -129,6 +139,17 @@
                     display: block;
                 }
             }
+
+            // Reset link
+            .reset {
+                transition: color 0.3s;
+
+                &:hover {
+                    color: $color-tertiary;
+                }
+            }
+
+            // Shuffle button
             .shuffle {
                 display: flex;
                 align-items: center;