feat: add default buttons

qase-tms · Jan 12, 2024 · 1c0402b · 1c0402b
1 parent d85b34f
commit 1c0402b
Show file tree

Hide file tree

Showing 7 changed files with 2,185 additions and 6 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,6 +8,7 @@
     "gulp-autoprefixer": "^9.0.0",
     "gulp-nunjucks-render": "^2.2.3",
     "gulp-sass": "^5.1.0",
+    "husky": "^8.0.3",
     "sass": "^1.69.7"
   }
 }
diff --git a/frontend/src/scss/ui/_button.scss b/frontend/src/scss/ui/_button.scss
@@ -11,9 +11,25 @@
   text-transform: uppercase;
   border: none;
 
+  &:hover {
+    background-color: $inverse-primary-bg-color;
+  }
+
   &--size-s {
     width: 122px;
     height: 40px;
     text-transform: capitalize;
+
+    &:hover {
+      background-color: $inverse-primary-bg-color;
+    }
+  }
+
+  &--secondary {
+    background-color: $inverse-primary-bg-color;
+
+    &:hover {
+      background-color: $green-sea;
+    }
   }
 }
diff --git a/frontend/src/static/styles.css b/frontend/src/static/styles.css
@@ -482,11 +482,23 @@ template {
   text-transform: uppercase;
   border: none;
 }
+.button:hover {
+  background-color: #292a35;
+}
 .button--size-s {
   width: 122px;
   height: 40px;
   text-transform: capitalize;
 }
+.button--size-s:hover {
+  background-color: #292a35;
+}
+.button--secondary {
+  background-color: #292a35;
+}
+.button--secondary:hover {
+  background-color: #00a9a6;
+}
 
 /* =========================
   Colors

diff --git a/frontend/src/templates/pages/ui/index.njk b/frontend/src/templates/pages/ui/index.njk
@@ -9,6 +9,7 @@ UI
   <h1>Buttons</h1>
   <div style="display: flex; flex-wrap: wrap; gap: 15px;">
     <button class="button" type="button">Button</button>
+     <button class="button button-secondary" type="button">Button</button>
     <button class="button button--size-s" type="button">Donate <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
   <path d="M8 1.375C8 2.4565 6.59 3.8005 5.8875 4.364C5.77757 4.45213 5.64089 4.50015 5.5 4.50015C5.35911 4.50015 5.22243 4.45213 5.1125 4.364C4.41 3.8 3 2.4565 3 1.375C2.98423 1.02711 3.10689 0.687135 3.34115 0.429453C3.5754 0.17177 3.90219 0.0173592 4.25 0C4.59781 0.0173592 4.9246 0.17177 5.15885 0.429453C5.39311 0.687135 5.51577 1.02711 5.5 1.375C5.48423 1.02711 5.60689 0.687135 5.84115 0.429453C6.0754 0.17177 6.40219 0.0173592 6.75 0C7.09781 0.0173592 7.4246 0.17177 7.65885 0.429453C7.89311 0.687135 8.01577 1.02711 8 1.375ZM11.669 6.175L7.819 10.3795C7.35026 10.8906 6.78033 11.2986 6.14542 11.5776C5.5105 11.8566 4.8245 12.0004 4.131 12H2C1.46957 12 0.960859 11.7893 0.585786 11.4142C0.210714 11.0391 0 10.5304 0 10V7.5C0 6.96957 0.210714 6.46086 0.585786 6.08579C0.960859 5.71071 1.46957 5.5 2 5.5H5.8935C6.05878 5.50032 6.22189 5.53758 6.37092 5.60905C6.51995 5.68052 6.65111 5.78439 6.75483 5.91308C6.85854 6.04176 6.93218 6.192 6.97036 6.35281C7.00854 6.51362 7.0103 6.68093 6.9755 6.8425C6.92137 7.06851 6.79945 7.27258 6.62608 7.42736C6.45271 7.58214 6.23618 7.68024 6.0055 7.7085L3.924 8C3.79281 8.01882 3.67446 8.08895 3.59495 8.19499C3.51545 8.30103 3.4813 8.43429 3.5 8.5655C3.5187 8.69678 3.58878 8.81526 3.69483 8.89487C3.80089 8.97448 3.93422 9.0087 4.0655 8.99L6.1915 8.69C6.69224 8.61625 7.14998 8.36554 7.48176 7.98331C7.81354 7.60108 7.99739 7.11263 8 6.6065C7.99755 6.49948 7.98668 6.39282 7.9675 6.2875L9.7385 4.419C9.97204 4.16612 10.2962 4.01593 10.6401 4.00122C10.984 3.98651 11.3197 4.10848 11.574 4.3405C11.827 4.57236 11.9787 4.89435 11.9965 5.23705C12.0143 5.57976 11.8967 5.91572 11.669 6.1725V6.175Z" fill="white"/>
 </svg></button>

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -1485,6 +1485,11 @@ http-proxy@^1.18.1:
     follow-redirects "^1.0.0"
     requires-port "^1.0.0"
 
+husky@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
+  integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
+
 [email protected]:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"

diff --git a/package.json b/package.json
@@ -25,5 +25,8 @@
     "stylelint-declaration-strict-value": "^1.10.4",
     "stylelint-prettier": "^5.0.0",
     "stylelint-scss": "^6.0.0"
+  },
+  "dependencies": {
+    "gulp": "^4.0.2"
   }
 }