Icons and build assets.

main/background.js

@@ -25,6 +25,7 @@ if (isProd) {
 
   mainWindow.setIgnoreMouseEvents(true, { forward: true })
   mainWindow.setAlwaysOnTop(true, "floating")
+  mainWindow.maximize()
 
   if (isProd) {
     await mainWindow.loadURL("app://./home.html")

package.json

@@ -1,9 +1,9 @@
 {
   "private": true,
-  "name": "my-nextron-app",
-  "description": "My application description",
-  "version": "1.0.0",
-  "author": "Yoshihide Shiono <[email protected]>",
+  "name": "telestrator",
+  "description": "A drawing app for streaming.",
+  "version": "0.1.0",
+  "author": "Steve Ruiz @steveruizok",
   "main": "app/background.js",
   "scripts": {
     "dev": "nextron",

renderer/components/controls.tsx

@@ -108,14 +108,14 @@ const ControlsContainer = styled.div<{ showActive: boolean }>`
   opacity: ${({ showActive }) => (showActive ? 1 : 0.2)};
   transition: all 0.25s;
   border-radius: 2px 20px 0 0;
-  background-color: rgba(255, 255, 255, 0);
+  background-color: rgba(144, 144, 144, 0);
   transform: ${({ showActive }) =>
     showActive ? "translate(0px 0px)" : "translate(-48px, 0px)"};
 
   :hover {
     opacity: 1;
     transform: translate(0px, 0px);
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: rgba(144, 144, 144, 0.1);
   }
 
   button {
@@ -153,11 +153,12 @@ const ColorButton = styled.button<{ isSelected: boolean; color: string }>`
     background-color: ${({ color }) => color};
     height: 100%;
     width: 100%;
-    transform: scale(${({ isSelected }) => (isSelected ? 0.5 : 0.2)});
+    transform: scale(${({ isSelected }) => (isSelected ? 0.68 : 0.4)});
     transition: transform 0.12s;
   }
 
   &:hover:after {
+    border: 1px solid rgba(144, 144, 144, 0);
     transform: scale(1);
   }
 `
@@ -229,7 +230,7 @@ const ToolButton = styled.button<{
 
   &:enabled:hover {
     opacity: 1;
-    color: rgba(255, 255, 255, 1);
+    color: rgba(144, 144, 144, 1);
   }
 
   &::before {
@@ -243,11 +244,11 @@ const ToolButton = styled.button<{
     transform: scale(0.85);
     transition: all 0.16s;
     z-index: -1;
-    background-color: rgba(255, 255, 255, 0);
+    background-color: rgba(144, 144, 144, 0);
   }
 
   &:enabled:hover::before {
     transform: scale(1);
-    background-color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(144, 144, 144, 0.2);
   }
 `

renderer/lib/defaults.ts

@@ -12,7 +12,7 @@ export const colors = [
   "#42a6f6",
   "#74eff7",
   // "#94afc2",
-  "#f4f4f4",
+  "#ffffff",
   "#1a1c2c",
   // "#566c86",
   // "#343d57",

renderer/lib/state.ts

@@ -29,7 +29,7 @@ const state = createState({
   data: {
     isDragging: false,
     refs: undefined as Refs | undefined,
-    color: "red",
+    color: "#42a6f6",
     size: 16,
     marks: [] as Mark[],
     currentMark: undefined as Mark | undefined,