feat: Add reviews/ to gitignore and introduce styling and responsiveness for OrderSuccessModal.

Author: MaximSamorukov

.gitignore

@@ -42,4 +42,7 @@ next-env.d.ts
 
 # app secrets
 /src/.secrets
-.secret_key.txt
+.secret_key.txt
+
+# reviews
+reviews/

src/shared/ui/OrderSuccesModal/index.tsx

@@ -1,9 +1,10 @@
 'use client';
-import React from 'react';
+import React, { useMemo } from 'react';
 import Typography from '@mui/material/Typography';
 import { ModalComponent } from '@/shared/ui/Modal';
 import { Box } from '@mui/material';
 import s from './style.module.scss';
+import { useWindowWidth } from '@/shared/hooks';
 
 type ModalComponentProps = {
   open: boolean;
@@ -17,13 +18,27 @@ export const OrderSuccesModal: React.FC<ModalComponentProps> = ({
   const onClose = () => {
     setOpen(false);
   };
+  const windowWidth = useWindowWidth();
+  const style = useMemo(() => {
+    if (windowWidth >= 420) return {};
+    return { width: '90%', height: 'fit-content' };
+  }, [windowWidth]);
   return (
-    <ModalComponent withControl={false} open={open} onClose={onClose}>
-      <div style={{ padding: 20 }}>
+    <ModalComponent
+      style={style}
+      withControl={false}
+      open={open}
+      onClose={onClose}
+    >
+      <div className={s.container}>
         <Typography id="modal-modal-title" variant="h6" component="h2">
           Заказ успешно отправлен.
         </Typography>
-        <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+        <Typography
+          className={s.text}
+          id="modal-modal-description"
+          sx={{ mt: 2 }}
+        >
           Представитель мастерской вам перезвонит для уточнения объема заказа.
         </Typography>
         <Box

src/shared/ui/OrderSuccesModal/style.module.scss

@@ -1,3 +1,7 @@
+.container {
+  padding: 20px;
+  background-color: #0a0a0a;
+}
 .button {
   all: unset;
   border: 1px solid white;
@@ -10,7 +14,10 @@
   cursor: pointer;
   width: 300px;
   height: 35px;
-
+  @media (max-width: 350px) {
+    width: 100%;
+    height: fit-content;
+  }
   &:hover {
     color: #e49e00;
     border-color: #e49e00;
@@ -20,3 +27,7 @@
     animation: pulseBorder 2s infinite;
   }
 }
+
+.text {
+  height: fit-content;
+}