openpolitica · paulclindo · Mar 30, 2021 · Mar 30, 2021 · Mar 30, 2021
diff --git a/components/BaseButton/index.js b/components/BaseButton/index.js
@@ -2,7 +2,7 @@ import { StyledButton } from './styles.js';
 
 const BaseButton = (props) => {
   return (
-    <StyledButton {...props}>
+    <StyledButton color={props.color || 'primary'} {...props}>
       {typeof props.children === 'string' ? props.children : props.text}
     </StyledButton>
   );

diff --git a/components/BaseButton/styles.js b/components/BaseButton/styles.js
@@ -1,48 +1,50 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-const backgroundColorPriority = {
-  primary: '#04102F',
-  secondary: '#4EB5A2',
-  transparent: 'transparent',
-  disabled: '#8E94A4',
-};
-
-const borderColorPriority = {
-  primary: 'none',
-  secondary: 'none',
-  transparent: '#04102F',
-  disabled: 'none',
-};
-
-const borderWidthPriority = {
-  primary: '0px',
-  secondary: '0px',
-  transparent: '1px',
-  disabled: '0px',
-};
-
-const textColorPriority = {
-  primary: 'white',
-  secondary: 'white',
-  transparent: '#04102F',
-  disabled: 'white',
-};
-
-export const StyledButton = styled('button')`
-  background-color: ${(props) =>
-    backgroundColorPriority[props.type || 'primary']};
-  border-color: ${(props) => borderColorPriority[props.type || 'primary']};
-  border-width: ${(props) => borderWidthPriority[props.type || 'primary']};
+export const StyledButton = styled('button').attrs((props) => ({
+  type: props.type || 'button',
+}))`
+  background-color: #04102f;
+  border: none;
   border-radius: 2rem;
-  cursor: ${(props) => (props.type === 'disabled' ? 'auto' : 'pointer')};
-  color: ${(props) => textColorPriority[props.type || 'primary']};
+  color: #ffffff;
+  cursor: pointer;
   font-family: 'Roboto', sans-serif;
-  min-width: 7.375rem;
   height: 3rem;
+  min-width: 7.375rem;
   padding: 0 1.5rem;
 
   &:hover {
-    text-decoration: ${(props) =>
-      props.type === 'disabled' ? 'none' : 'underline'};
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    border: none;
+    opacity: 0.25;
+    &:hover {
+      cursor: auto;
+      text-decoration: none;
+    }
   }
+
+  ${(props) =>
+    props.color === 'primary' &&
+    css`
+      background-color: #04102f;
+      border: none;
+      color: #ffffff;
+    `}
+  ${(props) =>
+    props.color === 'secondary' &&
+    css`
+      background-color: #4eb5a2;
+      border: none;
+      color: #ffffff;
+    `}
+  ${(props) =>
+    props.color === 'transparent' &&
+    css`
+      background-color: transparent;
+      border: 1px solid #04102f;
+      color: #04102f;
+    `}
 `;
diff --git a/components/Favorites/styles.js b/components/Favorites/styles.js
@@ -42,7 +42,7 @@ export const CandidateCard = styled(BaseCandidateCard)`
 
 // Todo: make it sticky / position-absoluted when needed
 export const KeepLookingButton = styled((props) => (
-  <BaseButton type="secondary" {...props} />
+  <BaseButton color="secondary" {...props} />
 ))`
   margin-top: 1.25rem;
 `;
diff --git a/components/PartyCard/index.js b/components/PartyCard/index.js
@@ -21,7 +21,7 @@ const PartyCard = (props) => {
         {numberOfCandidates(props.numberOfCandidates)}
       </Styled.NumberOfCandidates>
       <Styled.SeeCandidatesButton
-        type="transparent"
+        color="transparent"
         onClick={onSeeCandidatesButtonClick(props.partyName)(props.candidates)}>
         Ver candidatos
       </Styled.SeeCandidatesButton>

diff --git a/components/PresidentialQuestion/index.js b/components/PresidentialQuestion/index.js
@@ -124,15 +124,14 @@ export default function PresidentialQuestion() {
           </Styled.QuestionList>
           <Styled.QuestionButtons>
             <BaseButton
-              type={selectedOption === '' ? 'disabled' : 'primary'}
               disabled={selectedOption === ''}
               onClick={handleNextButton}>
               Continuar
             </BaseButton>
             <Styled.OmitButton
               disabled={questionsOmitted === allowOmittedQuestionsPerTopic}
               onClick={() => handleNextButton({ isOmitted: true })}
-              type="transparent">
+              color="transparent">
               Omitir
             </Styled.OmitButton>
           </Styled.QuestionButtons>

diff --git a/components/PresidentialQuestion/styles.js b/components/PresidentialQuestion/styles.js
@@ -48,13 +48,6 @@ export const QuestionButtons = styled('div')`
 export const OmitButton = styled(BaseButton)`
   border: none;
   margin-top: 1.125rem;
-  &:disabled {
-    opacity: 0.4;
-    &:hover {
-      cursor: auto;
-      text-decoration: none;
-    }
-  }
 `;
 export const NoQuestionChip = styled(BaseChip)`
   margin: 0 auto;

diff --git a/components/PresidentialQuizBreakdown/index.js b/components/PresidentialQuizBreakdown/index.js
@@ -67,11 +67,6 @@ export default function PresidentialQuizBreakdown() {
             <Styled.SubTitle>Ningún tópico seleccionado</Styled.SubTitle>
           )}
           <Styled.Button
-            type={
-              userSelectedTopics.length < requiredNumberOfSelectedTopics
-                ? 'disabled'
-                : 'primary'
-            }
             disabled={
               userSelectedTopics.length < requiredNumberOfSelectedTopics
             }

diff --git a/components/PresidentialTopics/index.js b/components/PresidentialTopics/index.js
@@ -44,11 +44,6 @@ export default function PresidentialTopics() {
           />
         ))}
         <Styled.Button
