From ab2b6b589a74686ff8b16ea95a1a6f6844037a9b Mon Sep 17 00:00:00 2001
From: Giga Chubinidze <giga@scinote.net>
Date: Wed, 24 Jan 2024 12:47:45 +0400
Subject: [PATCH 1/2] Implement button examples [SCI-10012]

---
 app/views/design_elements/_button.html.erb | 554 +++++++++++++++++++++
 app/views/design_elements/index.html.erb   |   2 +
 2 files changed, 556 insertions(+)
 create mode 100644 app/views/design_elements/_button.html.erb

diff --git a/app/views/design_elements/_button.html.erb b/app/views/design_elements/_button.html.erb
new file mode 100644
index 000000000..ed0e2b7bc
--- /dev/null
+++ b/app/views/design_elements/_button.html.erb
@@ -0,0 +1,554 @@
+<h1>Button</h1>
+<div class="buttons">
+  <div class="primary">
+    <br>
+    <label>Primary, large</label>
+    <br>
+    <button type="button" class="btn btn-primary btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary, medium</label>
+    <br>
+    <button type="button" class="btn btn-primary">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary, small</label>
+    <br>
+    <button type="button" class="btn btn-primary btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary, x-small</label>
+    <br>
+    <button type="button" class="btn btn-primary btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="secondary">
+    <br>
+    <label>Secondary, large</label>
+    <br>
+    <button type="button" class="btn btn-secondary btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary, medium</label>
+    <br>
+    <button type="button" class="btn btn-secondary">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary, small</label>
+    <br>
+    <button type="button" class="btn btn-secondary btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary, x-small</label>
+    <br>
+    <button type="button" class="btn btn-secondary btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="tertiary">
+    <br>
+    <label>Tertiary, large</label>
+    <br>
+    <button type="button" class="btn btn-tertiary btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary, medium</label>
+    <br>
+    <button type="button" class="btn btn-tertiary">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary, small</label>
+    <br>
+    <button type="button" class="btn btn-tertiary btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary, x-small</label>
+    <br>
+    <button type="button" class="btn btn-tertiary btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="delete">
+    <br>
+    <label>Delete, large</label>
+    <br>
+    <button type="button" class="btn btn-danger btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete, medium</label>
+    <br>
+    <button type="button" class="btn btn-danger ">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete, small</label>
+    <br>
+    <button type="button" class="btn btn-danger btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete, x-small</label>
+    <br>
+    <button type="button" class="btn btn-danger btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="primary-disabled">
+    <br>
+    <label>Primary, disabled large</label>
+    <br>
+    <button type="button" class="disabled btn btn-primary btn-lg" disabled>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary, disabled medium</label>
+    <br>
+    <button type="button" class="disabled btn btn-primary">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary, disabled small</label>
+    <br>
+    <button type="button" class="disabled btn btn-primary btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary, disabled x-small</label>
+    <br>
+    <button type="button" class="disabled btn btn-primary btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="secondary-disabled">
+    <br>
+    <label>Secondary, disabled large</label>
+    <br>
+    <button type="button" class="disabled btn btn-secondary btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary, disabled medium</label>
+    <br>
+    <button type="button" class="disabled btn btn-secondary">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary, disabled small</label>
+    <br>
+    <button type="button" class="disabled btn btn-secondary btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary, disabled x-small</label>
+    <br>
+    <button type="button" class="disabled btn btn-secondary btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="tertiary">
+    <br>
+    <label>Tertiary, disabled large</label>
+    <br>
+    <button type="button" class="disabled btn btn-tertiary btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary, disabled medium</label>
+    <br>
+    <button type="button" class="disabled btn btn-tertiary ">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary, disabled small</label>
+    <br>
+    <button type="button" class="disabled btn btn-tertiary btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary, disabled x-small</label>
+    <br>
+    <button type="button" class="disabled btn btn-tertiary btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="delete-disabled">
+    <br>
+    <label>Delete, disabled large</label>
+    <br>
+    <button type="button" class="disabled btn btn-danger btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete, disabled medium</label>
+    <br>
+    <button type="button" class="disabled btn btn-danger">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete, disabled small</label>
+    <br>
+    <button type="button" class="disabled btn btn-danger btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete, disabled x-small</label>
+    <br>
+    <button type="button" class="disabled btn btn-danger btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+      <span><%= 'Button' %><span>
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="primary-icon">
+    <br>
+    <label>Primary icon, large</label>
+    <br>
+    <button type="button" class="btn btn-primary icon-btn btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary icon, medium</label>
+    <br>
+    <button type="button" class="btn btn-primary icon-btn">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary icon, small</label>
+    <br>
+    <button type="button" class="btn btn-primary icon-btn btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary icon, x-small</label>
+    <br>
+    <button type="button" class="btn btn-primary icon-btn btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="secondary-icon">
+    <br>
+    <label>Secondary icon, large</label>
+    <br>
+    <button type="button" class="btn btn-secondary icon-btn btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary icon, medium</label>
+    <br>
+    <button type="button" class="btn btn-secondary icon-btn">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary icon, small</label>
+    <br>
+    <button type="button" class="btn btn-secondary icon-btn btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary icon, x-small</label>
+    <br>
+    <button type="button" class="btn btn-secondary icon-btn btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="tertiary-icon">
+    <br>
+    <label>Tertiary icon, large</label>
+    <br>
+    <button type="button" class="btn btn-tertiary icon-btn btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary icon, medium</label>
+    <br>
+    <button type="button" class="btn btn-tertiary icon-btn">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary icon, small</label>
+    <br>
+    <button type="button" class="btn btn-tertiary icon-btn btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary icon, x-small</label>
+    <br>
+    <button type="button" class="btn btn-tertiary icon-btn btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="primary-icon-disabled">
+    <br>
+    <label>Primary icon disabled, large</label>
+    <br>
+    <button type="button" class="disabled btn btn-primary icon-btn btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary icon disabled, medium</label>
+    <br>
+    <button type="button" class="disabled btn btn-primary icon-btn">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary icon disabled, small</label>
+    <br>
+    <button type="button" class="disabled btn btn-primary icon-btn btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Primary icon disabled, x-small</label>
+    <br>
+    <button type="button" class="disabled btn btn-primary icon-btn btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="secondary-icon-disabled">
+    <br>
+    <label>Secondary icon disabled, large</label>
+    <br>
+    <button type="button" class="disabled btn btn-secondary icon-btn btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary icon disabled, medium</label>
+    <br>
+    <button type="button" class="disabled btn btn-secondary icon-btn">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary icon disabled, small</label>
+    <br>
+    <button type="button" class="disabled btn btn-secondary icon-btn btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Secondary icon disabled, x-small</label>
+    <br>
+    <button type="button" class="disabled btn btn-secondary icon-btn btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="tertiary-icon-disabled">
+    <br>
+    <label>Tertiary icon disabled, large</label>
+    <br>
+    <button type="button" class="disabled btn btn-tertiary icon-btn btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary icon disabled, medium</label>
+    <br>
+    <button type="button" class="disabled btn btn-tertiary icon-btn">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary icon disabled, small</label>
+    <br>
+    <button type="button" class="disabled btn btn-tertiary icon-btn btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Tertiary icon disabled, x-small</label>
+    <br>
+    <button type="button" class="disabled btn btn-tertiary icon-btn btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="delete-icon-disabled">
+    <br>
+    <label>Delete icon disabled, large</label>
+    <br>
+    <button type="button" class="disabled btn btn-danger icon-btn btn-lg">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete icon disabled, medium</label>
+    <br>
+    <button type="button" class="disabled btn btn-danger icon-btn">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete icon disabled, small</label>
+    <br>
+    <button type="button" class="disabled btn btn-danger icon-btn btn-sm">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+    <br>
+    <label>Delete icon disabled, x-small</label>
+    <br>
+    <button type="button" class="disabled btn btn-danger icon-btn btn-xs">
+      <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
+    </button>
+    <br>
+  </div>
+  <div class="text-buttons">
+    <button class="btn btn-light icon-btn sn-science-blue has-unseen">
+      All
+    </button>
+  </div>
+</div>
+
+<style>
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.buttons > div {
+  margin: 0 10px;
+  box-sizing: border-box;
+}
+
+.has-unseen {
+  &::after {
+    align-items: center;
+    background-color: var(--sn-science-blue);
+    border-radius: .5rem;
+    color: var(--sn-white);
+    content: attr(data-unseen);
+    display: flex;
+    font-size: 10px;
+    height: 1rem;
+    justify-content: center;
+    left: 1.25rem;
+    min-width: 1rem;
+    padding: 0 .25rem;
+    position: absolute;
+    top: 0;
+    white-space: nowrap;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/views/design_elements/index.html.erb b/app/views/design_elements/index.html.erb
index fbc94ae36..406d13567 100644
--- a/app/views/design_elements/index.html.erb
+++ b/app/views/design_elements/index.html.erb
@@ -1 +1,3 @@
 <%= render partial: 'select' %>
+
+<%= render partial: 'button' %>

From 171770a7d3a77c16a264fdf86245af83d5b772af Mon Sep 17 00:00:00 2001
From: Giga Chubinidze <giga@scinote.net>
Date: Mon, 29 Jan 2024 12:49:55 +0400
Subject: [PATCH 2/2] Using tailwind [SCI-10012]

---
 app/views/design_elements/_button.html.erb | 526 ++++++++++-----------
 1 file changed, 258 insertions(+), 268 deletions(-)

diff --git a/app/views/design_elements/_button.html.erb b/app/views/design_elements/_button.html.erb
index ed0e2b7bc..fbc9c17af 100644
--- a/app/views/design_elements/_button.html.erb
+++ b/app/views/design_elements/_button.html.erb
@@ -1,537 +1,527 @@
 <h1>Button</h1>
-<div class="buttons">
-  <div class="primary">
-    <br>
+<div class="buttons flex flex-wrap">
+  <div class="mb-4 primary mx-2 box-border mb-4">
+
     <label>Primary, large</label>
-    <br>
-    <button type="button" class="btn btn-primary btn-lg">
+
+    <button type="button" class="block btn btn-primary btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary, medium</label>
-    <br>
-    <button type="button" class="btn btn-primary">
+
+    <button type="button" class="block btn btn-primary">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary, small</label>
-    <br>
-    <button type="button" class="btn btn-primary btn-sm">
+
+    <button type="button" class="block btn btn-primary btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary, x-small</label>
-    <br>
-    <button type="button" class="btn btn-primary btn-xs">
+
+    <button type="button" class="block btn btn-primary btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="secondary">
-    <br>
+  <div class="secondary mx-2 box-border mb-4">
+
     <label>Secondary, large</label>
-    <br>
-    <button type="button" class="btn btn-secondary btn-lg">
+
+    <button type="button" class="block btn btn-secondary btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary, medium</label>
-    <br>
-    <button type="button" class="btn btn-secondary">
+
+    <button type="button" class="block btn btn-secondary">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary, small</label>
-    <br>
-    <button type="button" class="btn btn-secondary btn-sm">
+
+    <button type="button" class="block btn btn-secondary btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary, x-small</label>
-    <br>
-    <button type="button" class="btn btn-secondary btn-xs">
+
+    <button type="button" class="block btn btn-secondary btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="tertiary">
-    <br>
+  <div class="tertiary mx-2 box-border mb-4">
+
     <label>Tertiary, large</label>
-    <br>
-    <button type="button" class="btn btn-tertiary btn-lg">
+
+    <button type="button" class="block btn btn-tertiary btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary, medium</label>
-    <br>
-    <button type="button" class="btn btn-tertiary">
+
+    <button type="button" class="block btn btn-tertiary">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary, small</label>
-    <br>
-    <button type="button" class="btn btn-tertiary btn-sm">
+
+    <button type="button" class="block btn btn-tertiary btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary, x-small</label>
-    <br>
-    <button type="button" class="btn btn-tertiary btn-xs">
+
+    <button type="button" class="block btn btn-tertiary btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="delete">
-    <br>
+  <div class="delete mx-2 box-border mb-4">
+
     <label>Delete, large</label>
-    <br>
-    <button type="button" class="btn btn-danger btn-lg">
+
+    <button type="button" class="block btn btn-danger btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete, medium</label>
-    <br>
-    <button type="button" class="btn btn-danger ">
+
+    <button type="button" class="block btn btn-danger ">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete, small</label>
-    <br>
-    <button type="button" class="btn btn-danger btn-sm">
+
+    <button type="button" class="block btn btn-danger btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete, x-small</label>
-    <br>
-    <button type="button" class="btn btn-danger btn-xs">
+
+    <button type="button" class="block btn btn-danger btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="primary-disabled">
-    <br>
+  <div class="primary-disabled mx-2 box-border mb-4">
+
     <label>Primary, disabled large</label>
-    <br>
-    <button type="button" class="disabled btn btn-primary btn-lg" disabled>
+
+    <button type="button" class="block disabled btn btn-primary btn-lg" disabled>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary, disabled medium</label>
-    <br>
-    <button type="button" class="disabled btn btn-primary">
+
+    <button type="button" class="block disabled btn btn-primary">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary, disabled small</label>
-    <br>
-    <button type="button" class="disabled btn btn-primary btn-sm">
+
+    <button type="button" class="block disabled btn btn-primary btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary, disabled x-small</label>
-    <br>
-    <button type="button" class="disabled btn btn-primary btn-xs">
+
+    <button type="button" class="block disabled btn btn-primary btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="secondary-disabled">
-    <br>
+  <div class="secondary-disabled mx-2 box-border mb-4">
+
     <label>Secondary, disabled large</label>
-    <br>
-    <button type="button" class="disabled btn btn-secondary btn-lg">
+
+    <button type="button" class="block disabled btn btn-secondary btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary, disabled medium</label>
-    <br>
-    <button type="button" class="disabled btn btn-secondary">
+
+    <button type="button" class="block disabled btn btn-secondary">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary, disabled small</label>
-    <br>
-    <button type="button" class="disabled btn btn-secondary btn-sm">
+
+    <button type="button" class="block disabled btn btn-secondary btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary, disabled x-small</label>
-    <br>
-    <button type="button" class="disabled btn btn-secondary btn-xs">
+
+    <button type="button" class="block disabled btn btn-secondary btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="tertiary">
-    <br>
+  <div class="tertiary mx-2 box-border mb-4">
+
     <label>Tertiary, disabled large</label>
-    <br>
-    <button type="button" class="disabled btn btn-tertiary btn-lg">
+
+    <button type="button" class="block disabled btn btn-tertiary btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary, disabled medium</label>
-    <br>
-    <button type="button" class="disabled btn btn-tertiary ">
+
+    <button type="button" class="block disabled btn btn-tertiary ">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary, disabled small</label>
-    <br>
-    <button type="button" class="disabled btn btn-tertiary btn-sm">
+
+    <button type="button" class="block disabled btn btn-tertiary btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary, disabled x-small</label>
-    <br>
-    <button type="button" class="disabled btn btn-tertiary btn-xs">
+
+    <button type="button" class="block disabled btn btn-tertiary btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="delete-disabled">
-    <br>
+  <div class="delete-disabled mx-2 box-border mb-4">
+
     <label>Delete, disabled large</label>
-    <br>
-    <button type="button" class="disabled btn btn-danger btn-lg">
+
+    <button type="button" class="block disabled btn btn-danger btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete, disabled medium</label>
-    <br>
-    <button type="button" class="disabled btn btn-danger">
+
+    <button type="button" class="block disabled btn btn-danger">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete, disabled small</label>
-    <br>
-    <button type="button" class="disabled btn btn-danger btn-sm">
+
+    <button type="button" class="block disabled btn btn-danger btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete, disabled x-small</label>
-    <br>
-    <button type="button" class="disabled btn btn-danger btn-xs">
+
+    <button type="button" class="block disabled btn btn-danger btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
       <span><%= 'Button' %><span>
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="primary-icon">
-    <br>
+  <div class="primary-icon mx-2 box-border mb-4">
+
     <label>Primary icon, large</label>
-    <br>
-    <button type="button" class="btn btn-primary icon-btn btn-lg">
+
+    <button type="button" class="block btn btn-primary icon-btn btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary icon, medium</label>
-    <br>
-    <button type="button" class="btn btn-primary icon-btn">
+
+    <button type="button" class="block btn btn-primary icon-btn">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary icon, small</label>
-    <br>
-    <button type="button" class="btn btn-primary icon-btn btn-sm">
+
+    <button type="button" class="block btn btn-primary icon-btn btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary icon, x-small</label>
-    <br>
-    <button type="button" class="btn btn-primary icon-btn btn-xs">
+
+    <button type="button" class="block btn btn-primary icon-btn btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="secondary-icon">
-    <br>
+  <div class="secondary-icon mx-2 box-border mb-4">
+
     <label>Secondary icon, large</label>
-    <br>
-    <button type="button" class="btn btn-secondary icon-btn btn-lg">
+
+    <button type="button" class="block btn btn-secondary icon-btn btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary icon, medium</label>
-    <br>
-    <button type="button" class="btn btn-secondary icon-btn">
+
+    <button type="button" class="block btn btn-secondary icon-btn">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary icon, small</label>
-    <br>
-    <button type="button" class="btn btn-secondary icon-btn btn-sm">
+
+    <button type="button" class="block btn btn-secondary icon-btn btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary icon, x-small</label>
-    <br>
-    <button type="button" class="btn btn-secondary icon-btn btn-xs">
+
+    <button type="button" class="block btn btn-secondary icon-btn btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="tertiary-icon">
-    <br>
+  <div class="tertiary-icon mx-2 box-border mb-4">
+
     <label>Tertiary icon, large</label>
-    <br>
-    <button type="button" class="btn btn-tertiary icon-btn btn-lg">
+
+    <button type="button" class="block btn btn-tertiary icon-btn btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary icon, medium</label>
-    <br>
-    <button type="button" class="btn btn-tertiary icon-btn">
+
+    <button type="button" class="block btn btn-tertiary icon-btn">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary icon, small</label>
-    <br>
-    <button type="button" class="btn btn-tertiary icon-btn btn-sm">
+
+    <button type="button" class="block btn btn-tertiary icon-btn btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary icon, x-small</label>
-    <br>
-    <button type="button" class="btn btn-tertiary icon-btn btn-xs">
+
+    <button type="button" class="block btn btn-tertiary icon-btn btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="primary-icon-disabled">
-    <br>
+  <div class="primary-icon-disabled mx-2 box-border mb-4">
+
     <label>Primary icon disabled, large</label>
-    <br>
-    <button type="button" class="disabled btn btn-primary icon-btn btn-lg">
+
+    <button type="button" class="block disabled btn btn-primary icon-btn btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary icon disabled, medium</label>
-    <br>
-    <button type="button" class="disabled btn btn-primary icon-btn">
+
+    <button type="button" class="block disabled btn btn-primary icon-btn">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary icon disabled, small</label>
-    <br>
-    <button type="button" class="disabled btn btn-primary icon-btn btn-sm">
+
+    <button type="button" class="block disabled btn btn-primary icon-btn btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Primary icon disabled, x-small</label>
-    <br>
-    <button type="button" class="disabled btn btn-primary icon-btn btn-xs">
+
+    <button type="button" class="block disabled btn btn-primary icon-btn btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="secondary-icon-disabled">
-    <br>
+  <div class="secondary-icon-disabled mx-2 box-border mb-4">
+
     <label>Secondary icon disabled, large</label>
-    <br>
-    <button type="button" class="disabled btn btn-secondary icon-btn btn-lg">
+
+    <button type="button" class="block disabled btn btn-secondary icon-btn btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary icon disabled, medium</label>
-    <br>
-    <button type="button" class="disabled btn btn-secondary icon-btn">
+
+    <button type="button" class="block disabled btn btn-secondary icon-btn">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary icon disabled, small</label>
-    <br>
-    <button type="button" class="disabled btn btn-secondary icon-btn btn-sm">
+
+    <button type="button" class="block disabled btn btn-secondary icon-btn btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Secondary icon disabled, x-small</label>
-    <br>
-    <button type="button" class="disabled btn btn-secondary icon-btn btn-xs">
+
+    <button type="button" class="block disabled btn btn-secondary icon-btn btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="tertiary-icon-disabled">
-    <br>
+  <div class="tertiary-icon-disabled mx-2 box-border mb-4">
+
     <label>Tertiary icon disabled, large</label>
-    <br>
-    <button type="button" class="disabled btn btn-tertiary icon-btn btn-lg">
+
+    <button type="button" class="block disabled btn btn-tertiary icon-btn btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary icon disabled, medium</label>
-    <br>
-    <button type="button" class="disabled btn btn-tertiary icon-btn">
+
+    <button type="button" class="block disabled btn btn-tertiary icon-btn">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary icon disabled, small</label>
-    <br>
-    <button type="button" class="disabled btn btn-tertiary icon-btn btn-sm">
+
+    <button type="button" class="block disabled btn btn-tertiary icon-btn btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Tertiary icon disabled, x-small</label>
-    <br>
-    <button type="button" class="disabled btn btn-tertiary icon-btn btn-xs">
+
+    <button type="button" class="block disabled btn btn-tertiary icon-btn btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="delete-icon-disabled">
-    <br>
+  <div class="delete-icon-disabled mx-2 box-border mb-4">
+
     <label>Delete icon disabled, large</label>
-    <br>
-    <button type="button" class="disabled btn btn-danger icon-btn btn-lg">
+
+    <button type="button" class="block disabled btn btn-danger icon-btn btn-lg">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete icon disabled, medium</label>
-    <br>
-    <button type="button" class="disabled btn btn-danger icon-btn">
+
+    <button type="button" class="block disabled btn btn-danger icon-btn">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete icon disabled, small</label>
-    <br>
-    <button type="button" class="disabled btn btn-danger icon-btn btn-sm">
+
+    <button type="button" class="block disabled btn btn-danger icon-btn btn-sm">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
-    <br>
+
+
     <label>Delete icon disabled, x-small</label>
-    <br>
-    <button type="button" class="disabled btn btn-danger icon-btn btn-xs">
+
+    <button type="button" class="block disabled btn btn-danger icon-btn btn-xs">
       <span class="sn-icon sn-icon-new-task" aria-hidden="true"></span>
     </button>
-    <br>
+
   </div>
-  <div class="text-buttons">
-    <button class="btn btn-light icon-btn sn-science-blue has-unseen">
+  <div class="text-button mx-2 box-borders">
+    <button class="block btn btn-light icon-btn sn-science-blue has-unseen">
       All
     </button>
   </div>
 </div>
 
 <style>
-.buttons {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.buttons > div {
-  margin: 0 10px;
-  box-sizing: border-box;
-}
-
 .has-unseen {
   &::after {
     align-items: center;