@seamapi/react 4.1.0 → 4.2.0

package/src/styles/_seam-table.scss

@@ -34,7 +34,7 @@
           justify-content: center;
           margin-right: 4px;
 
-          @media only screen and (width >= 768px) {
+          @media only screen and (width >=768px) {
             width: 40px;
             margin-right: 4px;
           }
@@ -60,7 +60,7 @@
           display: flex;
           flex-wrap: wrap;
 
-          @media only screen and (width >= 768px) {
+          @media only screen and (width >=768px) {
             font-size: 14px;
           }
 
@@ -82,7 +82,7 @@
         align-items: center;
         justify-content: center;
 
-        @media only screen and (width >= 768px) {
+        @media only screen and (width >=768px) {
           margin-right: 12px;
         }
       }
@@ -92,6 +92,7 @@
         justify-content: center;
         align-items: center;
         margin-right: 8px;
+        font-size: 25px;
       }
     }
 

package/src/styles/_snackbar.scss

@@ -40,6 +40,11 @@
       visibility: visible;
     }
 
+    .seam-snackbar-icon-wrap {
+      font-size: 24px;
+      display: inline-flex;
+    }
+
     .seam-snackbar-message-wrap {
       display: flex;
       max-width: 300px;
@@ -101,6 +106,7 @@
       padding: 0;
       cursor: pointer;
       transition: opacity 0.2s ease-in-out;
+      font-size: 24px;
 
       &:hover {
         opacity: 0.75;

package/src/styles/_supported-device-table-manufacturer-keys.scss

@@ -14,6 +14,7 @@
       display: table-cell;
       cursor: pointer;
       padding-left: 10px;
+      font-size: 25px;
     }
   }
 }

package/src/styles/_supported-device-table.scss

@@ -187,6 +187,7 @@ $see-all-button-height: 30px;
 
       svg {
         transform: rotate(90deg);
+        font-size: 25px;
       }
     }
 

package/src/styles/_tables.scss

@@ -88,7 +88,7 @@
       padding: 0;
 
       svg {
-        scale: 0.8333;
+        font-size: 20px;
 
         * {
           fill: colors.$text-gray-1;
@@ -107,7 +107,8 @@
     line-height: 134%;
 
     svg {
-      scale: 0.75;
+      font-size: 19px;
+      margin: 3px 4px;
     }
 
     &.seam-clickable {

package/src/styles/_thermostat.scss

@@ -28,6 +28,10 @@
     align-items: center;
     flex-direction: row;
     gap: 8px;
+
+    .seam-temperature-control-group-block-thermostat-icon {
+      font-size: 24px;
+    }
   }
 }
 
@@ -89,6 +93,10 @@
     align-items: center;
     flex-direction: row;
     gap: 7px;
+
+    svg {
+      font-size: 20px;
+    }
   }
 
   .seam-temperature-range-wrap {
@@ -330,6 +338,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: 14px;
+
+    .seam-climate-setting-status-icon-heat-cool {
+      font-size: 19px;
+    }
   }
 }
 
@@ -541,6 +554,10 @@
     cursor: pointer;
     transition: 0.2s ease;
 
+    svg {
+      font-size: 20px;
+    }
+
     &:hover {
       border-color: colors.$text-gray-2;
     }
@@ -556,6 +573,10 @@
       align-items: center;
       flex-direction: row;
       gap: 10px;
+
+      svg {
+        font-size: 22px;
+      }
     }
 
     .seam-fan-mode-menu-button-text {
@@ -594,6 +615,10 @@
       background-color: colors.$bg-c;
       border-color: colors.$text-gray-2;
     }
+
+    .seam-climate-mode-menu-button-chevron {
+      font-size: 20px;
+    }
   }
 
   .seam-climate-mode-menu-button-icon {
@@ -602,6 +627,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-size: 18px;
   }
 }
 

package/src/styles/_typography.scss

@@ -55,6 +55,12 @@
   }
 }
 
+@mixin font-size {
+  .seam-font-24 {
+    font-size: 24px;
+  }
+}
+
 @mixin all {
   @include headers;
   @include caption;
@@ -62,4 +68,5 @@
   @include font-family;
   @include defaults;
   @include truncated-text;
+  @include font-size;
 }