fix modal bag with checkbox on hover and fix padding in modal

* added Card

* added Modal

* created forwardRef Modal

* changed forwardRef Modal

* changed App

* merge main in modal

* delete padding in Card, change stories in Card and Modal

* change signUp

* created <BrowserRouter> in sign-in.stories

* delete width styles in Card, added props className, styles in Modal, corrected checkbox in SignIn

* added className in Modal.stories

* created addNewCard, common/utils/zod-schemas, ui/file-uploader, form/form-preview-file-uploader

* created addNewCard

* created addNewPack

* updated useUploadImg

* changed Typography 'Forgot Password?' and 'Don't have an account?' on 'button'

* clean branch modal

* fix modal bag with checkbox on hover and fix padding in modal

src/App.tsx

@@ -12,4 +12,4 @@ export function App() {
       <PageDeckNextQuestion status />
     </div>
   )
-}
+}

src/components/forms/add-new-card/add-new-card.module.scss

@@ -1,5 +1,5 @@
 .form {
-  width: 95%;
+  width: 100%;
 }
 
 .box {

src/components/forms/add-new-pack/add-new-pack.module.scss

@@ -1,5 +1,5 @@
 .form {
-  width: 95%;
+  width: 100%;
 }
 
 .box {

src/components/forms/add-new-pack/add-new-pack.tsx

@@ -96,16 +96,20 @@ export const AddNewPack = ({ defaultValues, onSubmit, setOpenModal }: Props) =>
             name={'coverPack'}
             preview={packDownloaded}
           />
-          <Controller
-            control={control}
-            defaultValue={false}
-            name={'isPrivatePack'}
-            render={({ field: { onChange, value } }) => (
-              <div className={s.checkbox}>
-                <Checkbox checked={value} label={'Private Pack'} onCheckedChange={onChange} />
-              </div>
-            )}
-          />
+          <div className={s.checkbox}>
+            <Controller
+              control={control}
+              defaultValue={false}
+              name={'isPrivatePack'}
+              render={({ field: { onChange, value } }) => (
+                <Checkbox
+                  checked={value}
+                  label={'Private Pack'}
+                  onCheckedChange={onChange}
+                />
+              )}
+            />
+          </div>
         </div>
         <div className={s.footer}>
           <Button onClick={() => setOpenModal(false)} variant={'secondary'}>

src/components/ui/card/card.module.scss

@@ -1,4 +1,5 @@
 .root {
+  position: relative;
   background-color: var(--color-dark-700);
   border: 1px solid var(--color-dark-500);
   border-radius: 2px;

src/components/ui/modal/modal.module.scss

@@ -17,6 +17,20 @@ input {
   animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.card {
+  position: relative;
+  background-color: transparent;
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-dark-700);
+  }
+}
+
 .DialogContent {
   border-radius: 6px;
   box-shadow:
@@ -55,20 +69,6 @@ input {
   overflow-y: auto;
   max-height: 590px;
   padding: 24px;
-
-  &::-webkit-scrollbar {
-    width: 8px;
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-dark-300);
-    border-radius: 3px;
-
-    &:hover {
-      background-color: var(--color-dark-100);
-    }
-  }
 }
 
 .closeBtn {

src/components/ui/modal/modal.tsx

@@ -21,7 +21,7 @@ export const Modal = ({ children, className, style, title, ...props }: Props) =>
     <Dialog.Portal>
       <Dialog.Overlay className={s.DialogOverlay} />
       <Dialog.Content className={clsx(s.DialogContent)}>
-        <Card className={className} style={style}>
+        <Card className={clsx(className, s.card)} style={style}>
           <div className={s.header}>
             <Typography as={'h2'} variant={'h2'}>
               {title}

src/main.tsx

@@ -14,4 +14,4 @@ createRoot(document.getElementById('root') as HTMLElement).render(
       <App />
     </BrowserRouter>
   </StrictMode>
-)
+)

src/styles/_boilerplate.scss

@@ -39,3 +39,17 @@ body {
 
   background-color: var(--color-dark-900);
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-dark-300);
+  border-radius: 3px;
+
+  &:hover {
+    background-color: var(--color-dark-100);
+  }
+}