Start adding ide colors, includes adding custom theme to openscad

Resolves #365

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -2,38 +2,39 @@ import { Popover } from '@headlessui/react'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import FullScriptEncoding from 'src/components/EncodedUrl/FullScriptEncoding'
 import ExternalScript from 'src/components/EncodedUrl/ExternalScript'
+import Svg from 'src/components/Svg/Svg'
 
 const TopButton = ({
   onClick,
   children,
   className,
-  iconColor,
+  name,
 }: {
   onClick?: () => void
   children: React.ReactNode
   className?: string
-  iconColor: string
+  name: string
 }) => (
   <button
     onClick={onClick}
     className={`flex bg-gray-200 h-10 justify-center items-center px-4 rounded ${className}`}
   >
-    <div className={`rounded-full h-6 w-6 mr-4 ${iconColor}`} />
     {children}
+    {name}
   </button>
 )
 
 const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
   return (
-    <div className="h-16 w-full bg-gray-900 flex justify-between items-center">
-      <div className="bg-gray-700 pr-48 h-full"></div>
+    <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center">
+      <div className="bg-ch-gray-700 pr-48 h-full"></div>
       <div className="text-gray-200 flex gap-4 mr-4">
         <TopButton
-          className="bg-gray-600 text-gray-200"
-          iconColor="bg-gray-300"
+          className="bg-ch-pink-800 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
           onClick={handleRender}
+          name="Preview"
         >
-          Render
+          <Svg name="photograph" className="w-6 h-6 text-ch-pink-500 mr-2" />
         </TopButton>
 
         <Popover className="relative outline-none w-full h-full">
@@ -41,8 +42,14 @@ const IdeHeader = ({ handleRender }: { handleRender: () => void }) => {
             return (
               <>
                 <Popover.Button className="h-full w-full outline-none">
-                  <TopButton iconColor="bg-gray-600" className="text-gray-700">
-                    Share
+                  <TopButton
+                    name="Share"
+                    className=" bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 text-ch-gray-300"
+                  >
+                    <Svg
+                      name="share"
+                      className="w-6 h-6 text-ch-purple-500 mr-2 mt-1"
+                    />
                   </TopButton>
                 </Popover.Button>
                 {open && (