From 9ff331e2dbb6945bbc6411d7860ee715d5c3ecc9 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 7 Mar 2022 08:46:43 +0100
Subject: [PATCH] Fixed styles in tag edition modal

---
 src/index.scss                    | 15 +++++++++++++--
 src/tags/helpers/EditTagModal.tsx | 20 ++++++++++----------
 src/visits/helpers/MapModal.tsx   |  2 +-
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 00bbd8eb..c23c1067 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -24,7 +24,7 @@ a,
   text-decoration: none;
 }
 
-a:not(.nav-link):not(.navbar-brand):hover,
+a:not(.nav-link):not(.navbar-brand):not(.page-link):hover,
 .btn-link:hover {
   text-decoration: underline;
 }
@@ -84,7 +84,8 @@ hr {
   border-color: var(--table-border-color);
 }
 
-.page-link:hover {
+.page-link:hover,
+.page-link:focus {
   background-color: var(--secondary-color);
 }
 
@@ -114,6 +115,16 @@ hr {
   width: 100%;
 }
 
+.btn-primary,
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.active,
+.btn-outline-primary:hover,
+.btn-outline-primary:active,
+.btn-outline-primary.active, {
+  color: #fff;
+}
+
 .dropdown-item,
 .dropdown-item-text {
   color: var(--text-color);
diff --git a/src/tags/helpers/EditTagModal.tsx b/src/tags/helpers/EditTagModal.tsx
index 80a6d477..89110993 100644
--- a/src/tags/helpers/EditTagModal.tsx
+++ b/src/tags/helpers/EditTagModal.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
+import { Button, Input, Modal, ModalBody, ModalFooter, ModalHeader, Popover, InputGroup } from 'reactstrap';
 import { HexColorPicker } from 'react-colorful';
 import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -37,14 +37,14 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
       <form onSubmit={saveTag}>
         <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
         <ModalBody>
-          <div className="input-group">
-            <div className="input-group-prepend" id="colorPickerBtn" onClick={toggleColorPicker}>
-              <div
-                className="input-group-text edit-tag-modal__color-picker-toggle"
-                style={{ backgroundColor: color, borderColor: color }}
-              >
-                <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
-              </div>
+          <InputGroup>
+            <div
+              id="colorPickerBtn"
+              className="input-group-text edit-tag-modal__color-picker-toggle"
+              style={{ backgroundColor: color, borderColor: color }}
+              onClick={toggleColorPicker}
+            >
+              <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
             </div>
             <Popover
               isOpen={showColorPicker}
@@ -62,7 +62,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
               required
               onChange={({ target }) => setNewTagName(target.value)}
             />
-          </div>
+          </InputGroup>
 
           {error && (
             <Result type="error" small className="mt-2">
diff --git a/src/visits/helpers/MapModal.tsx b/src/visits/helpers/MapModal.tsx
index ae57ed12..b672b1af 100644
--- a/src/visits/helpers/MapModal.tsx
+++ b/src/visits/helpers/MapModal.tsx
@@ -40,7 +40,7 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
     <ModalBody className="map-modal__modal-body">
       <h3 className="map-modal__modal-title">
         {title}
-        <button type="button" className="close" onClick={toggle}>&times;</button>
+        <button type="button" className="btn-close float-end" onClick={toggle} />
       </h3>
       <MapContainer {...calculateMapProps(locations)}>
         <OpenStreetMapTile />