diff --git a/client/src/components/forms/AssigneesForm/assignees-form.scss b/client/src/components/forms/AssigneesForm/assignees-form.scss
index e630123ba7e48c359945668df5b9e0f54885e68e..66de42f7c95e28e47e5da1524242aada28035847 100644
--- a/client/src/components/forms/AssigneesForm/assignees-form.scss
+++ b/client/src/components/forms/AssigneesForm/assignees-form.scss
@@ -6,7 +6,7 @@
width: 100%;
padding: 20px;
border-radius: 15px;
- background: s.$background-light;
+ background: s.$background-white;
position: relative;
margin: 10px 0;
diff --git a/client/src/components/forms/AssigneesForm/index.tsx b/client/src/components/forms/AssigneesForm/index.tsx
index 3a7ee9cd8900985f5b36bfa80ee3ceaa75c08b38..195bdb3190e4e19c2cceab433faf494a39ddf280 100644
--- a/client/src/components/forms/AssigneesForm/index.tsx
+++ b/client/src/components/forms/AssigneesForm/index.tsx
@@ -85,7 +85,7 @@ export default function AssigneesForm({ assignees, members, onNew, onDelete }: P
}
</select>
<TimeInput onChange={value => setSelectedTime(value)} />
- <Button type="submit" onClick={addAssignee} className="Expanded">
+ <Button type="submit" onClick={addAssignee} className="expanded">
Add the assignee
</Button>
</Popup>
diff --git a/client/src/components/forms/RequirementsForm/requirements-form.scss b/client/src/components/forms/RequirementsForm/requirements-form.scss
index 65141feadc59c29f9f7603f6a8777cb66c9c5510..e7dcfcba6f703c212d573dd1f04ba63b13390ceb 100644
--- a/client/src/components/forms/RequirementsForm/requirements-form.scss
+++ b/client/src/components/forms/RequirementsForm/requirements-form.scss
@@ -6,7 +6,7 @@
width: 100%;
padding: 20px;
border-radius: 15px;
- background: s.$background-light;
+ background: s.$background-white;
position: relative;
margin: 10px 0;
diff --git a/client/src/components/forms/TaskForm/task-form.scss b/client/src/components/forms/TaskForm/task-form.scss
index e464d10dc3521e41e6d603f61a1cbc1956a1e437..93c6ce11846ed946cf16ec4671524ef7cda014b4 100644
--- a/client/src/components/forms/TaskForm/task-form.scss
+++ b/client/src/components/forms/TaskForm/task-form.scss
@@ -1,10 +1,13 @@
+@use 'styles/settings' as s;
+
.task-form {
.emoji-mart {
width: 100% !important;
height: 340px;
border-radius: 15px;
overflow: hidden;
+ background: s.$background-white;
.emoji-mart-scroll {
height: 247.5px;
@@ -17,6 +20,15 @@
.emoji-mart-emoji span {
cursor: pointer;
}
+
+ .emoji-mart-category-label span {
+ background: rgba(s.$background-white-rgb, 0.95);
+ color: s.$text;
+ }
+
+ .emoji-mart-category .emoji-mart-emoji:hover::before {
+ background: s.$background-input;
+ }
}
.current-icon {
diff --git a/client/src/components/forms/UserForm/user-form.scss b/client/src/components/forms/UserForm/user-form.scss
index f17b30a0b1d8094513b24365126b6483baf4645d..aed014d01c77f50cd206d0a5dc572c7f5e570dc3 100644
--- a/client/src/components/forms/UserForm/user-form.scss
+++ b/client/src/components/forms/UserForm/user-form.scss
@@ -27,13 +27,9 @@
width: 100%;
height: 140px;
margin-bottom: 20px;
- background: rgba(s.$black, 0.025);
+ background: s.$background-input;
font-size: 18px;
- &:hover {
- background: rgba(s.$black, 0.04);
- }
-
@include mx.breakpoint(large) {
margin-top: 30px;
}
diff --git a/client/src/components/forms/form.scss b/client/src/components/forms/form.scss
index a6c3d14853c91e750f7d3ce506ec6154f82026e7..d00f83cd074960d7533e02d0076bd38842a94c82 100644
--- a/client/src/components/forms/form.scss
+++ b/client/src/components/forms/form.scss
@@ -50,7 +50,8 @@ form {
}
select,
- input {
+ input,
+ textarea {
width: 100%;
font-size: 16px;
border: none;
@@ -63,7 +64,7 @@ form {
color: s.$text;
font-weight: s.$weight-regular;
font-family: s.$body-font;
- background: rgba(s.$black, 0.025);
+ background: s.$background-input;
}
h2 {
diff --git a/client/src/components/graphs/CircularProgress/circular-progress.scss b/client/src/components/graphs/CircularProgress/circular-progress.scss
index 0e91af668921f68fd049c9c0047826998ebe5f47..7bcc31ee3c76aa9c9f156e58f960cd2922c47f12 100644
--- a/client/src/components/graphs/CircularProgress/circular-progress.scss
+++ b/client/src/components/graphs/CircularProgress/circular-progress.scss
@@ -44,7 +44,7 @@
circle {
fill: none;
- stroke: #F3F3F3;
+ stroke: s.$background;
stroke-width: 8;
}
}
diff --git a/client/src/components/graphs/LinearProgress/linear-progress.scss b/client/src/components/graphs/LinearProgress/linear-progress.scss
index 81fd29c4cb90494eac162092c076dacc162560bd..dbe1ad2a8705fecc260e480392eabc43518aa749 100644
--- a/client/src/components/graphs/LinearProgress/linear-progress.scss
+++ b/client/src/components/graphs/LinearProgress/linear-progress.scss
@@ -3,7 +3,7 @@
.linear-progress {
width: 120px;
- background: s.$background-light;
+ background: s.$background;
position: relative;
height: 10px;
border-radius: 5px;
diff --git a/client/src/components/helpers/Filter/filter.scss b/client/src/components/helpers/Filter/filter.scss
index f14e23afeecbde1168bcffe8e3acf2f9327e8817..c111333afeb2cbc710645c3b151e082de841bc45 100644
--- a/client/src/components/helpers/Filter/filter.scss
+++ b/client/src/components/helpers/Filter/filter.scss
@@ -23,6 +23,8 @@
outline: none;
border-radius: 15px;
box-shadow: 0 0 15px rgba(s.$black, 0.05);
+ background: s.$background-white;
+ color: s.$text;
}
label {
position: absolute;
diff --git a/client/src/components/layout/CommentList/comment-list.scss b/client/src/components/layout/CommentList/comment-list.scss
index c71021d445640f151e3dbb6fab2f3e9853640dcb..9f464bc1d3fbb1a9fef82b5f75d5389884332812 100644
--- a/client/src/components/layout/CommentList/comment-list.scss
+++ b/client/src/components/layout/CommentList/comment-list.scss
@@ -1,4 +1,5 @@
-@use 'styles/settings.scss'as s;
+
+@use 'styles/settings.scss' as s;
.comment-list {
.comment-container {
@@ -16,6 +17,7 @@
position: relative;
label {
+ z-index: 10;
position: absolute;
left: 30px;
top: 0;
@@ -40,4 +42,4 @@
transform: translateY(50%);
}
}
-}
\ No newline at end of file
+}
diff --git a/client/src/components/navigation/Sidebar/index.tsx b/client/src/components/navigation/Sidebar/index.tsx
index b34b94f0a4024851de2bcf8eeb60896441bea400..68aaea56796aab774d3eabb396d1b844ed4bd9cc 100644
--- a/client/src/components/navigation/Sidebar/index.tsx
+++ b/client/src/components/navigation/Sidebar/index.tsx
@@ -2,9 +2,10 @@
import { NavLink, useHistory } from 'react-router-dom';
import { useEffect, useState } from 'react';
+import { subtractTime } from 'timely';
+import { getTheme, toggleTheme } from 'index';
import { clearToken, isLoggedIn } from 'adapters/auth';
import { getCurrentUser, getUserActivity, User } from 'adapters/user';
-import { subtractTime } from 'timely';
import Navigation from 'components/navigation/Navigation';
import Avatar from 'components/ui/Avatar';
@@ -21,6 +22,7 @@ interface Props {
export default function Sidebar({ mobileShown, setMobileShown }: Props) {
const [user, setUser] = useState<User>();
const [activity, setActivity] = useState<ChartItem[]>();
+ const [theme, setTheme] = useState(getTheme());
useEffect(() => {
if (isLoggedIn()) {
@@ -39,14 +41,8 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
}
const changeTheme = () => {
- const root = document.getElementsByTagName('html')[0];
- if (root.classList.contains('dark-theme')) {
- root.classList.remove('dark-theme');
- localStorage.setItem('selected-theme', 'light');
- } else {
- root.classList.add('dark-theme');
- localStorage.setItem('selected-theme', 'dark');
- }
+ toggleTheme();
+ setTheme(getTheme());
}
return (
@@ -75,7 +71,7 @@ export default function Sidebar({ mobileShown, setMobileShown }: Props) {
<nav className="secondary-nav">
<button className="nav-link" onClick={changeTheme}>
<span className="icon material-icons-outlined">
- dark_mode
+ {theme + '_mode'}
</span>
Change theme
</button>
diff --git a/client/src/components/ui/Avatar/avatar.scss b/client/src/components/ui/Avatar/avatar.scss
index 99b3e6a8f9007b24175d8c765d84ca2a98f43b15..80e9b0de118a1db01b618667c3a1dbec6c0c31fa 100644
--- a/client/src/components/ui/Avatar/avatar.scss
+++ b/client/src/components/ui/Avatar/avatar.scss
@@ -5,7 +5,12 @@
border-radius: 50%;
overflow: hidden;
- img, .standard-image {
+ img {
+ width: 100%;
+ height: 100%;
+ }
+
+ .standard-image {
width: 100%;
height: 100%;
background: s.$secondary;
diff --git a/client/src/components/ui/Comment/comment.scss b/client/src/components/ui/Comment/comment.scss
index a9950073899748c04bd1a60546f112e5a5016ee6..74f3123669312847cc5ec84e96d02b18916fa222 100644
--- a/client/src/components/ui/Comment/comment.scss
+++ b/client/src/components/ui/Comment/comment.scss
@@ -67,7 +67,7 @@
textarea {
transition: none;
- background: s.$background-light;
+ background: s.$background-input;
border: none;
border-radius: 25px;
width: 100%;
@@ -79,6 +79,7 @@
resize: vertical;
outline: none;
min-height: 150px;
+ color: s.$text;
}
.buttons {
diff --git a/client/src/components/ui/LongText/markdown.scss b/client/src/components/ui/LongText/markdown.scss
index 518888ea41d0f515cd949007f883c5f1810d216c..fca352089b625c377875db4c3b528c64445cbf2d 100644
--- a/client/src/components/ui/LongText/markdown.scss
+++ b/client/src/components/ui/LongText/markdown.scss
@@ -1,4 +1,6 @@
+@use 'styles/settings.scss' as s;
+
.markdown {
font-size: 1rem;
line-height: 150%;
@@ -9,7 +11,7 @@
.md-header-1, .md-header-2 {
padding-bottom: 0.1rem;
- border-bottom: 1px solid #00000015;
+ border-bottom: 1px solid rgba(s.$black, 0.1);
}
.md-header-1 {
@@ -59,8 +61,8 @@
display: flex;
flex-flow: row nowrap;
overflow-x: auto;
- color: #abb2bf;
- background: #282c34;
+ color: #bbc2cf;
+ background: s.$background-dark;
}
.md-code .md-code-content {
@@ -72,7 +74,7 @@
display: flex;
flex-flow: column;
padding: 1rem 0.5rem;
- border-right: 1px solid #ffffff20;
+ border-right: 1px solid rgba(s.$white, 0.15);
user-select: none;
text-align: right;
}
@@ -83,7 +85,7 @@
}
.md-inline-code {
- background: #00000010;
+ background: rgba(s.$black, 0.05);
padding: 0.1rem 0.25rem;
border-radius: 4px;
font-family: 'IBM Plex Mono', monospace;
@@ -92,12 +94,12 @@
}
.md-quote {
- border-left: 0.25rem solid #00000018;
+ border-left: 0.25rem solid rgba(s.$black, 0.1);
padding-left: 1.25rem;
}
.md-hrule {
- border: 0.125rem solid #00000018;
+ border: 0.125rem solid rgba(s.$black, 0.1);
height: 0;
}
@@ -156,7 +158,7 @@ li > span > .md-paragraph {
.md-table, .md-table-row, .md-table-data, .md-table-header {
border-collapse: collapse;
- border: 1px solid #00000018;
+ border: 1px solid rgba(s.$black, 0.1);
}
.md-table-data, .md-table-header {
@@ -165,11 +167,11 @@ li > span > .md-paragraph {
.md-table-header {
font-weight: 500;
- background: #0000000a;
+ background: s.$background-input;
}
.md-table-row:nth-child(odd) {
- background: #00000005;
+ background: rgba(s.$background-input-rgb, 0.5);
}
.md-info-wrap {
diff --git a/client/src/components/ui/Popup/popup.scss b/client/src/components/ui/Popup/popup.scss
index 5d798967fc165d20b4e7f604b741161cd2ae61b5..bf6e8379d7d665376d42cb4e4b3e37e0be1ca610 100644
--- a/client/src/components/ui/Popup/popup.scss
+++ b/client/src/components/ui/Popup/popup.scss
@@ -17,7 +17,7 @@
animation: moveup 300ms ease;
max-height: 100vh;
overflow: auto;
- padding: 30px;
+ padding: 50px;
max-width: 960px;
background: s.$background-white;
border-radius: 25px;
@@ -26,8 +26,6 @@
@include mx.breakpoint(medium) {
margin: -20px 0;
- width: 50%;
- padding: 15px;
padding: 75px 100px;
}
}
diff --git a/client/src/components/ui/TextInput/text-input.scss b/client/src/components/ui/TextInput/text-input.scss
index b7a2ef59688173739d46f0ff60e773761b8704cf..f9a2a87cf7e741bb9fe536fd47d4ae211c35bfd6 100644
--- a/client/src/components/ui/TextInput/text-input.scss
+++ b/client/src/components/ui/TextInput/text-input.scss
@@ -52,7 +52,7 @@
color: s.$text;
font-weight: s.$weight-regular;
font-family: s.$body-font;
- background: rgba(s.$black, 0.025);
+ background: s.$background-input;
}
}
diff --git a/client/src/components/ui/TimeInput/index.tsx b/client/src/components/ui/TimeInput/index.tsx
index be8facf032e26cb6028e5cc486dcdeb8225c3590..f9acbe76bcdaa2743e21795919b66817d6065036 100644
--- a/client/src/components/ui/TimeInput/index.tsx
+++ b/client/src/components/ui/TimeInput/index.tsx
@@ -26,7 +26,8 @@ export default function TimeInput({ onChange: userOnChange }: Props) {
return (
<div className="time-field">
- <input type="number" min={0} onChange={onChange} />
+ <label htmlFor="time">Time in hours</label>
+ <input type="number" name="time" min={0} onChange={onChange} />
<span className="formatted">{formatted}</span>
</div>
);
diff --git a/client/src/components/ui/TimeInput/time-input.scss b/client/src/components/ui/TimeInput/time-input.scss
index 565c14952aca602bde074063a47cadf5e4ae37dc..83cb451067587bdf259e55d87d8a1686692ec38a 100644
--- a/client/src/components/ui/TimeInput/time-input.scss
+++ b/client/src/components/ui/TimeInput/time-input.scss
@@ -1,5 +1,8 @@
+@use 'styles/settings.scss' as s;
+
.time-field {
+ position: relative;
margin: 20px 0;
display: flex;
align-items: baseline;
@@ -12,5 +15,31 @@
white-space: nowrap;
text-align: center;
}
+
+ input::-webkit-outer-spin-button,
+ input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+ }
+
+ /* Firefox */
+ input[type=number] {
+ -moz-appearance: textfield;
+ }
+
+
+ label {
+ &:after {
+ content: ' *';
+ color: s.$primary;
+ }
+
+ font-size: 16px;
+ position: absolute;
+ left: 20px;
+ font-weight: s.$weight-bold;
+ z-index: 20;
+ transform: translateY(-50%);
+ }
}
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 015fe8aedd0eab253fa24c7a660d2b521f2ee3d3..4295a85f57c5827ccb73e7dc6f494617967c9a8c 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -26,6 +26,22 @@ export function reload() {
render();
+export function getTheme() {
+ const root = document.getElementsByTagName('html')[0];
+ return root.classList.contains('dark-theme') ? 'dark' : 'light';
+}
+
+export function toggleTheme() {
+ const root = document.getElementsByTagName('html')[0];
+ if (root.classList.contains('dark-theme')) {
+ root.classList.remove('dark-theme');
+ localStorage.setItem('selected-theme', 'light');
+ } else {
+ root.classList.add('dark-theme');
+ localStorage.setItem('selected-theme', 'dark');
+ }
+}
+
if (localStorage.getItem('selected-theme') === 'dark') {
const root = document.getElementsByTagName('html')[0];
root.classList.add('dark-theme');
diff --git a/client/src/pages/Home/home.scss b/client/src/pages/Home/home.scss
index 5a493065c69680ed653254ccf3eeebbade875376..478a096bf45ffe5cb45d372a7875dd113f807974 100644
--- a/client/src/pages/Home/home.scss
+++ b/client/src/pages/Home/home.scss
@@ -206,7 +206,7 @@
grid-gap: 24px;
justify-content: center;
align-items: center;
- background: rgba(s.$white, 0.5);
+ background: rgba(s.$background-white-rgb, 0.5);
border-radius: 25px;
padding: 24px;
diff --git a/client/src/styles/settings.scss b/client/src/styles/settings.scss
index 309ba8660c40b895de80bb36e029eecdb204586b..20d59225508503e1c0c606455996ecffa7d27e82 100644
--- a/client/src/styles/settings.scss
+++ b/client/src/styles/settings.scss
@@ -7,6 +7,7 @@ $light-colors: (
'background-dark': #11061A,
'background-light': #f9f9f9,
'background-white': #ffffff,
+ 'background-input': #f4f4f4,
'background': #EEF5F5,
'text': #3A5255,
);
@@ -19,6 +20,7 @@ $dark-colors: (
'background-dark': #000000,
'background-light': #090909,
'background-white': #151515,
+ 'background-input': #181818,
'background': #0a0a0a,
'text': #eAe2e5,
);
@@ -31,6 +33,7 @@ $background: var(--background);
$background-dark: var(--background-dark);
$background-light: var(--background-light);
$background-white: var(--background-white);
+$background-input: var(--background-input);
$text: var(--text);
$primary-rgb: var(--primary-rgb);
@@ -41,6 +44,7 @@ $background-rgb: var(--background-rgb);
$background-dark-rgb: var(--background-dark-rgb);
$background-light-rgb: var(--background-light-rgb);
$background-white-rgb: var(--background-white-rgb);
+$background-input-rgb: var(--background-input-rgb);
$text-rgb: var(--text-rgb);
$white: #fff;