Farabi/bot 359/update user guide button (#9080)

* fix: updated user guide button in both themes * fix: user guide button on different language
deriv-com · Jun 30, 2023 · ca104aa · ca104aa
1 parent 1e37798
commit ca104aa
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 18 deletions.
diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/index.scss b/packages/bot-web-ui/src/components/dashboard/dashboard-component/index.scss
@@ -278,12 +278,12 @@
 
             &__retrigger {
                 button {
-                    background: $color-grey-2;
+                    background: var(--general-section-1);
                     border-radius: 2.4rem;
                     outline: none;
                     border: none;
                     height: 4rem;
-                    width: 12.8rem;
+                    padding: 1rem;
                     @include align-center;
                     cursor: pointer;
 
@@ -296,7 +296,12 @@
 
                 &__text {
                     margin-left: 0.4rem;
-                    color: var(--text-less-prominent);
+                    color: var(--text-general);
+                }
+
+                &__icon {
+                    width: 2.4rem;
+                    height: 2.4rem;
                 }
             }
         }
@@ -309,19 +314,24 @@
                 padding: 2rem;
 
                 button {
-                    background: $color-grey-2;
+                    background: var(--general-section-1);
                     border-radius: 2.4rem;
                     outline: none;
                     border: none;
                     height: 4rem;
-                    width: 12.8rem;
+                    padding: 1rem;
                     @include align-center;
                     cursor: pointer;
                 }
 
                 &__text {
                     margin-left: 0.4rem;
-                    color: var(--text-less-prominent);
+                    color: var(--text-general);
+                }
+
+                &__icon {
+                    width: 2.4rem;
+                    height: 2.4rem;
                 }
             }
         }

diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/local.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/local.tsx
@@ -93,13 +93,10 @@ const LocalComponent = ({
                                 >
                                     <Icon
                                         className='tab__dashboard__preview__retrigger__icon'
-                                        width='2.4rem'
-                                        height='2.4rem'
                                         icon={'IcDbotUserGuide'}
                                     />
                                     {!is_mobile && (
                                         <Text
-                                            color='prominent'
                                             size='xs'
                                             line_height='s'
                                             className={'tab__dashboard__preview__retrigger__text'}

diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/user-guide.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/user-guide.tsx
@@ -18,13 +18,8 @@ const UserGuide = ({ setActiveTab, setActiveTabTutorial }: TUserGuide) => {
                     setActiveTabTutorial(0);
                 }}
             >
-                <Icon
-                    className='tab__dashboard__home__retrigger__icon'
-                    width='2.4rem'
-                    height='2.4rem'
-                    icon={'IcDbotUserGuide'}
-                />
-                <Text color='prominent' size='xs' line_height='s' className={'tab__dashboard__home__retrigger__text'}>
+                <Icon className='tab__dashboard__home__retrigger__icon' icon={'IcDbotUserGuide'} />
+                <Text size='xs' line_height='s' className={'tab__dashboard__home__retrigger__text'}>
                     {localize('User Guide')}
                 </Text>
             </button>

diff --git a/packages/bot-web-ui/src/components/dashboard/tutorial-tab/index.scss b/packages/bot-web-ui/src/components/dashboard/tutorial-tab/index.scss
@@ -34,9 +34,9 @@
             text-align: center;
             flex-direction: column;
             margin-right: 2.4rem;
-            width: 21.5rem;
             @include mobile {
                 flex-direction: row;
+                width: auto;
                 span {
                     text-align: left;
                     padding-left: 0.8rem;
@@ -71,6 +71,7 @@
             height: 13.5rem;
             background-position: center center;
             margin-bottom: 0.8rem;
+            width: 21.5rem;
             cursor: pointer;
             @include mobile {
                 height: 8.7rem;

diff --git a/packages/components/src/components/icon/common/ic-dbot-user-guide.svg b/packages/components/src/components/icon/common/ic-dbot-user-guide.svg