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` const InputError = styled.span`
color: rgba(${props => props.theme.colors.danger}); color: ${props => props.theme.colors.danger};
font-size: 12px; font-size: 12px;
`; `;

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

@ -1,26 +1,28 @@
import { DefaultTheme } from 'styled-components'; import { DefaultTheme } from 'styled-components';
import Color from 'color';
const theme: DefaultTheme = { const theme: DefaultTheme = {
borderRadius: { borderRadius: {
primary: '3px', primary: '3x',
alternate: '6px', alternate: '6px',
}, },
colors: { colors: {
primary: '115, 103, 240', multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
secondary: '216, 93, 216', primary: 'rgb(115, 103, 240)',
alternate: '65, 69, 97', secondary: 'rgb(216, 93, 216)',
success: '40, 199, 111', alternate: 'rgb(65, 69, 97)',
danger: '234, 84, 85', success: 'rgb(40, 199, 111)',
warning: '255, 159, 67', danger: 'rgb(234, 84, 85)',
dark: '30, 30, 30', warning: 'rgb(255, 159, 67)',
dark: 'rgb(30, 30, 30)',
text: { text: {
primary: '194, 198, 220', primary: 'rgb(194, 198, 220)',
secondary: '255, 255, 255', secondary: 'rgb(255, 255, 255)',
}, },
border: '65, 69, 97', border: 'rgb(65, 69, 97)',
bg: { bg: {
primary: '16, 22, 58', primary: 'rgb(16, 22, 58)',
secondary: '38, 44, 73', 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 cache from 'App/cache';
import NOOP from 'shared/utils/noop'; import NOOP from 'shared/utils/noop';
import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup'; import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
import theme from './ThemeStyles';
const TeamContainer = styled.div` const TeamContainer = styled.div`
display: flex; display: flex;
@ -62,7 +63,7 @@ const TeamProjectBackground = styled.div<{ color: string }>`
opacity: 1; opacity: 1;
border-radius: 3px; border-radius: 3px;
&:before { &:before {
background: rgba(${props => props.theme.colors.bg.secondary}); background: ${props => props.theme.colors.bg.secondary};
bottom: 0; bottom: 0;
content: ''; content: '';
left: 0; left: 0;
@ -114,7 +115,7 @@ const TeamProjectContainer = styled.div`
margin: 0 4px 4px 0; margin: 0 4px 4px 0;
min-width: 0; min-width: 0;
&:hover ${TeamProjectTitle} { &:hover ${TeamProjectTitle} {
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
} }
&:hover ${TeamProjectAvatar} { &:hover ${TeamProjectAvatar} {
opacity: 1; 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 ProjectFinder = () => {
const { loading, data } = useGetProjectsQuery(); const { loading, data } = useGetProjectsQuery();
@ -328,7 +329,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
/> />
))} ))}
</NotificationPopup>, </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; color: #fff;
} }
.Toastify__toast--error { .Toastify__toast--error {
background: rgba(${props => props.theme.colors.danger}); background: ${props => props.theme.colors.danger};
} }
.Toastify__toast--warning { .Toastify__toast--warning {
background: rgba(${props => props.theme.colors.warning}); background: ${props => props.theme.colors.warning};
} }
.Toastify__toast--success { .Toastify__toast--success {
background: rgba(${props => props.theme.colors.success}); background: ${props => props.theme.colors.success};
} }
.Toastify__toast-body { .Toastify__toast-body {
} }

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

@ -12,7 +12,7 @@ const FilterMember = styled(Member)`
margin: 2px 0; margin: 2px 0;
&:hover { &:hover {
cursor: pointer; 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; align-items: center;
font-size: 14px; font-size: 14px;
&:hover { &: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` 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; font-size: 12px;
padding-left: 4px; padding-left: 4px;
padding-right: 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; align-items: center;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
} }
&:hover ${ActionExtraMenuContainer} { &:hover ${ActionExtraMenuContainer} {
visibility: visible; visibility: visible;
@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background: rgb(115, 103, 240); background: rgb(${props => props.theme.colors.primary});
} }
`; `;
const ActionExtraMenuSeparator = styled.li` const ActionExtraMenuSeparator = styled.li`
color: rgba(${props => props.theme.colors.text.primary}, 0.4); color: ${props => props.theme.colors.text.primary};
font-size: 12px; font-size: 12px;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;

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

