Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: make theme more consistent

Browse Source
This commit is contained in:
FernTheDev 2020-12-17 19:13:34 -04:00 committed by Jordan Knott
parent 7b6624ecc3
commit 2de48e288b
56 changed files with 336 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/Admin/index.tsx
View File

@ -82,7 +82,7 @@ const AddUserInput = styled(Input)`
`;
const InputError = styled.span`
color: rgba(${props => props.theme.colors.danger});
color: ${props => props.theme.colors.danger};
font-size: 12px;
`;

28
frontend/src/App/ThemeStyles.ts
View File

@ -1,26 +1,28 @@
import { DefaultTheme } from 'styled-components';
import Color from 'color';
const theme: DefaultTheme = {
borderRadius: {
primary: '3px',
primary: '3x',
alternate: '6px',
},
colors: {
primary: '115, 103, 240',
secondary: '216, 93, 216',
alternate: '65, 69, 97',
success: '40, 199, 111',
danger: '234, 84, 85',
warning: '255, 159, 67',
dark: '30, 30, 30',
multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
primary: 'rgb(115, 103, 240)',
secondary: 'rgb(216, 93, 216)',
alternate: 'rgb(65, 69, 97)',
success: 'rgb(40, 199, 111)',
danger: 'rgb(234, 84, 85)',
warning: 'rgb(255, 159, 67)',
dark: 'rgb(30, 30, 30)',
text: {
primary: '194, 198, 220',
secondary: '255, 255, 255',
primary: 'rgb(194, 198, 220)',
secondary: 'rgb(255, 255, 255)',
},
border: '65, 69, 97',
border: 'rgb(65, 69, 97)',
bg: {
primary: '16, 22, 58',
secondary: '38, 44, 73',
primary: 'rgb(16, 22, 58)',
secondary: 'rgb(38, 44, 73)',
},
},
};

9
frontend/src/App/TopNavbar.tsx
View File

@ -20,6 +20,7 @@ import MiniProfile from 'shared/components/MiniProfile';
import cache from 'App/cache';
import NOOP from 'shared/utils/noop';
import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
import theme from './ThemeStyles';
const TeamContainer = styled.div`
display: flex;
@ -62,7 +63,7 @@ const TeamProjectBackground = styled.div<{ color: string }>`
opacity: 1;
border-radius: 3px;
&:before {
background: rgba(${props => props.theme.colors.bg.secondary});
background: ${props => props.theme.colors.bg.secondary};
bottom: 0;
content: '';
left: 0;
@ -114,7 +115,7 @@ const TeamProjectContainer = styled.div`
margin: 0 4px 4px 0;
min-width: 0;
&:hover ${TeamProjectTitle} {
color: rgba(${props => props.theme.colors.text.secondary});
color: ${props => props.theme.colors.text.secondary};
}
&:hover ${TeamProjectAvatar} {
opacity: 1;
@ -124,7 +125,7 @@ const TeamProjectContainer = styled.div`
}
`;
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
const colors = [theme.colors.primary, theme.colors.secondary];
const ProjectFinder = () => {
const { loading, data } = useGetProjectsQuery();
@ -328,7 +329,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
/>
))}
</NotificationPopup>,
{ width: 415, borders: false, diamondColor: '#7367f0' },
{ width: 415, borders: false, diamondColor: theme.colors.primary },
);
}
};

6
frontend/src/App/index.tsx
View File

@ -28,13 +28,13 @@ const StyledContainer = styled(ToastContainer).attrs({
color: #fff;
}
.Toastify__toast--error {
background: rgba(${props => props.theme.colors.danger});
background: ${props => props.theme.colors.danger};
}
.Toastify__toast--warning {
background: rgba(${props => props.theme.colors.warning});
background: ${props => props.theme.colors.warning};
}
.Toastify__toast--success {
background: rgba(${props => props.theme.colors.success});
background: ${props => props.theme.colors.success};
}
.Toastify__toast-body {
}

6
frontend/src/Projects/Project/Board/FilterMeta.tsx
View File

@ -12,7 +12,7 @@ const FilterMember = styled(Member)`
margin: 2px 0;
&:hover {
cursor: pointer;
background: rgba(${props => props.theme.colors.primary});
background: ${props => props.theme.colors.primary};
}
`;
@ -71,7 +71,7 @@ export const ActionItem = styled.li`
align-items: center;
font-size: 14px;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;
@ -80,7 +80,7 @@ export const ActionTitle = styled.span`
`;
const ActionItemSeparator = styled.li`
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
font-size: 12px;
padding-left: 4px;
padding-right: 4px;

6
frontend/src/Projects/Project/Board/FilterStatus.tsx
View File

@ -30,7 +30,7 @@ export const ActionItem = styled.li`
align-items: center;
font-size: 14px;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
&:hover ${ActionExtraMenuContainer} {
visibility: visible;
@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
align-items: center;
font-size: 14px;
&:hover {
background: rgb(115, 103, 240);
background: rgb(${props => props.theme.colors.primary});
}
`;
const ActionExtraMenuSeparator = styled.li`
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
color: ${props => props.theme.colors.text.primary};
font-size: 12px;
padding-left: 4px;
padding-right: 4px;

5
frontend/src/Projects/Project/Board/SortPopup.tsx
View File

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
import { mixin } from 'shared/utils/styles';
export const ActionsList = styled.ul`
margin: 0;
@ -20,7 +21,7 @@ export const ActionItem = styled.li`
align-items: center;
font-size: 14px;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;
@ -29,7 +30,7 @@ export const ActionTitle = styled.span`
`;
const ActionItemSeparator = styled.li`
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
font-size: 12px;
padding-left: 4px;
padding-right: 4px;

4
frontend/src/Projects/Project/Board/index.tsx
View File

@ -136,14 +136,14 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
display: flex;
align-items: center;
font-size: 15px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
&:not(:last-of-type) {
margin-right: 16px;
}
&:hover {
color: rgba(${props => props.theme.colors.text.secondary});
color: ${props => props.theme.colors.text.secondary};
}
${props =>
props.disabled &&

3
frontend/src/Projects/Project/index.tsx
View File

@ -48,6 +48,7 @@ import { colourStyles } from 'shared/components/Select';
import Board, { BoardLoading } from './Board';
import Details from './Details';
import LabelManagerEditor from './LabelManagerEditor';
import { mixin } from '../../shared/utils/styles';
const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
@ -71,7 +72,7 @@ const UserMember = styled(Member)`
padding: 4px 0;
cursor: pointer;
&:hover {
background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
}
border-radius: 6px;
`;

8
frontend/src/Projects/index.tsx
View File

@ -20,6 +20,8 @@ import Input from 'shared/components/Input';
import updateApolloCache from 'shared/utils/cache';
import produce from 'immer';
import NOOP from 'shared/utils/noop';
import theme from 'App/ThemeStyles';
import { mixin } from '../shared/utils/styles';
type CreateTeamData = { teamName: string };
@ -54,7 +56,7 @@ const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
};
const ProjectAddTile = styled.div`
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
background-size: cover;
background-position: 50%;
color: #fff;
@ -176,7 +178,7 @@ const SectionActionLink = styled(Link)`
const ProjectSectionTitle = styled.h3`
font-size: 16px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
const ProjectsContainer = styled.div`
@ -229,7 +231,7 @@ const Projects = () => {
return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
}
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
const colors = theme.colors.multiColors;
if (data && user) {
const { projects, teams, organizations } = data;
const organizationID = organizations[0].id ?? null;

31
frontend/src/Teams/Members/index.tsx
View File

@ -21,6 +21,7 @@ import TaskAssignee from 'shared/components/TaskAssignee';
import Member from 'shared/components/Member';
import ControlledInput from 'shared/components/ControlledInput';
import NOOP from 'shared/utils/noop';
import { mixin } from 'shared/utils/styles';
const MemberListWrapper = styled.div`
flex: 1 1;
@ -34,7 +35,7 @@ const UserMember = styled(Member)`
padding: 4px 0;
cursor: pointer;
&:hover {
background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
}
border-radius: 6px;
`;
@ -119,12 +120,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
? css`
user-select: none;
pointer-events: none;
color: rgba(${props.theme.colors.text.primary}, 0.4);
color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
`
: css`
cursor: pointer;
&:hover {
background: rgb(115, 103, 240);
background: ${props.theme.colors.primary};
}
`}
`;
@ -135,7 +136,7 @@ export const Content = styled.div`
export const CurrentPermission = styled.span`
margin-left: 4px;
color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
`;
export const Separator = styled.div`
@ -146,13 +147,13 @@ export const Separator = styled.div`
export const WarningText = styled.span`
display: flex;
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
padding: 6px;
`;
export const DeleteDescription = styled.div`
font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
export const RemoveMemberButton = styled(Button)`
@ -305,14 +306,14 @@ const MemberItemOption = styled(Button)`
`;
const MemberList = styled.div`
border-top: 1px solid rgba(${props => props.theme.colors.border});
border-top: 1px solid ${props => props.theme.colors.border};
`;
const MemberListItem = styled.div`
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border-bottom: 1px solid rgba(${props => props.theme.colors.border});
border-bottom: 1px solid ${props => props.theme.colors.border};
min-height: 40px;
padding: 12px 0 12px 40px;
position: relative;
@ -336,11 +337,11 @@ const MemberProfile = styled(TaskAssignee)`
`;
const MemberItemName = styled.p`
color: rgba(${props => props.theme.colors.text.secondary});
color: ${props => props.theme.colors.text.secondary};
`;
const MemberItemUsername = styled.p`
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
const MemberListHeader = styled.div`
@ -349,12 +350,12 @@ const MemberListHeader = styled.div`
`;
const ListTitle = styled.h3`
font-size: 18px;
color: rgba(${props => props.theme.colors.text.secondary});
color: ${props => props.theme.colors.text.secondary};
margin-bottom: 12px;
`;
const ListDesc = styled.span`
font-size: 16px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
const FilterSearch = styled(Input)`
margin: 0;
@ -386,11 +387,11 @@ const FilterTabItem = styled.li`
font-weight: 700;
text-decoration: none;
padding: 6px 8px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
&:hover {
border-radius: 6px;
background: rgba(${props => props.theme.colors.primary});
color: rgba(${props => props.theme.colors.text.secondary});
background: ${props => props.theme.colors.primary};
color: ${props => props.theme.colors.text.secondary};
}
`;

11
frontend/src/Teams/Projects/index.tsx
View File

@ -8,6 +8,7 @@ import {
} from 'shared/generated/graphql';
import { Link } from 'react-router-dom';
import Input from 'shared/components/Input';
import theme from 'App/ThemeStyles';
const FilterSearch = styled(Input)`
margin: 0;
@ -34,11 +35,11 @@ const FilterTabItem = styled.li`
font-weight: 700;
text-decoration: none;
padding: 6px 8px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
&:hover {
border-radius: 6px;
background: rgba(${props => props.theme.colors.primary});
color: rgba(${props => props.theme.colors.text.secondary});
background: ${props => props.theme.colors.primary};
color: ${props => props.theme.colors.text.secondary};
}
`;
@ -55,7 +56,7 @@ const FilterTabTitle = styled.h2`
`;
const ProjectAddTile = styled.div`
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
background-color: ${props => props.theme.colors.bg.primary};
background-size: cover;
background-position: 50%;
color: #fff;
@ -147,7 +148,7 @@ const ProjectListWrapper = styled.div`
flex: 1 1;
`;
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
const colors = theme.colors.multiColors;
type TeamProjectsProps = {
teamID: string;

3
frontend/src/shared/components/AddList/AddList.stories.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import theme from 'App/ThemeStyles';
import AddList from '.';
export default {
@ -7,7 +8,7 @@ export default {
title: 'AddList',
parameters: {
backgrounds: [
{ name: 'gray', value: '#262c49', default: true },
{ name: 'gray', value: theme.colors.bg.secondary, default: true },
{ name: 'white', value: '#ffffff' },
],
},

4
frontend/src/shared/components/AddList/Styles.ts
View File

@ -67,7 +67,7 @@ export const ListNameEditorWrapper = styled.div`
display: flex;
`;
export const ListNameEditor = styled(TextareaAutosize)`
background-color: ${props => mixin.lighten('#262c49', 0.05)};
background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
border: none;
box-shadow: inset 0 0 0 2px #0079bf;
transition: margin 85ms ease-in, background 85ms ease-in;
@ -91,7 +91,7 @@ export const ListNameEditor = styled(TextareaAutosize)`
color: #c2c6dc;
l &:focus {
background-color: ${props => mixin.lighten('#262c49', 0.05)};
background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
}
`;

