From 55aaa5609f263bfc458e160268a65cb69e5bfca3 Mon Sep 17 00:00:00 2001
From: Neretin Artem <hawktrike@gmail.com>
Date: Mon, 18 Mar 2024 19:48:52 +0500
Subject: [PATCH] fix(plasma-theme-builder): Fix styling problems

---
 .../GradientTokenValue/GradientTokenValue.tsx |  5 --
 .../components/PullRequest/PullRequest.tsx    |  2 +-
 .../src/components/Theme/Theme.tsx            |  2 +-
 .../ThemeModeToggle/ThemeModeToggle.tsx       |  1 -
 .../src/components/Token/Token.tsx            | 12 ++---
 .../src/components/TokenForm/TokenForm.tsx    | 46 +++++++++++--------
 6 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/website/plasma-theme-builder/src/components/GradientTokenValue/GradientTokenValue.tsx b/website/plasma-theme-builder/src/components/GradientTokenValue/GradientTokenValue.tsx
index 88d9d45ecf..fbe2376d62 100644
--- a/website/plasma-theme-builder/src/components/GradientTokenValue/GradientTokenValue.tsx
+++ b/website/plasma-theme-builder/src/components/GradientTokenValue/GradientTokenValue.tsx
@@ -16,7 +16,6 @@ const Root = styled.div``;
 const GradientTokenWrapper = styled.div`
     display: flex;
     gap: 1rem;
-    height: 5rem;
 
     margin-top: 1rem;
 `;
@@ -33,10 +32,6 @@ const GradientTokenLayers = styled.div`
 
 const StyledTextArea = styled(TextArea)`
     flex: 1;
-
-    textarea {
-        height: 5rem;
-    }
 `;
 
 interface GradientTokenValueProps {
diff --git a/website/plasma-theme-builder/src/components/PullRequest/PullRequest.tsx b/website/plasma-theme-builder/src/components/PullRequest/PullRequest.tsx
index a9b5dbbf4d..24fe1de123 100644
--- a/website/plasma-theme-builder/src/components/PullRequest/PullRequest.tsx
+++ b/website/plasma-theme-builder/src/components/PullRequest/PullRequest.tsx
@@ -19,7 +19,7 @@ import {
 
 const StyledPullRequest = styled.div`
     margin: 2rem 0;
-    width: 70rem;
+    width: 86rem;
 `;
 
 const ProgressGroup = styled.div`
diff --git a/website/plasma-theme-builder/src/components/Theme/Theme.tsx b/website/plasma-theme-builder/src/components/Theme/Theme.tsx
index 71f383f830..84111e6f92 100644
--- a/website/plasma-theme-builder/src/components/Theme/Theme.tsx
+++ b/website/plasma-theme-builder/src/components/Theme/Theme.tsx
@@ -16,7 +16,7 @@ import { emptyInputData } from '../../types';
 import type { InputData, Theme as ThemeType } from '../../types';
 
 const StyledTheme = styled.div`
-    width: 70rem;
+    width: 86rem;
 `;
 
 const Description = styled.div`
diff --git a/website/plasma-theme-builder/src/components/ThemeModeToggle/ThemeModeToggle.tsx b/website/plasma-theme-builder/src/components/ThemeModeToggle/ThemeModeToggle.tsx
index e1335412d2..121ebe961a 100644
--- a/website/plasma-theme-builder/src/components/ThemeModeToggle/ThemeModeToggle.tsx
+++ b/website/plasma-theme-builder/src/components/ThemeModeToggle/ThemeModeToggle.tsx
@@ -11,7 +11,6 @@ const StyledThemeModeToggle = styled.div`
 `;
 
 const StyledThemeTypeButton = styled(Button)<{ isSelected: boolean }>`
-    padding: 0.75rem 0;
     cursor: pointer;
     color: ${({ isSelected }) => (isSelected ? accent : tertiary)};
 `;
diff --git a/website/plasma-theme-builder/src/components/Token/Token.tsx b/website/plasma-theme-builder/src/components/Token/Token.tsx
index 35d893cc80..7e535af85b 100644
--- a/website/plasma-theme-builder/src/components/Token/Token.tsx
+++ b/website/plasma-theme-builder/src/components/Token/Token.tsx
@@ -10,7 +10,7 @@ import { PreviewColor } from '../PreviewColor/PreviewColor';
 
 const IconButtons = styled.div`
     display: flex;
-    min-width: 9rem;
+    min-width: 12rem;
     justify-content: end;
 `;
 
@@ -28,7 +28,7 @@ const StyledToken = styled(TextM)<{ enabled?: boolean }>`
     align-items: center;
     justify-content: space-between;
 
-    width: 67rem;
+    width: 83rem;
 
     margin: 1rem 0;
     margin-left: 2rem;
@@ -130,13 +130,7 @@ export const Token = ({ section, subsection, name, data }: TokenProps) => {
 
     return (
         <StyledToken enabled={enabled}>
-            <Tooltip
-                placement="top-start"
-                isVisible={Boolean(comment) && visible}
-                arrow={false}
-                text={comment}
-                animated
-            >
+            <Tooltip placement="top-start" isOpen={Boolean(comment) && visible} hasArrow text={comment}>
                 <TokenName
                     disable={enabled === false}
                     onClick={onTokenEditClick}
diff --git a/website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx b/website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx
index 9a71985fad..7cd839068b 100644
--- a/website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx
+++ b/website/plasma-theme-builder/src/components/TokenForm/TokenForm.tsx
@@ -22,18 +22,16 @@ const StyledHeader = styled(H3)`
     ${SBSansTextMono}
 `;
 
-const StyledTokenName = styled(TextField)`
-    input {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
+const StyledTokenName = styled(TextField)``;
 
-    width: 100%;
+/* TODO: Убрать это когда появится возможность стилизовать компонент */
+const StyledCommentWrapper = styled.div`
+    label {
+        width: 35rem;
+    }
 `;
 
-const StyledTextField = styled(TextField)`
-    width: 35rem;
-`;
+const StyledTextField = styled(TextField)``;
 
 const StyledButtons = styled.div`
     display: flex;
@@ -59,6 +57,16 @@ const StyledTokenPrefix = styled.span`
 const TokenName = styled.div`
     width: 35rem;
     display: flex;
+
+    /* TODO: Убрать это когда появится возможность стилизовать компонент */
+    label {
+        width: 100% !important;
+    }
+
+    div {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+    }
 `;
 
 const TokenValue = styled.div`
@@ -249,15 +257,17 @@ export const TokenForm = ({
                     </TokenValue>
                 </FormField>
                 <FormField label="Комментарий">
-                    <StyledTextField
-                        size="s"
-                        name="comment"
-                        readOnly={canRename}
-                        value={comment?.value}
-                        status={comment?.status}
-                        helperText={comment?.helpText}
-                        onChange={onChangeComment}
-                    />
+                    <StyledCommentWrapper>
+                        <StyledTextField
+                            size="s"
+                            name="comment"
+                            readOnly={canRename}
+                            value={comment?.value}
+                            status={comment?.status}
+                            helperText={comment?.helpText}
+                            onChange={onChangeComment}
+                        />
+                    </StyledCommentWrapper>
                 </FormField>
                 <FormField label="Отображать токен">
                     <Switch