From f3e2f23a351e6abaac8abeb285cf08647ae9d99f Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Tue, 15 Aug 2023 12:51:18 +0300
Subject: [PATCH] fix: buttons and other styles

---
 src/pages/Questions/helpQuestions.tsx | 91 +++++++++++++++++++++------
 1 file changed, 71 insertions(+), 20 deletions(-)

diff --git a/src/pages/Questions/helpQuestions.tsx b/src/pages/Questions/helpQuestions.tsx
index ae0ebd89..2ea766fa 100644
--- a/src/pages/Questions/helpQuestions.tsx
+++ b/src/pages/Questions/helpQuestions.tsx
@@ -1,4 +1,11 @@
-import { Box, Button, ButtonBase, Modal, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  ButtonBase,
+  Modal,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import * as React from "react";
 import SelectableButton from "@ui_kit/SelectableButton";
 import CustomTextField from "@ui_kit/CustomTextField";
@@ -14,7 +21,8 @@ export default function HelpQuestions() {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
-  const [backgroundTypeModal, setBackgroundTypeModal] = useState<BackgroundTypeModal>("linkVideo");
+  const [backgroundTypeModal, setBackgroundTypeModal] =
+    useState<BackgroundTypeModal>("linkVideo");
   const theme = useTheme();
 
   const videoHC = (videoInp: HTMLInputElement) => {
@@ -28,18 +36,33 @@ export default function HelpQuestions() {
   const [video, setVideo] = React.useState("");
 
   return (
-    <Box sx={{ padding: "20px", display: "flex", flexDirection: "column", gap: "20px" }}>
-      <Typography>Подсказка консультанта</Typography>
+    <Box
+      sx={{
+        padding: "20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+      }}
+    >
+      <Typography sx={{ fontWeight: "500" }}>Подсказка консультанта</Typography>
       <Box
         sx={{
           display: "flex",
           gap: "10px",
         }}
       >
-        <SelectableButton isSelected={backgroundType === "text"} onClick={() => setBackgroundType("text")}>
+        <SelectableButton
+          isSelected={backgroundType === "text"}
+          onClick={() => setBackgroundType("text")}
+          sx={{ maxWidth: "130px" }}
+        >
           Текст
         </SelectableButton>
-        <SelectableButton isSelected={backgroundType === "video"} onClick={() => setBackgroundType("video")}>
+        <SelectableButton
+          isSelected={backgroundType === "video"}
+          onClick={() => setBackgroundType("video")}
+          sx={{ maxWidth: "130px" }}
+        >
           Видео
         </SelectableButton>
       </Box>
@@ -49,8 +72,13 @@ export default function HelpQuestions() {
         </>
       ) : (
         <Box>
-          <Typography sx={{ paddingBottom: "15px" }}>Загрузите видео</Typography>
-          <ButtonBase onClick={handleOpen} sx={{ justifyContent: "flex-start" }}>
+          <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>
+            Загрузите видео
+          </Typography>
+          <ButtonBase
+            onClick={handleOpen}
+            sx={{ justifyContent: "flex-start" }}
+          >
             {video ? (
               <video src={video} width="400" controls />
             ) : (
@@ -91,8 +119,9 @@ export default function HelpQuestions() {
                   background: theme.palette.background.default,
                 }}
               >
-                <Typography>
-                  Видео можно вставить с любого хостинга: YouTube, Vimeo или загрузить собственное
+                <Typography sx={{ color: "#9A9AAF" }}>
+                  Видео можно вставить с любого хостинга: YouTube, Vimeo или
+                  загрузить собственное
                 </Typography>
                 <Button variant="contained">Готово</Button>
               </Box>
@@ -100,42 +129,64 @@ export default function HelpQuestions() {
                 <SelectableButton
                   isSelected={backgroundTypeModal === "linkVideo"}
                   onClick={() => setBackgroundTypeModal("linkVideo")}
+                  sx={{ maxWidth: "170px", padding: "10px" }}
                 >
                   Ссылка на видео
                 </SelectableButton>
                 <SelectableButton
                   isSelected={backgroundTypeModal === "ownVideo"}
                   onClick={() => setBackgroundTypeModal("ownVideo")}
+                  sx={{ maxWidth: "170px", padding: "10px" }}
                 >
                   Загрузить свое
                 </SelectableButton>
               </Box>
               {backgroundTypeModal === "linkVideo" ? (
                 <Box sx={{ padding: "20px" }}>
-                  <Typography sx={{ paddingBottom: "15px" }}>Ссылка на видео</Typography>
-                  <CustomTextField placeholder={"http://example.com"} text={""} />
+                  <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>
+                    Ссылка на видео
+                  </Typography>
+                  <CustomTextField
+                    placeholder={"http://example.com"}
+                    text={""}
+                  />
                 </Box>
               ) : (
                 <Box sx={{ padding: "20px" }}>
-                  <Typography sx={{ paddingBottom: "15px" }}>Загрузите видео</Typography>
-                  <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
-                    <input onChange={(event) => videoHC(event.target)} hidden accept="video/*" multiple type="file" />
+                  <Typography sx={{ paddingBottom: "15px", fontWeight: "500" }}>
+                    Загрузите видео
+                  </Typography>
+                  <ButtonBase
+                    component="label"
+                    sx={{ justifyContent: "flex-start", width: "100%" }}
+                  >
+                    <input
+                      onChange={(event) => videoHC(event.target)}
+                      hidden
+                      accept="video/*"
+                      multiple
+                      type="file"
+                    />
                     <Box
                       sx={{
                         width: "580px",
-                        padding: "33px",
+                        padding: "33px 33px 33px 50px",
                         display: "flex",
-                        justifyContent: "space-between",
                         alignItems: "center",
                         backgroundColor: theme.palette.background.default,
                         border: `1px solid ${theme.palette.grey2.main}`,
                         borderRadius: "8px",
+                        gap: "50px",
                       }}
                     >
                       <UploadIcon />
-                      <Box>
-                        <Typography>Добавить видео</Typography>
-                        <Typography>Принимает .mp4 и .mov формат — максимум 100мб</Typography>
+                      <Box sx={{ color: "#9A9AAF" }}>
+                        <Typography sx={{ fontWeight: "500" }}>
+                          Добавить видео
+                        </Typography>
+                        <Typography sx={{ fontSize: "16px" }}>
+                          Принимает .mp4 и .mov формат — максимум 100мб
+                        </Typography>
                       </Box>
                     </Box>
                   </ButtonBase>