37
frontend/src/shared/components/Admin/index.tsx
View File

@ -8,6 +8,7 @@ import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
import Input from 'shared/components/Input';
import Button from 'shared/components/Button';
import NOOP from 'shared/utils/noop';
import { mixin } from 'shared/utils/styles';
export const RoleCheckmark = styled(Checkmark)`
padding-left: 4px;
@ -58,12 +59,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
? css`
user-select: none;
pointer-events: none;
color: rgba(${props.theme.colors.text.primary}, 0.4);
color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
`
: css`
cursor: pointer;
&:hover {
background: rgb(115, 103, 240);
background: ${props.theme.colors.primary};
}
`}
`;
@ -74,7 +75,7 @@ export const Content = styled.div`
export const CurrentPermission = styled.span`
margin-left: 4px;
color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
`;
export const Separator = styled.div`
@ -85,13 +86,13 @@ export const Separator = styled.div`
export const WarningText = styled.span`
display: flex;
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
padding: 6px;
`;
export const DeleteDescription = styled.div`
font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
export const RemoveMemberButton = styled(Button)`
@ -333,14 +334,14 @@ const MemberItemOption = styled(Button)`
`;
const MemberList = styled.div`
border-top: 1px solid rgba(${props => props.theme.colors.border});
border-top: 1px solid ${props => props.theme.colors.border};
`;
const MemberListItem = styled.div`
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border-bottom: 1px solid rgba(${props => props.theme.colors.border});
border-bottom: 1px solid ${props => props.theme.colors.border};
min-height: 40px;
padding: 12px 0 12px 40px;
position: relative;
@ -364,11 +365,11 @@ const MemberProfile = styled(TaskAssignee)`
`;
const MemberItemName = styled.p`
color: rgba(${props => props.theme.colors.text.secondary});
color: ${props => props.theme.colors.text.secondary};
`;
const MemberItemUsername = styled.p`
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
const MemberListHeader = styled.div`
@ -377,12 +378,12 @@ const MemberListHeader = styled.div`
`;
const ListTitle = styled.h3`
font-size: 18px;
color: rgba(${props => props.theme.colors.text.secondary});
color: ${props => props.theme.colors.text.secondary};
margin-bottom: 12px;
`;
const ListDesc = styled.span`
font-size: 16px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
const FilterSearch = styled(Input)`
margin: 0;
@ -443,17 +444,17 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
width: 100%;
position: relative;
color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
&:hover {
color: rgba(115, 103, 240);
color: ${props => `${props.theme.colors.primary}`};
}
&:hover svg {
fill: rgba(115, 103, 240);
fill: ${props => props.theme.colors.primary};
}
`;
const TabItemUser = styled(User)<{ active: boolean }>`
fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
fill: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
`;
const TabNavItemSpan = styled.span`
@ -470,8 +471,8 @@ const TabNavLine = styled.span<{ top: number }>`
transform: scaleX(1);
top: ${props => props.top}px;
background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
box-shadow: 0 0 8px 0 rgba(115, 103, 240);
background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
display: block;
position: absolute;
transition: all 0.2s ease;

32
frontend/src/shared/components/Button/index.tsx
View File

@ -1,5 +1,6 @@
import React, { useRef } from 'react';
import styled, { css } from 'styled-components/macro';
import { mixin } from '../../utils/styles';
const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
position: relative;
@ -8,7 +9,7 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
justify-content: ${props => props.justifyTextContent};
transition: all 0.2s ease;
font-size: ${props => props.fontSize};
color: rgba(${props => props.theme.colors.text.secondary});
color: ${props => props.theme.colors.text.secondary};
${props =>
props.hasIcon &&
css`
@ -36,35 +37,36 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
`;
const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
background: rgba(${props => props.theme.colors[props.color]});
background: ${props => props.theme.colors[props.color]};
${props =>
props.hoverVariant === 'boxShadow' &&
css`
&:hover {
box-shadow: 0 8px 25px -8px rgba(${props.theme.colors[props.color]});
box-shadow: 0 8px 25px -8px ${props.theme.colors[props.color]};
}
`}
`;
const Outline = styled(Base)<{ invert: boolean }>`
border: 1px solid rgba(${props => props.theme.colors[props.color]});
border: 1px solid ${props => props.theme.colors[props.color]};
background: transparent;
${props =>
props.invert
? css`
background: rgba(${props.theme.colors[props.color]});
background: ${props.theme.colors[props.color]});
& ${Text} {
color: rgba(${props.theme.colors.text.secondary});
color: ${props.theme.colors.text.secondary});
}
&:hover {
background: rgba(${props.theme.colors[props.color]}, 0.8);
background: ${mixin.rgba(props.theme.colors[props.color], 0.8)};
}
`
: css`
& ${Text} {
color: rgba(${props.theme.colors[props.color]});
color: ${props.theme.colors[props.color]});
}
&:hover {
background: rgba(${props.theme.colors[props.color]}, 0.08);
background: ${mixin.rgba(props.theme.colors[props.color], 0.08)};
}
`}
`;
@ -72,7 +74,7 @@ const Outline = styled(Base)<{ invert: boolean }>`
const Flat = styled(Base)`
background: transparent;
&:hover {
background: rgba(${props => props.theme.colors[props.color]}, 0.2);
background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
}
`;
@ -85,7 +87,7 @@ const LineX = styled.span<{ color: string }>`
bottom: -2px;
left: 50%;
transform: translate(-50%);
background: rgba(${props => props.theme.colors[props.color]}, 1);
background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
`;
const LineDown = styled(Base)`
@ -94,7 +96,7 @@ const LineDown = styled(Base)`
border-width: 0;
border-style: solid;
border-bottom-width: 2px;
border-color: rgba(${props => props.theme.colors[props.color]}, 0.2);
border-color: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
&:hover ${LineX} {
width: 100%;
@ -107,8 +109,8 @@ const LineDown = styled(Base)`
const Gradient = styled(Base)`
background: linear-gradient(
30deg,
rgba(${props => props.theme.colors[props.color]}, 1),
rgba(${props => props.theme.colors[props.color]}, 0.5)
${props => mixin.rgba(props.theme.colors[props.color], 1)},
${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
);
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
&:hover {
@ -117,7 +119,7 @@ const Gradient = styled(Base)`
`;
const Relief = styled(Base)`
background: rgba(${props => props.theme.colors[props.color]}, 1);
background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
-webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);

