From 3a93bf19dcea2ed044d6fd3ed1d2dc25cbd6991b Mon Sep 17 00:00:00 2001 From: Roland Bernard <rolbernard@unibz.it> Date: Thu, 10 Jun 2021 21:49:21 +0200 Subject: [PATCH] Finished the dark theme --- .../forms/AssigneesForm/assignees-form.scss | 2 +- .../components/forms/AssigneesForm/index.tsx | 2 +- .../RequirementsForm/requirements-form.scss | 2 +- .../components/forms/TaskForm/task-form.scss | 12 ++++++++ .../components/forms/UserForm/user-form.scss | 6 +--- client/src/components/forms/form.scss | 5 ++-- .../CircularProgress/circular-progress.scss | 2 +- .../LinearProgress/linear-progress.scss | 2 +- .../src/components/helpers/Filter/filter.scss | 2 ++ .../layout/CommentList/comment-list.scss | 6 ++-- .../components/navigation/Sidebar/index.tsx | 16 ++++------ client/src/components/ui/Avatar/avatar.scss | 7 ++++- client/src/components/ui/Comment/comment.scss | 3 +- .../src/components/ui/LongText/markdown.scss | 22 +++++++------- client/src/components/ui/Popup/popup.scss | 4 +-- .../components/ui/TextInput/text-input.scss | 2 +- client/src/components/ui/TimeInput/index.tsx | 3 +- .../components/ui/TimeInput/time-input.scss | 29 +++++++++++++++++++ client/src/index.tsx | 16 ++++++++++ client/src/pages/Home/home.scss | 2 +- client/src/styles/settings.scss | 4 +++ 21 files changed, 107 insertions(+), 42 deletions(-) diff --git a/client/src/components/forms/AssigneesForm/assignees-form.scss b/client/src/components/forms/AssigneesForm/assignees-form.scss index e630123..66de42f 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 3a7ee9c..195bdb3 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 65141fe..e7dcfcb 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 e464d10..93c6ce1 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 f17b30a..aed014d 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 a6c3d14..d00f83c 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 0e91af6..7bcc31e 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 81fd29c..dbe1ad2 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 f14e23a..c111333 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 c71021d..9f464bc 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 b34b94f..68aaea5 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 99b3e6a..80e9b0d 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 a995007..74f3123 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 518888e..fca3520 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 5d79896..bf6e837 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 b7a2ef5..f9a2a87 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 be8facf..f9acbe7 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 565c149..83cb451 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 015fe8a..4295a85 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 5a49306..478a096 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 309ba86..20d5922 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; -- GitLab