diff --git a/components/ThemeSelect.js b/components/ThemeSelect.js index 0c8dad8..b6e17a3 100644 --- a/components/ThemeSelect.js +++ b/components/ThemeSelect.js @@ -1,9 +1,8 @@ import React from 'react' -import { None, BW, Sharp } from './svg/WindowThemes' +import { None, BW, Sharp, Boxy } from './svg/WindowThemes' import { COLORS } from '../lib/constants' -const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW } -export const WINDOW_THEMES = Object.keys(WINDOW_THEMES_MAP) +const WINDOW_THEMES_MAP = { none: None, sharp: Sharp, bw: BW, boxy: Boxy } class ThemeSelect extends React.Component { select = theme => { @@ -13,7 +12,7 @@ class ThemeSelect extends React.Component { } renderThemes() { - return WINDOW_THEMES.map(theme => { + return Object.keys(WINDOW_THEMES_MAP).map(theme => { const Img = WINDOW_THEMES_MAP[theme] const checked = this.props.selected === theme return ( @@ -35,8 +34,11 @@ class ThemeSelect extends React.Component { outline: none; } - [aria-checked='true'] :global(svg) { + div :global(svg) { border-radius: 3px; + } + + [aria-checked='true'] :global(svg) { border: solid 2px ${COLORS.SECONDARY}; } @@ -74,6 +76,8 @@ class ThemeSelect extends React.Component { display: flex; flex-direction: row; width: 100%; + max-width: 200px; + overflow-x: scroll; } `} diff --git a/components/WindowControls.js b/components/WindowControls.js index 7164a54..6df1296 100644 --- a/components/WindowControls.js +++ b/components/WindowControls.js @@ -2,7 +2,7 @@ import React from 'react' import { useCopyTextHandler } from 'actionsack' import { COLORS } from '../lib/constants' -import { Controls, ControlsBW } from './svg/Controls' +import { Controls, ControlsBW, ControlsBoxy } from './svg/Controls' import CopySVG from './svg/Copy' import CheckMark from './svg/Checkmark' @@ -36,9 +36,10 @@ const CopyButton = React.memo(function CopyButton({ text }) { ) }) +const WINDOW_THEMES_MAP = { bw: , boxy: } export default ({ theme, copyable, code, light }) => (
- {theme === 'bw' ? : } + {WINDOW_THEMES_MAP[theme] || }
@@ -54,7 +55,9 @@ export default ({ theme, copyable, code, light }) => ( position: relative; top: ${theme === 'bw' ? 36 : 34}px; margin-left: ${theme === 'bw' ? 16 : 14}px; + margin-right: ${theme === 'boxy' ? 8 : 0}px; z-index: 2; + text-align: ${theme === 'boxy' ? 'right' : 'initial'}; } .window-title-container { diff --git a/components/svg/Controls.js b/components/svg/Controls.js index 68d8799..738277b 100644 --- a/components/svg/Controls.js +++ b/components/svg/Controls.js @@ -19,3 +19,22 @@ export const ControlsBW = () => ( ) + +export const ControlsBoxy = () => ( + + + + + + +) diff --git a/components/svg/WindowThemes.js b/components/svg/WindowThemes.js index 2d515d6..402f2b5 100644 --- a/components/svg/WindowThemes.js +++ b/components/svg/WindowThemes.js @@ -111,3 +111,42 @@ export const None = () => ( ) + +export const Boxy = () => ( + + + + + + + + + + + + + + + + + + + + +)