From dda2978a6b7772f833b98e66c5e6da1c38743b7a Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Tue, 26 Mar 2024 10:57:16 -0400
Subject: [PATCH] [MM-57175] Tour Point Theme Color Update (#26570)

---
 .../onboarding_video_modal.scss               |  11 +-
 .../components/shortcut_key/shortcut_key.scss |   4 +-
 .../images/channels_and_direct_tour_tip.svg   |   6 +-
 .../components/src/tour_tip/tour_tip.scss     | 271 +++++++-----------
 .../components/src/tour_tip/tour_tip.tsx      |   6 +-
 5 files changed, 120 insertions(+), 178 deletions(-)

diff --git a/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss b/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss
index 3045adb553..475221e3e1 100644
--- a/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss
+++ b/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.scss
@@ -23,9 +23,10 @@
         border: none;
 
         .close {
+            z-index: 1;
             top: -12px;
             right: -12px;
-            border-radius: 16px;
+            border-radius: var(--radius-full);
             opacity: 0.8;
 
             :hover {
@@ -43,15 +44,17 @@
         height: 100vh;
         max-height: 506px;
         padding: 0;
-        border: none;
-        border-radius: 8px;
+
+        .app__body .modal & {
+            border: none;
+        }
     }
 
     .modal-body {
         overflow: hidden;
         height: 100%;
         padding: 0;
-        border-radius: 8px;
+        border-radius: var(--radius-l);
         margin: 0;
     }
 
diff --git a/webapp/channels/src/components/shortcut_key/shortcut_key.scss b/webapp/channels/src/components/shortcut_key/shortcut_key.scss
index e6147c4568..2c308379cf 100644
--- a/webapp/channels/src/components/shortcut_key/shortcut_key.scss
+++ b/webapp/channels/src/components/shortcut_key/shortcut_key.scss
@@ -26,8 +26,8 @@
 
         &.shortcut-key--tutorial-tip {
             padding: 2px 5px;
-            background-color: rgba(var(--center-channel-color-rgb), 0.08);
-            color: rgba(var(--center-channel-color-rgb), 0.75);
+            background-color: rgba(var(--button-color-rgb), 0.08);
+            color: rgba(var(--button-color-rgb), 0.75);
             font-family: inherit;
             font-size: 12px;
             font-weight: 600;
diff --git a/webapp/channels/src/images/channels_and_direct_tour_tip.svg b/webapp/channels/src/images/channels_and_direct_tour_tip.svg
index 57e9c76f72..2fb697f72c 100644
--- a/webapp/channels/src/images/channels_and_direct_tour_tip.svg
+++ b/webapp/channels/src/images/channels_and_direct_tour_tip.svg
@@ -1,14 +1,14 @@
 <svg width="302" height="136" viewBox="0 0 302 136" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2_40)">
-<path d="M152.032 136C189.587 136 220.032 105.555 220.032 68C220.032 30.4446 189.587 0 152.032 0C114.476 0 84.0319 30.4446 84.0319 68C84.0319 105.555 114.476 136 152.032 136Z" fill="#1C58D9" fill-opacity="0.08"/>
-<path d="M231 127.226C250.99 127.226 267.194 111.022 267.194 91.0327C267.194 71.0435 250.99 54.8391 231 54.8391C211.011 54.8391 194.807 71.0435 194.807 91.0327C194.807 111.022 211.011 127.226 231 127.226Z" fill="#1C58D9" fill-opacity="0.08"/>
+<path d="M152.032 136C189.587 136 220.032 105.555 220.032 68C220.032 30.4446 189.587 0 152.032 0C114.476 0 84.0319 30.4446 84.0319 68C84.0319 105.555 114.476 136 152.032 136Z" fill="#ffffff" fill-opacity="0.08"/>
+<path d="M231 127.226C250.99 127.226 267.194 111.022 267.194 91.0327C267.194 71.0435 250.99 54.8391 231 54.8391C211.011 54.8391 194.807 71.0435 194.807 91.0327C194.807 111.022 211.011 127.226 231 127.226Z" fill="#ffffff" fill-opacity="0.08"/>
 <path d="M240.185 73.8691L243.529 65.9618C243.559 65.887 243.609 65.8206 243.67 65.7678C243.731 65.7149 243.805 65.6772 243.882 65.6574C243.961 65.6377 244.044 65.6364 244.123 65.6539C244.201 65.6715 244.275 65.7071 244.339 65.7582L246.465 67.0761C246.593 67.1883 246.675 67.3445 246.693 67.5138C246.712 67.6831 246.666 67.8532 246.565 67.9905L241.192 74.4761C241.082 74.5731 240.946 74.6346 240.801 74.6524C240.656 74.6704 240.51 74.6437 240.381 74.576C240.285 74.4885 240.215 74.3761 240.18 74.2513C240.144 74.1265 240.143 73.9942 240.177 73.8691H240.185ZM245.352 77.9225C245.396 77.998 245.456 78.0636 245.526 78.1152C245.597 78.1668 245.677 78.2033 245.762 78.2224C245.847 78.2416 245.936 78.2428 246.021 78.2263C246.108 78.2098 246.189 78.1756 246.262 78.1262L255.677 73.2581C256.084 72.9892 256.149 72.6165 255.881 72.1439L254.161 69.5082C254.025 69.3491 253.833 69.2494 253.625 69.2307C253.416 69.2121 253.209 69.2759 253.048 69.4083L245.452 77.0082C245.324 77.1204 245.242 77.2766 245.225 77.4459C245.205 77.6152 245.251 77.7853 245.352 77.9225ZM247.071 82.8867L254.971 79.6439C255.355 79.5094 255.611 79.6439 255.677 80.0511L256.183 82.4832C256.21 82.5639 256.216 82.6496 256.202 82.7334C256.19 82.817 256.158 82.8966 256.108 82.9655C256.059 83.0345 255.994 83.091 255.92 83.1307C255.845 83.1704 255.761 83.1921 255.677 83.194L247.275 84.0048C247.006 84.0048 246.803 83.8357 246.668 83.4976C246.667 83.3672 246.705 83.2395 246.778 83.1307C246.849 83.0219 246.952 82.937 247.071 82.8867Z" fill="#FFBC1F"/>
 <path d="M227.82 114.005L226.201 114.916C225.896 115.112 225.554 115.241 225.196 115.294C224.837 115.347 224.472 115.323 224.124 115.223C223.416 115.02 222.816 114.547 222.454 113.905L218.102 106.605C217.909 106.288 217.782 105.936 217.727 105.569C217.674 105.202 217.694 104.827 217.789 104.469C217.883 104.11 218.049 103.774 218.276 103.481C218.504 103.187 218.787 102.943 219.111 102.763L220.731 101.848C221.036 101.653 221.379 101.524 221.736 101.472C222.094 101.42 222.459 101.444 222.807 101.545C223.515 101.748 224.115 102.221 224.478 102.863L228.833 110.163C229.163 110.839 229.252 111.607 229.088 112.341C229.001 112.691 228.845 113.019 228.627 113.305C228.409 113.592 228.134 113.83 227.82 114.005Z" fill="#28427B"/>
 <path d="M208.893 101.672C207.099 98.4125 206.429 93.5187 208.596 91.9086L222.871 81.3694L233.619 98.1944L217.923 106.709C215.055 108.118 210.689 104.93 208.893 101.672Z" fill="#1C58D9"/>
 <path d="M242.407 80.6584C244.579 83.9913 246.362 87.5621 247.722 91.3014C248.836 94.5442 248.954 96.537 248.075 97.2798C246.926 97.8202 245.136 96.9084 242.702 94.5442C240.269 92.1799 237.821 89.0716 235.359 85.2191C232.894 81.3769 231.103 77.8459 229.985 74.6263C228.866 71.4065 228.783 69.397 229.732 68.5978C230.809 68.1239 232.582 69.0691 235.047 71.4333C237.85 74.212 240.32 77.308 242.407 80.6584Z" fill="#82889C"/>
 <path d="M248.286 97.0795C247.945 97.8901 247.239 98.3627 246.16 98.4972C241.289 98.7556 234.83 99.4582 231.579 99.7114C228.326 99.9644 223.776 95.5087 222.566 93.4293C221.356 91.3499 218.656 86.0286 220.542 82.5789C222.43 79.1292 225.634 74.1602 227.932 69.8075C228.474 68.9315 229.149 68.5243 229.958 68.5934C229.851 68.6058 229.748 68.6398 229.656 68.6933C228.846 69.3695 229.048 71.2906 230.262 74.4566C231.731 78.1267 233.564 81.6405 235.731 84.9457C237.806 88.3054 240.214 91.4464 242.92 94.3207C245.283 96.7541 246.97 97.7685 247.984 97.3637C248.115 97.2977 248.22 97.1913 248.286 97.0601V97.0795Z" fill="#DDDFE4"/>
 <path opacity="0.5" d="M211.835 96.2654C211.606 96.4543 211.321 96.5623 211.025 96.5727C210.801 96.5779 210.581 96.5242 210.386 96.417C210.191 96.3097 210.027 96.1528 209.912 95.9619C209.787 95.7995 209.695 95.6141 209.643 95.4162C209.591 95.2182 209.58 95.0119 209.608 94.8092C209.638 94.6296 209.709 94.459 209.814 94.31C209.919 94.1612 210.056 94.0376 210.214 93.9485L216.087 90.1985C216.249 90.0738 216.436 89.9865 216.635 89.9426C216.834 89.8988 217.041 89.8996 217.239 89.9449C217.419 89.9915 217.589 90.0736 217.737 90.1864C217.885 90.2992 218.009 90.4405 218.102 90.6019C218.299 90.9194 218.37 91.299 218.302 91.6663C218.272 91.8463 218.202 92.0172 218.098 92.1663C217.993 92.3154 217.855 92.4387 217.695 92.5269L211.823 96.2769L211.835 96.2654Z" fill="white" fill-opacity="0.48"/>
-<path d="M70.8712 78.9681C90.8604 78.9681 107.065 62.7637 107.065 42.7745C107.065 22.7854 90.8604 6.581 70.8712 6.581C50.8821 6.581 34.6777 22.7854 34.6777 42.7745C34.6777 62.7637 50.8821 78.9681 70.8712 78.9681Z" fill="#1C58D9" fill-opacity="0.08"/>
+<path d="M70.8712 78.9681C90.8604 78.9681 107.065 62.7637 107.065 42.7745C107.065 22.7854 90.8604 6.581 70.8712 6.581C50.8821 6.581 34.6777 22.7854 34.6777 42.7745C34.6777 62.7637 50.8821 78.9681 70.8712 78.9681Z" fill="#ffffff" fill-opacity="0.08"/>
 <path d="M68.4292 46.3897C67.4417 45.059 66.6337 44.8149 65.1837 45.2986C64.6135 45.7821 63.8369 46.0127 63.388 46.6293L63.2129 46.7979C62.9076 47.3346 62.36 47.685 62.1041 48.2706C61.6552 49.2953 60.8293 49.6014 59.7249 49.7744C58.0101 50.0139 56.4119 50.6394 55.3615 52.1565C55.2628 52.263 55.2268 52.4182 55.0922 52.4937C55.1999 52.3694 55.2807 52.2231 55.3795 52.0945C56.0161 51.1633 56.8503 50.3803 57.8239 49.7996C58.7975 49.219 59.8874 48.8546 61.0177 48.732C61.6372 48.6477 62.2388 48.5191 62.2163 47.6939C61.9695 47.4855 62.0548 47.1971 62.0233 46.9354C61.5745 42.9697 61.9066 38.9906 61.8573 35.0158C61.8573 33.827 61.5745 32.7979 60.3085 32.3099C59.1548 32.27 58.625 32.9709 58.3603 33.9512C58.3011 34.171 58.259 34.3949 58.2346 34.621C58.2877 33.9427 58.2576 33.2605 58.1447 32.5894C57.8261 32.2301 57.9921 31.7821 57.9248 31.3739C57.7362 30.2427 57.1706 29.5508 55.9362 29.5551C54.5355 29.9144 54.1405 31.0013 54.0956 32.2168C54.0373 33.8092 53.9025 35.3929 53.8802 36.9809C53.8397 39.403 53.6961 41.8605 54.8632 44.1673C54.4637 43.9855 53.6422 44.9214 53.7096 43.7813C53.9205 40.4101 53.6781 37.0342 53.9339 33.6629C54.0655 32.7727 53.9084 31.8643 53.4851 31.0679C53.0945 30.9214 52.713 30.6863 52.282 30.948C50.5357 31.9151 50.3158 33.5343 50.4639 35.2554C50.5464 36.2609 50.5027 37.2725 50.3337 38.2675C50.2352 38.8738 50.1768 39.4858 50.1587 40.0995C50.1587 39.3986 50.1855 38.6977 50.1587 37.9969C50.1183 36.8746 50.3651 35.6413 49.5571 34.6344C49.1531 34.6344 48.785 34.1908 48.3495 34.5234C47.7532 35.0994 47.3398 35.8347 47.16 36.6394C46.8322 38.9817 46.1409 41.275 46.0152 43.6483C45.7668 47.7252 46.2362 51.8137 47.4024 55.7319C48.1072 58.0519 49.427 59.5957 51.6221 60.3721C54.374 61.348 57.1796 61.8625 59.8686 60.097C61.109 57.2148 62.8569 54.573 65.031 52.294C65.5917 51.701 66.047 51.0186 66.3777 50.2756C66.7773 49.1622 67.1812 48.0577 68.0432 47.1705C68.2542 46.9619 68.519 46.7535 68.4292 46.3897ZM58.0505 36.3911C58.0998 35.9475 58.1582 35.5038 58.1942 35.0292C58.1853 35.3642 58.2033 35.6995 58.248 36.0317C58.3727 36.683 58.3834 37.3508 58.2794 38.0058C57.7991 40.1838 58.0908 42.3086 58.6924 44.4601C57.9472 44.4601 57.5208 44.3403 57.7273 43.4708C57.897 42.6691 57.9439 41.8467 57.8664 41.0311C57.7864 39.4821 57.8479 37.9291 58.0505 36.3911ZM49.5841 45.4671C49.4988 45.5026 49.4405 45.538 49.3866 45.5026C49.5734 45.3357 49.7201 45.1295 49.8157 44.8992C49.9113 44.6689 49.9533 44.4203 49.9387 44.1718C50.0015 42.8809 50.1048 41.5944 50.1497 40.3035C50.1262 41.3735 50.2562 42.4414 50.5357 43.4753C50.9307 44.9036 50.9623 44.8904 49.5841 45.4671Z" fill="#FFBC1F"/>
 <path d="M60.3 32.3009C58.805 32.9353 58.235 34.1108 58.5626 36.0138C58.6717 37.0491 58.6339 38.0942 58.4504 39.1191C58.2575 40.8934 58.2933 42.7344 59.1911 44.4112C59.2764 44.5753 59.3213 44.7617 59.438 45.0766L56.9332 44.4512C57.8309 43.005 57.4988 41.448 57.5122 39.9487C57.5434 37.4883 57.752 35.0335 58.1362 32.6026C58.417 32.3305 58.7784 32.1545 59.1679 32.1001C59.5572 32.0458 59.954 32.1162 60.3 32.3009Z" fill="#CC8F00"/>
 <path d="M66.3874 50.2716C66.2931 48.5815 67.3256 47.4679 68.43 46.39C68.9373 46.8337 68.641 47.2374 68.3805 47.6055C67.7387 48.5104 67.0563 49.3844 66.3874 50.2716Z" fill="#FFD470"/>
diff --git a/webapp/platform/components/src/tour_tip/tour_tip.scss b/webapp/platform/components/src/tour_tip/tour_tip.scss
index 7450efd49d..584f766b69 100644
--- a/webapp/platform/components/src/tour_tip/tour_tip.scss
+++ b/webapp/platform/components/src/tour_tip/tour_tip.scss
@@ -5,11 +5,20 @@
         &.tippy-box {
             padding: 18px 24px 24px;
             border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
-            background: var(--center-channel-bg);
-            border-radius: 4px;
-            color: var(--center-channel-color-rgb);
+            background: var(--button-bg);
+            border-radius: var(--radius-s);
+            color: var(--button-color);
             filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.12));
 
+            a {
+                color: rgba(var(--button-color-rgb), 0.8);
+
+                &:hover {
+                    color: var(--button-color);
+                    text-decoration: underline;
+                }
+            }
+
             .tippy-content {
                 padding: 0;
             }
@@ -19,17 +28,99 @@
                 height: 12px;
                 border-color: rgba(var(--center-channel-color-rgb), 0.16);
                 color: var(--center-channel-bg);
+                color: var(--center-channel-bg);
             }
 
             .tippy-arrow::before {
                 width: 12px;
                 height: 12px;
                 border-color: rgba(var(--center-channel-color-rgb), 0.16);
-                background: var(--center-channel-bg);
-                color: var(--center-channel-bg);
+                background: var(--button-bg);
+                color: var(--button-color);
                 transform-origin: center;
             }
 
