From 57317affbe6a5bfe05b92ccd6cc39d3e22633e67 Mon Sep 17 00:00:00 2001 From: Sonny Date: Fri, 21 Apr 2023 18:55:14 +0200 Subject: [PATCH] refactor: move scss colors & keyframes in files --- .../BlockWrapper/block-wrapper.module.scss | 23 ++---- components/Links/links.module.scss | 44 +++-------- .../message-manager.module.scss | 14 ++-- .../Categories/categories.module.scss | 19 +++-- .../SideMenu/Favorites/favorites.module.scss | 24 +++--- .../SideMenu/UserCard/user-card.module.scss | 10 ++- components/SideMenu/sidemenu.module.scss | 4 +- styles/colors.scss | 18 +++++ styles/create.module.scss | 15 +--- styles/error-page.module.scss | 12 +-- styles/globals.scss | 79 +++++++++---------- styles/keyframes.scss | 20 +++++ styles/login.module.scss | 17 ++-- 13 files changed, 146 insertions(+), 153 deletions(-) create mode 100644 styles/colors.scss create mode 100644 styles/keyframes.scss diff --git a/components/BlockWrapper/block-wrapper.module.scss b/components/BlockWrapper/block-wrapper.module.scss index 3c70f2d..5ae9eda 100644 --- a/components/BlockWrapper/block-wrapper.module.scss +++ b/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-bottom: 2px solid #dadce0; + border: 1px solid $lightest-grey; + 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; - } -} diff --git a/components/Links/links.module.scss b/components/Links/links.module.scss index d8f8f3f..69caa56 100644 --- a/components/Links/links.module.scss +++ b/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; - background-color: #fff; + color: $blue; + 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; - } -} diff --git a/components/MessageManager/message-manager.module.scss b/components/MessageManager/message-manager.module.scss index 1499ea9..cc1395a 100644 --- a/components/MessageManager/message-manager.module.scss +++ b/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; - background-color: #d3e8fa; + color: $dark-blue; + 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; - background-color: #ffbabab9; + color: $red; + 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; - background-color: #c1ffbab9; + color: $green; + background-color: $light-green; padding: 10px; border-radius: 3px; animation: fadein 250ms both; diff --git a/components/SideMenu/Categories/categories.module.scss b/components/SideMenu/Categories/categories.module.scss index 020a804..68ad36a 100644 --- a/components/SideMenu/Categories/categories.module.scss +++ b/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; - background: #3f88c5; - border-color: #3f88c5; + color: $white; + background: $blue; + border-color: $blue; } &:hover:not(.active) { - color: #3f88c5; - background: #f0eef6; - border-bottom: 2px solid #3f88c5; + color: $blue; + background: $white; + 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 { diff --git a/components/SideMenu/Favorites/favorites.module.scss b/components/SideMenu/Favorites/favorites.module.scss index 29a9356..df3062d 100644 --- a/components/SideMenu/Favorites/favorites.module.scss +++ b/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-bottom: 2px solid #dadce0; + border: 1px solid $lightest-grey; + 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; - background: #3f88c5; - border-color: #3f88c5; + color: $white; + background: $blue; + border-color: $blue; } &:hover:not(.active) { - color: #3f88c5; - background: #f0eef6; - border-bottom: 2px solid #3f88c5; + color: $blue; + background: $light-grey; + border-bottom: 2px solid $blue; } } diff --git a/components/SideMenu/UserCard/user-card.module.scss b/components/SideMenu/UserCard/user-card.module.scss index f0f1e12..9992ee8 100644 --- a/components/SideMenu/UserCard/user-card.module.scss +++ b/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; - background-color: #fff; - border: 1px solid #dadce0; + color: $black; + background-color: $white; + 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; diff --git a/components/SideMenu/sidemenu.module.scss b/components/SideMenu/sidemenu.module.scss index 9063339..861e50a 100644 --- a/components/SideMenu/sidemenu.module.scss +++ b/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; diff --git a/styles/colors.scss b/styles/colors.scss new file mode 100644 index 0000000..37d1960 --- /dev/null +++ b/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; diff --git a/styles/create.module.scss b/styles/create.module.scss index 2eef384..ee068e8 100644 --- a/styles/create.module.scss +++ b/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; - } -} diff --git a/styles/error-page.module.scss b/styles/error-page.module.scss index c2a454d..ed2332d 100644 --- a/styles/error-page.module.scss +++ b/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; - } -} diff --git a/styles/globals.scss b/styles/globals.scss index 7827b51..aeca8cc 100644 --- a/styles/globals.scss +++ b/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; - background-color: #f0eef6; + color: $black; + 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; - border-bottom: 1px solid #3d7bab; + color: $dark-blue; + 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; - background: #3f88c5; + color: $white; + 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; - background: #105b97; - color: #fff; + box-shadow: $dark-blue 0 0 3px 1px; + background: $dark-blue; + color: $white; } } button.red-btn { cursor: pointer; width: 100%; - color: #fff; - background: red; + color: $white; + 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; - background: red; - border: 1px solid #ffbabab9; - color: #fff; + box-shadow: $red 0 0 3px 1px; + background: $red; + border: 1px solid $light-red; + color: $white; } } input:not(.nostyle) { - color: #333; - background: #fff; + color: $black; + background: $white; padding: 10px; - border: 1px solid #dadce0; - border-bottom: 3px solid #dadce0; + border: 1px solid $lightest-grey; + 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; - background: #fff; + color: $black; + background: $white; padding: 10px; - border: 1px solid #dadce0; - border-bottom: 3px solid #dadce0; + border: 1px solid $lightest-grey; + 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; - } -} diff --git a/styles/keyframes.scss b/styles/keyframes.scss new file mode 100644 index 0000000..9ebeace --- /dev/null +++ b/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); + } +} diff --git a/styles/login.module.scss b/styles/login.module.scss index 2291f71..3526e26 100644 --- a/styles/login.module.scss +++ b/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; - background-color: #ffbabab9; + color: $red; + 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; - } -}