From 3efbbf1fdbe1577192aedb94ae30c5cdf3e83a0c Mon Sep 17 00:00:00 2001
From: denikeev <script.edf@gmail.com>
Date: Sun, 25 Dec 2022 13:03:27 +0300
Subject: [PATCH] [#110] fix borders in modals

---
 app/assets/stylesheets/bootstrap-custom.scss      | 4 +++-
 app/javascript/components/Modals/Confirmation.jsx | 2 +-
 app/javascript/components/Modals/NewRepl.jsx      | 4 ++--
 app/javascript/components/Modals/RenameRepl.jsx   | 2 +-
 app/javascript/components/Modals/ShareRepl.jsx    | 8 ++++----
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/bootstrap-custom.scss b/app/assets/stylesheets/bootstrap-custom.scss
index 1f5756d8..22fb96e5 100644
--- 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
index 3d604fb7..5bebec1e 100644
--- 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
index 265b2dab..e3bd1620 100644
--- 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
index 159efcf2..ddc1e337 100644
--- 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
index 7d4ef023..0847745f 100644
--- 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')}