+            button[class^='StyledChip-'],
+            button[class*='StyledChip-'] {
+                color: var(--button-color);
+                background-color: rgba(var(--button-color-rgb), 0.08);
+                box-shadow: none;
+                margin: 0 8px 8px 0;
+
+                &:hover {
+                    background-color: rgba(var(--button-color-rgb), 0.16);
+                }
+            }
+
+            .btn {
+                &.btn-primary {
+                    background: var(--button-color);
+                    color: var(--button-bg) !important;
+
+                    &:hover:not(.disabled) {
+                        background:
+                            linear-gradient(
+                                0deg,
+                                rgba(var(--button-bg-rgb), 0.08) 0%,
+                                rgba(var(--button-bg-rgb), 0.08) 100%),
+                                var(--button-color);
+                    }
+
+                    &:active {
+                        background:
+                            linear-gradient(
+                                0deg,
+                                rgba(var(--button-bg-rgb), 0.16) 0%,
+                                rgba(var(--button-bg-rgb), 0.16) 100%),
+                                var(--button-color);
+                    }
+
+                    &:focus {
+                        box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+                    }
+
+                    .icon-chevron-right::before {
+                        margin-right: -7px;
+                    }
+                }
+
+                &.btn-tertiary {
+                    background: rgba(var(--button-color-rgb), 0.08);
+                    color: var(--button-color);
+
+                    &:hover {
+                        background: rgba(var(--button-color-rgb), 0.12);
+                    }
+
+                    &:active {
+                        background: rgba(var(--button-color-rgb), 0.16);
+                    }
+
+                    &:focus {
+                        box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+                    }
+
+                    .icon-chevron-left::before {
+                        margin-left: -7px;
+                    }
+                }
+
+                &.btn-icon {
+                    margin-right: -8px;
+                    margin-left: 1.2rem;
+                    color: rgba(var(--button-color-rgb), 0.64);
+
+                    &:hover {
+                        background: rgba(var(--button-color-rgb), 0.08);
+                        color: rgba(var(--button-color-rgb), 0.8);
+                    }
+
+                    &.active {
+                        background: rgba(var(--button-color-rgb), 0.16);
+                    }
+                }
+            }
+
             // fix for https://mattermost.atlassian.net/browse/MM-41711. This covers the current placements we use for the channels and other tools tour
             &[data-placement^=right] > .tippy-arrow {
                 transform: translate3d(0, 14px, 0) !important;
@@ -155,38 +246,8 @@
             line-height: 2rem;
         }
 
