Boxy window theme (#1008)

* Add WIndows style window controls

* Add Windows style controls preview (needs work)

* Add Windows control style to settings menu

* tweaks

* add boxy windows theme

* refactor windows theme logic a bit

Co-authored-by: spikespaz <spikespaz@outlook.com>

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;
             }
           `}
         </style>

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: <ControlsBW />, boxy: <ControlsBoxy /> }
 export default ({ theme, copyable, code, light }) => (
   <div className="window-controls">
-    {theme === 'bw' ? <ControlsBW /> : <Controls />}
+    {WINDOW_THEMES_MAP[theme] || <Controls />}
     <div className="window-title-container">
       <input aria-label="Image Title" type="text" spellCheck="false" />
     </div>
@@ -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 {

components/svg/Controls.js

@@ -19,3 +19,22 @@ export const ControlsBW = () => (
     </g>
   </svg>
 )
+
+export const ControlsBoxy = () => (
+  <svg
+    width="58"
+    height="14"
+    viewBox="0 0 58 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={{ margin: '0 8px 0 auto' }}
+  >
+    <path d="M1 7H11" stroke="#878787" strokeLinecap="round" strokeLinejoin="round" />
+    <path
+      d="M34 1H24C23.4477 1 23 1.44772 23 2V12C23 12.5523 23.4477 13 24 13H34C34.5523 13 35 12.5523 35 12V2C35 1.44772 34.5523 1 34 1Z"
+      stroke="#878787"
+    />
+    <path d="M47 2L57 12" stroke="#878787" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M47 12L57 2" stroke="#878787" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)

components/svg/WindowThemes.js

@@ -111,3 +111,42 @@ export const None = () => (
     </g>
   </svg>
 )
+
+export const Boxy = () => (
+  <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <rect id="a3" width="81" height="81" rx="3" />
+      <clipPath id="clip0">
+        <rect width="60" height="60" transform="matrix(-1 0 0 1 60 0)" fill="#878787" />
+      </clipPath>
+    </defs>
+    <g fill="none" fillRule="evenodd">
+      <mask id="b3" fill="#878787">
+        <use xlinkHref="#a3" />
+      </mask>
+      <use fill="#616161" xlinkHref="#a3" />
+      <g clipPath="url(#clip0)">
+        <path
+          d="M-0.774667 57.8587C-0.774667 59.4958 0.54646 60.8205 2.18459 60.8205H48.0192V28.2731C48.0192 25.8203 46.0308 23.8331 43.5758 23.8331H-0.774667V57.8587Z"
+          fill="black"
+        />
+        <path
+          d="M18.3333 34H10.3333C9.78105 34 9.33333 34.4477 9.33333 35V43C9.33333 43.5523 9.78105 44 10.3333 44H18.3333C18.8856 44 19.3333 43.5523 19.3333 43V35C19.3333 34.4477 18.8856 34 18.3333 34Z"
+          stroke="#878787"
+        />
+        <path
+          d="M29.3333 34.8333L37.6667 43.1667"
+          stroke="#878787"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M29.3333 43.1667L37.6667 34.8333"
+          stroke="#878787"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </g>
+  </svg>
+)