Increase specificity of buttons to avoid clashes

antmicro · Sep 29, 2023 · 3152b37 · 3152b37
1 parent 855dd32
commit 3152b37
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/ButtonGroup.js b/src/components/ButtonGroup.js
@@ -4,12 +4,13 @@ import styled from 'styled-components/macro';
 import DefaultButton from './Buttons.js';
 
 const GroupButton = styled(DefaultButton)`
+&& {
   color: ${props => props.$active ? 'white' : 'var(--gray-900)'};
   border: ${props => props.$active ? '1px solid var(--green-500)' : '1px solid var(--gray-800)'};
   background-color: ${props => props.$active ? 'var(--green-500)' : 'var(--gray-800)'};
   margin: 5px;
   width: 40px;
-`;
+}`;
 
 const ButtonGroup = ({ buttons, initialClickedId = 2, clickCallback }) => {
   const [clickedId, setClickedId] = useState(initialClickedId);

diff --git a/src/components/Buttons.js b/src/components/Buttons.js
@@ -1,6 +1,7 @@
 import styled from 'styled-components/macro';
 
 const DefaultButton = styled.button`
+&& {
   cursor: pointer;
   color: #fff;
   font-family: "Lato", sans-serif;
@@ -21,11 +22,12 @@ const DefaultButton = styled.button`
     background-color: var(--green-400);
     border: 1px solid var(--green-400);
   }
-`;
+}`;
 
 export const TopbarButton = styled(DefaultButton)`
+&& {
   padding: 0px 15px;
   margin: 5px;
-`;
+}`;
 
 export default DefaultButton;
diff --git a/src/components/Modal.js b/src/components/Modal.js
@@ -31,14 +31,15 @@ const ButtonContainer = styled.div`
 `;
 
 const ModalButton = styled(DefaultButton)`
+&& {
   padding: 0 10px;
   margin-top: 0px;
 
   &:hover {
     background-color: ${props => props.$negative ? 'var(--red-500)' : 'var(--green-400)'} !important;
     border: 1px solid ${props => props.$negative ? 'var(--red-500)' : 'var(--green-400)'} !important;
   }
-`;
+}`;
 
 const Modal = ({changeDocumentTemplate, selectedTemplate, closeModal}) => {