Fix a few rounded buttons (#12895)

We missed a handful of round buttons in the homepage update, which this change addresses. We also omitted one of the styling changes in the original PR which was to make the CTA buttons less cartoonishly large. Wasn't sure if that was intentional, but this adds it back. Fixes #12793.
pulumi · Sep 21, 2024 · b6446a7 · b6446a7
1 parent 06322fc
commit b6446a7
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 102 deletions.
diff --git a/assets/css/bundle.css b/assets/css/bundle.css
diff --git a/assets/css/marketing.css b/assets/css/marketing.css
@@ -1,3 +1,6 @@
+/*!*********************************************************************************************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/_marketing.scss ***!
+  \*********************************************************************************************************************************************************************************************************************/
 /*! tailwindcss v2.2.15 | MIT License | https://tailwindcss.com */
 
 /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

diff --git a/assets/js/bundle.js b/assets/js/bundle.js
diff --git a/assets/js/marketing.js b/assets/js/marketing.js
diff --git a/theme/src/scss/_header.scss b/theme/src/scss/_header.scss
@@ -97,21 +97,19 @@
             @apply hidden;
 
             @screen lg {
-                @apply flex items-center justify-center;
+                @apply flex items-center justify-center rounded-lg;
                 margin-left: 30px;
                 width: 136px;
                 height: 33px;
                 padding: 8px 16px;
 
                 border: 1px solid theme("colors.violet.600");
-                border-radius: 20px;
                 box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12);
 
                 &:hover,
                 &:active {
                     background: linear-gradient(90deg, #be5188 0%, #805ac3 100%) border-box;
                     border-color: transparent;
-                    border-radius: 20px;
                 }
             }
         }
@@ -153,10 +151,6 @@
         .header-btn-primary {
             @include gradient-button;
             @apply py-3 px-6;
-
-            @screen xl {
-                @apply text-lg;
-            }
         }
     }
 

diff --git a/theme/src/scss/_hero.scss b/theme/src/scss/_hero.scss
@@ -84,11 +84,11 @@
 
     .home-hero-btn-primary {
         @include gradient-button;
-        @apply py-4 px-12 text-lg;
+        @apply py-4 px-8;
     }
 
     .home-hero-btn-secondary {
-        @apply py-4 px-12 text-lg;
+        @apply py-4 px-8;
     }
 
     .home-page-hero-content {

diff --git a/theme/src/scss/_hubspot.scss b/theme/src/scss/_hubspot.scss
@@ -95,14 +95,14 @@
         }
 
         input {
-            @apply block py-3 px-4 rounded-full border;
+            @apply block py-3 px-4 rounded-lg border;
 
             @screen md {
                 @apply w-56;
             }
 
             &.hs-button {
-                @apply block btn btn-lg btn border-none py-3 px-6 rounded-full w-auto bg-violet-600 ml-2;
+                @apply block btn btn-lg btn border-none py-3 px-6 rounded-lg w-auto bg-violet-600 ml-2;
             }
 
             &:focus {

diff --git a/theme/src/scss/docs/_docs-top-nav.scss b/theme/src/scss/docs/_docs-top-nav.scss
@@ -51,14 +51,15 @@ nav.actually-docs {
 
         div.get-started {
             a.get-started-header-button {
+                @apply rounded-lg;
+
                 width: auto;
                 height: auto;
                 display: flex;
                 box-shadow: none;
                 color: #131314;
                 padding: 8px 16px;
                 border: 1px solid #805ac3;
-                border-radius: 20px;
 
                 &:hover {
                     color: #fff;