refactor: move scss colors & keyframes in files

components/BlockWrapper/block-wrapper.module.scss

@@ -1,3 +1,6 @@
+@import "../../styles/keyframes.scss";
+@import "../../styles/colors.scss";
+
 .block-wrapper {
     height: auto;
     width: 100%;
@@ -7,7 +10,7 @@
         text-transform: uppercase;
         font-size: 0.85em;
         font-weight: 500;
-        color: #bbb;
+        color: $grey;
         margin-bottom: 5px;
     }
 
@@ -21,10 +24,10 @@
         cursor: pointer;
         height: fit-content;
         width: 100%;
-        background-color: #fff;
+        background-color: $white;
         padding: 7px 12px;
-        border: 1px solid #dadce0;
+        border: 1px solid $lightest-grey;
-        border-bottom: 2px solid #dadce0;
+        border-bottom: 2px solid $lightest-grey;
         border-radius: 3px;
         transition: 0.15s;
 
@@ -33,15 +36,3 @@
         }
     }
 }
-
-@keyframes fadein {
-    0% {
-        transform: translateX(-15px);
-        opacity: 0;
-    }
-
-    100% {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}

components/Links/links.module.scss

@@ -1,3 +1,6 @@
+@import "../../styles/keyframes.scss";
+@import "../../styles/colors.scss";
+
 .no-link,
 .no-category {
     display: flex;
@@ -18,12 +21,12 @@
     overflow-y: scroll;
 
     & h2 {
-        color: #3f88c5;
+        color: $blue;
         margin-bottom: 15px;
         font-weight: 500;
 
         & .links-count {
-            color: #bbb;
+            color: $grey;
             font-weight: 300;
             font-size: 0.8em;
         }
@@ -43,10 +46,10 @@
     cursor: pointer;
     height: fit-content;
     width: 100%;
-    color: #3f88c5;
+    color: $blue;
-    background-color: #fff;
+    background-color: $white;
     padding: 10px 15px;
-    border: 1px solid #dadce0;
+    border: 1px solid $lightest-grey;
     border-radius: 3px;
     margin-bottom: 10px;
     outline: 3px solid transparent;
@@ -56,7 +59,7 @@
 
     &:hover {
         border: 1px solid transparent;
-        outline: 3px solid #82c5fede;
+        outline: 3px solid $light-blue;
 
         & .url-pathname {
             animation: fadein 0.3s both;
@@ -71,7 +74,7 @@
 
 .link > a {
     height: 100%;
-    max-width: calc(100% - 50px);
+    max-width: calc(100% - 125px); // TODO: faut fix ça, c'est pas beau
     text-decoration: none;
     display: flex;
     flex: 1;
@@ -90,7 +93,7 @@
     }
 
     & .link-name .link-category {
-        color: #bbb;
+        color: $grey;
         font-size: 0.9em;
     }
 
@@ -99,7 +102,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-        color: #bbb;
+        color: $grey;
         font-size: 0.8em;
 
         & .url-pathname {
@@ -145,30 +148,9 @@
     position: absolute;
     top: 0;
     left: 0;
-    background-color: #fff;
+    background-color: $white;
 
     & > * {
         animation: rotate 1s both reverse infinite linear;
     }
 }
-
-@keyframes rotate {
-    to {
-        transform: rotate(0deg);
-    }
-    from {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes fadein {
-    0% {
-        transform: translateX(-15px);
-        opacity: 0;
-    }
-
-    100% {
-        transform: translateX(0);
-        opacity: 1;
-    }
-}

components/MessageManager/message-manager.module.scss

@@ -1,11 +1,13 @@
+@import "../../styles/colors.scss";
+
 .info-msg {
     height: fit-content;
     width: 100%;
     text-align: center;
     font-style: italic;
     font-size: 0.9em;
-    color: #005aa5;
+    color: $dark-blue;
-    background-color: #d3e8fa;
+    background-color: $light-blue;
     padding: 10px;
     border-radius: 3px;
     animation: fadein 250ms both;
@@ -17,8 +19,8 @@
     text-align: center;
     font-style: italic;
     font-size: 0.9em;
-    color: #d8000c;
+    color: $red;
-    background-color: #ffbabab9;
+    background-color: $light-red;
     padding: 10px;
     border-radius: 3px;
     animation: fadein 250ms both;
@@ -30,8 +32,8 @@
     text-align: center;
     font-style: italic;
     font-size: 0.9em;
-    color: green;
+    color: $green;
-    background-color: #c1ffbab9;
+    background-color: $light-green;
     padding: 10px;
     border-radius: 3px;
     animation: fadein 250ms both;

components/SideMenu/Categories/categories.module.scss

@@ -1,3 +1,6 @@
+@import "../../../styles/keyframes.scss";
+@import "../../../styles/colors.scss";
+
 .categories {
     height: 100%;
     width: 100%;
@@ -18,19 +21,19 @@
     justify-content: space-between;
 
     &.active {
-        color: #fff;
+        color: $white;
-        background: #3f88c5;
+        background: $blue;
-        border-color: #3f88c5;
+        border-color: $blue;
     }
 
     &:hover:not(.active) {
-        color: #3f88c5;
+        color: $blue;
-        background: #f0eef6;
+        background: $white;
-        border-bottom: 2px solid #3f88c5;
+        border-bottom: 2px solid $blue;
     }
 
     &.active .menu-item .option-edit svg {
-        fill: #fff;
+        fill: $white;
     }
 
     & .content {
@@ -49,7 +52,7 @@
         & .links-count {
             min-width: fit-content;
             font-size: 0.85em;
-            color: #bbb;
+            color: $grey;
         }
     }
     &:hover .content {

components/SideMenu/Favorites/favorites.module.scss

@@ -1,3 +1,5 @@
+@import "../../../styles/colors.scss";
+
 .favorites {
     height: auto;
     width: 100%;
@@ -8,17 +10,17 @@
         text-transform: uppercase;
         font-size: 0.85em;
         font-weight: 500;
-        color: #bbb;
+        color: $grey;
         margin-bottom: 5px;
     }
 }
 
 .favorites ul.items li.item {
     width: 100%;
-    background-color: #fff;
+    background-color: $white;
     padding: 0;
-    border: 1px solid #dadce0;
+    border: 1px solid $lightest-grey;
-    border-bottom: 2px solid #dadce0;
+    border-bottom: 2px solid $lightest-grey;
     border-radius: 3px;
     transition: 0.15s;
 
@@ -33,7 +35,7 @@
     }
 
     & .category {
-        color: #bbb;
+        color: $grey;
         font-size: 0.85em;
     }
 
@@ -42,14 +44,14 @@
     }
 
     &.active {
-        color: #fff;
+        color: $white;
-        background: #3f88c5;
+        background: $blue;
-        border-color: #3f88c5;
+        border-color: $blue;
     }
 
     &:hover:not(.active) {
-        color: #3f88c5;
+        color: $blue;
-        background: #f0eef6;
+        background: $light-grey;
-        border-bottom: 2px solid #3f88c5;
+        border-bottom: 2px solid $blue;
     }
 }

components/SideMenu/UserCard/user-card.module.scss

@@ -1,10 +1,12 @@
+@import "../../../styles/colors.scss";
+
 .user-card-wrapper {
     user-select: none;
     height: fit-content;
     width: 100%;
-    color: #333;
+    color: $black;
-    background-color: #fff;
+    background-color: $white;
-    border: 1px solid #dadce0;
+    border: 1px solid $lightest-grey;
     padding: 7px 12px;
     display: flex;
     justify-content: space-between;
@@ -22,7 +24,7 @@
 
     & button {
         cursor: pointer;
-        color: #3d7bab;
+        color: $blue;
         display: flex;
         transition: 0.15s;
 

components/SideMenu/sidemenu.module.scss

@@ -1,8 +1,10 @@
+@import "../../styles/colors.scss";
+
 .side-menu {
     height: 100%;
     width: 300px;
     padding: 0 25px 0 10px;
-    border-right: 1px solid #dadce0;
+    border-right: 1px solid $lightest-grey;
     margin-right: 15px;
     display: flex;
     align-items: center;

styles/colors.scss

@@ -0,0 +1,18 @@
+$lightest-blue: #d3e8fa;
+$light-blue: #82c5fede;
+$blue: #3f88c5;
+$dark-blue: #005aa5;
+
+$white: #fff;
+
+$lightest-grey: #dadce0;
+$light-grey: #f0eef6;
+$grey: #bbb;
+
+$black: #333;
+
+$light-red: #ffbabab9;
+$red: #d8000c;
+
+$light-green: #c1ffbab9;
+$green: green;

styles/create.module.scss

@@ -1,3 +1,6 @@
+@import "keyframes.scss";
+@import "colors.scss";
+
 .create-app {
     height: fit-content;
     width: 680px;
@@ -6,7 +9,7 @@
     gap: 15px;
 
     & h2 {
-        color: #3f88c5;
+        color: $blue;
     }
 
     & form {
@@ -29,13 +32,3 @@
         width: 100%;
     }
 }
-
-@keyframes fadein {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}

styles/error-page.module.scss

@@ -1,3 +1,5 @@
+@import "keyframes.scss";
+
 .App {
     height: 100%;
     display: flex;
@@ -24,13 +26,3 @@
         padding: 0;
     }
 }
-
-@keyframes fadein {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}

styles/globals.scss

@@ -1,3 +1,6 @@
+@import "keyframes.scss";
+@import "colors.scss";
+
 * {
 	box-sizing: border-box;
 	outline: 0;
@@ -9,8 +12,8 @@ html,
 body {
 	height: 100%;
 	width: 100%;
-	color: #111;
+	color: $black;
-	background-color: #f0eef6;
+	background-color: $light-grey;
 	font-family: "Poppins", sans-serif;
 	padding: 0;
 	margin: 0;
@@ -36,15 +39,15 @@ body {
 
 a {
 	width: fit-content;
-	color: #3f88c5;
+	color: $blue;
 	border-bottom: 1px solid transparent;
 	text-decoration: none;
 	transition: 0.15s;
 
 	&:hover,
 	&:focus {
-		color: #3d7bab;
+		color: $dark-blue;
-		border-bottom: 1px solid #3d7bab;
+		border-bottom: 1px solid $dark-blue;
 	}
 }
 
@@ -54,7 +57,7 @@ h3,
 h4,
 h5,
 h6 {
-	color: #3f88c5;
+	color: $blue;
 }
 
 ul,
@@ -69,27 +72,27 @@ li {
 
 /* Track */
 ::-webkit-scrollbar-track {
-	background: #eee;
+	background: $light-grey;
 	border-radius: 2px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-	background: #3f88c5;
+	background: $blue;
 	border-radius: 2px;
 
 	&:hover {
-		background: #1e5c8f;
+		background: $dark-blue;
 	}
 }
 
 button:not(.reset) {
 	cursor: pointer;
 	width: 100%;
-	color: #fff;
+	color: $white;
-	background: #3f88c5;
+	background: $blue;
 	padding: 10px;
-	border: 1px solid #3f88c5;
+	border: 1px solid $blue;
 	border-radius: 3px;
 	transition: 0.15s;
 
@@ -99,18 +102,18 @@ button:not(.reset) {
 	}
 
 	&:not(:disabled):hover {
-		box-shadow: #105b97 0 0 3px 1px;
+		box-shadow: $dark-blue 0 0 3px 1px;
-		background: #105b97;
+		background: $dark-blue;
-		color: #fff;
+		color: $white;
 	}
 }
 button.red-btn {
 	cursor: pointer;
 	width: 100%;
-	color: #fff;
+	color: $white;
-	background: red;
+	background: $red;
 	padding: 10px;
-	border: 1px solid red;
+	border: 1px solid $red;
 	border-radius: 3px;
 	transition: 0.15s;
 
@@ -120,29 +123,29 @@ button.red-btn {
 	}
 
 	&:not(:disabled):hover {
-		box-shadow: red 0 0 3px 1px;
+		box-shadow: $red 0 0 3px 1px;
-		background: red;
+		background: $red;
-		border: 1px solid #ffbabab9;
+		border: 1px solid $light-red;
-		color: #fff;
+		color: $white;
 	}
 }
 
 input:not(.nostyle) {
-	color: #333;
+	color: $black;
-	background: #fff;
+	background: $white;
 	padding: 10px;
-	border: 1px solid #dadce0;
+	border: 1px solid $lightest-grey;
-	border-bottom: 3px solid #dadce0;
+	border-bottom: 3px solid $lightest-grey;
 	transition: 0.15s;
 
 	&:focus {
-		border-bottom: 3px solid #3f88c5;
+		border-bottom: 3px solid $blue;
 	}
 }
 
 input::placeholder {
 	font-style: italic;
-	color: #dadce0;
+	color: $lightest-grey;
 }
 
 .input-field {
@@ -160,15 +163,15 @@ input::placeholder {
 }
 
 select:not(.nostyle) {
-	color: #333;
+	color: $black;
-	background: #fff;
+	background: $white;
 	padding: 10px;
-	border: 1px solid #dadce0;
+	border: 1px solid $lightest-grey;
-	border-bottom: 3px solid #dadce0;
+	border-bottom: 3px solid $lightest-grey;
 	transition: 0.15s;
 
 	&:focus {
-		border-bottom: 3px solid #3f88c5;
+		border-bottom: 3px solid $blue;
 	}
 }
 
@@ -185,13 +188,3 @@ select:not(.nostyle) {
 		width: 100%;
 	}
 }
-
-@keyframes fadein {
-	0% {
-		opacity: 0;
-	}
-
-	100% {
-		opacity: 1;
-	}
-}

styles/keyframes.scss

@@ -0,0 +1,20 @@
+@keyframes fadein {
+    0% {
+        transform: translateX(-15px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes rotate {
+    to {
+        transform: rotate(0deg);
+    }
+    from {
+        transform: rotate(360deg);
+    }
+}

styles/login.module.scss

@@ -1,3 +1,6 @@
+@import "keyframes.scss";
+@import "colors.scss";
+
 .wrapper {
     height: 100%;
     width: 480px;
@@ -26,8 +29,8 @@
         text-align: center;
         font-style: italic;
         font-size: 0.9em;
-        color: #d8000c;
+        color: $red;
-        background-color: #ffbabab9;
+        background-color: $light-red;
         padding: 10px;
         border-radius: 3px;
         animation: fadein 250ms both;
@@ -39,13 +42,3 @@
         width: 100%;
     }
 }
-
-@keyframes fadein {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}