Skip to content

Commit

Permalink
style update
Browse files Browse the repository at this point in the history
  • Loading branch information
@NickJ202
NickJ202 committed Sep 8, 2024
1 parent 14ddaf0 commit 526b42e
Show file tree
Hide file tree
Showing 13 changed files with 99 additions and 62 deletions.
2 changes: 1 addition & 1 deletion src/app/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ export const DrawerContent = styled.div<{ transparent?: boolean }>`
width: 100%;
padding: ${(props) => (props.transparent ? `0` : `20px`)};
background: ${(props) =>
props.transparent ? props.theme.colors.transparent : props.theme.colors.container.alt2.background};
props.transparent ? props.theme.colors.transparent : props.theme.colors.container.primary.background};
border-bottom-left-radius: ${(props) => (props.transparent ? `0` : STYLING.dimensions.radius.primary)};
border-bottom-right-radius: ${(props) => (props.transparent ? `0` : STYLING.dimensions.radius.primary)};
> * {
Expand Down
34 changes: 28 additions & 6 deletions src/components/atoms/Button/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,20 +66,20 @@ export const Primary = styled.button<{
background: ${(props) => props.theme.colors.button.primary.active.background};
border: 1px solid ${(props) => props.theme.colors.button.primary.active.border};
span {
color: ${(props) => props.theme.colors.font.light1} !important;
color: ${(props) => props.theme.colors.button.primary.active.color} !important;
}
svg {
color: ${(props) => props.theme.colors.font.light1} !important;
color: ${(props) => props.theme.colors.button.primary.active.color} !important;
}
}
&:focus {
background: ${(props) => props.theme.colors.button.primary.active.background};
border: 1px solid ${(props) => props.theme.colors.button.primary.active.border};
span {
color: ${(props) => props.theme.colors.font.light1} !important;
color: ${(props) => props.theme.colors.button.primary.active.color} !important;
}
svg {
color: ${(props) => props.theme.colors.font.light1} !important;
color: ${(props) => props.theme.colors.button.primary.active.color} !important;
}
}
&:disabled {
Expand All @@ -100,7 +100,9 @@ export const Primary = styled.button<{
font-size: ${(props) => props.theme.typography.size.xSmall} !important;
font-weight: ${(props) => props.theme.typography.weight.bold} !important;
color: ${(props) =>
props.active ? props.theme.colors.font.light1 : props.theme.colors.button.primary.color} !important;
props.active
? props.theme.colors.button.primary.active.color
: props.theme.colors.button.primary.color} !important;
}
`;

Expand Down Expand Up @@ -156,7 +158,27 @@ export const Alt1 = styled(Primary)`
overflow: hidden;
font-size: ${(props) => props.theme.typography.size.xSmall} !important;
font-weight: ${(props) => props.theme.typography.weight.bold} !important;
color: ${(props) => props.theme.colors.font.light1} !important;
color: ${(props) =>
props.active ? props.theme.colors.button.alt1.active.color : props.theme.colors.button.alt1.color} !important;
}
&:hover {
span {
color: ${(props) => props.theme.colors.button.alt1.active.color} !important;
}
svg {
color: ${(props) => props.theme.colors.button.alt1.active.color} !important;
fill: ${(props) => props.theme.colors.button.alt1.active.color} !important;
}
}
&:focus {
span {
color: ${(props) => props.theme.colors.button.alt1.active.color} !important;
}
svg {
color: ${(props) => props.theme.colors.button.alt1.active.color} !important;
fill: ${(props) => props.theme.colors.button.alt1.active.color} !important;
}
}
`;

