issue/1 (#31)

Co-authored-by: dbroqua <contact@darkou.fr>
Reviewed-on: https://git.darkou.fr/dbroqua/MusicTopus/pulls/31

sass/collection.scss

@@ -1,4 +1,9 @@
-.ma-collection {
+.collection {
+    h1 {
+        i {
+            cursor: pointer;
+        }
+    }
     .filters {
         display: flex;
         justify-content: end;

sass/colors.scss

@@ -52,6 +52,23 @@ $pagination-hover-color: rgb(115, 151, 186);
     --box-shadow-color: #{rgba($nord4, 0.35)};
 
     --border-color: #{$nord4};
+
+    --nord0: #{$nord0};
+    --nord1: #{$nord1};
+    --nord2: #{$nord2};
+    --nord3: #{$nord3};
+    --nord4: #{$nord4};
+    --nord5: #{$nord5};
+    --nord6: #{$nord6};
+    --nord7: #{$nord7};
+    --nord8: #{$nord8};
+    --nord9: #{$nord9};
+    --nord10: #{$nord10};
+    --nord11: #{$nord11};
+    --nord12: #{$nord12};
+    --nord13: #{$nord13};
+    --nord14: #{$nord14};
+    --nord15: #{$nord15};
 }
 
 [data-theme="dark"] {

sass/composants.scss

@@ -0,0 +1,13 @@
+.composants {
+  .couleur {
+    margin-bottom: 1rem;
+    text-align: center;
+
+    border: 1px solid var(--input-active-color);
+    box-shadow: var(--box-shadow-color) 0px 3px 6px 0px;
+
+    div {
+      height: 56px;
+    }
+  } 
+}

sass/global.scss

@@ -82,4 +82,8 @@ html {
     @include respond-to("small-up") {
         display: initial;
     }
+}
+
+.is-danger {
+    color: $nord12;
 }

sass/icons.scss

@@ -46,6 +46,7 @@
 .icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-sun:before { content: '\f185'; } /* '' */
 .icon-moon:before { content: '\f186'; } /* '' */
+.icon-share:before { content: '\f1e0'; } /* '' */
 .icon-trash:before { content: '\f1f8'; } /* '' */
 .icon-blind:before { content: '\f29d'; } /* '' */
 

sass/index.scss

@@ -43,5 +43,6 @@
 @import './error';
 @import './home';
 @import './ajouter-un-album';
-@import './ma-collection';
-@import './ma-collection-details';
+@import './collection';
+@import './ma-collection-details';
+@import './composants';

sass/toast.scss

@@ -13,6 +13,11 @@
     color: $button-alternate-color;
     border-radius: 6px;
 
+    &.success {
+        background-color: $success-color;
+        color: $button-font-color;
+    }
+
     &.show {
         visibility: visible;
         animation: toastrFadein 0.5s, toastrFadeout 0.5s 2.5s;