-        &__close {
-            display: flex;
-            overflow: hidden;
-            width: 3.2rem;
-            height: 3.2rem;
-            align-items: center;
-            justify-content: center;
-            border: unset;
-            margin-right: -8px;
-            margin-left: 1.2rem;
-            background: transparent;
-            border-radius: 4px;
-            color: rgba(var(--center-channel-color-rgb), 0.64);
-            font-weight: 600;
-
-            &:hover {
-                background: rgba(var(--center-channel-color-rgb), 0.08);
-                color: rgba(var(--center-channel-color-rgb), 0.8);
-            }
-
-            &.active {
-                background: rgba(var(--center-channel-color-rgb), 0.08);
-            }
-
-            i {
-                font-size: 1.8rem;
-                line-height: 1.8rem;
-
-                ::before {
-                    margin-right: 0;
-                }
-            }
+        .Tag {
+            margin-left: 4px;
         }
     }
 
@@ -216,11 +277,12 @@
         align-items: center;
         justify-content: center;
         margin-top: 2.4rem;
+        border-radius: var(--radius-s);
 
         img {
             width: 100%;
             height: 136px;
-            border-radius: 4px;
+            border-radius: var(--radius-s);
             object-fit: cover;
         }
     }
@@ -231,75 +293,6 @@
         justify-content: flex-end;
     }
 
