Fixes icons, direction for tertiary buttons

components/icons/redo.tsx

@@ -3,8 +3,7 @@ import * as React from 'react'
 function SvgRedo(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
-      width={15}
+      viewBox="0 0 15 15"
-      height={15}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}

components/icons/trash.tsx

@@ -3,8 +3,7 @@ import * as React from 'react'
 function SvgTrash(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
-      width={15}
+      viewBox="0 0 15 15"
-      height={15}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}

components/icons/undo.tsx

@@ -3,8 +3,7 @@ import * as React from 'react'
 function SvgUndo(props: React.SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
-      width={15}
+      viewBox="0 0 15 15"
-      height={15}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}

components/tools-panel/shared.tsx

@@ -1,39 +1,6 @@
 import Tooltip from 'components/tooltip'
 import styled from 'styles'
 
-// small: {
-//   height: 32,
-//   width: 32,
-//   '& svg:nth-of-type(1)': {
-//     height: '16px',
-//     width: '16px',
-//   },
-// },
-// medium: {
-//   height: 44,
-//   width: 44,
-//   '& svg:nth-of-type(1)': {
-//     height: '18px',
-//     width: '18px',
-//   },
-// },
-// large: {
-//   height: 44,
-//   width: 44,
-//   '& svg:nth-of-type(1)': {
-//     height: '20px',
-//     width: '20px',
-//   },
-// },
-// tertiary: {
-//   height: 32,
-//   width: 44,
-//   '& svg:nth-of-type(1)': {
-//     height: '16px',
-//     width: '16px',
-//   },
-// },
-
 export const ToolButton = styled('button', {
   position: 'relative',
   height: '32px',
@@ -252,22 +219,31 @@ export function TertiaryButton({
   )
 }
 
-export const TertiaryButtonsContainer = styled('div', {
+export const Container = styled('div', {
   backgroundColor: '$panel',
+  border: '1px solid $panel',
   borderRadius: '4px',
-  overflow: 'hidden',
+  boxShadow: '0px 2px 4px rgba(0,0,0,.16)',
+  display: 'flex',
+  height: 'fit-content',
+  padding: 2,
   pointerEvents: 'all',
+  position: 'relative',
   userSelect: 'none',
   zIndex: 200,
-  minWidth: 36,
+})
-  border: '1px solid $panel',
-  boxShadow: '0px 2px 4px rgba(0,0,0,.10)',
-  padding: 2,
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
 
-  '& svg': {
+export const TertiaryButtonsContainer = styled(Container, {
-    strokeWidth: 0,
+  variants: {
+    bp: {
+      mobile: {
+        alignItems: 'center',
+        flexDirection: 'column',
+      },
+      small: {
+        alignItems: 'center',
+        flexDirection: 'row',
+      },
+    },
   },
 })

components/tools-panel/tools-panel.tsx

@@ -8,7 +8,7 @@ import {
   SquareIcon,
   TextIcon,
 } from '@radix-ui/react-icons'
-import { PrimaryButton, SecondaryButton } from './shared'
+import { PrimaryButton, SecondaryButton, Container } from './shared'
 import React from 'react'
 import state, { useSelector } from 'state'
 import styled from 'styles'
@@ -114,19 +114,6 @@ const ToolsPanelContainer = styled('div', {
   gap: 8,
 })
 
-const Container = styled('div', {
-  position: 'relative',
-  backgroundColor: '$panel',
-  borderRadius: '4px',
-  border: '1px solid $panel',
-  pointerEvents: 'all',
-  userSelect: 'none',
-  height: 'fit-content',
-  display: 'flex',
-  padding: 2,
-  boxShadow: '0px 2px 4px rgba(0,0,0,.16)',
-})
-
 const CenterWrap = styled('div', {
   gridRow: 1,
   gridColumn: 2,

components/tools-panel/undo-redo.tsx

@@ -8,7 +8,7 @@ const clear = () => state.send('CLEARED_PAGE')
 
 export default function UndoRedo(): JSX.Element {
   return (
-    <TertiaryButtonsContainer>
+    <TertiaryButtonsContainer bp={{ '@initial': 'mobile', '@sm': 'small' }}>
       <TertiaryButton label="Undo" onClick={undo}>
         <Undo />
       </TertiaryButton>

components/tools-panel/zoom.tsx

@@ -10,7 +10,7 @@ const zoomToActual = () => state.send('ZOOMED_TO_ACTUAL')
 
 export default function Zoom(): JSX.Element {
   return (
-    <TertiaryButtonsContainer>
+    <TertiaryButtonsContainer bp={{ '@initial': 'mobile', '@sm': 'small' }}>
       <TertiaryButton label="Zoom Out" onClick={zoomOut}>
         <ZoomOutIcon />
       </TertiaryButton>