mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fixed styles in tag edition modal

Browse source
This commit is contained in:
Alejandro Celaya 2022-03-07 08:46:43 +01:00
parent 27e3b6f0d0
commit 9ff331e2db
3 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/index.scss
View file

@ -24,7 +24,7 @@ a,
text-decoration: none; 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 { .btn-link:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -84,7 +84,8 @@ hr {
border-color: var(--table-border-color); border-color: var(--table-border-color);
} }
.page-link:hover { .page-link:hover,
.page-link:focus {
background-color: var(--secondary-color); background-color: var(--secondary-color);
} }
@ -114,6 +115,16 @@ hr {
width: 100%; 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,
.dropdown-item-text { .dropdown-item-text {
color: var(--text-color); color: var(--text-color);

20
src/tags/helpers/EditTagModal.tsx
View file

@ -1,5 +1,5 @@
import { useState } from 'react'; 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 { HexColorPicker } from 'react-colorful';
import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons'; import { faPalette as colorIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -37,14 +37,14 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
<form onSubmit={saveTag}> <form onSubmit={saveTag}>
<ModalHeader toggle={toggle}>Edit tag</ModalHeader> <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
<ModalBody> <ModalBody>
<div className="input-group"> <InputGroup>
<div className="input-group-prepend" id="colorPickerBtn" onClick={toggleColorPicker}> <div
<div id="colorPickerBtn"
className="input-group-text edit-tag-modal__color-picker-toggle" className="input-group-text edit-tag-modal__color-picker-toggle"
style={{ backgroundColor: color, borderColor: color }} style={{ backgroundColor: color, borderColor: color }}
> onClick={toggleColorPicker}
<FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" /> >
</div> <FontAwesomeIcon icon={colorIcon} className="edit-tag-modal__color-icon" />
</div> </div>
<Popover <Popover
isOpen={showColorPicker} isOpen={showColorPicker}
@ -62,7 +62,7 @@ const EditTagModal = ({ getColorForKey }: ColorGenerator) => (
required required
onChange={({ target }) => setNewTagName(target.value)} onChange={({ target }) => setNewTagName(target.value)}
/> />
</div> </InputGroup>
{error && ( {error && (
<Result type="error" small className="mt-2"> <Result type="error" small className="mt-2">

2
src/visits/helpers/MapModal.tsx
View file

@ -40,7 +40,7 @@ const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
<ModalBody className="map-modal__modal-body"> <ModalBody className="map-modal__modal-body">
<h3 className="map-modal__modal-title"> <h3 className="map-modal__modal-title">
{title} {title}
<button type="button" className="close" onClick={toggle}>&times;</button> <button type="button" className="btn-close float-end" onClick={toggle} />
</h3> </h3>
<MapContainer {...calculateMapProps(locations)}> <MapContainer {...calculateMapProps(locations)}>
<OpenStreetMapTile /> <OpenStreetMapTile />