#568 added setting button to top menu

src/common/components/icons/index.ts

@@ -12,3 +12,4 @@ export * from './delete-icon.component';
 export * from './pencil-icon.component';
 export * from './caret-down-icon.component';
 export * from './plus-icon.component';
+export * from './settings-icon.component';

src/common/components/icons/settings-icon.component.tsx

@@ -0,0 +1,15 @@
+export const SettingsIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M62 106.6V40a6 6 0 0 0-12 0v66.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-50.6a30 30 0 0 0 0-58.8M56 154a18 18 0 1 1 18-18a18 18 0 0 1-18 18m78-95.4V40a6 6 0 0 0-12 0v18.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-98.6a30 30 0 0 0 0-58.8m-6 47.4a18 18 0 1 1 18-18a18 18 0 0 1-18 18m102 62a30.05 30.05 0 0 0-24-29.4V40a6 6 0 0 0-12 0v98.6a30 30 0 0 0 0 58.8V216a6 6 0 0 0 12 0v-18.6a30.05 30.05 0 0 0 24-29.4m-30 18a18 18 0 1 1 18-18a18 18 0 0 1-18 18"
+      />
+    </svg>
+  );
+};

src/pods/index.ts

@@ -1,3 +1,4 @@
 export * from './canvas/canvas.pod';
 export * from './galleries';
 export * from './toolbar/toolbar.pod';
+export * from './settings';

src/pods/settings/index.ts

@@ -0,0 +1 @@
+export * from './settings.pod';

src/pods/toolbar/components/index.ts

@@ -7,3 +7,4 @@ export { UndoButton } from './undo-button';
 export { RedoButton } from './redo-button';
 export { ExportButton } from './export-button';
 export { AboutButton } from './about-button';
+export { SettingsButton } from './settings-button';

src/pods/toolbar/components/settings-button/index.ts

@@ -0,0 +1 @@
+export * from './settings-button';

src/pods/toolbar/components/settings-button/settings-button.tsx

@@ -0,0 +1,22 @@
+import { SettingsIcon } from '@/common/components/icons/';
+import { useModalDialogContext } from '@/core/providers/model-dialog-providers/model-dialog.provider';
+import { SettingsPod } from '@/pods';
+import { ToolbarButton } from '@/pods/toolbar/components/toolbar-button/toolbar-button';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+
+export const SettingsButton = () => {
+  const { openModal } = useModalDialogContext();
+
+  const handleClick = () => {
+    openModal(<SettingsPod />, 'Settings');
+  };
+
+  return (
+    <ToolbarButton
+      onClick={handleClick}
+      className={classes.button}
+      icon={<SettingsIcon />}
+      label="Settings"
+    />
+  );
+};

src/pods/toolbar/toolbar.pod.tsx

@@ -12,6 +12,7 @@ import {
   AboutButton,
 } from './components/index';
 import classes from './toolbar.pod.module.css';
+import { SettingsButton } from './components/settings-button';
 
 export const ToolbarPod: React.FC = () => {
   return (
@@ -53,6 +54,9 @@ export const ToolbarPod: React.FC = () => {
         </li>
       </ul>
       <ul className={classes.buttonGroup}>
+        <li>
+          <SettingsButton />
+        </li>
         <li>
           <AboutButton />
         </li>