-    &__btn {
-        display: flex;
-        height: 3.2rem;
-        align-items: center;
-        padding: 10px 16px;
-        border: none;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 12px;
-    }
-
-    &__confirm-btn {
-        background: var(--button-bg);
-        color: var(--button-color);
-
-        &:hover:not(.disabled) {
-            background:
-                linear-gradient(
-                    0deg,
-                    rgba(var(--center-channel-color-rgb), 0.16),
-                    rgba(var(--center-channel-color-rgb), 0.16)
-                ),
-                var(--button-bg);
-        }
-
-        &:active {
-            background:
-                linear-gradient(
-                    0deg,
-                    rgba(var(--center-channel-color-rgb), 0.32),
-                    rgba(var(--center-channel-color-rgb), 0.32)
-                ),
-                var(--button-bg);
-        }
-
-        &:focus {
-            box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
-        }
-
-        .icon-chevron-right::before {
-            margin-right: -7px;
-        }
-    }
-
-    &__cancel-btn {
-        margin-right: 4px;
-        background: rgba(var(--button-bg-rgb), 0.08);
-        border-radius: 4px;
-        color: var(--button-bg);
-        text-decoration: none;
-
-        &:hover {
-            background: rgba(var(--button-bg-rgb), 0.04);
-        }
-
-        &:active {
-            background: rgba(var(--button-bg-rgb), 0.08);
-        }
-
-        &:focus {
-            box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
-        }
-
-        .icon-chevron-left::before {
-            margin-left: -7px;
-        }
-    }
-
     &__dot-ctr {
         display: flex;
         align-items: center;
@@ -315,7 +308,7 @@
         justify-content: center;
         margin-right: 4px;
         background: transparent;
-        border-radius: 50%;
+        border-radius: var(--radius-full);
 
         &:last-child {
             margin-right: 0;
@@ -323,7 +316,7 @@
     }
 
     &__dot-ring-active {
-        background: rgba(var(--button-bg-rgb), 0.16);
+        background: rgba(var(--button-color-rgb), 0.16);
     }
 
     &__dot {
@@ -332,11 +325,11 @@
         left: 3px;
         width: 6px;
         height: 6px;
-        background: rgba(var(--button-bg-rgb), 0.32);
-        border-radius: 6px;
+        background: rgba(var(--button-color-rgb), 0.32);
+        border-radius: var(--radius-full);
 
         &.active {
-            background: rgba(var(--button-bg-rgb), 1);
+            background: rgba(var(--button-color-rgb), 1);
         }
     }
 
@@ -401,57 +394,3 @@
     border-width: 0 0 1px 1px !important;
     transform: rotate(-45deg) !important;
 }
