[hexlet-rus#110] fix borders in modals

denikeev · Dec 25, 2022 · 3efbbf1 · 3efbbf1
1 parent 87cc8dc
commit 3efbbf1
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/app/assets/stylesheets/bootstrap-custom.scss b/app/assets/stylesheets/bootstrap-custom.scss
@@ -4,7 +4,9 @@ $dark-text-color-hover: rgba(255, 255, 255, 1);
 
 // bootstrap variables override
 $nav-tabs-link-active-color: $dark-text-color-hover;
-$nav-tabs-link-active-bg: var(--bs-dark-rgb);
+$nav-tabs-link-active-bg: var(--bs-dark);
+$nav-tabs-link-active-border-color: var(--bs-secondary) var(--bs-secondary) var(--bs-dark);
+$nav-tabs-link-hover-border-color: var(--bs-gray-700) var(--bs-gray-700) var(--bs-secondary);
 $nav-link-color: $dark-text-color;
 $nav-link-hover-color: $dark-text-color-hover;
 

diff --git a/app/javascript/components/Modals/Confirmation.jsx b/app/javascript/components/Modals/Confirmation.jsx
@@ -27,7 +27,7 @@ function Confirmation() {
       show
     >
       <Modal.Header
-        className="bg-dark text-white"
+        className="bg-dark text-white border-secondary"
         closeButton
         closeVariant="white"
       >

diff --git a/app/javascript/components/Modals/NewRepl.jsx b/app/javascript/components/Modals/NewRepl.jsx
@@ -78,7 +78,7 @@ function NewRepl() {
       show
     >
       <Modal.Header
-        className="bg-dark text-white"
+        className="bg-dark text-white border-secondary"
         closeButton
         closeVariant="white"
       >
@@ -94,7 +94,7 @@ function NewRepl() {
               className="text-white"
             >
               <Form.Control
-                className="text-white bg-dark"
+                className="text-white bg-dark border-secondary"
                 name="name"
                 onChange={formik.handleChange}
                 placeholder={t('modals.share.snippetNameLabel')}

diff --git a/app/javascript/components/Modals/RenameRepl.jsx b/app/javascript/components/Modals/RenameRepl.jsx
@@ -64,7 +64,7 @@ function RenameRepl() {
     >
       <Modal.Header
         closeButton
-        className="bg-dark text-white"
+        className="bg-dark text-white border-secondary"
         closeVariant="white"
       >
         <Modal.Title>{t('modals.newSnippetName')}</Modal.Title>

diff --git a/app/javascript/components/Modals/ShareRepl.jsx b/app/javascript/components/Modals/ShareRepl.jsx
@@ -92,7 +92,7 @@ function ShareRepl() {
       <Modal.Body className="bg-dark">
         <Tabs
           defaultActiveKey={snippetData ? 'share-link' : 'save-snippet'}
-          className="mb-3"
+          className="mb-3 border-secondary"
           fill
         >
           {snippetData && (
@@ -103,7 +103,7 @@ function ShareRepl() {
                   label={t('modals.share.snippetLinkLabel')}
                 />
                 <Form.Control
-                  className="text-white bg-dark"
+                  className="text-white bg-dark border-secondary"
                   readOnly
                   name="name"
                   placeholder={t('modals.share.snippetLinkLabel')}
@@ -137,7 +137,7 @@ function ShareRepl() {
                   className="text-white"
                 />
                 <textarea
-                  className="text-white bg-dark w-100"
+                  className="text-white bg-dark w-100 border-secondary"
                   readOnly
                   name="name"
                   placeholder={t('modals.share.snippetEmbedLabel')}
@@ -167,7 +167,7 @@ function ShareRepl() {
                   className="text-white"
                 >
                   <Form.Control
-                    className="bg-dark text-white"
+                    className="bg-dark text-white border-secondary"
                     name="name"
                     onChange={formik.handleChange}
                     placeholder={t('modals.share.snippetNameLabel')}