Some changes

Author: k.golikov

src/constants/router/menuItems.ts

@@ -28,32 +28,32 @@ const menuItems: MenuItem[] = [
         icon: ToolFilled,
         routes: [
             {
-                route: routes.jsonStringifier
+                route: routes.jsonToTypescript
             },
             {
-                route: routes.qrScanner
+                route: routes.jsEvaluator
             },
             {
-                route: routes.qrGenerator
+                route: routes.diffEditor
             },
             {
-                route: routes.bgGenerator,
-                title: 'BG Generator'
+                route: routes.codeFormatter
             },
             {
-                route: routes.jsEvaluator
+                route: routes.uuidGenerator
             },
             {
-                route: routes.uuidGenerator
+                route: routes.jsonStringifier
             },
             {
-                route: routes.diffEditor
+                route: routes.qrScanner
             },
             {
-                route: routes.codeFormatter
+                route: routes.qrGenerator
             },
             {
-                route: routes.jsonToTypescript
+                route: routes.bgGenerator,
+                title: 'BG Generator'
             },
             {
                 route: routes.templateTextGenerator,

src/pages/aboutPage/components/AppDependency.tsx

@@ -3,14 +3,15 @@ import { Space } from 'antd';
 import Text from 'antd/lib/typography/Text';
 import styles from './AppDependency.module.scss';
 import ExternalLink from '../../../components/ExternalLink';
+import getNpmPackageLink from '../../../utils/getNpmPackageLink';
 
 interface Props {
     name: string;
     version: string;
 }
 
 const AppDependency: FunctionComponent<Props> = ({ name, version }) => {
-    const link = `https://www.npmjs.com/package/${name}`;
+    const link = getNpmPackageLink(name);
 
     return (
         <Space direction="horizontal" className={styles.container}>

src/pages/bgGeneratorPage/BgGeneratorPage.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/main';
+
 .resultImage {
     max-width: 500px;
     max-height: 500px;

src/pages/bgGeneratorPage/BgGeneratorPage.scss

@@ -0,0 +1,24 @@
+@import '../../styles/main';
+
+.BgGeneratorPage_color-picker {
+    @include themeDark {
+        //color: black;
+        //background: #1d1d1d !important;
+
+        background: rgba(150, 150, 150, 0.15) !important;
+        //border: 1px solid rgba(100, 100, 100, 0.2) !important;
+
+        label {
+            color: #dddddd !important;
+        }
+
+        input {
+            background: transparent !important;
+            box-shadow: rgba(100, 100, 100, 0.2) 0 0 0 1px inset !important;
+        }
+
+        div.flexbox-fix {
+            border-color: rgba(100, 100, 100, 0.2) !important;
+        }
+    }
+}

src/pages/bgGeneratorPage/BgGeneratorPage.tsx

@@ -10,6 +10,7 @@ import stringifySize from '../../utils/stringifySize';
 import { useDebouncedMemo } from '../../hooks/debouncedMemo';
 import getWindowSize from '../../utils/getWindowSize';
 import getScreenSize from '../../utils/getScreenSize';
+import './BgGeneratorPage.scss';
 
 const generateImage = ({ width, height }: Size, color: string, imgCanvas: HTMLCanvasElement): string | undefined => {
     if (width < 0 || height < 0) {
@@ -77,7 +78,11 @@ const BgGeneratorPage = () => {
             <Col>
                 <Row gutter={16}>
                     <Col className="mb-3">
-                        <SketchPicker color={color} onChange={handleColorChange} />
+                        <SketchPicker
+                            color={color}
+                            onChange={handleColorChange}
+                            className="BgGeneratorPage_color-picker"
+                        />
                     </Col>
                     <Col className="mb-3">
                         <Space direction="vertical">

src/pages/jsonToTypeScriptPage/components/JsonToTypeScriptSettings.module.scss

@@ -1,9 +1,13 @@
+$containerWidth: 290px;
+$labelWidth: 130px;
+$inputWidth: $containerWidth - $labelWidth;
+
 .formContainer {
     display: flex;
     flex-direction: column;
     gap: 6px;
 
-    width: 280px;
+    width: $containerWidth;
     padding-bottom: 5px;
 }
 
@@ -15,8 +19,11 @@
 
     margin-bottom: 0.25rem;
 
-    .closeButton {
+    .rightSide {
         margin-top: -6px;
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
     }
 }
 
@@ -26,12 +33,12 @@
     align-items: center;
 
     .label {
-        width: 120px;
+        width: $labelWidth;
     }
 
     .input {
         flex: 1;
-        width: 160px;
-        max-width: 160px;
+        width: $inputWidth;
+        max-width: $inputWidth;
     }
 }

src/pages/jsonToTypeScriptPage/components/JsonToTypeScriptSettings.tsx

@@ -24,15 +24,15 @@ const JsonToTypeScriptSettings: FunctionComponent<Props> = ({ options, setOption
         <Col className={styles.formContainer}>
             <div className={styles.title}>
                 <h3 className="mb-0">Settings</h3>
-                {onClose && (
-                    <Button
-                        size="small"
-                        type="text"
-                        icon={<CloseOutlined />}
-                        className={styles.closeButton}
-                        onClick={onClose}
-                    />
-                )}
+                <div className={styles.rightSide}>
+                    {/*<Button*/}
+                    {/*    size="small"*/}
+                    {/*    type="dashed"*/}
+                    {/*>*/}
+                    {/*    Reset*/}
+                    {/*</Button>*/}
+                    {onClose && <Button size="small" type="text" icon={<CloseOutlined />} onClick={onClose} />}
+                </div>
             </div>
             <label className={styles.formItem}>
                 <span className={styles.label}>Root type name</span>

src/pages/qrGeneratorPage/QrGeneratorPage.tsx

@@ -7,6 +7,15 @@ import { QRCodeSVG } from 'qrcode.react';
 import SvgImage from '../../components/svgImage/SvgImage';
 import styles from './QrGeneratorPage.module.scss';
 import classNames from 'classnames';
+import Text from 'antd/lib/typography/Text';
+import ExternalLink from '../../components/ExternalLink';
+import getNpmPackageLink from '../../utils/getNpmPackageLink';
+
+const titleExtra = (
+    <Text type="secondary">
+        uses <ExternalLink href={getNpmPackageLink('qrcode.react')}>qrcode.react</ExternalLink>
+    </Text>
+);
 
 const QrGeneratorPage: FunctionComponent = () => {
     const qrCodeWrapperRef = useRef<HTMLDivElement>(null);
@@ -18,7 +27,7 @@ const QrGeneratorPage: FunctionComponent = () => {
     const [doIncludeMargin, setDoIncludeMargin] = useInputState<boolean>(false);
 
     return (
-        <PageContainer title="QR Generator">
+        <PageContainer title="QR Generator" titleExtra={titleExtra}>
             <Col xs={24} lg={12}>
                 <TextArea value={text} onChange={setTextByEvent} placeholder="Input text" rows={3} allowClear />
                 <label className={classNames(styles.formItem, 'mt-2')}>

src/pages/qrScannerPage/QrScannerPage.tsx

@@ -15,6 +15,7 @@ import Text from 'antd/lib/typography/Text';
 import ImgCrop from 'antd-img-crop';
 import CopyButton from '../../components/copyButton/CopyButton';
 import ExternalLink from '../../components/ExternalLink';
+import getNpmPackageLink from '../../utils/getNpmPackageLink';
 
 interface QrImage {
     blob: Blob;
@@ -32,7 +33,7 @@ const beforeUpload = (file: RcFile) => {
 
 const titleExtra = (
     <Text type="secondary">
-        uses <ExternalLink href="https://www.npmjs.com/package/qr-scanner">qr-scanner</ExternalLink>
+        uses <ExternalLink href={getNpmPackageLink('qr-scanner')}>qr-scanner</ExternalLink>
     </Text>
 );
 

src/pages/uuidGeneratorPage/UuidGeneratorPage.tsx

@@ -5,10 +5,11 @@ import { v4 } from 'uuid';
 import Text from 'antd/lib/typography/Text';
 import ExternalLink from '../../components/ExternalLink';
 import CopyButton from '../../components/copyButton/CopyButton';
+import getNpmPackageLink from '../../utils/getNpmPackageLink';
 
 const titleExtra = (
     <Text type="secondary">
-        uses <ExternalLink href="https://www.npmjs.com/package/uuid">uuid</ExternalLink>
+        uses <ExternalLink href={getNpmPackageLink('uuid')}>uuid</ExternalLink>
     </Text>
 );