From f71435429caa5832703addcad6658207b6521309 Mon Sep 17 00:00:00 2001
From: shadowusr <nikhakerlab@gmail.com>
Date: Sun, 29 Sep 2024 01:10:01 +0300
Subject: [PATCH] chore(new-ui): tweak attempt picker design

---
 lib/static/new-ui.css                              |  1 +
 .../components/AttemptPicker/index.module.css      | 14 ++++++++++++++
 .../new-ui/components/AttemptPicker/index.tsx      | 13 +++++++------
 .../components/AttemptPickerItem/index.module.css  | 14 +++++++++++++-
 .../suites/components/SuitesPage/index.module.css  |  3 ++-
 lib/static/styles.css                              |  4 ++--
 6 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 lib/static/new-ui/components/AttemptPicker/index.module.css

diff --git a/lib/static/new-ui.css b/lib/static/new-ui.css
index 6ed97b89b..0ebc24313 100644
--- a/lib/static/new-ui.css
+++ b/lib/static/new-ui.css
@@ -15,6 +15,7 @@
 .g-root {
     --g-font-family-sans: 'Jost', sans-serif;
     --g-color-base-background: #eee;
+    --g-color-text-danger-heavy: #e9043a;
 }
 
 body {
diff --git a/lib/static/new-ui/components/AttemptPicker/index.module.css b/lib/static/new-ui/components/AttemptPicker/index.module.css
new file mode 100644
index 000000000..836cf7f1c
--- /dev/null
+++ b/lib/static/new-ui/components/AttemptPicker/index.module.css
@@ -0,0 +1,14 @@
+.container {
+    display: flex;
+    gap: 16px;
+}
+
+.heading {
+    line-height: 28px;
+}
+
+.attempts-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
diff --git a/lib/static/new-ui/components/AttemptPicker/index.tsx b/lib/static/new-ui/components/AttemptPicker/index.tsx
index 51d314459..9153809b0 100644
--- a/lib/static/new-ui/components/AttemptPicker/index.tsx
+++ b/lib/static/new-ui/components/AttemptPicker/index.tsx
@@ -1,9 +1,10 @@
-import {Flex} from '@gravity-ui/uikit';
 import React, {ReactNode} from 'react';
 import {connect} from 'react-redux';
 
 import {State} from '@/static/new-ui/types/store';
 import {AttemptPickerItem} from '@/static/new-ui/components/AttemptPickerItem';
+import styles from './index.module.css';
+import classNames from 'classnames';
 
 interface AttemptPickerProps {
     onChange?: (browserId: string, resultId: string, attemptIndex: number) => unknown;
@@ -26,9 +27,9 @@ function AttemptPickerInternal(props: AttemptPickerInternalProps): ReactNode {
         props.onChange?.(props.browserId, resultId, attemptIndex);
     };
 
-    return <Flex alignItems={'center'} gap={5}>
-        <h3 className='text-header-1'>Attempts</h3>
-        <Flex gap={0.5} wrap={'wrap'}>
+    return <div className={styles.container}>
+        <h3 className={classNames('text-header-1', styles.heading)}>Attempts</h3>
+        <div className={styles.attemptsContainer}>
             {resultIds.map((resultId, index) => {
                 const isActive = resultId === currentResultId;
 
@@ -39,8 +40,8 @@ function AttemptPickerInternal(props: AttemptPickerInternalProps): ReactNode {
                     onClick={(): unknown => onClickHandler(resultId, index)}
                 />;
             })}
-        </Flex>
-    </Flex>;
+        </div>
+    </div>;
 }
 
 export const AttemptPicker = connect((state: State) => {
diff --git a/lib/static/new-ui/components/AttemptPickerItem/index.module.css b/lib/static/new-ui/components/AttemptPickerItem/index.module.css
index a3ccbe947..915cd7906 100644
--- a/lib/static/new-ui/components/AttemptPickerItem/index.module.css
+++ b/lib/static/new-ui/components/AttemptPickerItem/index.module.css
@@ -1,9 +1,10 @@
 .attempt-picker-item {
-    --g-button-padding: 8px;
+    width: 28px;
 }
 
 .attempt-picker-item--active {
     --g-button-border-width: 1px;
+    box-shadow: 0px 1px 3px 0px var(--box-shadow-color);
 }
 
 .attempt-picker-item--staged {
@@ -16,10 +17,21 @@
     border-color: rgba(207, 231, 252, 1);
 }
 
+.attempt-picker-item--success {
+    --box-shadow-color: #21a95661;
+}
+
+.attempt-picker-item--error {
+    --box-shadow-color: #ff004b61;
+}
+
 .attempt-picker-item--fail {
+    --g-button-text-color-hover: #c522ff;
+    --g-button-background-color-hover: #cf49ff4f;
     --g-button-background-color: var(--color-pink-100);
     --g-button-text-color: var(--color-pink-600);
     --g-button-border-color: var(--color-pink-600);
+    --box-shadow-color: #cf49ff61;
 }
 
 .attempt-picker-item--fail_error {
diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css b/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
index de01fcbf4..2cb199482 100644
--- a/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
+++ b/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css
@@ -39,5 +39,6 @@
     position: sticky;
     top: 0;
     z-index: 10;
-    padding-bottom: 4px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #eee;
 }
diff --git a/lib/static/styles.css b/lib/static/styles.css
index c39757817..4e185c962 100644
--- a/lib/static/styles.css
+++ b/lib/static/styles.css
@@ -949,8 +949,8 @@ a:active {
 
 .text-header-1 {
     font-family: Jost, sans-serif;
-    font-weight: 500;
-    font-size: var(--g-text-header-1-font-size);
+    font-weight: 450;
+    font-size: 18px;
     line-height: var(--g-text-header-1-line-height);
     margin: 0;
 }