feat: add default btn

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

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/frontend/src/scss/ui/_button.scss b/frontend/src/scss/ui/_button.scss
@@ -1,9 +1,19 @@
-@import '../mixins.scss';
+@import "../mixins.scss";
 
 .button {
-  // TODO
+  width: 170px;
+  height: 54px;
+  border-radius: 4px;
+  background-color: $green-sea;
+  color: $inverse-primary-txt-color;
+  font-family: $primary-font;
+  font-weight: 800;
+  text-transform: uppercase;
+  border: none;
 
-  &__size-s {
-    // TODO
+  &--size-s {
+    width: 122px;
+    height: 40px;
+    text-transform: capitalize;
   }
 }
diff --git a/frontend/src/static/styles.css b/frontend/src/static/styles.css
@@ -471,6 +471,23 @@ template {
 /* =========================
   Layout
 ========================= */
+.button {
+  width: 170px;
+  height: 54px;
+  border-radius: 4px;
+  background-color: #00a9a6;
+  color: #fff;
+  font-family: "Mulish", sans-serif;
+  font-weight: 800;
+  text-transform: uppercase;
+  border: none;
+}
+.button--size-s {
+  width: 122px;
+  height: 40px;
+  text-transform: capitalize;
+}
+
 /* =========================
   Colors
 ========================= */

diff --git a/frontend/src/templates/pages/ui/index.njk b/frontend/src/templates/pages/ui/index.njk
@@ -9,7 +9,9 @@ UI
   <h1>Buttons</h1>
   <div style="display: flex; flex-wrap: wrap; gap: 15px;">
     <button class="button" type="button">Button</button>
-    <button class="button button--size-s" type="button">Button small</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>
     <a class="button" href="#">Button link</a>
     <a class="button button--size-s" href="#">Button link small</a>
   </div>