fix: improve style

vimcaw · May 18, 2021 · 7c7e0c9 · 7c7e0c9
1 parent 1c0d134
commit 7c7e0c9
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git a/src/Canvas/index.tsx b/src/Canvas/index.tsx
@@ -26,7 +26,7 @@ export default function Canvas() {
               raf={false}
               renderOnComponentChange
               options={{
-                backgroundColor: 0x080808,
+                backgroundColor: 0x1e1e1e,
                 autoDensity: true,
                 resolution: window.devicePixelRatio,
               }}

diff --git a/src/DocumentWindow/index.tsx b/src/DocumentWindow/index.tsx
@@ -7,11 +7,11 @@ export default function DocumentWindow() {
 
   return (
     <Flex flexGrow={1} width={0} direction="column">
-      <View paddingX="size-200" paddingY="size-100">
+      <View backgroundColor="gray-300" paddingX="size-200" paddingY="size-100">
         {activeDocument.name}
       </View>
       <Canvas />
-      <View paddingX="size-100" paddingY="size-50">
+      <View backgroundColor="gray-300" paddingX="size-100" paddingY="size-50">
         {/* eslint-disable-next-line i18next/no-literal-string */}
         {activeDocument.size.width}×{activeDocument.size.height}
       </View>

diff --git a/src/Panels/LayersPanel/Layer.tsx b/src/Panels/LayersPanel/Layer.tsx
@@ -16,8 +16,12 @@ export default function Layer({ id }: { id: EntityId }) {
       <ActionButton isQuiet onPress={() => dispatch(switchLayerVisible(id))}>
         {layer.visible ? <Visibility /> : <VisibilityOff />}
       </ActionButton>
-      <View backgroundColor="gray-200" width="size-600" height="size-600" />
-      <Text marginStart="size-200">{layer.name}</Text>
+      <View flexGrow={1} backgroundColor="gray-400" padding="size-100">
+        <Flex alignItems="center">
+          <View backgroundColor="gray-100" width="size-600" height="size-600" />
+          <Text marginStart="size-600">{layer.name}</Text>
+        </Flex>
+      </View>
     </Flex>
   );
 }
diff --git a/src/Panels/index.tsx b/src/Panels/index.tsx
@@ -6,7 +6,7 @@ export default function Panels() {
   const activeLayerIds = useActiveLayerIds();
   return (
     <Flex flexShrink={0} direction="column" width="size-5000">
-      <View padding="size-200">
+      <View backgroundColor="gray-300" padding="size-100" flexGrow={1}>
         {activeLayerIds?.map(layerId => (
           <Layer key={layerId} id={layerId} />
         ))}

diff --git a/src/var.scss b/src/var.scss
@@ -1 +1 @@
-$background: #1e1e1e;
+$background: #393939;