-
-// this style is defined outside of the block scope because is intended to affect the tippy element
-.tippy-blue-style {
-    background: var(--button-bg) !important;
-    color: var(--sidebar-text) !important;
-
-    .tippy-arrow {
-        border-color: var(--button-bg) !important;
-        color: var(--button-bg) !important;
-
-        &::before {
-            border-width: 0 !important;
-            border-color: var(--button-bg) !important;
-            border-left-color: initial;
-            background-color: var(--button-bg) !important;
-            transform-origin: unset !important;
-        }
-    }
-
-    .tour-tip__header {
-        font-weight: 600;
-    }
-
-    .icon-close {
-        color: var(--sidebar-text) !important;
-    }
-
-    // style buttons while in the blue style
-    .tour-tip {
-        &__btn {
-            background: var(--button-color);
-            color: var(--button-bg);
-
-            &:hover,
-            &:active,
-            &:focus {
-                background: var(--button-color);
-                color: var(--button-bg);
-            }
-        }
-
-        &__dot-ring {
-            .tour-tip__dot {
-                background: var(--offline-indicator);
-            }
-        }
-
-        &__dot-ring-active {
-            .active {
-                background: var(--button-color);
-            }
-        }
-    }
-}
diff --git a/webapp/platform/components/src/tour_tip/tour_tip.tsx b/webapp/platform/components/src/tour_tip/tour_tip.tsx
index 181c4241c0..27f21c313a 100644
--- a/webapp/platform/components/src/tour_tip/tour_tip.tsx
+++ b/webapp/platform/components/src/tour_tip/tour_tip.tsx
@@ -131,7 +131,7 @@ export const TourTip = ({
                     {title}
                 </h4>
                 <button
-                    className='tour-tip__header__close'
+                    className='btn btn-sm btn-icon'
                     onClick={handleDismiss}
                     data-testid={'close_tutorial_tip'}
                 >
@@ -156,7 +156,7 @@ export const TourTip = ({
                         {step !== 0 && prevBtn && (
                             <button
                                 id='tipPreviousButton'
-                                className='tour-tip__btn tour-tip__cancel-btn'
+                                className='btn btn-sm btn-tertiary'
                                 onClick={handlePrevious}
                             >
                                 {prevBtn}
@@ -165,7 +165,7 @@ export const TourTip = ({
                         {nextBtn && (
                             <button
                                 id='tipNextButton'
-                                className='tour-tip__btn tour-tip__confirm-btn'
+                                className='btn btn-sm btn-primary'
                                 onClick={handleNext}
                             >
                                 {nextBtn}