From 4621b67c8e88381ed0654e9453971f213c3d62d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jordi=20Guti=C3=A9rrez=20Hermoso?= <jordigh@octave.org>
Date: Sun, 28 Jul 2024 19:08:33 -0400
Subject: [PATCH] AdminToggleCss: factor out CSS from SupportGristPage

We will create a new enterprise toggle, so we will need to share the same CSS.
---
 app/client/ui/AdminTogglesCss.ts  | 45 ++++++++++++++++++++++++
 app/client/ui/SupportGristPage.ts | 58 +++++++------------------------
 2 files changed, 58 insertions(+), 45 deletions(-)
 create mode 100644 app/client/ui/AdminTogglesCss.ts

diff --git a/app/client/ui/AdminTogglesCss.ts b/app/client/ui/AdminTogglesCss.ts
new file mode 100644
index 00000000..5419d428
--- /dev/null
+++ b/app/client/ui/AdminTogglesCss.ts
@@ -0,0 +1,45 @@
+import {bigBasicButton, bigBasicButtonLink, bigPrimaryButton} from 'app/client/ui2018/buttons';
+import {theme} from 'app/client/ui2018/cssVars';
+import {styled} from 'grainjs';
+
+export const cssSection = styled('div', ``);
+
+export const cssParagraph = styled('div', `
+  color: ${theme.text};
+  font-size: 14px;
+  line-height: 20px;
+  margin-bottom: 12px;
+`);
+
+export const cssOptInOutMessage = styled(cssParagraph, `
+  line-height: 40px;
+  font-weight: 600;
+  margin-top: 24px;
+  margin-bottom: 0px;
+`);
+
+export const cssOptInButton = styled(bigPrimaryButton, `
+  margin-top: 24px;
+`);
+
+export const cssOptOutButton = styled(bigBasicButton, `
+  margin-top: 24px;
+`);
+
+export const cssSponsorButton = styled(bigBasicButtonLink, `
+  margin-top: 24px;
+`);
+
+export const cssButtonIconAndText = styled('div', `
+  display: flex;
+  align-items: center;
+`);
+
+export const cssButtonText = styled('span', `
+  margin-left: 8px;
+`);
+
+export const cssSpinnerBox = styled('div', `
+  margin-top: 24px;
+  text-align: center;
+`);
diff --git a/app/client/ui/SupportGristPage.ts b/app/client/ui/SupportGristPage.ts
index 306ef858..13e0ed8f 100644
--- a/app/client/ui/SupportGristPage.ts
+++ b/app/client/ui/SupportGristPage.ts
@@ -1,14 +1,24 @@
 import {makeT} from 'app/client/lib/localization';
 import {AppModel} from 'app/client/models/AppModel';
 import {TelemetryModel, TelemetryModelImpl} from 'app/client/models/TelemetryModel';
-import {basicButtonLink, bigBasicButton, bigBasicButtonLink, bigPrimaryButton} from 'app/client/ui2018/buttons';
-import {theme} from 'app/client/ui2018/cssVars';
+import {
+  cssButtonIconAndText,
+  cssButtonText,
+  cssOptInButton,
+  cssOptInOutMessage,
+  cssOptOutButton,
+  cssParagraph,
+  cssSection,
+  cssSpinnerBox,
+  cssSponsorButton,
+} from 'app/client/ui/AdminTogglesCss';
+import {basicButtonLink} from 'app/client/ui2018/buttons';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
 import {commonUrls} from 'app/common/gristUrls';
 import {TelemetryPrefsWithSources} from 'app/common/InstallAPI';
-import {Computed, Disposable, dom, makeTestId, styled} from 'grainjs';
+import {Computed, Disposable, dom, makeTestId} from 'grainjs';
 
 const testId = makeTestId('test-support-grist-page-');
 
@@ -164,45 +174,3 @@ function gristCoreLink() {
     {href: commonUrls.githubGristCore, target: '_blank'},
   );
 }
-
-const cssSection = styled('div', ``);
-
-const cssParagraph = styled('div', `
-  color: ${theme.text};
-  font-size: 14px;
-  line-height: 20px;
-  margin-bottom: 12px;
-`);
-
-const cssOptInOutMessage = styled(cssParagraph, `
-  line-height: 40px;
-  font-weight: 600;
-  margin-top: 24px;
-  margin-bottom: 0px;
-`);
-
-const cssOptInButton = styled(bigPrimaryButton, `
-  margin-top: 24px;
-`);
-
-const cssOptOutButton = styled(bigBasicButton, `
-  margin-top: 24px;
-`);
-
-const cssSponsorButton = styled(bigBasicButtonLink, `
-  margin-top: 24px;
-`);
-
-const cssButtonIconAndText = styled('div', `
-  display: flex;
-  align-items: center;
-`);
-
-const cssButtonText = styled('span', `
-  margin-left: 8px;
-`);
-
-const cssSpinnerBox = styled('div', `
-  margin-top: 24px;
-  text-align: center;
-`);