add themes (#43)

main/index.js

@@ -12,12 +12,15 @@ const prepareNext = require('electron-next')
 const { resolve } = require('app-root-path')
 
 // Utils
+const { getConfig } = require('./utils/config')
 const autoUpdater = require('./updater')
 
 // Prepare the renderer once the app is ready
 app.on('ready', async () => {
   await prepareNext('./renderer')
 
+  app.config = await getConfig()
+
   const mainWindow = new BrowserWindow({
     width: 320,
     height: 580,

main/utils/config.js

@@ -0,0 +1,75 @@
+'use strict'
+
+const { homedir } = require('os')
+const { join } = require('path')
+
+const { readJSON, writeJSON } = require('fs-extra')
+const pathExists = require('path-exists')
+
+const paths = {
+  config: '.taskr.json',
+  theming: '.taskr-theme.json'
+}
+
+for (const file in paths) {
+  if (!{}.hasOwnProperty.call(paths, file)) {
+    continue
+  }
+
+  paths[file] = join(homedir(), paths[file])
+}
+
+const hasConfig = async () => {
+  const configExists = await pathExists(paths.config)
+
+  return configExists
+}
+
+const hasTheming = async () => {
+  const themingExists = await pathExists(paths.theming)
+
+  return themingExists
+}
+
+const createConfig = async () => {
+  const cfg = {
+    pro: false,
+    lastUpdate: new Date()
+  }
+
+  await writeJSON(paths.config, cfg, {
+    spaces: 2
+  })
+}
+
+const createTheming = async () => {
+  const theming = {
+    white: '#ffffff',
+    black: '#000000',
+    romanSilver: '#868e96',
+    darkMediumGray: '#aaaaaa',
+    brightTurquoise: '00e7c0',
+    fontSizeBase: '16px'
+  }
+
+  await writeJSON(paths.theming, theming, {
+    spaces: 2
+  })
+}
+
+exports.getConfig = async () => {
+  if (!await hasConfig() && !await hasTheming()) {
+    await createConfig()
+    await createTheming()
+
+    const user = await readJSON(paths.config)
+    const theme = await readJSON(paths.theming)
+
+    return { user, theme }
+  }
+
+  const user = await readJSON(paths.config)
+  const theme = await readJSON(paths.theming)
+
+  return { user, theme }
+}

package.json

@@ -17,17 +17,26 @@
   },
   "build": {
     "appId": "taskr",
-    "files": ["**/*", "!renderer", "renderer/out"],
+    "files": [
+      "**/*",
+      "!renderer",
+      "renderer/out"
+    ],
     "win": {
-      "target": ["squirrel"],
+      "target": [
+        "squirrel"
+      ],
       "icon": "main/static/icon.ico"
     },
     "mac": {
       "category": "public.app-category.developer-tools",
       "icon": "main/static/icon.icns"
     },
     "linux": {
-      "target": ["AppImage", "deb"]
+      "target": [
+        "AppImage",
+        "deb"
+      ]
     }
   },
   "dependencies": {
@@ -36,6 +45,7 @@
     "electron-is-dev": "^0.3.0",
     "electron-next": "^3.1.3",
     "fs-extra": "^5.0.0",
+    "path-exists": "^3.0.0",
     "prop-types": "^15.6.0",
     "react-hash-avatar": "^0.0.2",
     "react-render-html": "^0.6.0",
@@ -56,7 +66,11 @@
     "xo": "^0.18.2"
   },
   "xo": {
-    "extends": ["prettier", "prettier/react", "plugin:react/recommended"],
+    "extends": [
+      "prettier",
+      "prettier/react",
+      "plugin:react/recommended"
+    ],
     "rules": {
       "react/no-unescaped-entities": 0,
       "react/react-in-jsx-scope": 0,
@@ -67,8 +81,13 @@
       "no-return-assign": 0,
       "import/prefer-default-export": 0
     },
-    "ignores": ["node_modules"],
-    "globals": ["localStorage", "document"]
+    "ignores": [
+      "node_modules"
+    ],
+    "globals": [
+      "localStorage",
+      "document"
+    ]
   },
   "lint-staged": {
     "*.js": [

renderer/components/button.js

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types'
 
 // Theme
-import { colors } from './../theme'
+import { colors, typography } from './../theme'
 
 const Button = ({ children, type, onClick }) => {
   return (
@@ -18,8 +18,8 @@ const Button = ({ children, type, onClick }) => {
           background: ${colors.white};
           border: none;
           color: ${colors.black};
-          font-weight: 600;
-          font-size: 10px;
+          font-weight: ${typography.semibold};
+          font-size: ${typography.f10};
           cursor: pointer;
           text-transform: uppercase;
           letter-spacing: 2px;

renderer/components/empty-state.js

@@ -1,7 +1,7 @@
 'use strict'
 
 // Theme
-import { colors } from './../theme'
+import { colors, typography } from './../theme'
 
 const EmptyState = ({ title }) => {
   return (
@@ -20,7 +20,7 @@ const EmptyState = ({ title }) => {
         h3 {
           color: ${colors.white};
           text-align: center;
-          font-size: 12px;
+          font-size: ${typography.f12};
           width: 100%;
           opacity: 0.75;
           line-height: 20px;

renderer/components/hero.js

@@ -4,7 +4,7 @@
 import Link from 'next/link'
 
 // Theme
-import { colors } from './../theme'
+import { colors, typography } from './../theme'
 
 const Hero = ({ type }) => {
   return (
@@ -46,7 +46,7 @@ const Hero = ({ type }) => {
 
         h1 {
           color: ${colors.white};
-          font-size: 30px;
+          font-size: ${typography.f30};
         }
 
         svg {

renderer/components/input.js

@@ -7,7 +7,7 @@ import reactHashAvatar from 'react-hash-avatar'
 import renderHTML from 'react-render-html'
 
 // Theme
-import { colors } from './../theme'
+import { colors, typography } from './../theme'
 
 const Input = ({
   name,
@@ -125,7 +125,7 @@ const Input = ({
         input {
           width: 100%;
           border: none;
-          font-size: 13px;
+          font-size: ${typography.f12};
           color: ${colors.white};
           outline: none;
           background: none;
@@ -138,7 +138,7 @@ const Input = ({
         textarea {
           width: 100%;
           border: none;
-          font-size: 13px;
+          font-size: ${typography.f12};
           color: ${colors.white};
           outline: none;
           background: none;
@@ -155,15 +155,15 @@ const Input = ({
         .large {
           padding-left: 0;
           padding-right: 0;
-          font-size: 25px;
-          font-weight: 600;
+          font-size: ${typography.f24};
+          font-weight: ${typography.semibold};
         }
 
         .medium {
           padding-left: 0;
           padding-right: 0;
-          font-size: 20px;
-          font-weight: 400;
+          font-size: ${typography.f20};
+          font-weight: ${typography.regular};
         }
 
         input::-webkit-input-placeholder {
@@ -249,7 +249,7 @@ const Input = ({
         label {
           display: block;
           color: ${colors.darkMediumGray};
-          font-size: 13px;
+          font-size: ${typography.f12};
           margin-bottom: 10px;
         }
 

renderer/components/task-actions.js

@@ -4,7 +4,7 @@
 import Link from 'next/link'
 
 // Theme
-import { colors } from './../theme'
+import { colors, typography } from './../theme'
 
 const TaskActions = ({ task, onDelete, onMove }) => {
   const { id, type } = task
@@ -33,8 +33,8 @@ const TaskActions = ({ task, onDelete, onMove }) => {
         li {
           color: ${colors.white};
           display: inline-block;
-          font-size: 11px;
-          font-weight: 600;
+          font-size: ${typography.f12};
+          font-weight: ${typography.semibold};
           margin-right: 10px;
           color: ${colors.romanSilver};
           cursor: pointer;

renderer/components/task.js

@@ -9,7 +9,7 @@ import TaskProject from './task-project'
 import TaskActions from './task-actions'
 
 // Theme
-import { colors } from './../theme'
+import { colors, typography } from './../theme'
 
 const Task = ({ task, onMove, onDelete }) => {
   const { id, title, description, project } = task
@@ -52,8 +52,8 @@ const Task = ({ task, onMove, onDelete }) => {
         }
 
         h2 {
-          font-weight: 700;
-          font-size: 14px;
+          font-weight: ${typography.bold};
+          font-size: ${typography.f14};
           color: ${colors.white};
           line-height: 1.5em;
           word-wrap: break-word;
@@ -62,7 +62,7 @@ const Task = ({ task, onMove, onDelete }) => {
         p {
           color: ${colors.romanSilver};
           line-height: 1.75;
-          font-size: 12px;
+          font-size: ${typography.f12};
           margin: 2px 0;
           word-wrap: break-word;
         }

renderer/components/win-controls.js

@@ -1,5 +1,6 @@
 'use strict'
 
+// Packages
 const { remote } = require('electron')
 
 const WinControls = () => {