-          type={
-            userSelectedTopics.length < requiredNumberOfSelectedTopics
-              ? 'disabled'
-              : 'primary'
-          }
           disabled={userSelectedTopics.length < requiredNumberOfSelectedTopics}
           onClick={() => Router.push('/presidential-steps/2')}
           text="Continuar"

diff --git a/components/Steps/1/styles.js b/components/Steps/1/styles.js
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import BaseHeader from 'components/Header';
 import BaseStepper from 'components/Stepper';
 import BaseTitle from 'components/BaseTitle';
-import BaseParagraph from 'components/BaseParagraph';
 import BaseSelect from 'components/BaseSelect';
 import BaseLinkButton from 'components/LinkButton';
 import BaseButton from 'components/BaseButton';
@@ -22,15 +21,15 @@ export const Header = styled(BaseHeader)`
 `;
 
 export const GoBackButton = styled(BaseGoBackButton)`
-  margin-top: 16px;
   margin-left: 16px;
+  margin-top: 16px;
 `;
 
 export const Step = styled('div')`
   align-items: center;
+  display: flex;
   flex: 1;
   flex-direction: column;
-  display: flex;
   padding: 0 1.5rem;
 `;
 
@@ -63,10 +62,5 @@ export const LinkButton = styled(BaseLinkButton)`
 
 export const Button = styled(BaseButton)`
   align-self: center;
-  background-color: ${(props) => (props.disabled ? 'grey' : 'auto')};
-  cursor: ${(props) => (props.disabled ? 'auto' : 'pointer')};
   margin-bottom: 5rem;
-  &:hover {
-    text-decoration: ${(props) => (props.disabled ? 'none' : 'underline')};
-  }
 `;
diff --git a/components/Steps/2/index.js b/components/Steps/2/index.js
@@ -35,7 +35,7 @@ export default function Step2() {
         <Styled.NoButton onClick={onNoButtonClick}>
           Ocultar candidatos
         </Styled.NoButton>
-        <Styled.YesButton type="transparent" onClick={onYesButtonClick}>
+        <Styled.YesButton color="transparent" onClick={onYesButtonClick}>
           Incluir candidatos
         </Styled.YesButton>
       </Styled.YesNoButtons>

diff --git a/components/Steps/3/index.js b/components/Steps/3/index.js
@@ -28,7 +28,7 @@ export default function Step3() {
         <Styled.NoButton onClick={onNoButtonClick}>
           Ocultar partidos
         </Styled.NoButton>
-        <Styled.YesButton type="transparent" onClick={onYesButtonClick}>
+        <Styled.YesButton color="transparent" onClick={onYesButtonClick}>
           Incluir partidos
         </Styled.YesButton>
       </Styled.YesNoButtons>

diff --git a/components/Steps/CandidateResults/index.js b/components/Steps/CandidateResults/index.js
@@ -122,7 +122,7 @@ export default function Step4(props) {
           </Styled.Emphasis>
         </Styled.Title>
         <Styled.FilterButton
-          type="transparent"
+          color="transparent"
           onClick={() => setFilterModalState(true)}
         />
         <Styled.ChipCard type="good">

diff --git a/components/Steps/CandidateSingle/index.js b/components/Steps/CandidateSingle/index.js
@@ -7,7 +7,6 @@ import * as Styled from './styles';
 import { FavoritesContext } from 'hooks/useFavorites';
 import Loading from 'components/Loading';
 import GoBackButton from 'components/GoBackButton';
-import toggleSlug from 'components/PartyCard/toggleSlug';
 
 const LoadingScreen = () => {
   return (
@@ -60,7 +59,7 @@ export default function CandidateSingle(props) {
     setCollapsed(newCollapsedObject);
   };
 
-  const { data, error } = useSWR(
+  const { data } = useSWR(
     candidateId ? `/api/candidates/hoja_vida_id/${candidateId}` : null,
     () =>
       fetch(
@@ -198,7 +197,7 @@ export default function CandidateSingle(props) {
         isFavorite ? (
           <Styled.FavoriteButton
             text="Sácame de tus opciones"
-            type="transparent"
+            color="transparent"
             onClick={() => removeFavorite(c.hoja_vida_id)}
           />
         ) : (

diff --git a/components/Steps/PartyResults/index.js b/components/Steps/PartyResults/index.js
@@ -183,7 +183,7 @@ export default function PartyResults(props) {
             : 'única opción'}
         </Styled.Title>
         <Styled.FilterButton
-          type="transparent"
+          color="transparent"
           onClick={() => setFilterModalState(true)}
         />
         <Styled.Chip type={'good'}>