@ -1,6 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting'; import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
import { mixin } from 'shared/utils/styles';
export const ActionsList = styled.ul` export const ActionsList = styled.ul`
margin: 0; margin: 0;
@ -20,7 +21,7 @@ export const ActionItem = styled.li`
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
&:hover { &: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` 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; font-size: 12px;
padding-left: 4px; padding-left: 4px;
padding-right: 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; display: flex;
align-items: center; align-items: center;
font-size: 15px; font-size: 15px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
&:not(:last-of-type) { &:not(:last-of-type) {
margin-right: 16px; margin-right: 16px;
} }
&:hover { &:hover {
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
} }
${props => ${props =>
props.disabled && 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 Board, { BoardLoading } from './Board';
import Details from './Details'; import Details from './Details';
import LabelManagerEditor from './LabelManagerEditor'; import LabelManagerEditor from './LabelManagerEditor';
import { mixin } from '../../shared/utils/styles';
const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant'; const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
@ -71,7 +72,7 @@ const UserMember = styled(Member)`
padding: 4px 0; padding: 4px 0;
cursor: pointer; cursor: pointer;
&:hover { &: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; 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 updateApolloCache from 'shared/utils/cache';
import produce from 'immer'; import produce from 'immer';
import NOOP from 'shared/utils/noop'; import NOOP from 'shared/utils/noop';
import theme from 'App/ThemeStyles';
import { mixin } from '../shared/utils/styles';
type CreateTeamData = { teamName: string }; type CreateTeamData = { teamName: string };
@ -54,7 +56,7 @@ const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
}; };
const ProjectAddTile = styled.div` 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-size: cover;
background-position: 50%; background-position: 50%;
color: #fff; color: #fff;
@ -176,7 +178,7 @@ const SectionActionLink = styled(Link)`
const ProjectSectionTitle = styled.h3` const ProjectSectionTitle = styled.h3`
font-size: 16px; font-size: 16px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
const ProjectsContainer = styled.div` const ProjectsContainer = styled.div`
@ -229,7 +231,7 @@ const Projects = () => {
return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />; return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
} }
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f']; const colors = theme.colors.multiColors;
if (data && user) { if (data && user) {
const { projects, teams, organizations } = data; const { projects, teams, organizations } = data;
const organizationID = organizations[0].id ?? null; 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 Member from 'shared/components/Member';
import ControlledInput from 'shared/components/ControlledInput'; import ControlledInput from 'shared/components/ControlledInput';
import NOOP from 'shared/utils/noop'; import NOOP from 'shared/utils/noop';
import { mixin } from 'shared/utils/styles';
const MemberListWrapper = styled.div` const MemberListWrapper = styled.div`
flex: 1 1; flex: 1 1;
@ -34,7 +35,7 @@ const UserMember = styled(Member)`
padding: 4px 0; padding: 4px 0;
cursor: pointer; cursor: pointer;
&:hover { &: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; border-radius: 6px;
`; `;
@ -119,12 +120,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
? css` ? css`
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
color: rgba(${props.theme.colors.text.primary}, 0.4); color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
` `
: css` : css`
cursor: pointer; cursor: pointer;
&:hover { &: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` export const CurrentPermission = styled.span`
margin-left: 4px; 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` export const Separator = styled.div`
@ -146,13 +147,13 @@ export const Separator = styled.div`
export const WarningText = styled.span` export const WarningText = styled.span`
display: flex; 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; padding: 6px;
`; `;
export const DeleteDescription = styled.div` export const DeleteDescription = styled.div`
font-size: 14px; font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
export const RemoveMemberButton = styled(Button)` export const RemoveMemberButton = styled(Button)`
@ -305,14 +306,14 @@ const MemberItemOption = styled(Button)`
`; `;
const MemberList = styled.div` 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` const MemberListItem = styled.div`
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; 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; min-height: 40px;
padding: 12px 0 12px 40px; padding: 12px 0 12px 40px;
position: relative; position: relative;
@ -336,11 +337,11 @@ const MemberProfile = styled(TaskAssignee)`
`; `;
const MemberItemName = styled.p` const MemberItemName = styled.p`
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
`; `;
const MemberItemUsername = styled.p` const MemberItemUsername = styled.p`
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
const MemberListHeader = styled.div` const MemberListHeader = styled.div`
@ -349,12 +350,12 @@ const MemberListHeader = styled.div`
`; `;
const ListTitle = styled.h3` const ListTitle = styled.h3`
font-size: 18px; font-size: 18px;
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
margin-bottom: 12px; margin-bottom: 12px;
`; `;
const ListDesc = styled.span` const ListDesc = styled.span`
font-size: 16px; font-size: 16px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
const FilterSearch = styled(Input)` const FilterSearch = styled(Input)`
margin: 0; margin: 0;
@ -386,11 +387,11 @@ const FilterTabItem = styled.li`
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
padding: 6px 8px; padding: 6px 8px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
&:hover { &:hover {
border-radius: 6px; border-radius: 6px;
background: rgba(${props => props.theme.colors.primary}); background: ${props => props.theme.colors.primary};
color: rgba(${props => props.theme.colors.text.secondary}); 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'; } from 'shared/generated/graphql';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Input from 'shared/components/Input'; import Input from 'shared/components/Input';
import theme from 'App/ThemeStyles';
const FilterSearch = styled(Input)` const FilterSearch = styled(Input)`
margin: 0; margin: 0;
@ -34,11 +35,11 @@ const FilterTabItem = styled.li`
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
padding: 6px 8px; padding: 6px 8px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
&:hover { &:hover {
border-radius: 6px; border-radius: 6px;
background: rgba(${props => props.theme.colors.primary}); background: ${props => props.theme.colors.primary};
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
} }
`; `;
@ -55,7 +56,7 @@ const FilterTabTitle = styled.h2`
`; `;
const ProjectAddTile = styled.div` 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-size: cover;
background-position: 50%; background-position: 50%;
color: #fff; color: #fff;
@ -147,7 +148,7 @@ const ProjectListWrapper = styled.div`
flex: 1 1; flex: 1 1;
`; `;
const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f']; const colors = theme.colors.multiColors;
type TeamProjectsProps = { type TeamProjectsProps = {
teamID: string; teamID: string;

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

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import theme from 'App/ThemeStyles';
import AddList from '.'; import AddList from '.';
export default { export default {
@ -7,7 +8,7 @@ export default {
title: 'AddList', title: 'AddList',
parameters: { parameters: {
backgrounds: [ backgrounds: [
{ name: 'gray', value: '#262c49', default: true }, { name: 'gray', value: theme.colors.bg.secondary, default: true },
{ name: 'white', value: '#ffffff' }, { 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; display: flex;
`; `;
export const ListNameEditor = styled(TextareaAutosize)` 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; border: none;
box-shadow: inset 0 0 0 2px #0079bf; box-shadow: inset 0 0 0 2px #0079bf;
transition: margin 85ms ease-in, background 85ms ease-in; transition: margin 85ms ease-in, background 85ms ease-in;
@ -91,7 +91,7 @@ export const ListNameEditor = styled(TextareaAutosize)`
color: #c2c6dc; color: #c2c6dc;
l &:focus { 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 Input from 'shared/components/Input';
import Button from 'shared/components/Button'; import Button from 'shared/components/Button';
import NOOP from 'shared/utils/noop'; import NOOP from 'shared/utils/noop';
import { mixin } from 'shared/utils/styles';
export const RoleCheckmark = styled(Checkmark)` export const RoleCheckmark = styled(Checkmark)`
padding-left: 4px; padding-left: 4px;
@ -58,12 +59,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
? css` ? css`
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
color: rgba(${props.theme.colors.text.primary}, 0.4); color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
` `
: css` : css`
cursor: pointer; cursor: pointer;
&:hover { &: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` export const CurrentPermission = styled.span`
margin-left: 4px; 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` export const Separator = styled.div`
@ -85,13 +86,13 @@ export const Separator = styled.div`
export const WarningText = styled.span` export const WarningText = styled.span`
display: flex; 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; padding: 6px;
`; `;
export const DeleteDescription = styled.div` export const DeleteDescription = styled.div`
font-size: 14px; font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
export const RemoveMemberButton = styled(Button)` export const RemoveMemberButton = styled(Button)`
@ -333,14 +334,14 @@ const MemberItemOption = styled(Button)`
`; `;
const MemberList = styled.div` 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` const MemberListItem = styled.div`
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; 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; min-height: 40px;
padding: 12px 0 12px 40px; padding: 12px 0 12px 40px;
position: relative; position: relative;
@ -364,11 +365,11 @@ const MemberProfile = styled(TaskAssignee)`
`; `;
const MemberItemName = styled.p` const MemberItemName = styled.p`
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
`; `;
const MemberItemUsername = styled.p` const MemberItemUsername = styled.p`
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
const MemberListHeader = styled.div` const MemberListHeader = styled.div`
@ -377,12 +378,12 @@ const MemberListHeader = styled.div`
`; `;
const ListTitle = styled.h3` const ListTitle = styled.h3`
font-size: 18px; font-size: 18px;
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
margin-bottom: 12px; margin-bottom: 12px;
`; `;
const ListDesc = styled.span` const ListDesc = styled.span`
font-size: 16px; font-size: 16px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
const FilterSearch = styled(Input)` const FilterSearch = styled(Input)`
margin: 0; margin: 0;
@ -443,17 +444,17 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
width: 100%; width: 100%;
position: relative; 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 { &:hover {
color: rgba(115, 103, 240); color: ${props => `${props.theme.colors.primary}`};
} }
&:hover svg { &:hover svg {
fill: rgba(115, 103, 240); fill: ${props => props.theme.colors.primary};
} }
`; `;
const TabItemUser = styled(User)<{ active: boolean }>` const TabItemUser = styled(User)<{ active: boolean }>`
fill: ${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 ? 'rgba(115, 103, 240)' : '#c2c6dc')} stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
`; `;
const TabNavItemSpan = styled.span` const TabNavItemSpan = styled.span`
@ -470,8 +471,8 @@ const TabNavLine = styled.span<{ top: number }>`
transform: scaleX(1); transform: scaleX(1);
top: ${props => props.top}px; top: ${props => props.top}px;
background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240)); background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
box-shadow: 0 0 8px 0 rgba(115, 103, 240); box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
display: block; display: block;
position: absolute; position: absolute;
transition: all 0.2s ease; 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 React, { useRef } from 'react';
import styled, { css } from 'styled-components/macro'; import styled, { css } from 'styled-components/macro';
import { mixin } from '../../utils/styles';
const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>` const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
position: relative; position: relative;
@ -8,7 +9,7 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
justify-content: ${props => props.justifyTextContent}; justify-content: ${props => props.justifyTextContent};
transition: all 0.2s ease; transition: all 0.2s ease;
font-size: ${props => props.fontSize}; font-size: ${props => props.fontSize};
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
${props => ${props =>
props.hasIcon && props.hasIcon &&
css` css`
@ -36,35 +37,36 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
`; `;
const Filled = styled(Base)<{ hoverVariant: HoverVariant }>` const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
background: rgba(${props => props.theme.colors[props.color]}); background: ${props => props.theme.colors[props.color]};
${props => ${props =>
props.hoverVariant === 'boxShadow' && props.hoverVariant === 'boxShadow' &&
css` css`
&:hover { &: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 }>` 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; background: transparent;
${props => ${props =>
props.invert props.invert
? css` ? css`
background: rgba(${props.theme.colors[props.color]}); background: ${props.theme.colors[props.color]});
& ${Text} { & ${Text} {
color: rgba(${props.theme.colors.text.secondary}); color: ${props.theme.colors.text.secondary});
} }
&:hover { &:hover {
background: rgba(${props.theme.colors[props.color]}, 0.8); background: ${mixin.rgba(props.theme.colors[props.color], 0.8)};
} }
` `
: css` : css`
& ${Text} { & ${Text} {
color: rgba(${props.theme.colors[props.color]}); color: ${props.theme.colors[props.color]});
} }
&:hover { &: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)` const Flat = styled(Base)`
background: transparent; background: transparent;
&:hover { &: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; bottom: -2px;
left: 50%; left: 50%;
transform: translate(-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)` const LineDown = styled(Base)`
@ -94,7 +96,7 @@ const LineDown = styled(Base)`
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
border-bottom-width: 2px; 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} { &:hover ${LineX} {
width: 100%; width: 100%;
@ -107,8 +109,8 @@ const LineDown = styled(Base)`
const Gradient = styled(Base)` const Gradient = styled(Base)`
background: linear-gradient( background: linear-gradient(
30deg, 30deg,
rgba(${props => props.theme.colors[props.color]}, 1), ${props => mixin.rgba(props.theme.colors[props.color], 1)},
rgba(${props => props.theme.colors[props.color]}, 0.5) ${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
); );
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
&:hover { &:hover {
@ -117,7 +119,7 @@ const Gradient = styled(Base)`
`; `;
const Relief = 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; -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); 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'; import TaskAssignee from 'shared/components/TaskAssignee';
export const CardMember = styled(TaskAssignee)<{ zIndex: number }>` export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}), box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07); inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
z-index: ${props => props.zIndex}; z-index: ${props => props.zIndex};
position: relative; position: relative;
`; `;
@ -14,8 +14,8 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
${props => ${props =>
props.color === 'success' && props.color === 'success' &&
css` css`
fill: rgba(${props.theme.colors.success}); fill: ${props.theme.colors.success};
stroke: rgba(${props.theme.colors.success}); stroke: ${props.theme.colors.success};
`} `}
`; `;
export const ClockIcon = styled(Clock)<{ color: string }>` export const ClockIcon = styled(Clock)<{ color: string }>`
@ -38,7 +38,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
&:focus { &:focus {
border: none; border: none;
outline: none; outline: none;
@ -89,7 +89,7 @@ export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
padding: 0 4px 0 6px; padding: 0 4px 0 6px;
vertical-align: top; vertical-align: top;
white-space: nowrap; 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 }>` export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@ -101,7 +101,9 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
position: relative; position: relative;
background-color: ${props => 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` export const ListCardInnerContainer = styled.div`
@ -221,7 +223,7 @@ export const ListCardOperation = styled.span`
top: 2px; top: 2px;
z-index: 100; z-index: 100;
&:hover { &: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; word-wrap: break-word;
line-height: 18px; line-height: 18px;
font-size: 14px; font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
display: flex; display: flex;
align-items: center; align-items: center;
@ -246,7 +248,7 @@ export const CardMembers = styled.div`
`; `;
export const CompleteIcon = styled(CheckCircle)` export const CompleteIcon = styled(CheckCircle)`
fill: rgba(${props => props.theme.colors.success}); fill: ${props => props.theme.colors.success};
margin-right: 4px; margin-right: 4px;
flex-shrink: 0; flex-shrink: 0;
`; `;

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

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

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

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import styled, { css } from 'styled-components/macro'; import styled, { css } from 'styled-components/macro';
import theme from '../../../App/ThemeStyles';
const InputWrapper = styled.div<{ width: string }>` const InputWrapper = styled.div<{ width: string }>`
position: relative; position: relative;
@ -57,14 +58,14 @@ const InputInput = styled.input<{
background: ${props => props.focusBg}; background: ${props => props.focusBg};
} }
&:focus ~ ${InputLabel} { &:focus ~ ${InputLabel} {
color: rgba(115, 103, 240); color: ${props => props.theme.colors.primary};
transform: translate(-3px, -90%); transform: translate(-3px, -90%);
} }
${props => ${props =>
props.hasValue && props.hasValue &&
css` css`
& ~ ${InputLabel} { & ~ ${InputLabel} {
color: rgba(115, 103, 240); color: ${props.theme.colors.primary};
transform: translate(-3px, -90%); transform: translate(-3px, -90%);
} }
`} `}
@ -115,8 +116,8 @@ const ControlledInput = ({
}: ControlledInputProps) => { }: ControlledInputProps) => {
const $input = useRef<HTMLInputElement>(null); const $input = useRef<HTMLInputElement>(null);
const [hasValue, setHasValue] = useState(false); const [hasValue, setHasValue] = useState(false);
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561'; const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : theme.colors.alternate;
const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)'; const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
useEffect(() => { useEffect(() => {
if (autoFocus && $input && $input.current) { if (autoFocus && $input && $input.current) {
$input.current.focus(); $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 styled from 'styled-components';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import DropdownMenu from '.'; import DropdownMenu from '.';
import theme from '../../../App/ThemeStyles';
export default { export default {
component: DropdownMenu, component: DropdownMenu,
@ -10,7 +11,7 @@ export default {
backgrounds: [ backgrounds: [
{ name: 'white', value: '#ffffff' }, { name: 'white', value: '#ffffff' },
{ name: 'gray', value: '#f8f8f8' }, { 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; align-items: center;
font-size: 14px; font-size: 14px;
&:hover { &: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 { & .react-datepicker-time__header {
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
} }
& .react-datepicker__time-list-item { & .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-container .react-datepicker__time
.react-datepicker__time-box ul.react-datepicker__time-list .react-datepicker__time-box ul.react-datepicker__time-list
li.react-datepicker__time-list-item:hover { li.react-datepicker__time-list-item:hover {
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
background: rgba(${props => props.theme.colors.bg.secondary}); background: ${props => props.theme.colors.bg.secondary};
} }
& .react-datepicker__time-container .react-datepicker__time { & .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 { & .react-datepicker--time-only {
background: rgba(${props => props.theme.colors.bg.primary}); background: ${props => props.theme.colors.bg.primary};
border: 1px solid rgba(${props => props.theme.colors.border}); border: 1px solid ${props => props.theme.colors.border};
} }
& .react-datepicker * { & .react-datepicker * {
@ -75,12 +75,12 @@ display: flex
} }
& .react-datepicker__day--selected { & .react-datepicker__day--selected {
border-radius: 50%; border-radius: 50%;
background: rgba(115, 103, 240); background: ${props => props.theme.colors.primary};
color: #fff; color: #fff;
} }
& .react-datepicker__day--selected:hover { & .react-datepicker__day--selected:hover {
border-radius: 50%; border-radius: 50%;
background: rgba(115, 103, 240); background: ${props => props.theme.colors.primary};
color: #fff; color: #fff;
} }
& .react-datepicker__header { & .react-datepicker__header {
@ -88,7 +88,7 @@ display: flex
border: none; border: none;
} }
& .react-datepicker__header--time { & .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; color: #c2c6dc;
&:hover { &:hover {
background: rgba(115, 103, 240); background: ${props => props.theme.colors.primary};
color: #c2c6dc; color: #c2c6dc;
} }
`; `;
@ -60,8 +60,8 @@ const HeaderSelect = styled.select`
appearance: none; appearance: none;
&:hover { &:hover {
background: #262c49; background: ${props => props.theme.colors.bg.secondary};
border: 1px solid rgba(115, 103, 240); border: 1px solid ${props => props.theme.colors.primary};
outline: none !important; outline: none !important;
box-shadow: none; box-shadow: none;
color: #c2c6dc; color: #c2c6dc;
@ -93,7 +93,7 @@ const HeaderButton = styled.button`
border: none; border: none;
border-radius: 3px; border-radius: 3px;
&:hover { &:hover {
background: rgba(115, 103, 240); background: ${props => props.theme.colors.primary};
color: #fff; color: #fff;
} }
`; `;

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

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import styled, { keyframes } from 'styled-components/macro'; import styled, { keyframes } from 'styled-components/macro';
import { mixin } from 'shared/utils/styles'; import { mixin } from 'shared/utils/styles';
import theme from '../../../App/ThemeStyles';
export const BoardContainer = styled.div` export const BoardContainer = styled.div`
position: relative; position: relative;
@ -34,9 +35,9 @@ export const Container = styled.div`
white-space: nowrap; 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` export const skeletonKeyframes = keyframes`
0% { 0% {

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

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

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

@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import styled, { css } from 'styled-components/macro'; import styled, { css } from 'styled-components/macro';
import theme from '../../../App/ThemeStyles';
const InputWrapper = styled.div<{ width: string }>` const InputWrapper = styled.div<{ width: string }>`
position: relative; position: relative;
@ -53,18 +54,18 @@ const InputInput = styled.input<{
transition: all 0.3s ease; transition: all 0.3s ease;
&:focus { &:focus {
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15); 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}; background: ${props => props.focusBg};
} }
&:focus ~ ${InputLabel} { &:focus ~ ${InputLabel} {
color: rgba(115, 103, 240); color: ${props => props.theme.colors.primary};
transform: translate(-3px, -90%); transform: translate(-3px, -90%);
} }
${props => ${props =>
props.hasValue && props.hasValue &&
css` css`
& ~ ${InputLabel} { & ~ ${InputLabel} {
color: rgba(115, 103, 240); color: ${props.theme.colors.primary};
transform: translate(-3px, -90%); transform: translate(-3px, -90%);
} }
`} `}
@ -138,8 +139,8 @@ const Input = React.forwardRef(
$ref: any, $ref: any,
) => { ) => {
const [hasValue, setHasValue] = useState(defaultValue !== ''); const [hasValue, setHasValue] = useState(defaultValue !== '');
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561'; const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)'; 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 // 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 // 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 styled, { css } from 'styled-components';
import TextareaAutosize from 'react-autosize-textarea'; import TextareaAutosize from 'react-autosize-textarea';
import { mixin } from 'shared/utils/styles';
export const Container = styled.div` export const Container = styled.div`
width: 272px; width: 272px;
@ -34,7 +33,7 @@ export const AddCardButton = styled.a`
&:hover { &:hover {
color: #c2c6dc; color: #c2c6dc;
text-decoration: none; text-decoration: none;
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
} }
`; `;
export const Wrapper = styled.div` export const Wrapper = styled.div`
@ -96,7 +95,7 @@ export const Header = styled.div<{ isEditing: boolean }>`
props.isEditing && props.isEditing &&
css` css`
& ${HeaderName} { & ${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; margin: 0 -12px;
text-decoration: none; text-decoration: none;
&:hover { &: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 React, { useState } from 'react';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import theme from 'App/ThemeStyles';
import Lists from '.'; import Lists from '.';
export default { export default {
@ -7,7 +8,7 @@ export default {
title: 'Lists', title: 'Lists',
parameters: { parameters: {
backgrounds: [ backgrounds: [
{ name: 'gray', value: '#262c49', default: true }, { name: 'gray', value: theme.colors.bg.secondary, default: true },
{ name: 'white', value: '#ffffff' }, { 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}; width: ${props => props.size};
height: ${props => props.size}; height: ${props => props.size};
margin: ${props => props.thickness}; 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%; border-radius: 50%;
animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite; 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) { & > div:nth-child(1) {

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

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { LoadingSpinnerWrapper} from './Styles'; import { LoadingSpinnerWrapper } from './Styles';
type LoadingSpinnerProps = { type LoadingSpinnerProps = {
color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark'; color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
@ -30,11 +30,11 @@ const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
borderSize = '80px', borderSize = '80px',
}) => { }) => {
return ( return (
<LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}> <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
<div /> <div />
<div /> <div />
<div /> <div />
</LoadingSpinnerWrapper> </LoadingSpinnerWrapper>
); );
}; };

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

@ -1,5 +1,6 @@
import styled from 'styled-components'; import styled from 'styled-components';
import Button from 'shared/components/Button'; import Button from 'shared/components/Button';
import { mixin } from 'shared/utils/styles';
export const Wrapper = styled.div` export const Wrapper = styled.div`
background: #eff2f7; background: #eff2f7;
@ -68,7 +69,7 @@ export const FormIcon = styled.div`
export const FormError = styled.span` export const FormError = styled.span`
font-size: 0.875rem; font-size: 0.875rem;
color: rgb(234, 84, 85); color: ${props => props.theme.colors.danger};
`; `;
export const LoginButton = styled(Button)``; export const LoginButton = styled(Button)``;
@ -99,5 +100,5 @@ export const LogoWrapper = styled.div`
padding-bottom: 16px; padding-bottom: 16px;
margin-bottom: 24px; margin-bottom: 24px;
color: rgb(222, 235, 255); 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-size: 14px;
font-weight: 400; font-weight: 400;
background: #262c49; background: ${props => props.theme.colors.bgColor.secondary};
outline: none; outline: none;
color: #c2c6dc; color: ${props => props.theme.colors.text.primary};
border-color: #414561; border-color: ${props => props.theme.colors.border};
&:focus { &:focus {
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px; box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
background: ${mixin.darken('#262c49', 0.15)}; background: ${props => mixin.darken(props.theme.colors.bgColor.secondary, 0.15)};
} }
`; `;
@ -66,8 +66,8 @@ export const BoardMemberListItemContent = styled(Member)`
color: #c2c6dc; color: #c2c6dc;
&:hover { &:hover {
background-color: rgba(${props => props.theme.colors.primary}); background-color: ${props => props.theme.colors.primary};
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
} }
`; `;
@ -80,7 +80,7 @@ export const ProfileIcon = styled.div`
justify-content: center; justify-content: center;
color: #c2c6dc; color: #c2c6dc;
font-weight: 700; font-weight: 700;
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
cursor: pointer; cursor: pointer;
margin-right: 6px; margin-right: 6px;
`; `;

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

@ -1,6 +1,7 @@
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import Button from 'shared/components/Button'; import Button from 'shared/components/Button';
import { Checkmark } from 'shared/icons'; import { Checkmark } from 'shared/icons';
import { mixin } from 'shared/utils/styles';
export const RoleCheckmark = styled(Checkmark)` export const RoleCheckmark = styled(Checkmark)`
padding-left: 4px; padding-left: 4px;
@ -80,36 +81,36 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
? css` ? css`
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
color: rgba(${props.theme.colors.text.primary}, 0.4); color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
` `
: css` : css`
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgb(115, 103, 240); background: ${props.theme.colors.primary};
} }
`} `}
`; `;
export const CurrentPermission = styled.span` export const CurrentPermission = styled.span`
margin-left: 4px; 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` export const Separator = styled.div`
height: 1px; height: 1px;
border-top: 1px solid #414561; border-top: 1px solid ${props => props.theme.colors.alternate};
margin: 0.25rem !important; margin: 0.25rem !important;
`; `;
export const WarningText = styled.span` export const WarningText = styled.span`
display: flex; 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; padding: 6px;
`; `;
export const DeleteDescription = styled.div` export const DeleteDescription = styled.div`
font-size: 14px; font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
export const RemoveMemberButton = styled(Button)` 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; top: 16px;
right: -32px; right: -32px;
cursor: pointer; cursor: pointer;
fill: rgba(${props => props.theme.colors.text.primary}); fill: ${props => props.theme.colors.text.primary};
&:hover { &: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 styled, { css } from 'styled-components';
import { mixin } from 'shared/utils/styles';
export const Logo = styled.div``; export const Logo = styled.div``;
@ -9,7 +10,7 @@ export const LogoTitle = styled.div`
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
transition: visibility, opacity, transform 0.25s ease; transition: visibility, opacity, transform 0.25s ease;
color: #7367f0; color: #22ff00;
`; `;
export const ActionContainer = styled.div` export const ActionContainer = styled.div`
position: relative; position: relative;
@ -46,8 +47,8 @@ export const ActionButtonWrapper = styled.div<{ active?: boolean }>`
${props => ${props =>
props.active && props.active &&
css` css`
background: rgb(115, 103, 240); background: ${props.theme.colors.primary};
box-shadow: 0 0 10px 1px rgba(115, 103, 240, 0.7); box-shadow: 0 0 10px 1px ${mixin.rgba(props.theme.colors.primary, 0.7)};
`} `}
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
@ -73,7 +74,7 @@ export const LogoWrapper = styled.div`
color: rgb(222, 235, 255); color: rgb(222, 235, 255);
cursor: pointer; cursor: pointer;
transition: color 0.1s ease 0s, border 0.1s ease 0s; 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` export const Container = styled.aside`
@ -87,12 +88,12 @@ export const Container = styled.aside`
transform: translateZ(0px); transform: translateZ(0px);
background: #10163a; background: #10163a;
transition: all 0.1s ease 0s; 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 { &:hover {
width: 260px; width: 260px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 50px 0px; 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} { &:hover ${LogoTitle} {
bottom: -12px; bottom: -12px;
@ -106,6 +107,6 @@ export const Container = styled.aside`
} }
&:hover ${LogoWrapper} { &: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 { mixin } from 'shared/utils/styles';
import Select from 'react-select'; import Select from 'react-select';
import { ArrowLeft, Cross } from 'shared/icons'; import { ArrowLeft, Cross } from 'shared/icons';
import theme from '../../../App/ThemeStyles';
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) { function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
if (isDisabled) { if (isDisabled) {
return null; return null;
} }
if (isSelected) { if (isSelected) {
return mixin.darken('#262c49', 0.25); return mixin.darken(theme.colors.bg.secondary, 0.25);
} }
if (isFocused) { if (isFocused) {
return mixin.darken('#262c49', 0.15); return mixin.darken(theme.colors.bg.secondary, 0.15);
} }
return null; return null;
} }
@ -97,8 +98,8 @@ const ProjectName = styled.input`
font-weight: 400; font-weight: 400;
&:focus { &:focus {
background: ${mixin.darken('#262c49', 0.15)}; background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px; box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
} }
`; `;
const ProjectNameLabel = styled.label` const ProjectNameLabel = styled.label`
@ -126,35 +127,35 @@ const colourStyles = {
control: (styles: any, data: any) => { control: (styles: any, data: any) => {
return { return {
...styles, ...styles,
backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49', backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none', boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
borderRadius: '3px', borderRadius: '3px',
borderWidth: '1px', borderWidth: '1px',
borderStyle: 'solid', borderStyle: 'solid',
borderImage: 'initial', borderImage: 'initial',
borderColor: '#414561', borderColor: theme.colors.alternate,
':hover': { ':hover': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px', boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px', borderRadius: '3px',
borderWidth: '1px', borderWidth: '1px',
borderStyle: 'solid', borderStyle: 'solid',
borderImage: 'initial', borderImage: 'initial',
borderColor: '#414561', borderColor: theme.colors.alternate,
}, },
':active': { ':active': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px', boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px', borderRadius: '3px',
borderWidth: '1px', borderWidth: '1px',
borderStyle: 'solid', borderStyle: 'solid',
borderImage: 'initial', borderImage: 'initial',
borderColor: 'rgb(115, 103, 240)', borderColor: `${theme.colors.primary}`,
}, },
}; };
}, },
menu: (styles: any) => { menu: (styles: any) => {
return { return {
...styles, ...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' } }), dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@ -167,11 +168,11 @@ const colourStyles = {
cursor: isDisabled ? 'not-allowed' : 'default', cursor: isDisabled ? 'not-allowed' : 'default',
':active': { ':active': {
...styles[':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': { ':hover': {
...styles[':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 { &:hover {
color: #fff; color: #fff;
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
border-color: rgb(115, 103, 240); border-color: ${props => props.theme.colors.primary};
} }
`; `;
type NewProjectProps = { type NewProjectProps = {

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

@ -37,7 +37,7 @@ const ItemTextContainer = styled.div`
const ItemTextTitle = styled.span` const ItemTextTitle = styled.span`
font-weight: 500; font-weight: 500;
display: block; display: block;
color: rgba(${props => props.theme.colors.primary}); color: ${props => props.theme.colors.primary};
font-size: 14px; font-size: 14px;
`; `;
const ItemTextDesc = styled.span` const ItemTextDesc = styled.span`
@ -76,21 +76,21 @@ const NotificationHeader = styled.div`
text-align: center; text-align: center;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px; border-top-right-radius: 6px;
background: rgba(${props => props.theme.colors.primary}); background: ${props => props.theme.colors.primary};
`; `;
const NotificationHeaderTitle = styled.span` const NotificationHeaderTitle = styled.span`
font-size: 14px; font-size: 14px;
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
`; `;
const NotificationFooter = styled.div` const NotificationFooter = styled.div`
cursor: pointer; cursor: pointer;
padding: 0.5rem; padding: 0.5rem;
text-align: center; text-align: center;
color: rgba(${props => props.theme.colors.primary}); color: ${props => props.theme.colors.primary};
&:hover { &:hover {
background: #10163a; background: ${props => props.theme.colors.bg.primary};
} }
border-bottom-left-radius: 6px; border-bottom-left-radius: 6px;
border-bottom-right-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'; import { SaveButton, DeleteButton, LabelBox, EditLabelForm, FieldLabel, FieldName } from './Styles';
const WhiteCheckmark = styled(Checkmark)` const WhiteCheckmark = styled(Checkmark)`
fill: rgba(${props => props.theme.colors.text.secondary}); fill: ${props => props.theme.colors.text.secondary};
`; `;
type Props = { type Props = {
labelColors: Array<LabelColor>; labelColors: Array<LabelColor>;

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

@ -1,6 +1,7 @@
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { mixin } from 'shared/utils/styles'; import { mixin } from 'shared/utils/styles';
import ControlledInput from 'shared/components/ControlledInput'; import ControlledInput from 'shared/components/ControlledInput';
import theme from 'App/ThemeStyles';
export const Container = styled.div<{ export const Container = styled.div<{
invertY: boolean; invertY: boolean;
@ -176,7 +177,7 @@ export const LabelIcon = styled.div`
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
} }
`; `;
@ -233,8 +234,8 @@ export const FieldName = styled.input`
font-weight: 400; font-weight: 400;
&:focus { &:focus {
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px; box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
background: ${mixin.darken('#262c49', 0.15)}; 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` export const SaveButton = styled.input`
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
box-shadow: none; box-shadow: none;
border: none; border: none;
color: #fff; color: #fff;
@ -296,7 +297,7 @@ export const DeleteButton = styled.input`
&:hover { &:hover {
color: #fff; color: #fff;
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
border-color: transparent; border-color: transparent;
} }
`; `;
@ -317,7 +318,7 @@ export const CreateLabelButton = styled.button`
cursor: pointer; cursor: pointer;
&:hover { &: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 { createPortal } from 'react-dom';
import NOOP from 'shared/utils/noop'; import NOOP from 'shared/utils/noop';
import produce from 'immer'; import produce from 'immer';
import theme from 'App/ThemeStyles';
import { import {
Container, Container,
ContainerDiamond, ContainerDiamond,
@ -18,7 +19,7 @@ import {
function getPopupOptions(options?: PopupOptions) { function getPopupOptions(options?: PopupOptions) {
const popupOptions = { const popupOptions = {
borders: true, borders: true,
diamondColor: '#262c49', diamondColor: theme.colors.bg.secondary,
targetPadding: '10px', targetPadding: '10px',
showDiamond: true, showDiamond: true,
width: 316, width: 316,

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

@ -24,7 +24,7 @@ export const ListActionItem = styled.span`
margin: 0 -12px; margin: 0 -12px;
text-decoration: none; text-decoration: none;
&:hover { &: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 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 }>` export const Wrapper = styled.div<{ open: boolean }>`
background: rgba(0, 0, 0, 0.55); 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` export const SaveButton = styled.button`
cursor: pointer; cursor: pointer;
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
box-shadow: none; box-shadow: none;
border: none; border: none;
color: #fff; color: #fff;

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

@ -1,5 +1,6 @@
import styled from 'styled-components'; import styled from 'styled-components';
import Button from 'shared/components/Button'; import Button from 'shared/components/Button';
import { mixin } from 'shared/utils/styles';
export const Wrapper = styled.div` export const Wrapper = styled.div`
background: #eff2f7; background: #eff2f7;
@ -68,7 +69,7 @@ export const FormIcon = styled.div`
export const FormError = styled.span` export const FormError = styled.span`
font-size: 0.875rem; font-size: 0.875rem;
color: rgb(234, 84, 85); color: ${props => props.theme.colors.danger};
`; `;
export const LoginButton = styled(Button)``; export const LoginButton = styled(Button)``;
@ -99,5 +100,5 @@ export const LogoWrapper = styled.div`
padding-bottom: 16px; padding-bottom: 16px;
margin-bottom: 24px; margin-bottom: 24px;
color: rgb(222, 235, 255); 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 Select from 'react-select';
import styled from 'styled-components'; import styled from 'styled-components';
import { mixin } from 'shared/utils/styles'; import { mixin } from 'shared/utils/styles';
import theme from 'App/ThemeStyles';
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) { function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
if (isDisabled) { if (isDisabled) {
return null; return null;
} }
if (isSelected) { if (isSelected) {
return mixin.darken('#262c49', 0.25); return mixin.darken(theme.colors.bg.secondary, 0.25);
} }
if (isFocused) { if (isFocused) {
return mixin.darken('#262c49', 0.15); return mixin.darken(theme.colors.bg.secondary, 0.15);
} }
return null; return null;
} }
@ -20,35 +21,35 @@ export const colourStyles = {
control: (styles: any, data: any) => { control: (styles: any, data: any) => {
return { return {
...styles, ...styles,
backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49', backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none', boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
borderRadius: '3px', borderRadius: '3px',
borderWidth: '1px', borderWidth: '1px',
borderStyle: 'solid', borderStyle: 'solid',
borderImage: 'initial', borderImage: 'initial',
borderColor: '#414561', borderColor: theme.colors.alternate,
':hover': { ':hover': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px', boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px', borderRadius: '3px',
borderWidth: '1px', borderWidth: '1px',
borderStyle: 'solid', borderStyle: 'solid',
borderImage: 'initial', borderImage: 'initial',
borderColor: '#414561', borderColor: theme.colors.alternate,
}, },
':active': { ':active': {
boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px', boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
borderRadius: '3px', borderRadius: '3px',
borderWidth: '1px', borderWidth: '1px',
borderStyle: 'solid', borderStyle: 'solid',
borderImage: 'initial', borderImage: 'initial',
borderColor: 'rgb(115, 103, 240)', borderColor: `${theme.colors.primary}`,
}, },
}; };
}, },
menu: (styles: any) => { menu: (styles: any) => {
return { return {
...styles, ...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' } }), dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@ -61,11 +62,11 @@ export const colourStyles = {
cursor: isDisabled ? 'not-allowed' : 'default', cursor: isDisabled ? 'not-allowed' : 'default',
':active': { ':active': {
...styles[':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': { ':hover': {
...styles[':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 }>` const InputLabel = styled.span<{ width: string }>`
width: ${props => props.width}; width: ${props => props.width};
padding-left: 0.7rem; padding-left: 0.7rem;
color: rgba(115, 103, 240); color: ${props => props.theme.colors.primary};
left: 0; left: 0;
top: 0; top: 0;
transition: all 0.2s ease; 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` const FormError = styled.span`
font-size: 12px; font-size: 12px;
color: rgba(${props => props.theme.colors.warning}); color: ${props => props.theme.colors.warning};
`; `;
const ProfileContainer = styled.div` const ProfileContainer = styled.div`
@ -152,12 +152,12 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
width: 100%; width: 100%;
position: relative; position: relative;
color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}; color: ${props => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
&:hover { &:hover {
color: rgba(115, 103, 240); color: ${props => props.theme.colors.primary};
} }
&:hover svg { &: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); transform: scaleX(1);
top: ${props => props.top}px; top: ${props => props.top}px;
background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240)); background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
box-shadow: 0 0 8px 0 rgba(115, 103, 240); box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
display: block; display: block;
position: absolute; position: absolute;
transition: all 0.2s ease; 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; display: flex;
align-items: center; align-items: center;
justify-content: 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: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
background-position: center; background-position: center;
background-size: contain; 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 { mixin } from 'shared/utils/styles';
import Button from 'shared/components/Button'; import Button from 'shared/components/Button';
import TaskAssignee from 'shared/components/TaskAssignee'; import TaskAssignee from 'shared/components/TaskAssignee';
import { User, Trash, Paperclip } from 'shared/icons';
import Member from 'shared/components/Member';
export const Container = styled.div` export const Container = styled.div`
display: flex; display: flex;
@ -33,35 +31,35 @@ export const MarkCompleteButton = styled.button<{ invert: boolean }>`
${props => ${props =>
props.invert props.invert
? css` ? css`
background: rgba(${props.theme.colors.success}); background: ${props.theme.colors.success};
& svg { & svg {
fill: rgba(${props.theme.colors.text.secondary}); fill: ${props.theme.colors.text.secondary};
} }
& span { & span {
color: rgba(${props.theme.colors.text.secondary}); color: ${props.theme.colors.text.secondary};
} }
&:hover { &:hover {
background: rgba(${props.theme.colors.success}, 0.8); background: ${mixin.rgba(props.theme.colors.success, 0.8)};
} }
` `
: css` : css`
background: none; background: none;
border: 1px solid rgba(${props.theme.colors.text.secondary}); border: 1px solid ${props.theme.colors.text.secondary};
& svg { & svg {
fill: rgba(${props.theme.colors.text.secondary}); fill: ${props.theme.colors.text.secondary};
} }
& span { & span {
color: rgba(${props.theme.colors.text.secondary}); color: ${props.theme.colors.text.secondary};
} }
&:hover { &:hover {
background: rgba(${props.theme.colors.success}, 0.08); background: ${mixin.rgba(props.theme.colors.success, 0.08)};
border: 1px solid rgba(${props.theme.colors.success}); border: 1px solid ${props.theme.colors.success};
} }
&:hover svg { &:hover svg {
fill: rgba(${props.theme.colors.success}); fill: ${props.theme.colors.success};
} }
&:hover span { &: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; font-size: 12px;
min-height: 24px; min-height: 24px;
margin-left: 8px; 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; padding-top: 4px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
@ -93,7 +91,7 @@ export const SidebarTitle = styled.div`
export const SidebarButton = styled.div` export const SidebarButton = styled.div`
font-size: 14px; font-size: 14px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
min-height: 32px; min-height: 32px;
width: 100%; width: 100%;
@ -168,7 +166,7 @@ export const TaskDetailsTitle = styled(TextareaAutosize)`
} }
&:focus { &: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; font-size: 12px;
min-height: 24px; min-height: 24px;
margin-left: 8px; 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; padding-top: 8px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
@ -187,7 +185,7 @@ export const AssignedUsersSection = styled.div`
padding-right: 32px; padding-right: 32px;
padding-top: 24px; padding-top: 24px;
padding-bottom: 24px; padding-bottom: 24px;
border-bottom: 1px solid #414561; border-bottom: 1px solid ${props => props.theme.colors.alternate};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
`; `;
@ -205,10 +203,10 @@ export const AssignUserIcon = styled.div`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&:hover { &: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 { &: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; align-items: center;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
border: 1px solid ${mixin.darken('#414561', 0.15)}; border: 1px solid ${props => mixin.darken(props.theme.colors.alternate, 0.15)};
} }
&:hover ${AssignUserIcon} { &:hover ${AssignUserIcon} {
border: 1px solid #414561; border: 1px solid ${props => props.theme.colors.alternate};
} }
`; `;
export const AssignUserLabel = styled.span` export const AssignUserLabel = styled.span`
flex: 1 1 auto; flex: 1 1 auto;
line-height: 15px; 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` export const ExtraActionsSection = styled.div`
@ -245,7 +243,7 @@ export const ExtraActionsSection = styled.div`
`; `;
export const ActionButtonsTitle = styled.h3` export const ActionButtonsTitle = styled.h3`
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@ -255,7 +253,7 @@ export const ActionButton = styled(Button)`
margin-top: 8px; margin-top: 8px;
margin-left: -10px; margin-left: -10px;
padding: 8px 16px; 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; text-align: left;
transition: transform 0.2s ease; transition: transform 0.2s ease;
& span { & span {
@ -264,7 +262,7 @@ export const ActionButton = styled(Button)`
&:hover { &:hover {
box-shadow: none; box-shadow: none;
transform: translateX(4px); 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; cursor: pointer;
svg { svg {
fill: rgba(${props => props.theme.colors.text.primary}, 0.75); fill: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
} }
&:hover svg { &: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` export const MetaDetailTitle = styled.h3`
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@ -362,7 +360,7 @@ export const MetaDetailContent = styled.div`
`; `;
export const TaskDetailsAddLabel = styled.div` export const TaskDetailsAddLabel = styled.div`
border-radius: 3px; border-radius: 3px;
background: ${mixin.darken('#262c49', 0.15)}; background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
@ -377,7 +375,7 @@ export const TaskDetailsAddLabelIcon = styled.div`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 3px; border-radius: 3px;
background: ${mixin.darken('#262c49', 0.15)}; background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
@ -452,11 +450,11 @@ export const TabBarSection = styled.div`
`; `;
export const TabBarItem = 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; padding: 12px 7px 14px 7px;
margin-bottom: -1px; margin-bottom: -1px;
margin-right: 36px; margin-right: 36px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
export const CommentContainer = styled.div` export const CommentContainer = styled.div`
@ -491,7 +489,7 @@ export const CommentTextArea = styled(TextareaAutosize)`
line-height: 28px; line-height: 28px;
padding: 4px 6px; padding: 4px 6px;
border-radius: 6px; border-radius: 6px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
background: #1f243e; background: #1f243e;
border: none; border: none;
transition: max-height 200ms, height 200ms, min-height 200ms; transition: max-height 200ms, height 200ms, min-height 200ms;
@ -556,13 +554,13 @@ export const ActivityItemHeaderTitle = styled.div`
`; `;
export const ActivityItemHeaderTitleName = styled.span` export const ActivityItemHeaderTitleName = styled.span`
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
font-weight: 500; font-weight: 500;
`; `;
export const ActivityItemTimestamp = styled.span<{ margin: number }>` export const ActivityItemTimestamp = styled.span<{ margin: number }>`
font-size: 12px; 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; margin-left: ${props => props.margin}px;
`; `;
@ -575,15 +573,15 @@ export const ActivityItemComment = styled.div`
border-radius: 3px; border-radius: 3px;
${mixin.boxShadowCard} ${mixin.boxShadowCard}
position: relative; position: relative;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
padding: 8px 12px; padding: 8px 12px;
margin: 4px 0; 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` export const ActivityItemLog = styled.span`
margin-left: 2px; margin-left: 2px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
`; `;
export const ViewRawButton = styled.button` export const ViewRawButton = styled.button`
@ -594,9 +592,9 @@ export const ViewRawButton = styled.button`
right: 4px; right: 4px;
bottom: -24px; bottom: -24px;
cursor: pointer; cursor: pointer;
color: rgba(${props => props.theme.colors.text.primary}, 0.25); color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.25)};
&:hover { &: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; font-size: 20px;
padding: 3px 10px 3px 8px; padding: 3px 10px 3px 8px;
&:focus { &: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}; z-index: ${props => props.zIndex};
position: relative; 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` export const NavbarWrapper = styled.div`
@ -28,9 +29,9 @@ export const NavbarHeader = styled.header`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; 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); 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` export const Breadcrumbs = styled.div`
color: rgb(94, 108, 132); color: rgb(94, 108, 132);
@ -124,7 +125,7 @@ export const ProjectTabs = styled.div`
export const ProjectTab = styled(NavLink)` export const ProjectTab = styled(NavLink)`
font-size: 80%; font-size: 80%;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -141,22 +142,22 @@ export const ProjectTab = styled(NavLink)`
} }
&:hover { &:hover {
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.text.secondary}); box-shadow: inset 0 -2px ${props => props.theme.colors.text.secondary};
color: rgba(${props => props.theme.colors.text.secondary}); color: ${props => props.theme.colors.text.secondary};
} }
&.active { &.active {
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary}); box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
color: rgba(${props => props.theme.colors.secondary}); color: ${props => props.theme.colors.secondary};
} }
&.active:hover { &.active:hover {
box-shadow: inset 0 -2px rgba(${props => props.theme.colors.secondary}); box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
color: rgba(${props => props.theme.colors.secondary}); color: ${props => props.theme.colors.secondary};
} }
`; `;
export const ProjectName = styled.h1` export const ProjectName = styled.h1`
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
padding: 3px 10px 3px 8px; padding: 3px 10px 3px 8px;
@ -185,7 +186,7 @@ export const ProjectNameTextarea = styled(TextareaAutosize)`
font-size: 20px; font-size: 20px;
padding: 3px 10px 3px 8px; padding: 3px 10px 3px 8px;
&:focus { &: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; color: #c2c6dc;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgb(115, 103, 240); background: ${props => props.theme.colors.primary};
} }
`; `;
@ -227,7 +228,7 @@ export const ProjectSettingsButton = styled.button`
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
&:hover { &: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` export const NavSeparator = styled.div`
width: 1px; width: 1px;
background: rgba(${props => props.theme.colors.border}); background: ${props => props.theme.colors.border};
height: 34px; height: 34px;
margin: 0 20px; margin: 0 20px;
`; `;
@ -260,11 +261,11 @@ export const LogoContainer = styled(Link)`
export const TaskcafeTitle = styled.h2` export const TaskcafeTitle = styled.h2`
margin-left: 5px; margin-left: 5px;
color: rgba(${props => props.theme.colors.text.primary}); color: ${props => props.theme.colors.text.primary};
font-size: 20px; font-size: 20px;
`; `;
export const TaskcafeLogo = styled(Taskcafe)` export const TaskcafeLogo = styled(Taskcafe)`
fill: rgba(${props => props.theme.colors.text.primary}); fill: ${props => props.theme.colors.text.primary};
stroke: rgba(${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 NormalizeStyles from 'App/NormalizeStyles';
import BaseStyles from 'App/BaseStyles'; import BaseStyles from 'App/BaseStyles';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import DropdownMenu from 'shared/components/DropdownMenu';
import TopNavbar from '.'; import TopNavbar from '.';
import theme from '../../../App/ThemeStyles';
export default { export default {
component: TopNavbar, component: TopNavbar,
@ -15,7 +15,7 @@ export default {
backgrounds: [ backgrounds: [
{ name: 'white', value: '#ffffff' }, { name: 'white', value: '#ffffff' },
{ name: 'gray', value: '#f8f8f8' }, { 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` const Svg = styled.svg`
fill: rgba(${props => props.theme.colors.text.primary}); fill: ${props => props.theme.colors.text.primary};
stroke: rgba(${props => props.theme.colors.text.primary}); stroke: ${props => props.theme.colors.text.primary};
`; `;
const Icon: React.FC<Props> = ({ width, height, viewBox, className, onClick, children }) => { 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: { colors: {
[key: string]: any; [key: string]: any;
multiColors: string[];
primary: string; primary: string;
secondary: string; secondary: string;
success: string; success: string;