From 25eed197f0ecb295cc3162680472bc6a7fa6cfd1 Mon Sep 17 00:00:00 2001 From: Paul Ccari Date: Tue, 30 Mar 2021 01:16:36 -0500 Subject: [PATCH 1/3] rename type props to color in base button --- components/BaseButton/styles.js | 14 +++++++------- components/Favorites/styles.js | 2 +- components/PartyCard/index.js | 2 +- components/PresidentialQuestion/index.js | 4 ++-- components/PresidentialQuizBreakdown/index.js | 2 +- components/PresidentialTopics/index.js | 2 +- components/Steps/2/index.js | 2 +- components/Steps/3/index.js | 2 +- components/Steps/CandidateResults/index.js | 2 +- components/Steps/CandidateSingle/index.js | 5 ++--- components/Steps/PartyResults/index.js | 2 +- 11 files changed, 19 insertions(+), 20 deletions(-) diff --git a/components/BaseButton/styles.js b/components/BaseButton/styles.js index 6d0f09c..0250a82 100644 --- a/components/BaseButton/styles.js +++ b/components/BaseButton/styles.js @@ -30,19 +30,19 @@ const textColorPriority = { 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']}; + backgroundColorPriority[props.color || 'primary']}; + border-color: ${(props) => borderColorPriority[props.color || 'primary']}; border-radius: 2rem; - cursor: ${(props) => (props.type === 'disabled' ? 'auto' : 'pointer')}; - color: ${(props) => textColorPriority[props.type || 'primary']}; + border-width: ${(props) => borderWidthPriority[props.color || 'primary']}; + color: ${(props) => textColorPriority[props.color || 'primary']}; + cursor: ${(props) => (props.color === 'disabled' ? 'auto' : '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'}; + props.color === 'disabled' ? 'none' : 'underline'}; } `; diff --git a/components/Favorites/styles.js b/components/Favorites/styles.js index 0d5239a..b5b6ff0 100644 --- 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) => ( - + ))` margin-top: 1.25rem; `; diff --git a/components/PartyCard/index.js b/components/PartyCard/index.js index e678901..3f8eecf 100644 --- a/components/PartyCard/index.js +++ b/components/PartyCard/index.js @@ -21,7 +21,7 @@ const PartyCard = (props) => { {numberOfCandidates(props.numberOfCandidates)} Ver candidatos diff --git a/components/PresidentialQuestion/index.js b/components/PresidentialQuestion/index.js index 2f12cdc..9818265 100644 --- a/components/PresidentialQuestion/index.js +++ b/components/PresidentialQuestion/index.js @@ -124,7 +124,7 @@ export default function PresidentialQuestion() { Continuar @@ -132,7 +132,7 @@ export default function PresidentialQuestion() { handleNextButton({ isOmitted: true })} - type="transparent"> + color="transparent"> Omitir diff --git a/components/PresidentialQuizBreakdown/index.js b/components/PresidentialQuizBreakdown/index.js index 0bf77bc..73e93e9 100644 --- a/components/PresidentialQuizBreakdown/index.js +++ b/components/PresidentialQuizBreakdown/index.js @@ -67,7 +67,7 @@ export default function PresidentialQuizBreakdown() { Ningún tópico seleccionado )} ))} Ocultar candidatos - + Incluir candidatos diff --git a/components/Steps/3/index.js b/components/Steps/3/index.js index 1209530..b46d998 100644 --- a/components/Steps/3/index.js +++ b/components/Steps/3/index.js @@ -28,7 +28,7 @@ export default function Step3() { Ocultar partidos - + Incluir partidos diff --git a/components/Steps/CandidateResults/index.js b/components/Steps/CandidateResults/index.js index 1a1e990..1785921 100644 --- a/components/Steps/CandidateResults/index.js +++ b/components/Steps/CandidateResults/index.js @@ -122,7 +122,7 @@ export default function Step4(props) { setFilterModalState(true)} /> diff --git a/components/Steps/CandidateSingle/index.js b/components/Steps/CandidateSingle/index.js index 052d68e..0fb5aa5 100644 --- 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 ? ( removeFavorite(c.hoja_vida_id)} /> ) : ( diff --git a/components/Steps/PartyResults/index.js b/components/Steps/PartyResults/index.js index 14d1136..948eddc 100644 --- a/components/Steps/PartyResults/index.js +++ b/components/Steps/PartyResults/index.js @@ -183,7 +183,7 @@ export default function PartyResults(props) { : 'única opción'} setFilterModalState(true)} /> From 1a09bc6f1de94b1d5cf8a80d1b413290316d0694 Mon Sep 17 00:00:00 2001 From: Paul Ccari Date: Tue, 30 Mar 2021 01:50:32 -0500 Subject: [PATCH 2/3] refactor button component --- components/BaseButton/index.js | 2 +- components/BaseButton/styles.js | 74 +++++++++---------- components/PresidentialQuestion/index.js | 1 - components/PresidentialQuestion/styles.js | 7 -- components/PresidentialQuizBreakdown/index.js | 5 -- components/PresidentialTopics/index.js | 5 -- components/Steps/1/styles.js | 10 +-- 7 files changed, 40 insertions(+), 64 deletions(-) diff --git a/components/BaseButton/index.js b/components/BaseButton/index.js index 36e8f3e..c3dfa75 100644 --- a/components/BaseButton/index.js +++ b/components/BaseButton/index.js @@ -2,7 +2,7 @@ import { StyledButton } from './styles.js'; const BaseButton = (props) => { return ( - + {typeof props.children === 'string' ? props.children : props.text} ); diff --git a/components/BaseButton/styles.js b/components/BaseButton/styles.js index 0250a82..7eb866a 100644 --- a/components/BaseButton/styles.js +++ b/components/BaseButton/styles.js @@ -1,48 +1,48 @@ -import styled 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', -}; +import styled, { css } from 'styled-components'; export const StyledButton = styled('button')` - background-color: ${(props) => - backgroundColorPriority[props.color || 'primary']}; - border-color: ${(props) => borderColorPriority[props.color || 'primary']}; + background-color: #04102f; + border: none; border-radius: 2rem; - border-width: ${(props) => borderWidthPriority[props.color || 'primary']}; - color: ${(props) => textColorPriority[props.color || 'primary']}; - cursor: ${(props) => (props.color === 'disabled' ? 'auto' : 'pointer')}; + color: #ffffff; + cursor: pointer; font-family: 'Roboto', sans-serif; height: 3rem; min-width: 7.375rem; padding: 0 1.5rem; &:hover { - text-decoration: ${(props) => - props.color === '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/PresidentialQuestion/index.js b/components/PresidentialQuestion/index.js index 9818265..5b3fd02 100644 --- a/components/PresidentialQuestion/index.js +++ b/components/PresidentialQuestion/index.js @@ -124,7 +124,6 @@ export default function PresidentialQuestion() { Continuar diff --git a/components/PresidentialQuestion/styles.js b/components/PresidentialQuestion/styles.js index 62e3074..e7b9dbf 100644 --- 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 index 73e93e9..b78f189 100644 --- a/components/PresidentialQuizBreakdown/index.js +++ b/components/PresidentialQuizBreakdown/index.js @@ -67,11 +67,6 @@ export default function PresidentialQuizBreakdown() { Ningún tópico seleccionado )} ))} Router.push('/presidential-steps/2')} text="Continuar" diff --git a/components/Steps/1/styles.js b/components/Steps/1/styles.js index 7cca30b..51ef1f4 100644 --- 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')}; - } `; From 689122fabc4fc3c2a1ab7f50b7781706151a47d4 Mon Sep 17 00:00:00 2001 From: Paul Ccari Date: Tue, 30 Mar 2021 01:54:07 -0500 Subject: [PATCH 3/3] add prop type button as default --- components/BaseButton/styles.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/BaseButton/styles.js b/components/BaseButton/styles.js index 7eb866a..00058a5 100644 --- a/components/BaseButton/styles.js +++ b/components/BaseButton/styles.js @@ -1,6 +1,8 @@ import styled, { css } from 'styled-components'; -export const StyledButton = styled('button')` +export const StyledButton = styled('button').attrs((props) => ({ + type: props.type || 'button', +}))` background-color: #04102f; border: none; border-radius: 2rem;