From ef5e0986bf864916b240aae9237dbe8583041012 Mon Sep 17 00:00:00 2001
From: Pekka Helesuo <pekka.helesuo@siili.com>
Date: Thu, 12 Sep 2024 14:36:21 +0300
Subject: [PATCH 1/4] highlightbox item alignment & bgcolor same as in faq

---
 app/documentation/api/page.tsx | 39 +++++++++++++++-------------------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/app/documentation/api/page.tsx b/app/documentation/api/page.tsx
index 6c9cd62e..cce98bbd 100644
--- a/app/documentation/api/page.tsx
+++ b/app/documentation/api/page.tsx
@@ -6,15 +6,14 @@ import Text from '@/components/Text'
 export default function ApiMainPage() {
   return <>
     <DefaultLayout heroSmall heroTitle='Oskari API'>
-      <div>
         <Text>
           Oskari API is defined as bundles. Bundle is a definition of functionality that may provide external API to control the functionality.
         </Text>
-        <HighlightBox>
-          <div style={{ display: 'flex', flexDirection: 'column'}}>
+        <HighlightBox style= {{ backgroundColor: '#FAFAFA'}}>
+          <div style={{ display: 'flex', flexDirection: 'column', maxWidth: '85vw'}}>
             <h2 style={{fontSize: '1.625rem'}}>Building a custom Oskari application</h2>
             <div>
-              <p>Choose the functionalities from bundle documentation</p>
+              <p className="mt-2 mb-2">Choose the functionalities from bundle documentation</p>
               <Button
                 variant='primary'
                 title='Bundle documentation'
@@ -22,29 +21,25 @@ export default function ApiMainPage() {
             </div>
             <div style={{ marginTop: '2em'}}>
               <h2 style={{fontSize: '1.625rem'}}>Working with an existing Oskari application</h2>
-              <div style={{ gridColumn: '2' }} className='flex justify-center'>
-                <div className='flex w-full justify-center gap-4 items-center'>
-                  <div>
-                    <p>Controlling existing functionality</p>
-                    <Button
-                      variant='primary'
-                      title='Requests documentation'
-                      href={'/documentation/api/requests'}/>
-                  </div>
-                  <div>
-                    <p>Reacting to events</p>
-                    <Button
-                      variant='primary'
-                      title='Events documentation'
-                      href={'/documentation/api/events'}/>
-                  </div>
+              <div className='flex flex-col'>
+                <div className="mt-3 mb-3">
+                  <p className="mt-2 mb-2">Controlling existing functionality</p>
+                  <Button
+                    variant='primary'
+                    title='Requests documentation'
+                    href={'/documentation/api/requests'}/>
+                </div>
+                <div>
+                  <p className="mt-2 mb-2">Reacting to events</p>
+                  <Button
+                    variant='primary'
+                    title='Events documentation'
+                    href={'/documentation/api/events'}/>
                 </div>
-
               </div>
             </div>
           </div>
         </HighlightBox>
-      </div>
     </DefaultLayout>
   </>;
 }

From d5deb738ea9ff6c91068c2acb470cb28c9f9f607 Mon Sep 17 00:00:00 2001
From: Pekka Helesuo <pekka.helesuo@siili.com>
Date: Thu, 12 Sep 2024 15:02:29 +0300
Subject: [PATCH 2/4] change content margin to (try to) avoid it overlapping
 header

---
 styles/main.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/main.scss b/styles/main.scss
index 656d76e6..dcb623e1 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -138,7 +138,7 @@ h3 {
 
 .content-wrapper {
   /*bring this further up so it's closer to balloons.*/
-  margin-top: -20rem;
+  margin-top: -30vh;
   /*make sure this appears on top of balloons*/
   z-index: 2;
   /*make sure we can use z-index and thus sure this stays on top of the balloons*/

From b3ae6c43f3899c4e69664d2fe6a1338c531ab743 Mon Sep 17 00:00:00 2001
From: Pekka Helesuo <pekka.helesuo@siili.com>
Date: Fri, 13 Sep 2024 11:29:50 +0300
Subject: [PATCH 3/4] rpc & description - checkboxes accessibility

---
 components/Checkbox/Checkbox.tsx | 11 ++++++++---
 styles/checkbox.module.scss      |  4 ++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/Checkbox/Checkbox.tsx b/components/Checkbox/Checkbox.tsx
index 4dd7d81d..324deb54 100644
--- a/components/Checkbox/Checkbox.tsx
+++ b/components/Checkbox/Checkbox.tsx
@@ -1,14 +1,19 @@
 'use client'
 import styles from '@/styles/checkbox.module.scss'
 import { ReactNode } from 'react';
+import { KeyboardEvent } from 'react';
 
 export function CheckboxGroup({children}: {children: Array<ReactNode>}) {
   return <div className={`${styles.checkbox_group}`}>{children}</div>
 }
 
+function shouldToggle(event: KeyboardEvent) {
+  return event?.key === 'Enter';
+}
+
 export default function Checkbox({isChecked, title, onChange}: {isChecked: boolean, title: string, onChange: (checked: boolean) => void}) {
-  return <div className={`${styles.checkbox}`} onClick={() => onChange(!isChecked)}>
-    <div className={`${styles.checkbox__header}`}>{title}</div>
-    <input type='checkbox' defaultChecked={isChecked}/>
+  return <div className={`${styles.checkbox} pr-2`} onClick={() => onChange(!isChecked)}>
+    <label htmlFor={'checkbox_' + title} className={`${styles.checkbox__header}`}>{title}</label>
+    <input id={'checkbox_' + title} type='checkbox' defaultChecked={isChecked} onKeyUp={(event) => { if (shouldToggle(event)) { onChange(!isChecked); }}}/>
   </div>;
 }
diff --git a/styles/checkbox.module.scss b/styles/checkbox.module.scss
index 8f5d7907..3429b763 100644
--- a/styles/checkbox.module.scss
+++ b/styles/checkbox.module.scss
@@ -12,6 +12,10 @@
   display: flex;
   flex-direction: row;
 
+  &:has(input:active), &:has(input:focus) {
+    outline: auto;
+  }
+
   &__header {
     background-color: var(--color-light);
     font-weight: 700;

From cb903514581988efcdce7151e7d100eb754ab5c1 Mon Sep 17 00:00:00 2001
From: Pekka Helesuo <pekka.helesuo@siili.com>
Date: Fri, 13 Sep 2024 12:04:02 +0300
Subject: [PATCH 4/4] increase margin to make top-border visible. Again.

---
 styles/accordion.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/accordion.module.scss b/styles/accordion.module.scss
index ca4eb76b..4e43f6c3 100644
--- a/styles/accordion.module.scss
+++ b/styles/accordion.module.scss
@@ -124,7 +124,7 @@
 
     /*uncover the top border of active link of the first list element*/
     li:first-child {
-      margin-top: 0.2rem;
+      margin-top: 0.3rem;
     }
   }
 }