feat: fixing styles for the hubspot form

gravity-ui · Oct 13, 2023 · d05be2a · d05be2a
1 parent b8bb20a
commit d05be2a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -104,7 +104,7 @@
   },
   "peerDependencies": {
     "@doc-tools/transform": "^3.3.2",
-    "@gravity-ui/uikit": "^5.4.1",
+    "@gravity-ui/uikit": "^5.12.0",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
@@ -120,7 +120,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^5.9.1",
+    "@gravity-ui/uikit": "^5.12.2",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-knobs": "^7.0.2",

diff --git a/src/sub-blocks/HubspotForm/HubspotForm.scss b/src/sub-blocks/HubspotForm/HubspotForm.scss
@@ -4,6 +4,7 @@
 $block: '.#{$ns}hubspot-form';
 
 #{$block} {
+    --g-color-line-focus: var(--g-color-text-brand);
     $requiredWidth: 10px;
     $checkbox: 17px;
     $checkboxIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxwYXRoIGQ9Ik0xNS42MjMgMWwtOS4xNSAxMy4xNzQtNC4yODctNC42TDEgMTEuMDMgNi42MiAxNyAxNyAyLjI3IDE1LjYyMyAxeiIgZmlsbD0iIzAwMDAwMCIvPgo8L3N2Zz4K');
@@ -24,6 +25,7 @@ $block: '.#{$ns}hubspot-form';
         & > label {
             color: var(--g-color-text-primary);
             font-size: var(--g-text-body-2-font-size);
+            line-height: var(--g-text-body-2-line-height);
             display: flex;
             width: $fieldLabelWidth;
             max-width: 100%;
@@ -83,7 +85,7 @@ $block: '.#{$ns}hubspot-form';
             input[type='email'],
             textarea {
                 &:focus {
-                    border: 2px solid var(--g-color-base-brand);
+                    border: 2px solid var(--g-color-line-focus);
                     outline: none;
                 }
             }
@@ -107,7 +109,7 @@ $block: '.#{$ns}hubspot-form';
                 padding-right: 30px;
 
                 &:focus {
-                    border: 1px solid var(--g-color-line-generic-active);
+                    border: 1px solid var(--g-color-line-focus);
                 }
             }
 
@@ -157,7 +159,7 @@ $block: '.#{$ns}hubspot-form';
             span:not(.hs-form-required) {
                 color: var(--g-color-text-primary);
                 font-size: var(--g-text-body-2-font-size);
-                line-height: 16px;
+                line-height: var(--g-text-body-2-line-height);
                 padding-left: 7px;
                 margin: 0;
                 flex-grow: 1;
@@ -207,6 +209,9 @@ $block: '.#{$ns}hubspot-form';
                     background-color: #ffeba0;
                 }
             }
+            input[type='checkbox']:focus ~ span::before {
+                outline: 2px solid var(--g-color-line-focus);
+            }
         }
 
         .hs-form-radio-display {
@@ -259,7 +264,15 @@ $block: '.#{$ns}hubspot-form';
         p {
             color: var(--g-color-text-primary);
             @include text-body-2();
-            margin: 0 0 20px;
+            margin: 20px 0;
+        }
+
+        a {
+            @include focusable(0, 'box-shadow');
+            &:focus {
+                outline: 0;
+                border-radius: var(--g-focus-border-radius);
+            }
         }
     }
 
@@ -269,6 +282,10 @@ $block: '.#{$ns}hubspot-form';
         color: var(--g-color-text-danger);
     }
 
+    .legal-consent-container {
+        padding-top: $indentXXXS;
+    }
+
     // wrapper for errors, checkbox list, radio list
     .inputs-list {
         list-style: none;
@@ -336,6 +353,7 @@ $block: '.#{$ns}hubspot-form';
         &:hover {
             background-color: var(--g-color-base-brand-hover);
         }
+        @include focusable(1px);
     }
 
     .grecaptcha-badge {