From c091e86f7640d6c97ad6ee5770eb6ddfb9427a69 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 14 Jan 2022 22:05:52 -0800
Subject: [PATCH] Make Extra toggle only display on Weapons tab

---
 .../PartySegmentedControl/index.scss          |  5 +++-
 .../PartySegmentedControl/index.tsx           | 27 ++++++++++++-------
 src/components/ToggleSwitch/index.scss        |  1 +
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/PartySegmentedControl/index.scss b/src/components/PartySegmentedControl/index.scss
index 3665a032..182dee32 100644
--- a/src/components/PartySegmentedControl/index.scss
+++ b/src/components/PartySegmentedControl/index.scss
@@ -1,9 +1,10 @@
 .PartyNavigation {
     display: flex;
     gap: 58px;
-    justify-content: right;
+    justify-content: center;
     margin: 0 auto;
     max-width: 760px;
+    position: relative;
 }
 
 .Extra {
@@ -13,4 +14,6 @@
     gap: 8px;
     line-height: 34px;
     height: 100%;
+    position: absolute;
+    right: 0px;
 }
\ No newline at end of file
diff --git a/src/components/PartySegmentedControl/index.tsx b/src/components/PartySegmentedControl/index.tsx
index 088ed511..0d2a0583 100644
--- a/src/components/PartySegmentedControl/index.tsx
+++ b/src/components/PartySegmentedControl/index.tsx
@@ -22,6 +22,17 @@ interface Props {
 }
 
 const PartySegmentedControl = (props: Props) => {
+    const extraToggle =
+        <div className="Extra">
+            Extra
+            <ToggleSwitch 
+                name="Extra" 
+                editable={props.editable}
+                checked={props.extra}
+                onChange={props.onCheckboxChange} 
+            />
+        </div>
+
     return (
         <div className="PartyNavigation">
             <SegmentedControl>
@@ -54,15 +65,13 @@ const PartySegmentedControl = (props: Props) => {
                 >Summons</Segment>
             </SegmentedControl>
 
-            <div className="Extra">
-                Extra
-                <ToggleSwitch 
-                    name="Extra" 
-                    editable={props.editable}
-                    checked={props.extra}
-                    onChange={props.onCheckboxChange} 
-                />
-            </div>
+            {
+                (() => {
+                    if (props.selectedTab == GridType.Weapon) {
+                        return extraToggle
+                    }
+                })()
+            }
         </div>
     )
 }
diff --git a/src/components/ToggleSwitch/index.scss b/src/components/ToggleSwitch/index.scss
index 3d34fd10..7ec57881 100644
--- a/src/components/ToggleSwitch/index.scss
+++ b/src/components/ToggleSwitch/index.scss
@@ -4,6 +4,7 @@
   display: inline-block;
   position: relative;
   width: 58px;
+  height: 34px;
 
   &-checkbox {
     display: none;