Expand Down
2 changes: 1 addition & 1 deletion src/components/atoms/Drawer/Drawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function Drawer(props: IProps) {
const [open, setOpen] = React.useState<boolean>(true);

return (
<S.Wrapper>
<S.Wrapper className={'border-wrapper-alt2'}>
<S.Action onClick={() => setOpen(!open)}>
<S.Label>
<S.Title>
Expand Down
18 changes: 8 additions & 10 deletions src/components/atoms/Drawer/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,15 @@ import { fadeIn2, open } from 'helpers/animations';
import { STYLING } from 'helpers/config';

export const Wrapper = styled.div`
background: ${(props) => props.theme.colors.accordion.background};
border: 1px solid ${(props) => props.theme.colors.border.primary};
border-radius: ${STYLING.dimensions.radius.primary};
overflow: hidden;
`;

export const Action = styled.button`
height: 55.5px;
width: 100%;
background: ${(props) => props.theme.colors.container.alt3.background};
&:hover {
background: ${(props) => props.theme.colors.accordion.hover};
background: ${(props) => props.theme.colors.container.alt2.background};
}
`;

Expand All @@ -28,22 +26,22 @@ export const Label = styled.div`
span {
font-size: ${(props) => props.theme.typography.size.base};
font-weight: ${(props) => props.theme.typography.weight.bold};
color: ${(props) => props.theme.colors.accordion.color};
color: ${(props) => props.theme.colors.font.primary};
padding: 0 0 2.5px 0;
}
svg {
width: 17.5px !important;
fill: ${(props) => props.theme.colors.accordion.color};
color: ${(props) => props.theme.colors.accordion.color};
fill: ${(props) => props.theme.colors.font.primary};
color: ${(props) => props.theme.colors.font.primary};
}
`;

export const Arrow = styled.div`
margin: 2.5px 0 0 0;
svg {
transform: rotate(90deg);
fill: ${(props) => props.theme.colors.accordion.color};
color: ${(props) => props.theme.colors.accordion.color};
fill: ${(props) => props.theme.colors.font.primary};
color: ${(props) => props.theme.colors.font.primary};
}
`;

Expand All @@ -57,7 +55,7 @@ export const Title = styled.div`

export const Content = styled.div`
animation: ${open} ${fadeIn2};
border-top: 1px solid ${(props) => props.theme.colors.border.primary};
border-top: 1px solid ${(props) => props.theme.colors.border.alt4};
border-bottom-left-radius: ${STYLING.dimensions.radius.primary};
border-bottom-right-radius: ${STYLING.dimensions.radius.primary};
`;
6 changes: 4 additions & 2 deletions src/components/atoms/FormField/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,11 @@ export const Input = styled.input<{
outline: 0;
border: 1px solid
${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
box-shadow: 0 0 2.5px
outline: 0.5px solid
${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
box-shadow: 0 0 0.5px
${(props) => (props.invalid ? props.theme.colors.form.invalid.shadow : props.theme.colors.form.valid.shadow)};
transition: box-shadow, border 225ms ease-in-out;
transition: box-shadow, border, outline 225ms ease-in-out;
}
&:disabled {
background: ${(props) => props.theme.colors.form.disabled.background};
Expand Down
12 changes: 8 additions & 4 deletions src/components/atoms/IconButton/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,13 @@ export const Alt1 = styled(Primary)`
width: ${(props) => (props.dimensions ? `${props.dimensions.icon.toString()}px` : `24.5px`)};
fill: ${(props) =>
props.active
? props.theme.colors.font.light1
? props.theme.colors.button.primary.active.color
: props.disabled
? props.theme.colors.button.primary.disabled.color
: props.theme.colors.button.primary.color};
color: ${(props) =>
props.active
? props.theme.colors.font.light1
? props.theme.colors.button.primary.active.color
: props.disabled
? props.theme.colors.button.primary.disabled.color
: props.theme.colors.button.primary.color};
Expand All @@ -106,9 +106,13 @@ export const Alt1 = styled(Primary)`
: props.theme.colors.button.primary.active.background};
svg {
fill: ${(props) =>
props.disabled ? props.theme.colors.button.primary.disabled.color : props.theme.colors.font.light1};
props.disabled
? props.theme.colors.button.primary.disabled.color
: props.theme.colors.button.primary.active.color};
color: ${(props) =>
props.disabled ? props.theme.colors.button.primary.disabled.color : props.theme.colors.font.light1};
props.disabled
? props.theme.colors.button.primary.disabled.color
: props.theme.colors.button.primary.active.color};
}
}
`;
6 changes: 5 additions & 1 deletion src/components/atoms/TextArea/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,11 @@ export const TextArea = styled.textarea<{
outline: 0;
border: 1px solid
${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
transition: box-shadow, border 225ms ease-in-out;
outline: 0.5px solid
${(props) => (props.invalid ? props.theme.colors.form.invalid.outline : props.theme.colors.form.valid.outline)};
box-shadow: 0 0 0.5px
${(props) => (props.invalid ? props.theme.colors.form.invalid.shadow : props.theme.colors.form.valid.shadow)};
transition: box-shadow, border, outline 225ms ease-in-out;
}
&:disabled {
background: ${(props) => props.theme.colors.form.disabled.background};
Expand Down
2 changes: 1 addition & 1 deletion src/components/molecules/Panel/Panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function Panel(props: IProps) {
function getBody() {
return (
<>
<S.Container noHeader={!props.header} className={'border-wrapper-alt2'} width={props.width}>
<S.Container noHeader={!props.header} width={props.width}>
<CloseHandler active={props.open} disabled={!props.open} callback={() => props.handleClose()}>
{props.header && (
<S.Header>
Expand Down
5 changes: 4 additions & 1 deletion src/components/molecules/Panel/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,11 @@ export const Container = styled.div<{
top: 10px;
right: 10px;
transition: width 50ms ease-out;
box-shadow: none !important;
animation: ${openRight} 200ms;
background: ${(props) => props.theme.colors.container.primary.background};
box-shadow: -1px -1px 10px 1px ${(props) => props.theme.colors.shadow.alt3};
border: 1px solid ${(props) => props.theme.colors.border.alt4};
border-radius: ${STYLING.dimensions.radius.primary};
@media (max-width: ${STYLING.cutoffs.secondary}) {
min-width: 82.5vw;
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/organisms/Streaks/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const SDStreak = styled.div`
align-items: center;
padding: 0 0 30px 0;
margin: 10px 0;
border-bottom: 1px solid ${(props) => props.theme.colors.border.primary};
border-bottom: 1px solid ${(props) => props.theme.colors.border.alt4};
p {
color: ${(props) => props.theme.colors.font.primary};
font-size: ${(props) => props.theme.typography.size.xLg};
Expand All @@ -80,7 +80,7 @@ export const SDAmounts = styled.div`
gap: 20px;
margin: 30px 0 0 0;
padding: 0 0 15px 0;
border-bottom: 1px solid ${(props) => props.theme.colors.border.primary};
border-bottom: 1px solid ${(props) => props.theme.colors.border.alt4};
`;

export const SDPIXLMessage = styled.div`
Expand Down Expand Up @@ -124,7 +124,7 @@ export const SDMessage = styled.div`
gap: 10px;
margin: 20px 0;
padding: 10px 20px 30px 20px;
border-bottom: 1px solid ${(props) => props.theme.colors.border.primary};
border-bottom: 1px solid ${(props) => props.theme.colors.border.alt4};
`;

export const SDMessageInfo = styled.div`
Expand Down
32 changes: 14 additions & 18 deletions src/helpers/themes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
import { DefaultTheme } from 'styled-components';

export const lightTheme = {
scheme: 'light',
positive1: '#64B686',
positive2: '#4EA673',
negative1: '#E94278',
negative2: '#E52461',
neutral1: '#FFFFFF',
neutral2: '#F4F4F4',
neutral3: '#C6C6C6',
neutral2: '#F6F6F6',
neutral3: '#D6D6D6',
neutral4: '#C9C9C9',
neutral5: '#CCCCCC',
neutral6: '#F7F7F7',
neutral7: '#FAFAFA',
neutral8: '#DFE3E3',
neutral8: '#EEEEEE',
neutralA1: '#0A0A0A',
neutralA2: '#5F5F5F',
neutralA3: '#5C5C5C',
neutralA4: '#2D2D2D',
neutralA5: '#A4A4A4',
neutralA6: '#A9A9A9',
neutralA7: '#C3C3C3',
neutralA7: '#F0F0F0',
overlay1: 'rgb(30, 30, 30, .65)',
primary1: '#F96E46',
primary2: '#E6562C',
semiTransparent1: 'rgba(255, 255, 255, 0.575)',
semiTransparent2: 'rgba(0, 0, 0, 0.575)',
semiTransparent2: 'rgba(40, 40, 40, 0.575)',
semiTransparent3: 'rgba(0, 0, 0, 0.55)',
semiTransparent4: '#AEAEAE45',
semiTransparent5: 'rgb(250, 250, 250, 0)',
scheme: 'light',
light1: '#FFFFFF',
light2: '#DADADA',
dark1: '#151515',
Expand All @@ -48,6 +48,7 @@ export const lightTheme = {
};

export const darkTheme = {
scheme: 'dark',
positive1: '#38BD80',
positive2: '#2F9D6A',
labelAlt1: `#FFFFFF`,
Expand All @@ -65,9 +66,9 @@ export const darkTheme = {
neutralA2: '#F1F1F1',
neutralA3: '#E0E0E0',
neutralA4: '#DEDEDE',
neutralA5: '#F7F7F7',
neutralA5: '#CCCCCC',
neutralA6: '#FAFAFA',
neutralA7: '#101010',
neutralA7: '#151515',
overlay1: 'rgba(10, 10, 10, 0.65)',
primary1: '#F96E46',
primary2: '#E6562C',
Expand All @@ -76,7 +77,6 @@ export const darkTheme = {
semiTransparent3: 'rgba(20, 20, 20, 0.75)',
semiTransparent4: '#AEAEAE45',
semiTransparent5: 'rgba(0, 0, 0, 0.5)',
scheme: 'dark',
light1: '#FFFFFF',
light2: '#DADADA',
dark1: '#151515',
Expand All @@ -98,11 +98,6 @@ export const darkTheme = {
export const theme = (currentTheme: any): DefaultTheme => ({
scheme: currentTheme.scheme,
colors: {
accordion: {
background: currentTheme.neutral1,
hover: currentTheme.neutral2,
color: currentTheme.neutralA1,
},
border: {
primary: currentTheme.neutral3,
alt1: currentTheme.primary1,
Expand All @@ -116,9 +111,9 @@ export const theme = (currentTheme: any): DefaultTheme => ({
border: currentTheme.neutral3,
color: currentTheme.neutralA1,
active: {
background: currentTheme.primary1,
border: currentTheme.primary2,
color: currentTheme.light1,
background: currentTheme.neutral3,
border: currentTheme.neutral3,
color: currentTheme.neutralA1,
},
disabled: {
background: currentTheme.neutral4,
Expand Down Expand Up @@ -174,7 +169,7 @@ export const theme = (currentTheme: any): DefaultTheme => ({
background: currentTheme.neutral3,
},
alt2: {
background: currentTheme.neutral2,
background: currentTheme.neutral8,
},
alt3: {
background: currentTheme.neutral2,
Expand Down Expand Up @@ -289,6 +284,7 @@ export const theme = (currentTheme: any): DefaultTheme => ({
primary: currentTheme.semiTransparent5,
alt1: currentTheme.neutral4,
alt2: currentTheme.neutralA7,
alt3: currentTheme.semiTransparent2,
},
stats: {
primary: currentTheme.stats.primary,
Expand Down
Loading

0 comments on commit 526b42e

Please sign in to comment.