From c51492c6747f06f373e59feec9d167e284c366d8 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 21 Mar 2024 19:30:11 +0530
Subject: [PATCH] feat: SLA List Item component (#9135)

- Base settings list and list item components.
- SLA list item component.

Fixes: https://linear.app/chatwoot/issue/CW-3126/create-a-sla-list-item-component-with-the-new-design


Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
---
 .../dashboard/assets/scss/_layout.scss        |  5 +-
 .../dashboard/i18n/locale/en/sla.json         | 14 +++-
 .../dashboard/settings/SettingsLayout.vue     |  6 ++
 .../dashboard/settings/SettingsWrapper.vue    |  2 +-
 .../components/BaseSettingsHeader.vue         |  8 ++-
 .../components/BaseSettingsListItem.vue       | 53 +++++++++++++++
 .../sla/components/SLABusinessHoursLabel.vue  | 39 +++++++++++
 .../settings/sla/components/SLAListItem.vue   | 64 +++++++++++++++++++
 .../sla/components/SLAResponseTime.vue        | 36 +++++++++++
 .../FluentIcon/dashboard-icons.json           |  3 +
 tailwind.config.js                            |  5 ++
 11 files changed, 227 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue

diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss
index ea40c1f3a..54a03c403 100644
--- a/app/javascript/dashboard/assets/scss/_layout.scss
+++ b/app/javascript/dashboard/assets/scss/_layout.scss
@@ -1,11 +1,10 @@
 // scss-lint:disable SpaceAfterPropertyColon
-// @import 'shared/assets/fonts/inter';
-
+@import 'shared/assets/fonts/inter';
+// Inter,
 html,
 body {
   font-family:
     'PlusJakarta',
-    Inter,
     -apple-system,
     system-ui,
     BlinkMacSystemFont,
diff --git a/app/javascript/dashboard/i18n/locale/en/sla.json b/app/javascript/dashboard/i18n/locale/en/sla.json
index d2a4f1d2a..dcf8d2dca 100644
--- a/app/javascript/dashboard/i18n/locale/en/sla.json
+++ b/app/javascript/dashboard/i18n/locale/en/sla.json
@@ -19,7 +19,19 @@
         "NRT",
         "RT",
         "Business Hours"
-      ]
+      ],
+      "BUSINESS_HOURS_ON": "Business hours on",
+      "BUSINESS_HOURS_OFF": "Business hours off",
+      "RESPONSE_TYPES": {
+        "FRT": "First response time threshold",
+        "NRT": "Next response time threshold",
+        "RT": "Resolution time threshold",
+        "SHORT_HAND": {
+          "FRT": "FRT",
+          "NRT": "NRT",
+          "RT": "RT"
+        }
+      }
     },
     "FORM": {
       "NAME": {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
new file mode 100644
index 000000000..6dd3c306b
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="flex flex-col w-full h-full gap-10 font-inter">
+    <slot name="header" />
+    <slot name="body" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
index 293a093af..3f5bf16f9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="flex flex-col w-full h-full px-5 pt-8 m-0 overflow-auto bg-white sm:px-16 sm:pt-16 dark:bg-slate-900"
+    class="flex flex-col w-full h-full px-5 pt-8 pb-3 m-0 overflow-auto bg-white sm:px-16 sm:pt-16 dark:bg-slate-900"
   >
     <div class="flex items-start max-w-[900px] w-full">
       <keep-alive v-if="keepAlive">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index a888b5093..e70358cc9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -49,7 +49,7 @@ const openInNewTab = url => {
           </div>
         </div>
         <h1
-          class="text-2xl font-medium tracking-tight text-slate-900 dark:text-slate-25"
+          class="text-2xl font-medium tracking-[-1.5%] text-slate-900 dark:text-slate-25"
         >
           {{ title }}
         </h1>
@@ -63,7 +63,9 @@ const openInNewTab = url => {
     <div
       class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 max-w-[721px] w-full"
     >
-      <p class="mb-0 text-sm font-normal">
+      <p
+        class="mb-0 text-sm font-normal tracking-[0.5%] line-clamp-5 sm:line-clamp-none"
+      >
         <slot name="description">{{ description }}</slot>
       </p>
       <!-- Conditional link -->
@@ -72,7 +74,7 @@ const openInNewTab = url => {
         :href="href"
         target="_blank"
         rel="noopener noreferrer"
-        class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium tracking=[-0.6%] hover:underline"
+        class="sm:inline-flex hidden tracking-[-0.6%] gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium tracking=[-0.6%] hover:underline"
       >
         {{ linkText }}
         <fluent-icon
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
new file mode 100644
index 000000000..005eece80
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
@@ -0,0 +1,53 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50 group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 max-w-[900px] w-full"
+  >
+    <!-- left side section -->
+    <slot name="leftSection">
+      <div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">
+        <div
+          class="flex items-center justify-between w-full gap-3 sm:justify-normal whitespace-nowrap"
+        >
+          <h3
+            class="justify-between text-sm tracking-[-0.6%] font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </h3>
+          <slot name="label" />
+        </div>
+        <p
+          class="text-sm text-slate-600 tracking-[0.5%] dark:text-slate-300 max-w-[400px] w-full line-clamp-2"
+        >
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </p>
+      </div>
+    </slot>
+
+    <!-- right side section -->
+    <slot name="rightSection" />
+
+    <!-- actions section -->
+    <div
+      v-if="$slots.actions"
+      class="absolute flex-col items-center hidden gap-1 border-none ltr:-right-3 rtl:-left-3 top-3 group-hover:flex"
+    >
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
new file mode 100644
index 000000000..8790fe2a8
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLABusinessHoursLabel.vue
@@ -0,0 +1,39 @@
+<script setup>
+defineProps({
+  hasBusinessHours: {
+    type: Boolean,
+    required: true,
+  },
+});
+</script>
+<template>
+  <div
+    class="inline-flex items-center min-w-0 gap-1 px-1.5 sm:px-2 py-1 border border-solid rounded-lg border-slate-75 dark:border-slate-700/50"
+  >
+    <fluent-icon
+      size="14"
+      :icon="hasBusinessHours ? 'alarm-on' : 'alarm-off'"
+      type="outline"
+      class="flex-shrink-0"
+      :class="
+        hasBusinessHours
+          ? 'text-slate-600 dark:text-slate-400'
+          : 'text-slate-300 dark:text-slate-700'
+      "
+    />
+    <span
+      class="hidden text-xs tracking-[0.2%] font-normal truncate sm:block"
+      :class="
+        hasBusinessHours
+          ? 'text-slate-600 dark:text-slate-400'
+          : 'text-slate-300 dark:text-slate-700'
+      "
+    >
+      {{
+        hasBusinessHours
+          ? $t('SLA.LIST.BUSINESS_HOURS_ON')
+          : $t('SLA.LIST.BUSINESS_HOURS_OFF')
+      }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
new file mode 100644
index 000000000..9a5fd0380
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
@@ -0,0 +1,64 @@
+<script setup>
+import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
+import SLAResponseTime from './SLAResponseTime.vue';
+import SLABusinessHoursLabel from './SLABusinessHoursLabel.vue';
+
+defineProps({
+  slaName: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  firstResponse: {
+    type: String,
+    required: true,
+  },
+  nextResponse: {
+    type: String,
+    required: true,
+  },
+  resolutionTime: {
+    type: String,
+    required: true,
+  },
+  hasBusinessHours: {
+    type: Boolean,
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<template>
+  <base-settings-list-item :title="slaName" :description="description">
+    <template #label>
+      <SLA-business-hours-label :has-business-hours="hasBusinessHours" />
+    </template>
+    <template #rightSection>
+      <div
+        class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
+      >
+        <SLA-response-time response-type="FRT" :response-time="firstResponse" />
+        <SLA-response-time response-type="NRT" :response-time="nextResponse" />
+        <SLA-response-time response-type="RT" :response-time="resolutionTime" />
+      </div>
+    </template>
+    <template #actions>
+      <woot-button
+        v-tooltip.top="$t('SLA.FORM.DELETE')"
+        variant="smooth"
+        color-scheme="alert"
+        size="tiny"
+        icon="delete"
+        class-names="grey-btn"
+        :is-loading="isLoading"
+        @click="$emit('click')"
+      />
+    </template>
+  </base-settings-list-item>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
new file mode 100644
index 000000000..a2caaa4e5
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAResponseTime.vue
@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  responseType: {
+    type: String,
+    default: '',
+  },
+  responseTime: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div
+    class="flex flex-row items-start w-full h-full gap-1 sm:items-end sm:px-6 sm:py-2 sm:gap-2 sm:flex-col"
+  >
+    <span
+      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm ltr:pl-1.5 sm:ltr:pl-0 rtl:pr-1.5 sm:rtl:pr-0 text-slate-600 dark:text-slate-300"
+    >
+      <fluent-icon
+        v-tooltip.left="$t(`SLA.LIST.RESPONSE_TYPES.${responseType}`)"
+        size="14"
+        icon="information"
+        type="outline"
+        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+      />
+      {{ $t(`SLA.LIST.RESPONSE_TYPES.SHORT_HAND.${responseType}`) }}
+      <span class="flex sm:hidden">:</span>
+    </span>
+    <span
+      class="text-sm sm:text-2xl font-medium tracking-[-1.5%] text-slate-900 dark:text-slate-25"
+    >
+      {{ responseTime }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index efff6fddf..8c1ba6069 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -2,6 +2,8 @@
   "add-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7Z",
   "add-outline": "M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z",
   "add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
+  "alarm-on-outline": "m10.95 13.7l-1.425-1.425q-.3-.3-.7-.3t-.7.3q-.3.3-.3.713t.3.712l2.125 2.15q.3.3.7.3t.7-.3l4.25-4.25q.3-.3.3-.712t-.3-.713q-.3-.3-.713-.3t-.712.3L10.95 13.7ZM12 22q-1.875 0-3.512-.713t-2.85-1.924q-1.213-1.213-1.925-2.85T3 13q0-1.875.713-3.513t1.924-2.85q1.213-1.212 2.85-1.924T12 4q1.875 0 3.513.713t2.85 1.925q1.212 1.212 1.925 2.85T21 13q0 1.875-.713 3.513t-1.924 2.85q-1.213 1.212-2.85 1.925T12 22Zm0-9ZM2.05 7.3q-.275-.275-.275-.7t.275-.7L4.9 3.05q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7L3.45 7.3q-.275.275-.7.275t-.7-.275Zm19.9 0q-.275.275-.7.275t-.7-.275L17.7 4.45q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l2.85 2.85q.275.275.275.7t-.275.7ZM12 20q2.925 0 4.963-2.038T19 13q0-2.925-2.038-4.963T12 6Q9.075 6 7.037 8.038T5 13q0 2.925 2.038 4.963T12 20Z",
+  "alarm-off-outline": "m19.95 17.25l-1.5-1.5q.275-.675.413-1.313T19 13.1q0-2.9-2.05-5T12 6q-.7 0-1.35.113t-1.3.387L7.85 5q.95-.5 1.988-.75T12 4q1.85 0 3.488.7t2.862 1.938q1.225 1.237 1.938 2.887T21 13.1q0 1.125-.275 2.163t-.775 1.987ZM17.7 4.45q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l2.85 2.85q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L17.7 4.45ZM12 22q-1.85 0-3.488-.7T5.65 19.4q-1.225-1.2-1.938-2.825T3 13.1q0-1.55.463-2.912T4.8 7.7l-.85-.85l-.5.5q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7l.5-.5L1.4 4.3q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l18.4 18.4q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275l-2.45-2.45q-1.125.825-2.487 1.288T12 22Zm0-1.975q1.05 0 2.05-.325t1.85-.9L6.2 9.15q-.575.875-.887 1.888T5 13.1q0 2.9 2.05 4.913T12 20.025Zm-.95-6.05Zm2.85-2.85Z",
   "alert-outline": "M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.25 1.25 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.251 1.251 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5ZM13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145l.006-.147ZM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.004-.225A5.988 5.988 0 0 0 12 3.496Z",
   "archive-outline": "M19.25 3c.966 0 1.75.784 1.75 1.75v2c0 .698-.408 1.3-1 1.581v9.919A3.75 3.75 0 0 1 16.25 22h-8.5A3.75 3.75 0 0 1 4 18.25V8.332A1.75 1.75 0 0 1 3 6.75v-2C3 3.784 3.784 3 4.75 3h14.5Zm-.75 5.5h-13v9.75a2.25 2.25 0 0 0 2.25 2.25h8.5a2.25 2.25 0 0 0 2.25-2.25V8.5Zm-8.5 3h4a.75.75 0 0 1 .102 1.493L14 13h-4a.75.75 0 0 1-.102-1.493L10 11.5h4-4Zm9.25-7H4.75a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h14.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Z",
   "arrow-chevron-left-outline": "M15 17.898c0 1.074-1.265 1.648-2.073.941l-6.31-5.522a1.75 1.75 0 0 1 0-2.634l6.31-5.522c.808-.707 2.073-.133 2.073.941v11.796Z",
@@ -119,6 +121,7 @@
   "headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",
   "image-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z",
   "info-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5Zm-.004 7a.75.75 0 0 1 .744.648l.007.102.003 5.502a.75.75 0 0 1-1.493.102l-.007-.101-.003-5.502a.75.75 0 0 1 .75-.75ZM12 7.003a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997Z",
+  "information-outline": "M12 17q.425 0 .713-.288T13 16v-4q0-.425-.288-.713T12 11q-.425 0-.713.288T11 12v4q0 .425.288.713T12 17Zm0-8q.425 0 .713-.288T13 8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8q0 .425.288.713T12 9Zm0 13q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20Zm0-8Z",
   "key-outline": "M15 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0Zm-2.5-4C9.424 2 7 4.424 7 7.5c0 .397.04.796.122 1.175c.058.27-.008.504-.142.638l-4.54 4.54A1.5 1.5 0 0 0 2 14.915V16.5A1.5 1.5 0 0 0 3.5 18h2A1.5 1.5 0 0 0 7 16.5V16h1a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-.18c.493.134 1.007.18 1.5.18c3.076 0 5.5-2.424 5.5-5.5S15.576 2 12.5 2ZM8 7.5C8 4.976 9.976 3 12.5 3S17 4.976 17 7.5S15.024 12 12.5 12c-.66 0-1.273-.095-1.776-.347A.5.5 0 0 0 10 12.1v.9H9a1 1 0 0 0-1 1v1H7a1 1 0 0 0-1 1v.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.586a.5.5 0 0 1 .146-.353l4.541-4.541c.432-.432.522-1.044.412-1.556A4.619 4.619 0 0 1 8 7.5Z",
   "keyboard-outline": "M19.745 5a2.25 2.25 0 0 1 2.25 2.25v9.505a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 16.755V7.25A2.25 2.25 0 0 1 4.25 5h15.495Zm0 1.5H4.25a.75.75 0 0 0-.75.75v9.505c0 .414.336.75.75.75h15.495a.75.75 0 0 0 .75-.75V7.25a.75.75 0 0 0-.75-.75Zm-12.995 8h10.5a.75.75 0 0 1 .102 1.493L17.25 16H6.75a.75.75 0 0 1-.102-1.493l.102-.007h10.5-10.5ZM16.5 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-5.995 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm6 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM6 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm2.995 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z",
   "library-outline": "M4 3h1c1.054 0 1.918.816 1.995 1.85L7 5v14a2.001 2.001 0 0 1-1.85 1.994L5 21H4a2.001 2.001 0 0 1-1.995-1.85L2 19V5c0-1.054.816-1.918 1.85-1.995L4 3h1-1Zm6 0h1c1.054 0 1.918.816 1.995 1.85L13 5v14a2.001 2.001 0 0 1-1.85 1.994L11 21h-1a2.001 2.001 0 0 1-1.995-1.85L8 19V5c0-1.054.816-1.918 1.85-1.995L10 3h1-1Zm6.974 2c.84 0 1.608.531 1.89 1.346l.047.157 3.015 11.745a2 2 0 0 1-1.296 2.392l-.144.043-.969.248a2.002 2.002 0 0 1-2.387-1.284l-.047-.155-3.016-11.745a2 2 0 0 1 1.298-2.392l.143-.043.968-.248c.166-.043.334-.064.498-.064ZM5 4.5H4a.501.501 0 0 0-.492.41L3.5 5v14c0 .244.177.45.41.492L4 19.5h1c.245 0 .45-.178.492-.41L5.5 19V5a.501.501 0 0 0-.41-.492L5 4.5Zm6 0h-1a.501.501 0 0 0-.492.41L9.5 5v14c0 .244.177.45.41.492l.09.008h1c.245 0 .45-.178.492-.41L11.5 19V5a.501.501 0 0 0-.41-.492L11 4.5Zm5.975 2-.063.004-.063.013-.968.247a.498.498 0 0 0-.376.51l.015.1 3.016 11.745a.5.5 0 0 0 .483.375l.063-.003.062-.012.97-.25a.5.5 0 0 0 .374-.519l-.015-.088-3.015-11.747a.501.501 0 0 0-.483-.375Z",
diff --git a/tailwind.config.js b/tailwind.config.js
index aa7a2a14a..a34650fb5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,6 +26,11 @@ module.exports = {
     './app/views/**/*.html.erb',
   ],
   theme: {
+    extend: {
+      fontFamily: {
+        inter: ['Inter', ...defaultTheme.fontFamily.sans],
+      },
+    },
     fontSize: {
       ...defaultTheme.fontSize,
       xxs: '0.625rem',