✨ Rework buttons classes and variants

Add a conditional class and list props as BEM class modifiers

src/routes/[country]/[location]/[photo].svelte

@@ -60,15 +60,10 @@ import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
             <div class="viewer-photo__controls">
                 <ButtonCircle on:click={goToPrevious}>
-                    <IconArrow
-                        color="pink"
-                        flip={true}
-                    />
+                    <IconArrow color="pink" flip={true} />
                 </ButtonCircle>
                 <ButtonCircle on:click={goToPrevious}>
-                    <IconArrow
-                        color="pink"
-                    />
+                    <IconArrow color="pink" />
                 </ButtonCircle>
             </div>
 

src/routes/[country]/[location]/index.svelte

@@ -143,7 +143,7 @@
                     <Button url="/locations" text="Change location" class="shadow-small">
                         <IconEarth />
                     </Button>
-                    <Button url="/shop" text="Buy the poster" class="button--pink shadow-small">
+                    <Button url="/shop" text="Buy the poster" color="pink" class="shadow-small">
                         <!-- <IconEarth /> -->
                     </Button>
                 </div>

src/routes/photos.svelte

@@ -298,8 +298,8 @@
                     <Button
                         tag="button"
                         text={!ended ? 'See more photos' : "You've seen it all!"}
+                        size="large" color="beige"
                         on:click={loadMorePhotos}
-                        class="button--large button--beige"
                         disabled={ended}
                     />