415 snapshot testing for UI buttons (#458)

* Add font weight to Typography elements

* Add Heading5

* Typography snapshot tests

* Add letterSpacing to Heading 4 and 5

* Update Button padding

* Update Button styling

* Add rounded-lg

* Code style and comments

* Add button tests

* Added loading state color to buttons

* Add default color to text

* Use text class name instead

* Change text

* Add non default color text

* Snapshot for icon

* Default text color into button snap

* Update INatIcon.js

* Add Divider component

* Updates to Tabs UI

* Update color

* Add Divider test

* Show underline only when active

* Tabs snapshot

* Update Button UI

* Revert "Update Button UI"

This reverts commit 5361f57dac.

* Update ActivityCount.js

* Get color from theme in buttons

* Use translated string for hints in Tabs snapshots

* Refactor fct args

* Update Tabs

* Remove async

* Use .each in Button test

* Remove comment

* Structuring

* Remove duplicate application of style defaults

* Remove async from Typography

tailwind.config.js

@@ -9,37 +9,59 @@ module.exports = {
   theme: {
     extend: {
       fontSize: {
-        "3xl": ["26px", {
-          lineHeight: "31px"
-        }
+        "3xl": [
+          "26px",
+          {
+            lineHeight: "31px"
+          }
         ],
-        "2xl": ["22px", {
-          lineHeight: "26px"
-        }
+        "2xl": [
+          "22px",
+          {
+            lineHeight: "26px"
+          }
         ],
-        xl: ["21px", {
-          lineHeight: "25px"
-        }
+        xl: [
+          "21px",
+          {
+            lineHeight: "25px"
+          }
         ],
-        lg: ["19px", {
-          lineHeight: "23px"
-        }
+        lg: [
+          "19px",
+          {
+            lineHeight: "23px"
+          }
         ],
-        base: ["18px", {
-          lineHeight: "22px"
-        }
+        base: [
+          "18px",
+          {
+            lineHeight: "22px"
+          }
         ],
-        md: ["16px", {
-          lineHeight: "18px"
-        }
+        md: [
+          "16px",
+          {
+            lineHeight: "18px"
+          }
         ],
-        sm: ["14px", {
-          lineHeight: "18px"
-        }
+        sm: [
+          "14px",
+          {
+            lineHeight: "18px"
+          }
         ],
-        xs: ["12px", {
-          lineHeight: "14px"
-        }
+        xs: [
+          "12px",
+          {
+            lineHeight: "14px"
+          }
+        ],
+        "2xs": [
+          "8px",
+          {
+            lineHeight: "10px"
+          }
         ]
       },
       height: {
@@ -61,7 +83,8 @@ module.exports = {
       },
       borderRadius: {
         // tried using rem value here, but it wouldn't load on iOS or Android
-        DEFAULT: "7px"
+        DEFAULT: "7px",
+        lg: "8px"
       }
     },
     colors: {
@@ -77,7 +100,7 @@ module.exports = {
       inatGreen: "#77b300",
       inatGreenDisabled: "#cce2a4",
       gray: "#393939",
-      lightGray: "#f5f5f5",
+      lightGray: "#e8e8e8",
       midGray: "#cccccc",
       borderGray: "#d1d1d1",
       grayText: "#999999",