From cc8c6003f0938009b17f8089d854154eecad97e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Cutzach?= <gregoire@cutzach.com>
Date: Tue, 20 Aug 2024 17:48:44 +0200
Subject: [PATCH] feat: update UX according figma

---
 app/client/ui/DocumentSettings.ts | 16 +++++++++-------
 app/client/ui2018/checkbox.ts     |  5 +++++
 app/client/ui2018/modals.ts       |  3 ++-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/client/ui/DocumentSettings.ts b/app/client/ui/DocumentSettings.ts
index 46eaca04..33b41a36 100644
--- a/app/client/ui/DocumentSettings.ts
+++ b/app/client/ui/DocumentSettings.ts
@@ -65,7 +65,7 @@ export class DocSettingsPage extends Disposable {
     const isDocEditor = isOwnerOrEditor(docPageModel.currentDoc.get());
 
     return cssContainer(
-      dom.create(AdminSection, t('Document Settings'), [
+      dom.create(cssAdminSection, t('Document Settings'), [
         dom.create(AdminSectionItem, {
           id: 'timezone',
           name: t('Time Zone'),
@@ -89,7 +89,7 @@ export class DocSettingsPage extends Disposable {
         }),
       ]),
 
-      dom.create(AdminSection, t('Data Engine'), [
+      dom.create(cssAdminSection, t('Data Engine'), [
         dom.create(AdminSectionItem, {
           id: 'timings',
           name: t('Formula timer'),
@@ -122,7 +122,6 @@ export class DocSettingsPage extends Disposable {
           )),
           disabled: isDocOwner ? false : t('Only available to document owners'),
         }),
-
         dom.create(AdminSectionItem, {
           id: 'reload',
           name: t('Reload'),
@@ -130,7 +129,6 @@ export class DocSettingsPage extends Disposable {
           value: cssSmallButton(t('Reload data engine'), dom.on('click', this._reloadEngine.bind(this, true))),
           disabled: isDocEditor ? false : t('Only available to document editors'),
         }),
-
         canChangeEngine ? dom.create(AdminSectionItem, {
           id: 'python',
           name: t('Python'),
@@ -139,7 +137,7 @@ export class DocSettingsPage extends Disposable {
         }) : null,
       ]),
 
-      dom.create(AdminSection, t('API'), [
+      dom.create(cssAdminSection, t('API'), [
         dom.create(AdminSectionItem, {
           id: 'documentId',
           name: t('Document ID'),
@@ -188,7 +186,6 @@ export class DocSettingsPage extends Disposable {
             href: getApiConsoleLink(docPageModel),
           }),
         }),
-
         dom.create(AdminSectionItem, {
           id: 'webhooks',
           name: t('Webhooks'),
@@ -196,7 +193,8 @@ export class DocSettingsPage extends Disposable {
           value: cssSmallLinkButton(t('Manage webhooks'), urlState().setLinkUrl({docPage: 'webhook'})),
         }),
       ]),
-      dom.create(AdminSection, t('Document conversion'), [
+
+      dom.create(cssAdminSection, t('Document conversion'), [
         dom.create(AdminSectionItem, {
           id: 'document-type',
           name: t('Document type'),
@@ -566,3 +564,7 @@ const cssWrap = styled('p', `
 const cssRedText = styled('span', `
   color: ${theme.errorText};
 `);
+
+const cssAdminSection = styled(AdminSection, `
+  max-width: 750px;
+`);
diff --git a/app/client/ui2018/checkbox.ts b/app/client/ui2018/checkbox.ts
index 239989bf..4191bfae 100644
--- a/app/client/ui2018/checkbox.ts
+++ b/app/client/ui2018/checkbox.ts
@@ -25,6 +25,9 @@ export const cssLabel = styled('label', `
   margin-bottom: 0px;
   flex-shrink: 0;
 
+  align-items: center;
+  justify-content: center;
+
   outline: none;
   user-select: none;
 
@@ -226,6 +229,8 @@ const cssBlockCheckbox = styled('div', `
   }
   &-block {
     pointer-events: none;
+    border-color: ${theme.controlFg};
+    border-width: 2px;
   }
   &-block a {
     pointer-events: all;
diff --git a/app/client/ui2018/modals.ts b/app/client/ui2018/modals.ts
index 77b2d1ad..5858cc6c 100644
--- a/app/client/ui2018/modals.ts
+++ b/app/client/ui2018/modals.ts
@@ -623,10 +623,11 @@ export const cssModalBody = styled('div', `
 
 export const cssModalButtons = styled('div', `
   margin: 40px 0 0 0;
+  text-align: right;
 
   & > button,
   & > .${cssButton.className} {
-    margin: 0 8px 0 0;
+    margin: 0 0 0 8px;
   }
 `);