Merge branch 'refs/heads/develop' into feature/mob-navigation-#2413

epam · Jul 24, 2024 · 483e7b4 · 483e7b4
2 parents 19afcfd + 68d6d1d
commit 483e7b4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/app/src/landing/ExploreBenefitsBlock.module.scss b/app/src/landing/ExploreBenefitsBlock.module.scss
@@ -195,6 +195,11 @@
                 .bottom-block-panel:hover {
                     border: 3px solid var(--uui-success-50);
                     transition: 300ms ease-out;
+
+                    &:nth-of-type(2):hover {
+                        border-color: var(--uui-info-50);
+                    }
+
                 }
             }
         }

diff --git a/app/src/landing/IntroBlock.tsx b/app/src/landing/IntroBlock.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Anchor, FlexCell, FlexRow, IconContainer, Text, FilterPickerBody, Panel, TabButton, Badge, Tooltip, Button, LabeledInput, TextInput, NumericInput, Switch, DatePicker, TimePicker, SuccessAlert } from '@epam/uui';
-import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
+import { Anchor, FlexCell, FlexRow, IconContainer, Text, FilterPickerBody, Panel, TabButton, Badge, Tooltip, Button, LabeledInput, TextInput, NumericInput, Switch, DatePicker, TimePicker, SuccessAlert, SuccessNotification } from '@epam/uui';
+import { DataQueryFilter, INotification, useLazyDataSource, useUuiContext } from '@epam/uui-core';
 import cx from 'classnames';
 import { getCurrentTheme } from '../helpers';
 import { Location } from '@epam/uui-docs';
@@ -26,6 +26,20 @@ export function IntroBlock() {
     const [dateValue, setDateValue] = useState('');
     const [timeValue, setTimeValue] = useState(null);
 
+    const handleSuccess = (text: string) => {
+        svc.uuiNotifications
+            .show(
+                (props: INotification) => (
+                    <SuccessNotification { ...props }>
+                        <Text size="36" fontSize="14">
+                            { text }
+                        </Text>
+                    </SuccessNotification>
+                ),
+            )
+            .catch(() => null);
+    };
+
     const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
         {
             api: (request, ctx) => {
@@ -118,7 +132,7 @@ export function IntroBlock() {
                                     <Tooltip content="Info tooltip" placement="top">
                                         <IconContainer icon={ infoIcon } cx={ css.infoIcon } />
                                     </Tooltip>
-                                    <Button fill="outline" caption="Watch more" size="30" onClick={ () => {} } />
+                                    <Button fill="outline" caption="Watch more" size="30" onClick={ () => handleSuccess('Watch more clicked') } />
                                 </FlexRow>
                             </Panel>
                             <Panel background="surface-main" shadow={ true } cx={ css.componentsMiddleWrapper }>
@@ -140,7 +154,7 @@ export function IntroBlock() {
                                     </LabeledInput>
                                 </FlexRow>
                             </Panel>
-                            <SuccessAlert size="36" onClose={ () => alert('close action') } actions={ [{ name: 'SEE DETAILS', action: () => null }] }>
+                            <SuccessAlert size="36" onClose={ () => handleSuccess('onClose clicked') } actions={ [{ name: 'SEE DETAILS', action: () => null }] }>
                                 <Text size="30">Invitation sent!</Text>
                             </SuccessAlert>
                         </div>