Merge pull request #3 from CareerPlug/CP-9637

CP-9637 - Update button styles and add font family

app/javascript/application.scss

@@ -4,6 +4,10 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+* {
+  font-family: 'Roboto', sans-serif;
+}
+
 a[href],
 input[type='checkbox'],
 input[type='submit'],
@@ -45,6 +49,10 @@ button[disabled] .enabled {
 
 .btn {
   @apply no-animation;
+  height: 2.3rem;
+  min-height: 2.3rem;
+  text-transform: none;
+  font-weight: 400;
 }
 
 .base-input {
@@ -56,7 +64,19 @@ button[disabled] .enabled {
 }
 
 .base-button {
-  @apply btn btn-primary text-white text-base;
+  @apply btn btn-outline text-sm;
+  border-color: #004FCC;
+  color: #004FCC;
+  padding: 6px 12px;
+}
+
+.primary-button {
+  @apply btn btn-primary text-white text-sm;
+  padding: 6px 12px;
+}
+
+label.primary-button {
+  padding: 10px;
 }
 
 .btn-outline {

app/javascript/template_builder/builder.vue

@@ -98,7 +98,7 @@
             class="flex"
           >
             <button
-              class="base-button !rounded-r-none !pr-2"
+              class="primary-button !rounded-r-none !pr-2"
               :class="{ disabled: isSaving }"
               v-bind="isSaving ? { disabled: true } : {}"
               @click.prevent="onSaveClick"
@@ -119,7 +119,7 @@
             <div class="dropdown dropdown-end">
               <label
                 tabindex="0"
-                class="base-button !rounded-l-none !pl-1 !pr-2 !border-l-neutral-500"
+                class="primary-button !rounded-l-none !pl-1 !pr-2 !border-l-neutral-500"
               >
                 <span class="text-sm align-text-top">
                   <IconChevronDown class="w-5 h-5 flex-shrink-0" />
@@ -353,7 +353,7 @@
           @change="save"
         />
         <div
-          class="sticky bottom-0 py-2 space-y-2"
+          class="sticky bottom-0 py-1 space-y-2"
           :style="{ backgroundColor }"
         >
           <Upload

tailwind.config.js

@@ -17,7 +17,7 @@ module.exports = {
           'base-300': '#e7e2df',
           'base-content': 'rgb(73, 75, 80)',
           'font-size': '16px',
-          '--rounded-btn': '4px',
+          '--rounded-btn': '5px',
           '--tab-border': '2px',
           '--tab-radius': '.5rem'
         }