22
frontend/src/shared/components/Card/Styles.ts
View File

@ -5,8 +5,8 @@ import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
import TaskAssignee from 'shared/components/TaskAssignee';
export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}),
inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07);
box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
z-index: ${props => props.zIndex};
position: relative;
`;
@ -14,8 +14,8 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
${props =>
props.color === 'success' &&
css`
fill: rgba(${props.theme.colors.success});
stroke: rgba(${props.theme.colors.success});
fill: ${props.theme.colors.success};
stroke: ${props.theme.colors.success};
`}
`;
export const ClockIcon = styled(Clock)<{ color: string }>`
@ -38,7 +38,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
padding: 0;
font-size: 14px;
line-height: 18px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
&:focus {
border: none;
outline: none;
@ -89,7 +89,7 @@ export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
padding: 0 4px 0 6px;
vertical-align: top;
white-space: nowrap;
${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
${props => props.color === 'success' && `color: ${props.theme.colors.success};`}
`;
export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@ -101,7 +101,9 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
position: relative;
background-color: ${props =>
props.isActive && !props.editable ? mixin.darken('#262c49', 0.1) : `rgba(${props.theme.colors.bg.secondary})`};
props.isActive && !props.editable
? mixin.darken(props.theme.colors.bg.secondary, 0.1)
: `${props.theme.colors.bg.secondary}`};
`;
export const ListCardInnerContainer = styled.div`
@ -221,7 +223,7 @@ export const ListCardOperation = styled.span`
top: 2px;
z-index: 100;
&:hover {
background-color: ${props => mixin.darken('#262c49', 0.25)};
background-color: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
}
`;
@ -233,7 +235,7 @@ export const CardTitle = styled.span`
word-wrap: break-word;
line-height: 18px;
font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
display: flex;
align-items: center;
@ -246,7 +248,7 @@ export const CardMembers = styled.div`
`;
export const CompleteIcon = styled(CheckCircle)`
fill: rgba(${props => props.theme.colors.success});
fill: ${props => props.theme.colors.success};
margin-right: 4px;
flex-shrink: 0;
`;

2
frontend/src/shared/components/Checklist/Checklist.stories.tsx
View File

@ -22,7 +22,7 @@ export default {
const Container = styled.div`
width: 552px;
margin: 25px;
border: 1px solid rgba(${props => props.theme.colors.bg.primary});
border: 1px solid ${props => props.theme.colors.bg.primary};
`;
const defaultItems = [

39
frontend/src/shared/components/Checklist/index.tsx
View File

@ -12,6 +12,7 @@ import Button from 'shared/components/Button';
import TextareaAutosize from 'react-autosize-textarea';
import Control from 'react-select/src/components/Control';
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
import { mixin } from 'shared/utils/styles';
const Wrapper = styled.div`
margin-bottom: 24px;
@ -38,7 +39,7 @@ const WindowChecklistTitle = styled.div`
const WindowTitleText = styled.h3`
cursor: pointer;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
margin: 6px 0;
display: inline-block;
width: auto;
@ -73,7 +74,7 @@ const ChecklistProgressPercent = styled.span`
`;
const ChecklistProgressBar = styled.div`
background: rgba(${props => props.theme.colors.bg.primary});
background: ${props => props.theme.colors.bg.primary};
border-radius: 4px;
clear: both;
height: 8px;
@ -83,7 +84,7 @@ const ChecklistProgressBar = styled.div`
`;
const ChecklistProgressBarCurrent = styled.div<{ width: number }>`
width: ${props => props.width}%;
background: rgba(${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)});
background: ${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)};
bottom: 0;
left: 0;
position: absolute;
@ -111,7 +112,7 @@ const ChecklistIcon = styled.div`
`;
const ChecklistItemCheckedIcon = styled(CheckSquare)`
fill: rgba(${props => props.theme.colors.primary});
fill: ${props => props.theme.colors.primary};
`;
const ChecklistItemDetails = styled.div`
@ -133,7 +134,7 @@ const ChecklistItemTextControls = styled.div`
`;
const ChecklistItemText = styled.span<{ complete: boolean }>`
color: ${props => (props.complete ? '#5e6c84' : `rgba(${props.theme.colors.text.primary})`)};
color: ${props => (props.complete ? '#5e6c84' : `${props.theme.colors.text.primary}`)};
${props => props.complete && 'text-decoration: line-through;'}
line-height: 20px;
font-size: 16px;
@ -155,14 +156,14 @@ const ControlButton = styled.div`
margin-left: 4px;
padding: 4px 6px;
border-radius: 6px;
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8);
background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.8)};
display: flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
&:hover {
background-color: rgba(${props => props.theme.colors.primary}, 1);
background-color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
}
`;
@ -189,27 +190,27 @@ export const ChecklistNameEditor = styled(TextareaAutosize)`
padding: 8px 12px;
font-size: 16px;
line-height: 20px;
border: 1px solid rgba(${props => props.theme.colors.primary});
border: 1px solid ${props => props.theme.colors.primary};
border-radius: 3px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
border-color: rgba(${props => props.theme.colors.border});
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
border-color: ${props => props.theme.colors.border};
background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
&:focus {
border-color: rgba(${props => props.theme.colors.primary});
border-color: ${props => props.theme.colors.primary};
}
`;
const AssignUserButton = styled(AccountPlus)`
fill: rgba(${props => props.theme.colors.text.primary});
fill: ${props => props.theme.colors.text.primary};
`;
const ClockButton = styled(Clock)`
fill: rgba(${props => props.theme.colors.text.primary});
fill: ${props => props.theme.colors.text.primary};
`;
const TrashButton = styled(Trash)`
fill: rgba(${props => props.theme.colors.text.primary});
fill: ${props => props.theme.colors.text.primary};
`;
const ChecklistItemWrapper = styled.div<{ ref: any }>`
@ -224,7 +225,7 @@ const ChecklistItemWrapper = styled.div<{ ref: any }>`
}
&:hover {
background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
}
&:hover ${ControlButton} {
opacity: 1;
@ -246,10 +247,10 @@ const CancelButton = styled.div`
cursor: pointer;
margin: 5px;
& svg {
fill: rgba(${props => props.theme.colors.text.primary});
fill: ${props => props.theme.colors.text.primary};
}
&:hover svg {
fill: rgba(${props => props.theme.colors.text.secondary});
fill: ${props => props.theme.colors.text.secondary};
}
`;
@ -265,7 +266,7 @@ const EditableDeleteButton = styled.button`
border-radius: 3px;
&:hover {
background: rgba(${props => props.theme.colors.primary}, 0.8);
background: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
}
`;

6
frontend/src/shared/components/Chip/index.tsx
View File

@ -7,7 +7,7 @@ const LabelText = styled.span`
display: flex;
align-items: center;
justify-content: center;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
const Container = styled.div<{ color?: string }>`
@ -24,11 +24,11 @@ const Container = styled.div<{ color?: string }>`
? css`
background: ${props.color};
& ${LabelText} {
color: rgba(${props.theme.colors.text.secondary});
color: ${props.theme.colors.text.secondary};
}
`
: css`
background: rgba(${props.theme.colors.bg.primary});
background: ${props.theme.colors.bg.primary};
`}
`;

2
frontend/src/shared/components/ControlledInput/Input.stories.tsx
View File

@ -19,7 +19,7 @@ export default {
};
const Wrapper = styled.div`
background: rgba(${props => props.theme.colors.bg.primary});
background: ${props => props.theme.colors.bg.primary};
padding: 45px;
margin: 25px;
display: flex;

9
frontend/src/shared/components/ControlledInput/index.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import styled, { css } from 'styled-components/macro';
import theme from '../../../App/ThemeStyles';
const InputWrapper = styled.div<{ width: string }>`
position: relative;
@ -57,14 +58,14 @@ const InputInput = styled.input<{
background: ${props => props.focusBg};
}
&:focus ~ ${InputLabel} {
color: rgba(115, 103, 240);
color: ${props => props.theme.colors.primary};
transform: translate(-3px, -90%);
}
${props =>
props.hasValue &&
css`
& ~ ${InputLabel} {
color: rgba(115, 103, 240);
color: ${props.theme.colors.primary};
transform: translate(-3px, -90%);
}
`}
@ -115,8 +116,8 @@ const ControlledInput = ({
}: ControlledInputProps) => {
const $input = useRef<HTMLInputElement>(null);
const [hasValue, setHasValue] = useState(false);
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : theme.colors.alternate;
const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
useEffect(() => {
if (autoFocus && $input && $input.current) {
$input.current.focus();

3
frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx
View File

@ -2,6 +2,7 @@ import React, { createRef, useState } from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import DropdownMenu from '.';
import theme from '../../../App/ThemeStyles';
export default {
component: DropdownMenu,
@ -10,7 +11,7 @@ export default {
backgrounds: [
{ name: 'white', value: '#ffffff' },
{ name: 'gray', value: '#f8f8f8' },
{ name: 'darkBlue', value: '#262c49', default: true },
{ name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
],
},
};

2
frontend/src/shared/components/DropdownMenu/Styles.ts
View File

@ -59,7 +59,7 @@ export const ActionItem = styled.li`
align-items: center;
font-size: 14px;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;

20
frontend/src/shared/components/DueDateManager/Styles.ts
View File

@ -19,23 +19,23 @@ display: flex
}
& .react-datepicker-time__header {
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
}
& .react-datepicker__time-list-item {
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
}
& .react-datepicker__time-container .react-datepicker__time
.react-datepicker__time-box ul.react-datepicker__time-list
li.react-datepicker__time-list-item:hover {
color: rgba(${props => props.theme.colors.text.secondary});
background: rgba(${props => props.theme.colors.bg.secondary});
color: ${props => props.theme.colors.text.secondary};
background: ${props => props.theme.colors.bg.secondary};
}
& .react-datepicker__time-container .react-datepicker__time {
background: rgba(${props => props.theme.colors.bg.primary});
background: ${props => props.theme.colors.bg.primary};
}
& .react-datepicker--time-only {
background: rgba(${props => props.theme.colors.bg.primary});
border: 1px solid rgba(${props => props.theme.colors.border});
background: ${props => props.theme.colors.bg.primary};
border: 1px solid ${props => props.theme.colors.border};
}
& .react-datepicker * {
@ -75,12 +75,12 @@ display: flex
}
& .react-datepicker__day--selected {
border-radius: 50%;
background: rgba(115, 103, 240);
background: ${props => props.theme.colors.primary};
color: #fff;
}
& .react-datepicker__day--selected:hover {
border-radius: 50%;
background: rgba(115, 103, 240);
background: ${props => props.theme.colors.primary};
color: #fff;
}
& .react-datepicker__header {
@ -88,7 +88,7 @@ display: flex
border: none;
}
& .react-datepicker__header--time {
border-bottom: 1px solid rgba(${props => props.theme.colors.border});
border-bottom: 1px solid ${props => props.theme.colors.border};
}
`;

8
frontend/src/shared/components/DueDateManager/index.tsx
View File

@ -43,7 +43,7 @@ const HeaderSelectLabel = styled.div`
color: #c2c6dc;
&:hover {
background: rgba(115, 103, 240);
background: ${props => props.theme.colors.primary};
color: #c2c6dc;
}
`;
@ -60,8 +60,8 @@ const HeaderSelect = styled.select`
appearance: none;
&:hover {
background: #262c49;
border: 1px solid rgba(115, 103, 240);
background: ${props => props.theme.colors.bg.secondary};
border: 1px solid ${props => props.theme.colors.primary};
outline: none !important;
box-shadow: none;
color: #c2c6dc;
@ -93,7 +93,7 @@ const HeaderButton = styled.button`
border: none;
border-radius: 3px;
&:hover {
background: rgba(115, 103, 240);
background: ${props => props.theme.colors.primary};
color: #fff;
}
`;

5
frontend/src/shared/components/EmptyBoard/index.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import styled, { keyframes } from 'styled-components/macro';
import { mixin } from 'shared/utils/styles';
import theme from '../../../App/ThemeStyles';
export const BoardContainer = styled.div`
position: relative;
@ -34,9 +35,9 @@ export const Container = styled.div`
white-space: nowrap;
`;
export const defaultBaseColor = '#10163a';
export const defaultBaseColor = theme.colors.bg.primary;
export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);
export const defaultHighlightColor = mixin.lighten(theme.colors.bg.primary, 0.25);
export const skeletonKeyframes = keyframes`
0% {

2
frontend/src/shared/components/Input/Input.stories.tsx
View File

@ -19,7 +19,7 @@ export default {
};
const Wrapper = styled.div`
background: rgba(${props => props.theme.colors.bg.primary});
background: ${props => props.theme.colors.bg.primary};
padding: 45px;
margin: 25px;
display: flex;

11
frontend/src/shared/components/Input/index.tsx
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import styled, { css } from 'styled-components/macro';
import theme from '../../../App/ThemeStyles';
const InputWrapper = styled.div<{ width: string }>`
position: relative;
@ -53,18 +54,18 @@ const InputInput = styled.input<{
transition: all 0.3s ease;
&:focus {
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
border: 1px solid rgba(115, 103, 240);
border: 1px solid ${props => props.theme.colors.primary};
background: ${props => props.focusBg};
}
&:focus ~ ${InputLabel} {
color: rgba(115, 103, 240);
color: ${props => props.theme.colors.primary};
transform: translate(-3px, -90%);
}
${props =>
props.hasValue &&
css`
& ~ ${InputLabel} {
color: rgba(115, 103, 240);
color: ${props.theme.colors.primary};
transform: translate(-3px, -90%);
}
`}
@ -138,8 +139,8 @@ const Input = React.forwardRef(
$ref: any,
) => {
const [hasValue, setHasValue] = useState(defaultValue !== '');
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
// Merge forwarded ref and internal ref in order to be able to access the ref in the useEffect
// The forwarded ref is not accessible by itself, which is what the innerRef & combined ref is for

5
frontend/src/shared/components/List/Styles.ts
View File

@ -1,6 +1,5 @@
import styled, { css } from 'styled-components';
import TextareaAutosize from 'react-autosize-textarea';
import { mixin } from 'shared/utils/styles';
export const Container = styled.div`
width: 272px;
@ -34,7 +33,7 @@ export const AddCardButton = styled.a`
&:hover {
color: #c2c6dc;
text-decoration: none;
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;
export const Wrapper = styled.div`
@ -96,7 +95,7 @@ export const Header = styled.div<{ isEditing: boolean }>`
props.isEditing &&
css`
& ${HeaderName} {
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
box-shadow: ${props.theme.colors.primary} 0px 0px 0px 1px;
}
`}
`;

2
frontend/src/shared/components/ListActions/Styles.ts
View File

@ -21,7 +21,7 @@ export const ListActionItem = styled.span`
margin: 0 -12px;
text-decoration: none;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;

3
frontend/src/shared/components/Lists/Lists.stories.tsx
View File

@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import theme from 'App/ThemeStyles';
import Lists from '.';
export default {
@ -7,7 +8,7 @@ export default {
title: 'Lists',
parameters: {
backgrounds: [
{ name: 'gray', value: '#262c49', default: true },
{ name: 'gray', value: theme.colors.bg.secondary, default: true },
{ name: 'white', value: '#ffffff' },
],
},

4
frontend/src/shared/components/LoadingSpinner/Styles.ts
View File

@ -22,10 +22,10 @@ export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; b
width: ${props => props.size};
height: ${props => props.size};
margin: ${props => props.thickness};
border: ${props => props.thickness} solid rgba(${props => props.theme.colors[props.color]});
border: ${props => props.thickness} solid ${props => props.theme.colors[props.color]};
border-radius: 50%;
animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: rgba(${props => props.theme.colors[props.color]}) transparent transparent transparent;
border-color: ${props => props.theme.colors[props.color]} transparent transparent transparent;
}
& > div:nth-child(1) {

5
frontend/src/shared/components/Login/Styles.ts
View File

@ -1,5 +1,6 @@
import styled from 'styled-components';
import Button from 'shared/components/Button';
import { mixin } from 'shared/utils/styles';
export const Wrapper = styled.div`
background: #eff2f7;
@ -68,7 +69,7 @@ export const FormIcon = styled.div`
export const FormError = styled.span`
font-size: 0.875rem;
color: rgb(234, 84, 85);
color: ${props => props.theme.colors.danger};
`;
export const LoginButton = styled(Button)``;
@ -99,5 +100,5 @@ export const LogoWrapper = styled.div`
padding-bottom: 16px;
margin-bottom: 24px;
color: rgb(222, 235, 255);
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
`;

16
frontend/src/shared/components/MemberManager/Styles.ts
View File

@ -20,14 +20,14 @@ export const MemberManagerSearch = styled(TextareaAutosize)`
font-size: 14px;
font-weight: 400;
background: #262c49;
background: ${props => props.theme.colors.bgColor.secondary};
outline: none;
color: #c2c6dc;
border-color: #414561;
color: ${props => props.theme.colors.text.primary};
border-color: ${props => props.theme.colors.border};
&:focus {
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
background: ${mixin.darken('#262c49', 0.15)};
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
background: ${props => mixin.darken(props.theme.colors.bgColor.secondary, 0.15)};
}
`;
@ -66,8 +66,8 @@ export const BoardMemberListItemContent = styled(Member)`
color: #c2c6dc;
&:hover {
background-color: rgba(${props => props.theme.colors.primary});
color: rgba(${props => props.theme.colors.text.secondary});
background-color: ${props => props.theme.colors.primary};
color: ${props => props.theme.colors.text.secondary};
}
`;
@ -80,7 +80,7 @@ export const ProfileIcon = styled.div`
justify-content: center;
color: #c2c6dc;
font-weight: 700;
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
cursor: pointer;
margin-right: 6px;
`;

13
frontend/src/shared/components/MiniProfile/Styles.ts
View File

@ -1,6 +1,7 @@
import styled, { css } from 'styled-components';
import Button from 'shared/components/Button';
import { Checkmark } from 'shared/icons';
import { mixin } from 'shared/utils/styles';
export const RoleCheckmark = styled(Checkmark)`
padding-left: 4px;
@ -80,36 +81,36 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
? css`
user-select: none;
pointer-events: none;
color: rgba(${props.theme.colors.text.primary}, 0.4);
color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
`
: css`
cursor: pointer;
&:hover {
background: rgb(115, 103, 240);
background: ${props.theme.colors.primary};
}
`}
`;
export const CurrentPermission = styled.span`
margin-left: 4px;
color: rgba(${props => props.theme.colors.text.secondary}, 0.4);
color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
`;
export const Separator = styled.div`
height: 1px;
border-top: 1px solid #414561;
border-top: 1px solid ${props => props.theme.colors.alternate};
margin: 0.25rem !important;
`;
export const WarningText = styled.span`
display: flex;
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
padding: 6px;
`;
export const DeleteDescription = styled.div`
font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
export const RemoveMemberButton = styled(Button)`

4
frontend/src/shared/components/Modal/index.tsx
View File

@ -30,9 +30,9 @@ const CloseIcon = styled(Cross)`
top: 16px;
right: -32px;
cursor: pointer;
fill: rgba(${props => props.theme.colors.text.primary});
fill: ${props => props.theme.colors.text.primary};
&:hover {
fill: rgba(${props => props.theme.colors.text.secondary});
fill: ${props => props.theme.colors.text.secondary};
}
`;

15
frontend/src/shared/components/Navbar/Styles.ts
View File

@ -1,4 +1,5 @@
import styled, { css } from 'styled-components';
import { mixin } from 'shared/utils/styles';
export const Logo = styled.div``;
@ -9,7 +10,7 @@ export const LogoTitle = styled.div`
font-size: 24px;
font-weight: 600;
transition: visibility, opacity, transform 0.25s ease;
color: #7367f0;
color: #22ff00;
`;
export const ActionContainer = styled.div`
position: relative;
@ -46,8 +47,8 @@ export const ActionButtonWrapper = styled.div<{ active?: boolean }>`
${props =>
props.active &&
css`
background: rgb(115, 103, 240);
box-shadow: 0 0 10px 1px rgba(115, 103, 240, 0.7);
background: ${props.theme.colors.primary};
box-shadow: 0 0 10px 1px ${mixin.rgba(props.theme.colors.primary, 0.7)};
`}
border-radius: 6px;
cursor: pointer;
@ -73,7 +74,7 @@ export const LogoWrapper = styled.div`
color: rgb(222, 235, 255);
cursor: pointer;
transition: color 0.1s ease 0s, border 0.1s ease 0s;
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
`;
export const Container = styled.aside`
@ -87,12 +88,12 @@ export const Container = styled.aside`
transform: translateZ(0px);
background: #10163a;
transition: all 0.1s ease 0s;
border-right: 1px solid rgba(65, 69, 97, 0.65);
border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
&:hover {
width: 260px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 50px 0px;
border-right: 1px solid rgba(65, 69, 97, 0);
border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
}
&:hover ${LogoTitle} {
bottom: -12px;
@ -106,6 +107,6 @@ export const Container = styled.aside`
}
&:hover ${LogoWrapper} {
border-bottom: 1px solid rgba(65, 69, 97, 0);
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
}
`;

33
frontend/src/shared/components/NewProject/index.tsx
View File

@ -3,16 +3,17 @@ import styled from 'styled-components';
import { mixin } from 'shared/utils/styles';
import Select from 'react-select';
import { ArrowLeft, Cross } from 'shared/icons';
import theme from '../../../App/ThemeStyles';
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
if (isDisabled) {
return null;
}
if (isSelected) {
return mixin.darken('#262c49', 0.25);
return mixin.darken(theme.colors.bg.secondary, 0.25);
}
if (isFocused) {
return mixin.darken('#262c49', 0.15);
return mixin.darken(theme.colors.bg.secondary, 0.15);
}
return null;
}
@ -97,8 +98,8 @@ const ProjectName = styled.input`
font-weight: 400;
&:focus {
background: ${mixin.darken('#262c49', 0.15)};
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
}
`;
const ProjectNameLabel = styled.label`
@ -126,35 +127,35 @@ const colourStyles = {
control: (styles: any, data: any) => {
return {
...styles,
backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: '#414561',
borderColor: theme.colors.alternate,
':hover': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: '#414561',
borderColor: theme.colors.alternate,
},
':active': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: 'rgb(115, 103, 240)',
borderColor: `${theme.colors.primary}`,
},
};
},
menu: (styles: any) => {
return {
...styles,
backgroundColor: mixin.darken('#262c49', 0.15),
backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
};
},
dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@ -167,11 +168,11 @@ const colourStyles = {
cursor: isDisabled ? 'not-allowed' : 'default',
':active': {
...styles[':active'],
backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
},
':hover': {
...styles[':hover'],
backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
},
};
},
@ -209,8 +210,8 @@ const CreateButton = styled.button`
&:hover {
color: #fff;
background: rgb(115, 103, 240);
border-color: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
border-color: ${props => props.theme.colors.primary};
}
`;
type NewProjectProps = {

10
frontend/src/shared/components/NotifcationPopup/index.tsx
View File

@ -37,7 +37,7 @@ const ItemTextContainer = styled.div`
const ItemTextTitle = styled.span`
font-weight: 500;
display: block;
color: rgba(${props => props.theme.colors.primary});
color: ${props => props.theme.colors.primary};
font-size: 14px;
`;
const ItemTextDesc = styled.span`
@ -76,21 +76,21 @@ const NotificationHeader = styled.div`
text-align: center;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: rgba(${props => props.theme.colors.primary});
background: ${props => props.theme.colors.primary};
`;
const NotificationHeaderTitle = styled.span`
font-size: 14px;
color: rgba(${props => props.theme.colors.text.secondary});
color: ${props => props.theme.colors.text.secondary};
`;
const NotificationFooter = styled.div`
cursor: pointer;
padding: 0.5rem;
text-align: center;
color: rgba(${props => props.theme.colors.primary});
color: ${props => props.theme.colors.primary};
&:hover {
background: #10163a;
background: ${props => props.theme.colors.bg.primary};
}
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;

2
frontend/src/shared/components/PopupMenu/LabelEditor.tsx
View File

@ -4,7 +4,7 @@ import styled from 'styled-components';
import { SaveButton, DeleteButton, LabelBox, EditLabelForm, FieldLabel, FieldName } from './Styles';
const WhiteCheckmark = styled(Checkmark)`
fill: rgba(${props => props.theme.colors.text.secondary});
fill: ${props => props.theme.colors.text.secondary};
`;
type Props = {
labelColors: Array<LabelColor>;

13
frontend/src/shared/components/PopupMenu/Styles.ts
View File

@ -1,6 +1,7 @@
import styled, { css } from 'styled-components';
import { mixin } from 'shared/utils/styles';
import ControlledInput from 'shared/components/ControlledInput';
import theme from 'App/ThemeStyles';
export const Container = styled.div<{
invertY: boolean;
@ -176,7 +177,7 @@ export const LabelIcon = styled.div`
cursor: pointer;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;
@ -233,8 +234,8 @@ export const FieldName = styled.input`
font-weight: 400;
&:focus {
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
background: ${mixin.darken('#262c49', 0.15)};
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
background: ${mixin.darken(theme.colors.bg.secondary, 0.15)};
}
`;
@ -258,7 +259,7 @@ export const LabelBox = styled.span<{ color: string }>`
`;
export const SaveButton = styled.input`
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
box-shadow: none;
border: none;
color: #fff;
@ -296,7 +297,7 @@ export const DeleteButton = styled.input`
&:hover {
color: #fff;
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
border-color: transparent;
}
`;
@ -317,7 +318,7 @@ export const CreateLabelButton = styled.button`
cursor: pointer;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;

3
frontend/src/shared/components/PopupMenu/index.tsx
View File

@ -4,6 +4,7 @@ import useOnOutsideClick from 'shared/hooks/onOutsideClick';
import { createPortal } from 'react-dom';
import NOOP from 'shared/utils/noop';
import produce from 'immer';
import theme from 'App/ThemeStyles';
import {
Container,
ContainerDiamond,
@ -18,7 +19,7 @@ import {
function getPopupOptions(options?: PopupOptions) {
const popupOptions = {
borders: true,
diamondColor: '#262c49',
diamondColor: theme.colors.bg.secondary,
targetPadding: '10px',
showDiamond: true,
width: 316,

2
frontend/src/shared/components/ProjectSettings/index.tsx
View File

@ -24,7 +24,7 @@ export const ListActionItem = styled.span`
margin: 0 -12px;
text-decoration: none;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;

4
frontend/src/shared/components/QuickCardEditor/Styles.ts
View File

@ -1,6 +1,4 @@
import styled, { keyframes, css } from 'styled-components';
import TextareaAutosize from 'react-autosize-textarea';
import { mixin } from 'shared/utils/styles';
export const Wrapper = styled.div<{ open: boolean }>`
background: rgba(0, 0, 0, 0.55);
@ -30,7 +28,7 @@ export const Container = styled.div<{ fixed: boolean; width: number; top: number
export const SaveButton = styled.button`
cursor: pointer;
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
box-shadow: none;
border: none;
color: #fff;

5
frontend/src/shared/components/Register/Styles.ts
View File

@ -1,5 +1,6 @@
import styled from 'styled-components';
import Button from 'shared/components/Button';
import { mixin } from 'shared/utils/styles';
export const Wrapper = styled.div`
background: #eff2f7;
@ -68,7 +69,7 @@ export const FormIcon = styled.div`
export const FormError = styled.span`
font-size: 0.875rem;
color: rgb(234, 84, 85);
color: ${props => props.theme.colors.danger};
`;
export const LoginButton = styled(Button)``;
@ -99,5 +100,5 @@ export const LogoWrapper = styled.div`
padding-bottom: 16px;
margin-bottom: 24px;
color: rgb(222, 235, 255);
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
`;

27
frontend/src/shared/components/Select/index.tsx
View File

@ -2,16 +2,17 @@ import React from 'react';
import Select from 'react-select';
import styled from 'styled-components';
import { mixin } from 'shared/utils/styles';
import theme from 'App/ThemeStyles';
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
if (isDisabled) {
return null;
}
if (isSelected) {
return mixin.darken('#262c49', 0.25);
return mixin.darken(theme.colors.bg.secondary, 0.25);
}
if (isFocused) {
return mixin.darken('#262c49', 0.15);
return mixin.darken(theme.colors.bg.secondary, 0.15);
}
return null;
}
@ -20,35 +21,35 @@ export const colourStyles = {
control: (styles: any, data: any) => {
return {
...styles,
backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: '#414561',
borderColor: theme.colors.alternate,
':hover': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: '#414561',
borderColor: theme.colors.alternate,
},
':active': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px',
borderWidth: '1px',
borderStyle: 'solid',
borderImage: 'initial',
borderColor: 'rgb(115, 103, 240)',
borderColor: `${theme.colors.primary}`,
},
};
},
menu: (styles: any) => {
return {
...styles,
backgroundColor: mixin.darken('#262c49', 0.15),
backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
};
},
dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@ -61,11 +62,11 @@ export const colourStyles = {
cursor: isDisabled ? 'not-allowed' : 'default',
':active': {
...styles[':active'],
backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
},
':hover': {
...styles[':hover'],
backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
},
};
},
@ -86,7 +87,7 @@ export const colourStyles = {
const InputLabel = styled.span<{ width: string }>`
width: ${props => props.width};
padding-left: 0.7rem;
color: rgba(115, 103, 240);
color: ${props => props.theme.colors.primary};
left: 0;
top: 0;
transition: all 0.2s ease;

12
frontend/src/shared/components/Settings/index.tsx
View File

@ -17,7 +17,7 @@ const UserInfoInput = styled(Input)`
const FormError = styled.span`
font-size: 12px;
color: rgba(${props => props.theme.colors.warning});
color: ${props => props.theme.colors.warning};
`;
const ProfileContainer = styled.div`
@ -152,12 +152,12 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
width: 100%;
position: relative;
color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
color: ${props => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
&:hover {
color: rgba(115, 103, 240);
color: ${props => props.theme.colors.primary};
}
&:hover svg {
fill: rgba(115, 103, 240);
fill: ${props => props.theme.colors.primary};
}
`;
@ -175,8 +175,8 @@ const TabNavLine = styled.span<{ top: number }>`
transform: scaleX(1);
top: ${props => props.top}px;
background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
box-shadow: 0 0 8px 0 rgba(115, 103, 240);
background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
display: block;
position: absolute;
transition: all 0.2s ease;

2
frontend/src/shared/components/TaskAssignee/index.tsx
View File

@ -36,7 +36,7 @@ export const Wrapper = styled.div<{
display: flex;
align-items: center;
justify-content: center;
color: rgba(${props => (props.backgroundURL ? props.theme.colors.text.primary : '0,0,0')});
color: ${props => (props.backgroundURL ? props.theme.colors.text.primary : 'rgb(0,0,0)')};
background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
background-position: center;
background-size: contain;

80
frontend/src/shared/components/TaskDetails/Styles.ts
View File

@ -3,8 +3,6 @@ import TextareaAutosize from 'react-autosize-textarea';
import { mixin } from 'shared/utils/styles';
import Button from 'shared/components/Button';
import TaskAssignee from 'shared/components/TaskAssignee';
import { User, Trash, Paperclip } from 'shared/icons';
import Member from 'shared/components/Member';
export const Container = styled.div`
display: flex;
@ -33,35 +31,35 @@ export const MarkCompleteButton = styled.button<{ invert: boolean }>`
${props =>
props.invert
? css`
background: rgba(${props.theme.colors.success});
background: ${props.theme.colors.success};
& svg {
fill: rgba(${props.theme.colors.text.secondary});
fill: ${props.theme.colors.text.secondary};
}
& span {
color: rgba(${props.theme.colors.text.secondary});
color: ${props.theme.colors.text.secondary};
}
&:hover {
background: rgba(${props.theme.colors.success}, 0.8);
background: ${mixin.rgba(props.theme.colors.success, 0.8)};
}
`
: css`
background: none;
border: 1px solid rgba(${props.theme.colors.text.secondary});
border: 1px solid ${props.theme.colors.text.secondary};
& svg {
fill: rgba(${props.theme.colors.text.secondary});
fill: ${props.theme.colors.text.secondary};
}
& span {
color: rgba(${props.theme.colors.text.secondary});
color: ${props.theme.colors.text.secondary};
}
&:hover {
background: rgba(${props.theme.colors.success}, 0.08);
border: 1px solid rgba(${props.theme.colors.success});
background: ${mixin.rgba(props.theme.colors.success, 0.08)};
border: 1px solid ${props.theme.colors.success};
}
&:hover svg {
fill: rgba(${props.theme.colors.success});
fill: ${props.theme.colors.success};
}
&:hover span {
color: rgba(${props.theme.colors.success});
color: ${props.theme.colors.success};
}
`}
`;
@ -85,7 +83,7 @@ export const SidebarTitle = styled.div`
font-size: 12px;
min-height: 24px;
margin-left: 8px;
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
padding-top: 4px;
letter-spacing: 0.5px;
text-transform: uppercase;
@ -93,7 +91,7 @@ export const SidebarTitle = styled.div`
export const SidebarButton = styled.div`
font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
min-height: 32px;
width: 100%;
@ -168,7 +166,7 @@ export const TaskDetailsTitle = styled(TextareaAutosize)`
}
&:focus {
border-color: rgba(${props => props.theme.colors.primary});
border-color: ${props => props.theme.colors.primary};
}
`;
@ -176,7 +174,7 @@ export const DueDateTitle = styled.div`
font-size: 12px;
min-height: 24px;
margin-left: 8px;
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
padding-top: 8px;
letter-spacing: 0.5px;
text-transform: uppercase;
@ -187,7 +185,7 @@ export const AssignedUsersSection = styled.div`
padding-right: 32px;
padding-top: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #414561;
border-bottom: 1px solid ${props => props.theme.colors.alternate};
display: flex;
flex-direction: column;
`;
@ -205,10 +203,10 @@ export const AssignUserIcon = styled.div`
justify-content: center;
align-items: center;
&:hover {
border: 1px solid rgba(${props => props.theme.colors.text.secondary}, 0.75);
border: 1px solid ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
}
&:hover svg {
fill: rgba(${props => props.theme.colors.text.secondary}, 0.75);
fill: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
}
`;
@ -223,17 +221,17 @@ export const AssignUsersButton = styled.div`
align-items: center;
border: 1px solid transparent;
&:hover {
border: 1px solid ${mixin.darken('#414561', 0.15)};
border: 1px solid ${props => mixin.darken(props.theme.colors.alternate, 0.15)};
}
&:hover ${AssignUserIcon} {
border: 1px solid #414561;
border: 1px solid ${props => props.theme.colors.alternate};
}
`;
export const AssignUserLabel = styled.span`
flex: 1 1 auto;
line-height: 15px;
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
`;
export const ExtraActionsSection = styled.div`
@ -245,7 +243,7 @@ export const ExtraActionsSection = styled.div`
`;
export const ActionButtonsTitle = styled.h3`
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
@ -255,7 +253,7 @@ export const ActionButton = styled(Button)`
margin-top: 8px;
margin-left: -10px;
padding: 8px 16px;
background: rgba(${props => props.theme.colors.bg.primary}, 0.5);
background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.5)};
text-align: left;
transition: transform 0.2s ease;
& span {
@ -264,7 +262,7 @@ export const ActionButton = styled(Button)`
&:hover {
box-shadow: none;
transform: translateX(4px);
background: rgba(${props => props.theme.colors.bg.primary}, 0.75);
background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.75)};
}
`;
@ -283,10 +281,10 @@ export const HeaderActionIcon = styled.div`
cursor: pointer;
svg {
fill: rgba(${props => props.theme.colors.text.primary}, 0.75);
fill: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
}
&:hover svg {
fill: rgba(${props => props.theme.colors.primary});
fill: ${props => mixin.rgba(props.theme.colors.primary, 0.75)});
}
`;
@ -343,7 +341,7 @@ export const MetaDetail = styled.div`
`;
export const MetaDetailTitle = styled.h3`
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
@ -362,7 +360,7 @@ export const MetaDetailContent = styled.div`
`;
export const TaskDetailsAddLabel = styled.div`
border-radius: 3px;
background: ${mixin.darken('#262c49', 0.15)};
background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
cursor: pointer;
&:hover {
opacity: 0.8;
@ -377,7 +375,7 @@ export const TaskDetailsAddLabelIcon = styled.div`
align-items: center;
justify-content: center;
border-radius: 3px;
background: ${mixin.darken('#262c49', 0.15)};
background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
cursor: pointer;
&:hover {
opacity: 0.8;
@ -452,11 +450,11 @@ export const TabBarSection = styled.div`
`;
export const TabBarItem = styled.div`
box-shadow: inset 0 -2px rgba(216, 93, 216);
box-shadow: inset 0 -2px ${props => props.theme.colors.primary};
padding: 12px 7px 14px 7px;
margin-bottom: -1px;
margin-right: 36px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
export const CommentContainer = styled.div`
@ -491,7 +489,7 @@ export const CommentTextArea = styled(TextareaAutosize)`
line-height: 28px;
padding: 4px 6px;
border-radius: 6px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
background: #1f243e;
border: none;
transition: max-height 200ms, height 200ms, min-height 200ms;
@ -556,13 +554,13 @@ export const ActivityItemHeaderTitle = styled.div`
`;
export const ActivityItemHeaderTitleName = styled.span`
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
font-weight: 500;
`;
export const ActivityItemTimestamp = styled.span<{ margin: number }>`
font-size: 12px;
color: rgba(${props => props.theme.colors.text.primary}, 0.65);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.65)};
margin-left: ${props => props.margin}px;
`;
@ -575,15 +573,15 @@ export const ActivityItemComment = styled.div`
border-radius: 3px;
${mixin.boxShadowCard}
position: relative;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
padding: 8px 12px;
margin: 4px 0;
background-color: ${mixin.darken('#262c49', 0.1)};
background-color: ${props => mixin.darken(props.theme.colors.alternate, 0.1)};
`;
export const ActivityItemLog = styled.span`
margin-left: 2px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
`;
export const ViewRawButton = styled.button`
@ -594,9 +592,9 @@ export const ViewRawButton = styled.button`
right: 4px;
bottom: -24px;
cursor: pointer;
color: rgba(${props => props.theme.colors.text.primary}, 0.25);
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.25)};
&:hover {
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
}
`;

2
frontend/src/shared/components/Textarea/index.tsx
View File

@ -24,7 +24,7 @@ const Textarea = styled(TextareaAutosize)`
font-size: 20px;
padding: 3px 10px 3px 8px;
&:focus {
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
}
`;

37
frontend/src/shared/components/TopNavbar/Styles.ts
View File

@ -11,7 +11,8 @@ export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
z-index: ${props => props.zIndex};
position: relative;
box-shadow: 0 0 0 2px rgba(16, 22, 58), inset 0 0 0 1px rgba(16, 22, 58, 0.07);
box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.primary},
inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.primary, 0.07)};
`;
export const NavbarWrapper = styled.div`
@ -28,9 +29,9 @@ export const NavbarHeader = styled.header`
display: flex;
align-items: center;
justify-content: space-between;
background: rgb(16, 22, 58);
background: ${props => props.theme.colors.bg.primary};
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
border-bottom: 1px solid rgba(65, 69, 97, 0.65);
border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
`;
export const Breadcrumbs = styled.div`
color: rgb(94, 108, 132);
@ -124,7 +125,7 @@ export const ProjectTabs = styled.div`
export const ProjectTab = styled(NavLink)`
font-size: 80%;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
font-size: 15px;
cursor: pointer;
display: flex;
@ -141,22 +142,22 @@ export const ProjectTab = styled(NavLink)`
}
&:hover {
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.text.secondary});
color: rgba(${props => props.theme.colors.text.secondary});
box-shadow: inset 0 -2px ${props => props.theme.colors.text.secondary};
color: ${props => props.theme.colors.text.secondary};
}
&.active {
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary});
color: rgba(${props => props.theme.colors.secondary});
box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
color: ${props => props.theme.colors.secondary};
}
&.active:hover {
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary});
color: rgba(${props => props.theme.colors.secondary});
box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
color: ${props => props.theme.colors.secondary};
}
`;
export const ProjectName = styled.h1`
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
font-weight: 600;
font-size: 20px;
padding: 3px 10px 3px 8px;
@ -185,7 +186,7 @@ export const ProjectNameTextarea = styled(TextareaAutosize)`
font-size: 20px;
padding: 3px 10px 3px 8px;
&:focus {
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
}
`;
@ -203,7 +204,7 @@ export const ProjectSwitcher = styled.button`
color: #c2c6dc;
cursor: pointer;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;
@ -227,7 +228,7 @@ export const ProjectSettingsButton = styled.button`
justify-content: center;
cursor: pointer;
&:hover {
background: rgb(115, 103, 240);
background: ${props => props.theme.colors.primary};
}
`;
@ -243,7 +244,7 @@ export const ProjectFinder = styled(Button)`
export const NavSeparator = styled.div`
width: 1px;
background: rgba(${props => props.theme.colors.border});
background: ${props => props.theme.colors.border};
height: 34px;
margin: 0 20px;
`;
@ -260,11 +261,11 @@ export const LogoContainer = styled(Link)`
export const TaskcafeTitle = styled.h2`
margin-left: 5px;
color: rgba(${props => props.theme.colors.text.primary});
color: ${props => props.theme.colors.text.primary};
font-size: 20px;
`;
export const TaskcafeLogo = styled(Taskcafe)`
fill: rgba(${props => props.theme.colors.text.primary});
stroke: rgba(${props => props.theme.colors.text.primary});
fill: ${props => props.theme.colors.text.primary};
stroke: ${props => props.theme.colors.text.primary};
`;

4
frontend/src/shared/components/TopNavbar/TopNavbar.stories.tsx
View File

@ -2,8 +2,8 @@ import React, { useState } from 'react';
import NormalizeStyles from 'App/NormalizeStyles';
import BaseStyles from 'App/BaseStyles';
import { action } from '@storybook/addon-actions';
import DropdownMenu from 'shared/components/DropdownMenu';
import TopNavbar from '.';
import theme from '../../../App/ThemeStyles';
export default {
component: TopNavbar,
@ -15,7 +15,7 @@ export default {
backgrounds: [
{ name: 'white', value: '#ffffff' },
{ name: 'gray', value: '#f8f8f8' },
{ name: 'darkBlue', value: '#262c49', default: true },
{ name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
],
},
};

4
frontend/src/shared/icons/Icon.tsx
View File

@ -17,8 +17,8 @@ type Props = {
};
const Svg = styled.svg`
fill: rgba(${props => props.theme.colors.text.primary});
stroke: rgba(${props => props.theme.colors.text.primary});
fill: ${props => props.theme.colors.text.primary};
stroke: ${props => props.theme.colors.text.primary};
`;
const Icon: React.FC<Props> = ({ width, height, viewBox, className, onClick, children }) => {

1
frontend/src/styled.d.ts vendored
View File

@ -10,6 +10,7 @@ declare module 'styled-components' {
};
colors: {
[key: string]: any;
multiColors: string[];
primary: string;
secondary: string;
success: string;