Skip to content

Commit

Permalink
settings — account
Browse files Browse the repository at this point in the history
  • Loading branch information
@bukinoshita
bukinoshita committed Feb 13, 2018
1 parent 8111b3c commit e578f07
Show file tree
Hide file tree
Showing 10 changed files with 361 additions and 34 deletions.
44 changes: 18 additions & 26 deletions renderer/components/hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,31 @@
// Packages
import Link from 'next/link'

// Components
import SettingsIcon from './icons/settings'
import LayersIcon from './icons/layers'

// Theme
import { colors, typography } from './../theme'

const Hero = ({ type }) => {
const Hero = ({ type, isSettings }) => {
return (
<header>
<h1>{type}</h1>

<Link href="/settings" prefetch>
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
</Link>
{isSettings ? (
<Link href="/home?tab=Today" prefetch>
<div>
<LayersIcon styles={{ cursor: 'pointer' }} />
</div>
</Link>
) : (
<Link href="/settings?tab=Identity" prefetch>
<div>
<SettingsIcon styles={{ cursor: 'pointer' }} />
</div>
</Link>
)}

<style jsx>{`
header {
Expand All @@ -39,16 +41,6 @@ const Hero = ({ type }) => {
color: ${colors.white};
font-size: ${typography.f32};
}
svg {
stroke: ${colors.romanSilver};
transition: 0.2s;
cursor: pointer;
}
svg:hover {
stroke: ${colors.white};
}
`}</style>
</header>
)
Expand Down
30 changes: 30 additions & 0 deletions renderer/components/icons/award.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
'use strict'

const Award = () => {
return (
<svg width="16px" height="24px" viewBox="0 0 16 24">
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
transform="translate(-39.000000, -185.000000)"
strokeLinecap="round"
strokeLinejoin="round"
>
<g
transform="translate(25.000000, 167.000000)"
stroke="#FFFFFF"
strokeWidth="2"
>
<g transform="translate(15.000000, 19.000000)">
<circle id="Oval" cx="7" cy="7" r="7" />
<polyline points="3.21 12.89 2 22 7 19 12 22 10.79 12.88" />
</g>
</g>
</g>
</svg>
)
}

export default Award
33 changes: 33 additions & 0 deletions renderer/components/icons/download.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
'use strict'

const Download = () => {
return (
<svg width="12px" height="13px" viewBox="0 0 12 13">
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
transform="translate(-284.000000, -386.000000)"
strokeLinecap="round"
strokeLinejoin="round"
>
<g
transform="translate(25.000000, 257.000000)"
stroke="#FFFFFF"
strokeWidth="1.11111111"
>
<g transform="translate(0.000000, 116.000000)">
<g transform="translate(260.000000, 14.000000)">
<path d="M0,8.25 L0,9.9 C0,10.5075132 0.497461389,11 1.11111111,11 L8.88888889,11 C9.50253861,11 10,10.5075132 10,9.9 L10,8.25" />
<polyline points="2.77777778 5.5 5 7.7 7.22222222 5.5" />
<path d="M5,0 L5,7.7" />
</g>
</g>
</g>
</g>
</svg>
)
}

export default Download
31 changes: 31 additions & 0 deletions renderer/components/icons/layers.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
'use strict'

const Layers = ({ styles }) => {
return (
<svg width="18" height="18" viewBox="0 0 20 20" style={styles}>
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
transform="translate(-275.000000, -59.000000)"
strokeLinecap="round"
strokeLinejoin="round"
>
<g
transform="translate(25.000000, 50.000000)"
stroke="#FFFFFF"
strokeWidth="1.8"
>
<g transform="translate(251.000000, 10.000000)">
<polygon points="9 0 0 4.5 9 9 18 4.5" />
<polyline points="0 13.5 9 18 18 13.5" />
<polyline points="0 9 9 13.5 18 9" />
</g>
</g>
</g>
</svg>
)
}

export default Layers
22 changes: 22 additions & 0 deletions renderer/components/icons/settings.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
'use strict'

const Settings = ({ styles }) => {
return (
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
style={styles}
>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
)
}

export default Settings
34 changes: 34 additions & 0 deletions renderer/components/icons/trash.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
'use strict'

const Trash = () => {
return (
<svg width="12px" height="13px" viewBox="0 0 12 13">
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
transform="translate(-284.000000, -445.000000)"
strokeLinecap="round"
strokeLinejoin="round"
>
<g
transform="translate(25.000000, 257.000000)"
stroke="#FFFFFF"
strokeWidth="1.11111111"
>
<g transform="translate(0.000000, 175.000000)">
<g transform="translate(260.000000, 14.000000)">
<polyline points="0 2.2 1.11111111 2.2 10 2.2" />
<path d="M8.88888889,2.2 L8.88888889,9.9 C8.88888889,10.5075132 8.3914275,11 7.77777778,11 L2.22222222,11 C1.6085725,11 1.11111111,10.5075132 1.11111111,9.9 L1.11111111,2.2 M2.77777778,2.2 L2.77777778,1.1 C2.77777778,0.492486775 3.27523917,0 3.88888889,0 L6.11111111,0 C6.72476083,0 7.22222222,0.492486775 7.22222222,1.1 L7.22222222,2.2" />
<path d="M3.88888889,4.95 L3.88888889,8.25" />
<path d="M6.11111111,4.95 L6.11111111,8.25" />
</g>
</g>
</g>
</g>
</svg>
)
}

export default Trash
33 changes: 33 additions & 0 deletions renderer/components/icons/upload.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
'use strict'

const Upload = () => {
return (
<svg width="12px" height="13px" viewBox="0 0 12 13">
<g
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
transform="translate(-284.000000, -328.000000)"
strokeLinecap="round"
strokeLinejoin="round"
>
<g
transform="translate(25.000000, 257.000000)"
stroke="#FFFFFF"
strokeWidth="1.11111111"
>
<g transform="translate(0.000000, 58.000000)">
<g transform="translate(260.000000, 14.000000)">
<path d="M0,8.25 L0,9.9 C0,10.5075132 0.497461389,11 1.11111111,11 L8.88888889,11 C9.50253861,11 10,10.5075132 10,9.9 L10,8.25" />
<polyline points="7.22222222 2.2 5 0 2.77777778 2.2" />
<path d="M5,0 L5,7.7" />
</g>
</g>
</g>
</g>
</svg>
)
}

export default Upload
140 changes: 140 additions & 0 deletions renderer/components/settings/account.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
'use strict'

// Packages
import { shell } from 'electron'

// Components
import Item from './item'
import ArrowRightIcon from './../icons/arrow-right'
import AwardIcon from './../icons/award'
import UploadIcon from './../icons/upload'
import DownloadIcon from './../icons/download'
import TrashIcon from './../icons/trash'

// Theme
import { colors, typography } from './../../theme'

const Account = ({
importUser,
exportUser,
clearHistory,
selectChange,
defaultOption
}) => {
return (
<ul>
<li onClick={() => shell.openExternal('https://gettaskr.now.sh/pro')}>
<AwardIcon />
<div>
<h3>
Taskr Pro <span>14 days free trial</span>
</h3>
<p>Cloud-sync, powerful plugins and more</p>
</div>

<ArrowRightIcon />
</li>

<Item
name="Create tasks on"
description="Default tab to create new tasks"
>
<div className="select">
<select onChange={selectChange} value={defaultOption}>
<option value="Today">Today</option>
<option value="Backlog">Backlog</option>
</select>
</div>
</Item>

<Item
name="Import tasks"
description="Import tasks from a json file"
onClick={importUser}
>
<UploadIcon />
</Item>

<Item
name="Export tasks"
description="Export tasks to a json file"
onClick={exportUser}
>
<DownloadIcon />
</Item>

<Item
name="Clear tasks"
description="Delete all your tasks"
onClick={clearHistory}
>
<TrashIcon />
</Item>

<style jsx>{`
ul {
height: calc(580px - 215px);
padding-bottom: 10px;
overflow-y: auto;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px;
border: 1px solid ${colors.white};
margin-bottom: 30px;
cursor: pointer;
transition: 0.2s;
}
li:hover {
transform: translateY(2px);
}
h3 {
color: ${colors.white};
font-size: ${typography.f14};
font-weight: ${typography.bold};
text-transform: uppercase;
}
p {
color: ${colors.white};
font-size: ${typography.f10};
font-weight: ${typography.regular};
margin-top: 5px;
}
span {
color: ${colors.romanSilver};
font-size: ${typography.f8};
font-weight: ${typography.regular};
text-transform: initial;
}
.select {
line-height: 1;
cursor: pointer;
}
select {
background-color: transparent;
color: ${colors.romanSilver};
font-weight: ${typography.bold};
transition: 0.2s;
outline: none;
cursor: pointer;
border: none;
}
select:hover {
color: ${colors.white};
}
`}</style>
</ul>
)
}

export default Account

0 comments on commit e578f07

Please sign in to comment.