Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Personnaliser les boutons pour qu'ils ressemblent 脿 ceux d'Amazon #2

Closed
shouze opened this issue Nov 29, 2022 · 0 comments 路 May be fixed by #12
Closed

Personnaliser les boutons pour qu'ils ressemblent 脿 ceux d'Amazon #2

shouze opened this issue Nov 29, 2022 · 0 comments 路 May be fixed by #12
Assignees
@ajstorre @MaelDvllrs @AlecHggs @lucasrhl
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@shouze
Copy link

shouze commented Nov 29, 2022

馃憠 莽a se passe par ici :

aixmazon-v1-2022-PoolB/storefront/styles/theme.ts

Lines 1 to 13 in 56dd520

export const theme = {
name: "default",
colors: {
primary: "#161616",
secondary: "#AFFAD6",
lightText: "#FFFFFF",
darkText: "#000000",
},
font: {
heading: "Raleway",
body: "Cabin",
},
};

aixmazon-v1-2022-PoolB/storefront/components/Button/Button.tsx

Lines 1 to 34 in 56dd520

import React from "react";
import styled from "styled-components";
interface Props {
children?: React.ReactNode;
className?: string;
onClickFunction?: React.MouseEventHandler<HTMLButtonElement>;
isClicked?: boolean;
}
const Button = (props: Props) => {
return (
<StyledButton
className={props.className}
onClick={props.onClickFunction}
isClicked={props.isClicked}
>
{props.children}
</StyledButton>
);
};
export default Button;
const StyledButton = styled.button<Props>`
border: none;
background-color: ${(props) =>
props.isClicked
? props.theme.colors.secondary
: props.theme.colors.primary};
color: ${(props) => props.theme.colors.lightText};
transition: background-color 0.2s ease;
padding: 10px 20px;
`;

aixmazon-v1-2022-PoolB/storefront/components/CTA/CTA.tsx

Lines 1 to 35 in 56dd520

import React from "react";
import styled from "styled-components";
interface Props {
className?: string;
children?: React.ReactNode;
onClickFunction: React.MouseEventHandler<HTMLButtonElement>;
disabled?: boolean;
}
const CTA = (props: Props) => {
return (
<StyledButton
className={props.className}
onClick={props.onClickFunction}
disabled={props.disabled}
>
{props.children}
</StyledButton>
);
};
export default CTA;
const StyledButton = styled.button`
width: 100%;
padding: 16px 20px;
border: none;
background: ${(props) => props.theme.colors.secondary};
color: ${(props) => props.theme.colors.darkText};
&:disabled {
opacity: 0.4;
background: lightgrey;
}
`;

@shouze shouze added enhancement New feature or request good first issue Good for newcomers labels Nov 29, 2022
@ajstorre ajstorre mentioned this issue Dec 7, 2022
Merged
@lucasrhl lucasrhl linked a pull request Dec 7, 2022 that will close this issue
upd: change button style hover #12
Open
@shouze shouze closed this as completed Dec 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ajstorre ajstorre

@MaelDvllrs MaelDvllrs

@AlecHggs AlecHggs

@lucasrhl lucasrhl

Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

upd: change button style hover les-petits-commercants-de-la-toile/aixmazon-v1-2022-PoolB
5 participants
@shouze @ajstorre @MaelDvllrs @AlecHggs @lucasrhl