[Landing page]: Design Review #2423

epam · Jul 25, 2024 · a0bb6d2 · a0bb6d2
1 parent 74356ad
commit a0bb6d2
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 6 deletions.
diff --git a/app/src/common/AppHeader.module.scss b/app/src/common/AppHeader.module.scss
@@ -103,6 +103,15 @@
             height: 24px;
         }
 
+        &.figma-icon {
+            :global(.uui-icon):nth-of-type(2) {
+                svg {
+                    width: 12px;
+                    height: 12px;
+                }
+            }
+        }
+
         &.logo svg {
             width: 168px;
             height: 60px;

diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx
@@ -196,7 +196,7 @@ export function AppHeader() {
                 priority: 3,
                 render: () => (
                     <Dropdown
-                        renderTarget={ (props) => <LinkButton icon={ FigmaIcon } cx={ css.icon } size="36" { ...props } /> }
+                        renderTarget={ (props) => <LinkButton icon={ FigmaIcon } cx={ cx(css.icon, css.figmaIcon) } size="30" { ...props } /> }
                         renderBody={ (props) => (
                             <DropdownMenuBody { ...props }>
                                 <DropdownMenuHeader caption="Open in" />

diff --git a/app/src/landing/ExploreBenefitsBlock.module.scss b/app/src/landing/ExploreBenefitsBlock.module.scss
@@ -186,13 +186,15 @@
         @media (min-width: 769px) {
             .top-block-wrapper {
                 .top-block-panel:hover {
+                    background-color: var(--uui-surface-main);
                     border: 3px solid var(--uui-primary-50);
                     transition: 300ms ease-out;
                 }
             }
 
             .bottom-block-wrapper {
                 .bottom-block-panel:hover {
+                    background-color: var(--uui-surface-main);
                     border: 3px solid var(--uui-success-50);
                     transition: 300ms ease-out;
 

diff --git a/app/src/landing/IntroBlock.module.scss b/app/src/landing/IntroBlock.module.scss
@@ -231,6 +231,7 @@
         .info-start-wrapper {
             .info-start {
                 .info-block:hover, .info-block:active {
+                    background-color: var(--uui-surface-main);
                     transition: 300ms ease-out;
                     border-color: #773CEC;
 

diff --git a/app/src/landing/PatternBlock.tsx b/app/src/landing/PatternBlock.tsx
@@ -7,11 +7,11 @@ import { ReactComponent as ActionExternalLinkOutlineIcon } from '@epam/assets/ic
 import css from './PatternBlock.module.scss';
 
 const accordionData = [
-    { id: 0, title: 'DATA TABLES', text: 'Shows support for advanced filter toolbar – including predicates (in/not in/less/greater than), and user-defined filter presets (tabs).', href: '/demo?id=table' },
-    { id: 1, title: 'PROJECT PLANNING', text: 'Project planning table built on top of tables editing capabilities. Demo highlights in-cell inputs, drag-n-drop, tree-structured data, and more.', href: '/demo?id=editableTable' },
-    { id: 2, title: 'FORMS', text: 'Full-featured set of form components – Text Inputs, Date Pickers, etc. We also provide useForm hook – to manage form state, including validation.', href: '/demo?id=form' },
-    { id: 3, title: 'RICH TEXT EDITOR', text: 'RTE is based on popular slate.js library. On top of Slate.js, we add a set of our and 3rd party plugins, UUI-styled toolbars, align edited text style to our guidelines.', href: '/demo?id=RTE' },
-    { id: 4, title: 'DRAG n DROP', text: 'Every component can be made draggable, and/or accept dragged items, by wrapping it with DndActor component.', href: '/demo?id=dnd' },
+    { id: 0, title: 'Data Tables', text: 'Shows support for advanced filter toolbar – including predicates (in/not in/less/greater than), and user-defined filter presets (tabs).', href: '/demo?id=table' },
+    { id: 1, title: 'Project Planning', text: 'Project planning table built on top of tables editing capabilities. Demo highlights in-cell inputs, drag-n-drop, tree-structured data, and more.', href: '/demo?id=editableTable' },
+    { id: 2, title: 'Forms', text: 'Full-featured set of form components – Text Inputs, Date Pickers, etc. We also provide useForm hook – to manage form state, including validation.', href: '/demo?id=form' },
+    { id: 3, title: 'Rich Text Editor', text: 'RTE is based on popular slate.js library. On top of Slate.js, we add a set of our and 3rd party plugins, UUI-styled toolbars, align edited text style to our guidelines.', href: '/demo?id=RTE' },
+    { id: 4, title: 'Drag n Drop', text: 'Every component can be made draggable, and/or accept dragged items, by wrapping it with DndActor component.', href: '/demo?id=dnd' },
 ];
 
 const ACCORDION_INTERVAL = 5000;