aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--apps/Notes/Notes.module.scss45
-rw-r--r--apps/Notes/components/Export.js33
-rw-r--r--apps/Notes/components/NoteEdit.js2
-rw-r--r--components/Layout.js20
-rw-r--r--styles/Main.module.scss42
-rw-r--r--styles/_themes.scss57
-rw-r--r--styles/_window.scss45
-rw-r--r--styles/global.scss9
8 files changed, 154 insertions, 99 deletions
diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss
index fba396a..e2dbe06 100644
--- a/apps/Notes/Notes.module.scss
+++ b/apps/Notes/Notes.module.scss
@@ -51,7 +51,6 @@
width: 99%;
display: flex;
margin-right: 1em;
- // display:inline-block;
& > span:nth-child(1) {
text-overflow: ellipsis;
@@ -73,31 +72,20 @@
}
&:hover {
- background: #eee;
+ background: var(--color-window-menu-alt);
border-radius: .5em;
// cursor: pointer;
& > td:first-of-type > span:nth-child(n+2){
- color: #666;
+ color: var(--color-window-buttons);
visibility: visible;
opacity: 1;
}
}
-
- & > td:first-of-type > span:nth-child(2):hover {
- color: #333;
- background-color: #deffde;
- }
-
- & > td:first-of-type > span:nth-child(3):hover {
- background-color: #ffffde;
- color: #333;
- }
-
- & > td:first-of-type > span:nth-child(4):hover {
- background-color: #ffdede;
- color: #333;
+ & > td:first-of-type > span:nth-child(n+2):hover {
+ color: var(--color-text-alt);
+ background-color: var(--color-glass);
}
}
@@ -107,7 +95,6 @@
to {opacity: 1;}
}
- background: white;
padding: 1rem;
position: absolute;
top: 0;
@@ -143,7 +130,6 @@
right: 0;
bottom: 0;
left: 0;
- background: white;
padding: 1em 1em 2em;
animation: fade-in .3s;
@@ -164,13 +150,15 @@
}
input[type=text] {
+ background-color: var(--color-window-content);
+ color: var(--color-text-alt);
margin-bottom: .5rem;
height: 3rem;
border: none;
padding: 0.5rem;
font-size: 1rem;
// font-weight: 600;
- border: 1px dashed #666;
+ border: 1px dashed var(--color-window-buttons);
&:placeholder {
font: inherit;
@@ -178,13 +166,15 @@
}
textarea {
+ background-color: var(--color-window-content);
+ color: var(--color-text-alt);
font-size: 1rem;
flex-grow: 1;
resize: none;
height: 100%;
width: 100%;
border: none;
- border: 1px dashed #666;
+ border: 1px dashed var(--color-window-buttons);
padding: 0.5rem;
&:placeholder {
@@ -199,7 +189,6 @@
to {opacity: 1;}
}
- background: white;
padding: 1rem;
position: absolute;
top: 0;
@@ -230,7 +219,7 @@
}
.fa-check ~ span {
- color: green;
+ color: var(--color-success);
}
}
@@ -244,9 +233,13 @@
&__select {
display: inline-block;
- border-bottom: 1px dashed #666;
- padding-bottom: .25em;
- margin-bottom: .5em;
+ border-bottom: 1px dashed var(--color-decor);
+ padding-bottom: .5em;
+ margin-bottom: .25em;
+ }
+
+ input[type=checkbox] {
+ margin: .5em .5em 0 0;
}
}
diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index 7232632..e7966e4 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -6,6 +6,7 @@ import {handleSelect, handleSelectAll, handleExport} from '../helpers/export'
const Export = ({setAction}) => {
const {notes} = useNotes()
const [ids, setIds] = useState(notes.map(n => n.noteId))
+ const sortFn = (a, b) => new Date(b.updated_at) - new Date(a.updated_at)
if (!notes) return null
@@ -23,7 +24,7 @@ const Export = ({setAction}) => {
onClick={e => handleExport(e, ids, notes)}
/>
<p>Notes to export:</p>
- <div className={`${styles.export__select}`}>
+ <div className={styles.export__select}>
<input
type="checkbox"
name='selectAll'
@@ -32,20 +33,22 @@ const Export = ({setAction}) => {
/>
<label htmlFor='selectAll'>Select all</label>
</div>
- {notes.map(note => (
- <div key={note.noteId}>
- <input
- type="checkbox"
- name={note.noteId}
- value={note.noteId}
- checked={ids.includes(note.noteId)}
- onChange={() => handleSelect(note.noteId, ids, setIds)}
- />
- <label htlmfor={note.noteId}>
- {note.title}
- </label><br/>
- </div>
- ))}
+ <ul>
+ {notes.sort(sortFn).map(note => (
+ <li key={note.noteId}>
+ <input
+ type="checkbox"
+ name={note.noteId}
+ value={note.noteId}
+ checked={ids.includes(note.noteId)}
+ onChange={() => handleSelect(note.noteId, ids, setIds)}
+ />
+ <label htlmfor={note.noteId}>
+ {note.title}
+ </label><br/>
+ </li>
+ ))}
+ </ul>
</div>
</section>
)
diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js
index 4e91654..ad936a4 100644
--- a/apps/Notes/components/NoteEdit.js
+++ b/apps/Notes/components/NoteEdit.js
@@ -23,7 +23,7 @@ const NoteEdit = ({setAction, fetchedNote}) => {
<input
name='title'
type='text'
- maxlength={1000}
+ maxLength={1000}
placeholder='Title'
defaultValue={fetchedNote ? fetchedNote.title : ''}
/>
diff --git a/components/Layout.js b/components/Layout.js
index 8b6cf87..0b8348c 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -1,3 +1,4 @@
+import styles from 'styles/Main.module.scss'
import React, {useState} from 'react'
import Head from 'next/head'
import Context from '../context';
@@ -6,18 +7,21 @@ import Popup from './Popup'
import PropTypes from 'prop-types'
const Layout = ({ children, apps, setApps}) => {
+ const [options, setOptions] = useState({theme: 'dark'})
const [popup, setPopup] = useState({})
return (
<Context.Provider value={{ setPopup }}>
- <Head>
- <title>Notes App</title>
- </Head>
- <main>
- <div className="container">{children}</div>
- </main>
- <Header apps={apps} setApps={setApps} />
- <Popup popup={popup} />
+ <section className={styles.layout+' '+options.theme}>
+ <Head>
+ <title>My Apps</title>
+ </Head>
+ <main>
+ <div className="container">{children}</div>
+ </main>
+ <Header apps={apps} setApps={setApps} />
+ <Popup popup={popup} />
+ </section>
</Context.Provider>
)
}
diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 082bc80..7c3f9bc 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -1,3 +1,10 @@
+.layout {
+ color: var(--color-text);
+ height: 100vh;
+ background: var(--color-bg);
+ background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%);
+}
+
.icon {
text-decoration: none;
display: inline-block;
@@ -12,14 +19,12 @@
margin-top: .25em;
padding: .25em;
text-align: center;
- color: #333;
transition: .2s background;
border-radius: .5em;
}
&:focus p {
- background-color: rgba(255,255,255,.3);
- // background-color: #0cc;
+ background-color: var(--color-glass);
}
}
@@ -38,20 +43,20 @@
input[type=password] {
padding: .5em;
margin: .5em 0;
- border: 1px solid #ccc;
- border-radius: .25px;
+ border: 1px dashed var(--color-decor);
+ border-radius: .5px;
}
.error {
text-align: center;
- color: brown;
+ color: var(--color-error);
margin: 1rem 0 0;
}
}
.header {
height: 2em;
- background-color: rgba(255, 255, 255, 0.4);
- border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+ background-color: var(--color-glass);
+ border-bottom: 1px solid var(--color-window-border-bottom);
nav {
display: flex;
@@ -70,16 +75,17 @@
& > span,
& > a {
display: inline-block;
- color: #333;
+ color: var(--color-text);
text-decoration: none;
align-items: center;
padding: .25em .5em;
margin: .25em;
border-radius: .5em;
- transition: .3s background;
+ transition: .3s background, .3s color;
&:hover {
- background-color: rgba(0,0,0,.1);
+ background-color: var(--color-selected);
+ color: var(--color-text-alt);
}
}
}
@@ -103,10 +109,11 @@
padding: .25em .5em;
margin: .25em;
border-radius: .5em;
- transition: .3s background;
+ transition: .3s background, .3s color;
&:hover {
- background-color: rgba(0,0,0,.1);
+ color: var(--color-text-alt);
+ background-color: var(--color-selected);
}
}
@@ -117,8 +124,8 @@
top: 2.1em;
width: 8em;
padding: .5em;
- background-color: rgba(255, 255, 255, 0.5);
- border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ background-color: var(--color-window-content);
+ border-bottom: 1px solid var(--color-window-border-bottom);
border-radius: .5em;
& > li > span {
@@ -132,7 +139,6 @@
& > input {
padding: .75em;
- border: 1px dashed #333;
border-radius: .5em;
}
}
@@ -143,10 +149,10 @@
}
.email {
- color: blue;
+ color: var(--color-link);
// cursor: pointer;
}
.error {
- color: brown;
+ color: var(--color-error);
}
}
diff --git a/styles/_themes.scss b/styles/_themes.scss
new file mode 100644
index 0000000..fbf63cc
--- /dev/null
+++ b/styles/_themes.scss
@@ -0,0 +1,57 @@
+.light {
+ --color-bg: #50a3a2;
+ --color-bg-alt: #53e3a6;
+ --color-text: #333;
+ --color-text-alt: #111;
+ --color-decor: #ccc;
+ --color-glass: rgb(151, 215, 200, .9);
+ --color-glass-alt: rgba(255, 255, 255, 0.5);
+ --color-error: #a00;
+ --color-success: #0a0;
+ --color-link: #006dd0;
+ --color-selected: rgba(0,0,0,.1);
+ --color-window-border-top: rgba(255,255,255,.7);
+ --color-window-border-bottom: #ccc;
+ --color-window-content: #fff;
+ --color-window-buttons: #666;
+ --color-window-buttons-alt: #222;
+ --color-window-menu: #eee;
+ --color-window-menu-alt: #ddd;
+ --color-button: #9cdbb5;
+ --color-button-alt: #a4eac0;
+ --color-button-border: #8ecca6;
+ --color-popup-bg: #fff;
+ --color-popup-error-bg: #ffe1e1;
+ --color-popup-error-button: #ffbebe;
+ --color-popup-error-button-alt: #ffa1a1;
+ --color-popup-error-border: #ffb6b6;
+}
+
+.dark {
+ --color-bg: #000;
+ --color-bg-alt: #222;
+ --color-text: #eee;
+ --color-text-alt: #fff;
+ --color-decor: #ccc;
+ --color-glass: rgb(20, 20, 20, .9);
+ --color-glass-alt: rgba(255, 255, 255, 0.3);
+ --color-error: #a00;
+ --color-success: #0a0;
+ --color-link: #006dd0;
+ --color-selected: rgba(0,0,0, .5);
+ --color-window-border-top: rgba(255,255,255,.3);
+ --color-window-border-bottom: #444;
+ --color-window-content: #222;
+ --color-window-buttons: #ccc;
+ --color-window-buttons-alt: #fff;
+ --color-window-menu: #282828;
+ --color-window-menu-alt: #111;
+ --color-button: #555;
+ --color-button-alt: #444;
+ --color-button-border: #666;
+ --color-popup-bg: #666;
+ --color-popup-error-bg: #6f0b0b;
+ --color-popup-error-button: #934e4e;
+ --color-popup-error-button-alt: #a21010;
+ --color-popup-error-border: #ffd6d6;
+}
diff --git a/styles/_window.scss b/styles/_window.scss
index a365c2e..5ce6e71 100644
--- a/styles/_window.scss
+++ b/styles/_window.scss
@@ -5,6 +5,7 @@
transition-property: opacity, visibility, transform, width, height, top, left;
transition-duration: .3s;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+ color: var(--color-text);
&.moving {
transition: none
@@ -12,7 +13,7 @@
&--popup {
padding: 1em;
- background: white;
+ background: var(--color-popup-bg);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@@ -43,7 +44,7 @@
&__title {
position: absolute;
- background-color: rgb(151, 215, 200, .9);
+ background-color: var(--color-glass);
top: 0;
left: 0;
right: 0;
@@ -51,8 +52,8 @@
text-align: center;
padding: .5em;
width: 100%;
- border-bottom: 1px solid #bbb;
- border-top: 1px solid rgba(255,255,255,.7);
+ border-bottom: 1px solid var(--color-window-border-bottom);
+ border-top: 1px solid var(--color-window-border-top);
border-top-left-radius: .5em;
border-top-right-radius: .5em;
}
@@ -77,12 +78,12 @@
padding: .5em;
transition: .3s background, .3s color;
border-radius: .5em;
- color: #666;
+ color: var(--color-window-buttons);
font-size: 0.8em;
&:hover {
- background-color: rgba(0,0,0,.1);
- color: #222;
+ background-color: var(--color-selected);
+ color: var(--color-window-buttons-alt);
}
}
}
@@ -90,7 +91,7 @@
&__content {
position: absolute;
overflow: hidden;
- background-color: #fff;
+ background-color: var(--color-window-content);
top: 2em;
right: 0;
bottom: 0;
@@ -108,7 +109,7 @@
display: block;
margin: -1em -1em 1em;
height: 2em;
- background: #eee;
+ background: var(--color-window-menu);
& > div {
// cursor: pointer;
@@ -117,7 +118,7 @@
transition: .3s background;
&:hover {
- background-color: #ddd;
+ background-color: var(--color-window-menu-alt);
}
}
}
@@ -134,38 +135,34 @@
}
&__button {
- color: #333;
+ color: var(--color-text);
margin: 1em 1em 0;
font-size: 1em;
padding: .5em 1em;
- background-color: rgb(151, 215, 200, .3);
+ background-color: var(--color-button);
border-left: 0;
border-right: 0;
- border-top: 1px solid rgb(151, 215, 200, .1);
- border-bottom: 1px solid rgb(151, 215, 200, .5);
+ border-top: 1px solid var(--color-button-border);
+ border-bottom: 1px solid var(--color-button-border);
border-radius: .5em;
// cursor: pointer;
transition: .3s background-color;
&:hover {
- background-color: rgb(151, 215, 200, .5);
+ background-color: var(--color-button-alt);
}
}
&--error {
- background: #ffefef;
-
- & > .window__title {
- background: rgba(255, 131, 131, 0.9);
- }
+ background: var(--color-popup-error-bg);
.window__button {
- background: rgba(255, 131, 131, 0.3);
- border-top: 1px solid rgba(255, 131, 131, 0.1);
- border-bottom: 1px solid rgba(255, 131, 131, 0.5);
+ background-color: var(--color-popup-error-button);
+ border-top: 1px solid var(--color-popup-error-border);
+ border-bottom: 1px solid var(--color-popup-error-border);
&:hover {
- background: rgba(255, 131, 131, 0.5)
+ background-color: var(--color-popup-error-button-alt);
}
}
}
diff --git a/styles/global.scss b/styles/global.scss
index 222bc44..11d23d3 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,4 +1,5 @@
@import "reset";
+@import "themes";
@import "window";
main {
@@ -11,16 +12,9 @@ main {
body {
margin: 0;
- color: #222;
height: 100vh;
overflow: hidden;
- background: #50a3a2;
- background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
- background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
- background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
- background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@@ -37,3 +31,4 @@ textarea, input {
padding-left: 2rem;
padding-right: 2rem;
}
+
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 17:54:03 +0000