square size button

Author: jwklong

src/components/tw-settings-modal/settings-modal.css

@@ -118,6 +118,9 @@
 .custom-stage-size-button[data-widescreen="true"] {
     width: 224px;
 }
+.custom-stage-size-button[data-square="true"] {
+    width: 126px;
+}
 .custom-stage-size-button[data-selected="true"] {
     border-color: $motion-primary;
 }

src/components/tw-settings-modal/settings-modal.jsx

@@ -335,18 +335,26 @@ const CustomStageSize = ({
                     id="pm.settingsModal.stageSize"
                 />
                 <div>
+                    <button
+                        className={styles.customStageSizeButton}
+                        data-selected={stageWidth === 360 && stageHeight === 360}
+                        data-square={true}
+                        onClick={() => onStagePresetUsed(2)}
+                    >
+                        1:1
+                    </button>
                     <button
                         className={styles.customStageSizeButton}
                         data-selected={stageWidth === 480 && stageHeight === 360}
-                        onClick={() => onStagePresetUsed(false)}
+                        onClick={() => onStagePresetUsed(0)}
                     >
                         4:3
                     </button>
                     <button
                         className={styles.customStageSizeButton}
                         data-selected={stageWidth === 640 && stageHeight === 360}
                         data-widescreen={true}
-                        onClick={() => onStagePresetUsed(true)}
+                        onClick={() => onStagePresetUsed(1)}
                     >
                         16:9
                     </button>

src/containers/tw-settings-modal.jsx

@@ -91,11 +91,17 @@ class UsernameModal extends React.Component {
         this.props.vm.setStageSize(this.props.customStageSize.width, value);
     }
     handleStagePresetUsed (widescreen) {
-        if (widescreen) {
-            this.props.vm.setStageSize(640, 360);
-            return;
+        switch (widescreen) {
+            case 1:
+                this.props.vm.setStageSize(640, 360);
+                break;
+            case 2:
+                this.props.vm.setStageSize(360, 360);
+                break;
+            default:
+                this.props.vm.setStageSize(480, 360);
+                break;
         }
-        this.props.vm.setStageSize(480, 360);
     }
     handleStoreProjectOptions () {
         this.props.vm.storeProjectOptions();