Add moving earth icon and Fix icons/buttons

src/routes/photos.svelte

@@ -410,7 +410,7 @@
                             on:change={handleSortChange}
                             value={filterSort}
                         >
-                            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg" aria-label="Sort icon">
+                            <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-label="Sort icon">
                                 <path fill-rule="evenodd" clip-rule="evenodd" d="M15.878 15.93h-4.172c-.638 0-1.153.516-1.153 1.154 0 .639.515 1.154 1.153 1.154h4.172c.638 0 1.153-.515 1.153-1.154a1.152 1.152 0 0 0-1.153-1.153Zm3.244-5.396h-7.405c-.639 0-1.154.515-1.154 1.153 0 .639.515 1.154 1.154 1.154h7.405c.639 0 1.154-.515 1.154-1.154a1.145 1.145 0 0 0-1.154-1.153Zm3.244-5.408h-10.65c-.638 0-1.153.515-1.153 1.154 0 .639.515 1.154 1.154 1.154h10.65c.638 0 1.153-.515 1.153-1.154 0-.639-.515-1.154-1.154-1.154ZM7.37 20.679V3.376c0-.145-.03-.289-.082-.433a1.189 1.189 0 0 0-.628-.618 1.197 1.197 0 0 0-.886 0 1.045 1.045 0 0 0-.36.237c-.01 0-.01 0-.021.01L.82 7.145a1.156 1.156 0 0 0 0 1.638 1.156 1.156 0 0 0 1.637 0l2.596-2.596v11.7l-2.596-2.595a1.156 1.156 0 0 0-1.637 0 1.156 1.156 0 0 0 0 1.638l4.573 4.573c.103.103.237.185.37.247.135.062.289.082.433.082h.02c.145 0 .3-.03.433-.093a1.14 1.14 0 0 0 .629-.628.987.987 0 0 0 .092-.432Z" />
                             </svg>
                         </Select>

src/style/_animations.scss

@@ -10,3 +10,15 @@
         box-shadow: 0 0 0 32px rgba(#fff, 0);
     }
 }
+
+
+/*
+** Earth icon
+*/
+.anim-earth {
+    animation: moveEarth 3.5s linear infinite;
+}
+@keyframes moveEarth {
+    0% { transform: translate3d(0,0,0); }
+    100% { transform: translate3d(-88px, 0, 0); }
+}

src/style/atoms/_button.scss

@@ -22,11 +22,17 @@
     img, svg {
         display: block;
         margin-right: 12px;
+        color: $color-gray;
+        transition: color 0.3s;
     }
 
     // Hover effect
     &:not([disabled]):hover {
         background: $color-secondary;
+
+        svg {
+            color: #fff;
+        }
     }
     .text-split__line {
         &:last-child {

src/style/atoms/_icon.scss

@@ -0,0 +1,8 @@
+.icon {
+    // Earth icon
+    &-earth {
+        width: 24px;
+        height: 24px;
+        color: $color-gray;
+    }
+}

src/style/pages/_homepage.scss

@@ -59,7 +59,9 @@
             margin-bottom: 40px;
 
             svg {
-                transition: fill 0.3s;
+                width: 24px;
+                height: 24px;
+                color: $color-gray;
             }
             .text-split__line {
                 &:last-child {
@@ -70,10 +72,6 @@
             // Hover
             &:hover {
                 background-color: $color-primary-tertiary20;
-
-                svg {
-                    fill: $color-tertiary;
-                }
             }
         }
     }

src/style/pages/_photos.scss

@@ -102,9 +102,9 @@
                 height: 20px;
                 overflow: hidden;
                 margin-right: 12px;
-                fill: #fff;
+                color: #fff;
                 border-radius: 100%;
-                transition: fill 0.2s;
+                transition: color 0.3s;
 
                 @include bp (sm) {
                     width: 26px;
@@ -145,7 +145,7 @@
             // Hover
             li:hover {
                 .icon {
-                    fill: $color-secondary-light;
+                    color: $color-secondary-light;
                 }
                 .select {
                     background-color: $color-primary-tertiary20;

src/style/style.scss

@@ -39,6 +39,7 @@
 @import "atoms/button";
 @import "atoms/button-circle";
 @import "atoms/button-cart";
+@import "atoms/icon";
 @import "atoms/badge";
 @import "atoms/arrow";
 @import "atoms/discover";