Change arrow color and position

skbkontur · Aug 15, 2023 · 14d34bd · 14d34bd
1 parent f1832f0
commit 14d34bd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 26 deletions.
diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
@@ -36,17 +36,6 @@ export const jsStyles = {
         `;
     },
 
-    greyLineHeader(t: Theme): string {
-        return css`
-            background-color: ${t.bgDisabled};
-            padding: ${2 * baseSize}px ${globalHorizontalPadding}px;
-            margin-left: ${-globalHorizontalPadding}px;
-            margin-right: ${-globalHorizontalPadding}px;
-            margin-bottom: ${3 * baseSize}px;
-            word-break: break-all;
-        `;
-    },
-
     headerContent(): string {
         return css`
             margin-top: ${3 * newBaseSize}px;
@@ -58,7 +47,7 @@ export const jsStyles = {
             margin: 0;
             font-weight: 700;
             font-size: 29px;
-            line-height: 40px;
+            line-height: 48px;
         `;
     },
 
@@ -86,24 +75,23 @@ export const jsStyles = {
     backLink(): string {
         return css`
             position: absolute;
-            left: ${newBaseSize * 3}px;
-            opacity: 0.7;
-            height: ${newBaseSize * 7}px;
-            width: ${newBaseSize * 7}px;
-            padding: ${newBaseSize * 2}px 0;
+            left: 0;
+            height: ${newBaseSize * 12}px;
+            width: ${newBaseSize * 12}px;
             display: flex;
             align-items: center;
             justify-content: center;
-
-            &:hover {
-                opacity: 1;
-            }
         `;
     },
 
-    backLinkIcon(): string {
+    backLinkIcon(t: Theme): string {
         return css`
             display: block;
+            color: #757575;
+
+            &:hover {
+                color: ${t.textColorDefault};
+            }
         `;
     },
 

diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
@@ -76,7 +76,7 @@ CommonLayout.GoBack = function CommonLayoutGoBack({ to }: CommonLayoutGoBackProp
     const theme = React.useContext(ThemeContext);
     return (
         <RouterLink data-tid="GoBack" to={to} className={jsStyles.backLink()}>
-            <ArrowALeftIcon24Regular color={theme.gray} className={jsStyles.backLinkIcon()} />
+            <ArrowALeftIcon24Regular align="none" className={jsStyles.backLinkIcon(theme)} />
         </RouterLink>
     );
 };

diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
@@ -80,16 +80,20 @@ export function TaskDetailsPage({
                 )}
                 {isCancelable && (
                     <Fit>
-                        <Link icon={<XIcon16Regular />} use="danger" data-tid={"CancelButton"} onClick={cancel}>
+                        <Link icon={<XIcon16Regular />} use="danger" data-tid="CancelButton" onClick={cancel}>
                             Cancel task
                         </Link>
                     </Fit>
                 )}
                 {isRerunable && (
                     <Fit>
-                        <Link icon={<ArrowRoundTimeForwardIcon16Regular />} data-tid={"RerunButton"} onClick={rerun}>
+                        <Button
+                            use="link"
+                            icon={<ArrowRoundTimeForwardIcon16Regular />}
+                            data-tid="RerunButton"
+                            onClick={rerun}>
                             Rerun task
-                        </Link>
+                        </Button>
                     </Fit>
                 )}
             </RowStack>