From 5fa64b19716b22b6b2d628a8c0a3f2afab42be29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98yvind=20Thune?= <oyvlei@gmail.com>
Date: Thu, 6 Jun 2024 15:17:43 +0200
Subject: [PATCH] Added hidden button to toggle globals on themepicker

---
 .../TokenModal/TokenModal.module.css          | 10 ++++
 .../components/TokenModal/TokenModal.tsx      | 56 ++++++++++---------
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/apps/theme/components/TokenModal/TokenModal.module.css b/apps/theme/components/TokenModal/TokenModal.module.css
index 3b2b97328b..ff10d379e4 100644
--- a/apps/theme/components/TokenModal/TokenModal.module.css
+++ b/apps/theme/components/TokenModal/TokenModal.module.css
@@ -60,3 +60,13 @@
   right: 22px;
   top: 22px;
 }
+
+.hiddenGlobalBtn {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 48px;
+  width: 48px;
+  background-color: transparent;
+  border: transparent;
+}
diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx
index 026fdce36f..9987266b8b 100644
--- a/apps/theme/components/TokenModal/TokenModal.tsx
+++ b/apps/theme/components/TokenModal/TokenModal.tsx
@@ -42,6 +42,7 @@ export const TokenModal = ({
     ':root { --color-1: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; --color-2: #F45F63; }',
   );
   const [toolTipText, setToolTipText] = useState('Kopier nettaddresse');
+  const [showGlobals, setShowGlobals] = useState(false);
 
   const generateJsonForColor = (colorArray: ColorInfoType[]) => {
     const obj: { [key: string]: { value: string; type: string } } = {};
@@ -209,6 +210,11 @@ export const TokenModal = ({
         </Modal.Header>
         <Modal.Content className={classes.modalContent}>
           <div className={classes.content}>
+            <button
+              tabIndex={-1}
+              className={classes.hiddenGlobalBtn}
+              onClick={() => setShowGlobals(!showGlobals)}
+            ></button>
             <div className={classes.column}>
               <Heading
                 className={classes.title}
@@ -226,38 +232,36 @@ export const TokenModal = ({
                       onClick={() => generateThemeJson('light')}
                       value='value1'
                     >
-                      Light
+                      Lightmode
                     </Tabs.Tab>
                     <Tabs.Tab
                       onClick={() => generateThemeJson('dark')}
                       value='value2'
                     >
-                      Dark
-                    </Tabs.Tab>
-                    <Tabs.Tab
-                      onClick={() => generateThemeJson('contrast')}
-                      value='value3'
-                    >
-                      Contrast
-                    </Tabs.Tab>
-                    <Tabs.Tab
-                      onClick={() => genereateGlobalsJson('light')}
-                      value='value4'
-                    >
-                      G: Light
-                    </Tabs.Tab>
-                    <Tabs.Tab
-                      onClick={() => genereateGlobalsJson('dark')}
-                      value='value5'
-                    >
-                      G: Dark
-                    </Tabs.Tab>
-                    <Tabs.Tab
-                      onClick={() => genereateGlobalsJson('contrast')}
-                      value='value6'
-                    >
-                      G: Contrast
+                      Darkmode
                     </Tabs.Tab>
+                    {showGlobals && (
+                      <>
+                        <Tabs.Tab
+                          onClick={() => genereateGlobalsJson('light')}
+                          value='value4'
+                        >
+                          G: Light
+                        </Tabs.Tab>
+                        <Tabs.Tab
+                          onClick={() => genereateGlobalsJson('dark')}
+                          value='value5'
+                        >
+                          G: Dark
+                        </Tabs.Tab>
+                        <Tabs.Tab
+                          onClick={() => genereateGlobalsJson('contrast')}
+                          value='value6'
+                        >
+                          G: Contrast
+                        </Tabs.Tab>
+                      </>
+                    )}
                   </Tabs.List>
                 </Tabs>
               </div>