@seamapi/react 4.1.0 → 4.3.0

package/src/styles/_alert.scss

@@ -80,6 +80,7 @@
     .seam-alert-icon {
       width: 24px;
       height: 24px;
+      font-size: 24px;
     }
 
     .seam-alert-content {

package/src/styles/_buttons.scss

@@ -11,17 +11,15 @@
     line-height: 0;
     width: 30px;
     height: 30px;
+    font-size: 18px;
+    color: colors.$primary;
 
-    &:hover {
-      background: rgb(0 122 252 / 8%);
+    path {
+      fill: colors.$primary;
     }
 
-    svg {
-      scale: 0.75;
-
-      * {
-        fill: colors.$primary;
-      }
+    &:hover {
+      background: rgb(0 122 252 / 8%);
     }
   }
 }

package/src/styles/_checkbox.scss

@@ -11,6 +11,7 @@
     > .seam-checkbox-icon {
       height: 24px;
       width: 24px;
+      font-size: 24px;
     }
 
     > input {

package/src/styles/_device-details.scss

@@ -123,7 +123,7 @@
               }
 
               svg {
-                scale: 0.75;
+                font-size: 18px !important;
                 margin-right: 8px;
               }
 

package/src/styles/_icons.scss

@@ -2,6 +2,8 @@
 
 @mixin all {
   .seam-lock-icon {
+    font-size: 24px;
+
     * {
       fill: colors.$text-gray-1;
     }

package/src/styles/_inputs.scss

@@ -49,7 +49,7 @@
       align-items: center;
 
       svg {
-        scale: 0.8333;
+        font-size: 22px;
       }
 
       &.seam-start {

package/src/styles/_layout.scss

@@ -18,6 +18,7 @@
       top: 50%;
       transform: translate(4px, -50%);
       left: 0;
+      font-size: 24px;
       cursor: pointer;
     }
 
@@ -281,6 +282,7 @@
       justify-content: center;
       align-items: center;
       transition: transform 0.2s ease-in-out;
+      font-size: 24px;
     }
   }
 }

package/src/styles/_main.scss

@@ -29,6 +29,7 @@
 @use './time-zone-picker';
 @use './tab-set';
 @use './noise-sensor';
+@use './seam-editable-device-name';
 
 .seam-components {
   // Reset
@@ -54,6 +55,7 @@
   @include switch.all;
   @include time-zone-picker.all;
   @include tab-set.all;
+  @include seam-editable-device-name.all;
 
   // Components
   @include device-details.all;

package/src/styles/_radio-field.scss

@@ -20,6 +20,7 @@
       > .seam-radio-icon {
         height: 24px;
         width: 24px;
+        font-size: 24px;
       }
 
       > .seam-radio-label {

package/src/styles/_seam-editable-device-name.scss

@@ -0,0 +1,62 @@
+@use './colors';
+
+@mixin all {
+  .seam-editable-device-name {
+    input {
+      border: none;
+      background-color: transparent;
+      font-size: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      line-height: inherit;
+      font-family: inherit;
+      margin: 0;
+      padding: 0;
+      border-bottom: 1px dashed currentcolor;
+      outline: none;
+    }
+
+    &-input-wrapper {
+      display: inline-flex;
+      flex-flow: column nowrap;
+    }
+
+    &-input-error {
+      color: colors.$status-red;
+      font-size: 0.8em;
+      margin-top: 5px;
+    }
+
+    &-icon-wrapper {
+      margin-left: 10px;
+      display: inline-flex;
+      flex-flow: row nowrap;
+      gap: 5px;
+    }
+
+    &-icon-button {
+      display: inline-flex;
+      padding: 0;
+      margin: 0;
+      background: none;
+      border: none;
+      width: fit-content;
+      cursor: pointer;
+      transform-origin: center;
+      border-radius: 2px;
+
+      path {
+        fill: currentcolor;
+      }
+
+      &:hover {
+        background-color: currentcolor;
+        box-shadow: 0 0 0 2px currentcolor;
+
+        path {
+          fill: white;
+        }
+      }
+    }
+  }
+}

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;
 }