Add a gap between shapes and lock (#569)

* Add a gap between shapes and lock

The lock is a different type as the rest of the shapes, so we should visually separate it.

* redesign lock icon

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/components/LockIcon.tsx

@@ -43,7 +43,7 @@ export function LockIcon(props: LockIconProps) {
   const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
 
   return (
-    <label className={`ToolIcon ${sizeCn}`} title={props.title}>
+    <label className={`ToolIcon ToolIcon__lock ${sizeCn}`} title={props.title}>
       <input
         className="ToolIcon_type_checkbox"
         type="checkbox"

src/components/ToolIcon.scss

@@ -60,3 +60,25 @@
     box-shadow: 0 0 0 2px #a5d8ff;
   }
 }
+
+.ToolIcon.ToolIcon__lock {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.1rem;
+
+  .ToolIcon__icon {
+    background-color: transparent;
+    width: 2rem;
+    height: 2em;
+  }
+  &:hover .ToolIcon__icon {
+    background-color: transparent;
+  }
+  &:active .ToolIcon__icon {
+    background-color: transparent;
+  }
+  &:focus .ToolIcon__icon {
+    box-shadow: none;
+  }
+}

src/index.tsx

@@ -481,21 +481,6 @@ export class App extends React.Component<any, AppState> {
     );
   }
 
-  private renderShapeLock() {
-    const { elementLocked } = this.state;
-    return (
-      <LockIcon
-        checked={elementLocked}
-        onChange={() => {
-          this.setState({
-            elementLocked: !elementLocked,
-            elementType: elementLocked ? "selection" : this.state.elementType,
-          });
-        }}
-      />
-    );
-  }
-
   private renderShapesSwitcher() {
     const { t } = this.props;
 
@@ -525,7 +510,6 @@ export class App extends React.Component<any, AppState> {
             ></ToolButton>
           );
         })}
-        {this.renderShapeLock()}
       </>
     );
   }
@@ -623,10 +607,23 @@ export class App extends React.Component<any, AppState> {
               </div>
             </Stack.Col>
             <Stack.Col gap={4} align="start">
-              <Island padding={1}>
-                <h2 className="visually-hidden">Shapes</h2>
-                <Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
-              </Island>
+              <Stack.Row gap={1}>
+                <Island padding={1}>
+                  <h2 className="visually-hidden">Shapes</h2>
+                  <Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
+                </Island>
+                <LockIcon
+                  checked={this.state.elementLocked}
+                  onChange={() => {
+                    this.setState({
+                      elementLocked: !this.state.elementLocked,
+                      elementType: this.state.elementLocked
+                        ? "selection"
+                        : this.state.elementType,
+                    });
+                  }}
+                />
+              </Stack.Row>
             </Stack.Col>
             <div />
           </div>