From 504d751b4188e60add6c3a0c8cbab77ce87450b3 Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 10:51:37 +0000
Subject: [PATCH 01/10] Start skinny button rejig

---
 src/components/Button/Button.scss                      | 10 ++++++++++
 .../Editor/NewComponentButton/NewComponentButton.js    |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 6a751abab..836f45824 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -42,6 +42,12 @@
   }
 }
 
+.btn-outer {
+  background: transparent;
+  cursor: pointer;
+  padding: 6px 0px;
+}
+
 .btn {
   align-items: center;
   border-radius: 8px;
@@ -73,6 +79,10 @@
     cursor: default;
   }
 
+  &--small {
+    padding: 4px;
+  }
+
   // Variants
 
   &--primary {
diff --git a/src/components/Editor/NewComponentButton/NewComponentButton.js b/src/components/Editor/NewComponentButton/NewComponentButton.js
index 68e94cf08..c4b2ccb9f 100644
--- a/src/components/Editor/NewComponentButton/NewComponentButton.js
+++ b/src/components/Editor/NewComponentButton/NewComponentButton.js
@@ -40,8 +40,8 @@ const NewComponentButton = () => {
     }
 
     return (
-      <div className={`--${theme}`}>
-        <Button buttonText={t('filePane.newFileButton')} ButtonIcon={NewFileIcon} onClickHandler={showModal} className="btn--primary proj-new-component-button" />
+      <div className={`--${theme} btn-outer `}>
+        <Button buttonText={t('filePane.newFileButton')} ButtonIcon={NewFileIcon} onClickHandler={showModal} className="btn--primary btn--small proj-new-component-button" />
 
         <Modal
           isOpen={modalIsOpen}

From 70947bf95cc9f649d6c3a7658f0a78612789d7d6 Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 12:04:03 +0000
Subject: [PATCH 02/10] Adjust button component for skinny buttons

---
 src/components/Button/Button.js                | 18 ++++++++++++++----
 src/components/Button/Button.scss              |  2 +-
 .../NewComponentButton/NewComponentButton.js   |  4 ++--
 src/editor-spacing.scss                        |  4 +++-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index abf3e7302..eb72a6ff1 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -5,7 +5,7 @@ import { confirmAlert } from 'react-confirm-alert';
 import 'react-confirm-alert/src/react-confirm-alert.css';
 
 const Button = (props) => {
-  const { className, onClickHandler, ButtonIcon, buttonImage, buttonImageAltText, buttonText, disabled, confirmText } = props;
+  const { className, onClickHandler, ButtonIcon, buttonImage, buttonImageAltText, buttonText, buttonOuter, disabled, confirmText } = props;
 
   var buttonClass="btn"
   buttonClass = (className ? buttonClass += ` ${className}`: buttonClass)
@@ -30,13 +30,23 @@ const Button = (props) => {
     });
   }
 
-  return (
+  const button = (
     <button className={buttonClass} disabled={disabled} onClick={onButtonClick}>
       { buttonImage ? <img src={buttonImage} alt={buttonImageAltText}/> : null }
       { ButtonIcon ? <ButtonIcon /> : null }
-      { buttonText ? <span>{buttonText}</span> : null }
+      { buttonText ? <span>{buttonText} </span> : null }
     </button>
-  )
+  );
+
+  if (buttonOuter) {
+    return (
+      <div className='btn-outer'>
+        {button}
+      </div>
+    )
+  }
+
+  return button;
 };
 
 export default Button;
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 836f45824..4a0739543 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -80,7 +80,7 @@
   }
 
   &--small {
-    padding: 4px;
+    padding: var(--spacing-four);
   }
 
   // Variants
diff --git a/src/components/Editor/NewComponentButton/NewComponentButton.js b/src/components/Editor/NewComponentButton/NewComponentButton.js
index c4b2ccb9f..ff45f178f 100644
--- a/src/components/Editor/NewComponentButton/NewComponentButton.js
+++ b/src/components/Editor/NewComponentButton/NewComponentButton.js
@@ -40,8 +40,8 @@ const NewComponentButton = () => {
     }
 
     return (
-      <div className={`--${theme} btn-outer `}>
-        <Button buttonText={t('filePane.newFileButton')} ButtonIcon={NewFileIcon} onClickHandler={showModal} className="btn--primary btn--small proj-new-component-button" />
+      <div className={`--${theme}`}>
+        <Button buttonText={t('filePane.newFileButton')} ButtonIcon={NewFileIcon} buttonOuter onClickHandler={showModal} className="btn--primary btn--small proj-new-component-button" />
 
         <Modal
           isOpen={modalIsOpen}
diff --git a/src/editor-spacing.scss b/src/editor-spacing.scss
index 5fafa1891..373b39686 100644
--- a/src/editor-spacing.scss
+++ b/src/editor-spacing.scss
@@ -1,3 +1,5 @@
 :root, :host {
-  --spacing-half: calc(0.5rem * var(--spacing-multiplier))
+  --spacing-half: calc(0.5rem * var(--spacing-multiplier));
+  --spacing-eight: calc(var(--spacing-1) / 1.25);
+  --spacing-four: calc(var(--spacing-eight) / 2);
 }

From 5f26df20a7e08e7e37a1d6ab579e4d5760bbd576 Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 12:06:06 +0000
Subject: [PATCH 03/10] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38824995c..f035252b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Message prompting users to login or save if they make non-autosaved changes (#291)
 - Unit tests for the autosave trigger (#291)
 - Project not found and access denied modals shown on project loading error (#298)
+- Styling for skinny buttons (#303)
 
 ## Changed
 

From b76b21f7ebec8bfd9be619211e8e7b5726ef0fa8 Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 12:06:47 +0000
Subject: [PATCH 04/10] ws

---
 src/components/Button/Button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index eb72a6ff1..14544414a 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -34,7 +34,7 @@ const Button = (props) => {
     <button className={buttonClass} disabled={disabled} onClick={onButtonClick}>
       { buttonImage ? <img src={buttonImage} alt={buttonImageAltText}/> : null }
       { ButtonIcon ? <ButtonIcon /> : null }
-      { buttonText ? <span>{buttonText} </span> : null }
+      { buttonText ? <span>{buttonText}</span> : null }
     </button>
   );
 

From 91e4396a25988f76545461b38d797f1581e26d9b Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 12:19:39 +0000
Subject: [PATCH 05/10] Adjust button onClick handler

---
 src/components/Button/Button.js   |  4 ++--
 src/components/Button/Button.scss | 23 ++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 14544414a..2debfe67e 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -31,7 +31,7 @@ const Button = (props) => {
   }
 
   const button = (
-    <button className={buttonClass} disabled={disabled} onClick={onButtonClick}>
+    <button className={buttonClass} disabled={disabled} onClick={buttonOuter ? null : onButtonClick}>
       { buttonImage ? <img src={buttonImage} alt={buttonImageAltText}/> : null }
       { ButtonIcon ? <ButtonIcon /> : null }
       { buttonText ? <span>{buttonText}</span> : null }
@@ -40,7 +40,7 @@ const Button = (props) => {
 
   if (buttonOuter) {
     return (
-      <div className='btn-outer'>
+      <div className='btn-outer' onClick={onButtonClick}>
         {button}
       </div>
     )
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 4a0739543..d66d47340 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -45,7 +45,28 @@
 .btn-outer {
   background: transparent;
   cursor: pointer;
-  padding: 6px 0px;
+  padding: var(--spacing-eight) 0;
+
+  &:active {
+    .btn--primary {
+      background-color: $rpf-teal-tint-25;
+    }
+  }
+
+  &:hover {
+    .btn--primary {
+      background-color: $rpf-teal-shade-20;
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    .btn--primary {
+      background-color: $rpf-teal;
+      border: 3px solid $rpf-brand-raspberry;
+    }
+  }
 }
 
 .btn {

From 458a8f5b0f7bf845dda317d7527e6769fe48e2fd Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 13:18:54 +0000
Subject: [PATCH 06/10] wip small button hit area styling

---
 src/components/Button/Button.scss | 92 ++++++++++++++++++++-----------
 1 file changed, 61 insertions(+), 31 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index d66d47340..b177ee080 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -17,7 +17,7 @@
     }
   }
 
-  &:active {
+  &:active, .btn-outer:active & {
     background-color: $active-bg;
     @content;
   }
@@ -31,44 +31,17 @@
     }
   }
 
-  &:focus-visible {
+  &:focus-visible, .btn-outer:focus-visible & {
     background-color: $focus-bg;
     @content;
   }
   
-  &:hover {
+  &:hover, .btn-outer:hover & {
     background-color: $hover-bg;
     @content;
   }
 }
 
-.btn-outer {
-  background: transparent;
-  cursor: pointer;
-  padding: var(--spacing-eight) 0;
-
-  &:active {
-    .btn--primary {
-      background-color: $rpf-teal-tint-25;
-    }
-  }
-
-  &:hover {
-    .btn--primary {
-      background-color: $rpf-teal-shade-20;
-    }
-  }
-
-  &:focus-visible {
-    outline: none;
-
-    .btn--primary {
-      background-color: $rpf-teal;
-      border: 3px solid $rpf-brand-raspberry;
-    }
-  }
-}
-
 .btn {
   align-items: center;
   border-radius: 8px;
@@ -105,7 +78,6 @@
   }
 
   // Variants
-
   &--primary {
     $colours: $rpf-teal, $rpf-teal-tint-25, $rpf-teal-tint-75, $rpi-grey-70, $rpf-teal, $rpf-teal-shade-20;
     @include button-styling($colours...);
@@ -143,6 +115,20 @@
   }
 }
 
+.btn-outer {
+  background: transparent;
+  cursor: pointer;
+  padding: var(--spacing-eight) 0;
+
+  &:focus-visible {
+    outline: none;
+
+    .btn {
+      border: 3px solid $rpf-brand-raspberry;
+    }
+  }
+}
+
 .font-size-large {
   .btn svg {
     margin-right: var(--spacing-2);
@@ -150,6 +136,50 @@
 }
 
 .--dark {
+  .btn-outer {
+    &:hover {
+      .btn--primary {
+        background-color: $rpf-teal-tint-25;
+      }
+
+      .btn--secondary {
+        background-color: $rpf-darkmode-grey22;
+      }
+
+      .btn--tertiary {
+        background-color: inherit;
+      }
+    }
+
+    &:active {
+      .btn--primary {
+        background-color: $rpf-teal-tint-75;
+      }
+
+      .btn--secondary {
+        background-color: $rpf-darkmode-grey22;
+      }
+
+      .btn--tertiary {
+        background-color: inherit;
+      }
+    }
+
+    &:focus-visible {
+      .btn--primary {
+        background-color: $rpf-teal-tint-50;
+      }
+
+      .btn--secondary {
+        background-color: $rpf-darkmode-grey32;
+      }
+
+      .btn--tertiary {
+        background-color: inherit;
+      }
+    }
+  }
+
   .btn--primary {
     $colours: $rpf-teal-tint-50, $rpf-teal-tint-75, $rpf-darkmode-grey80, $rpf-darkmode-grey22, $rpf-teal-tint-50, $rpf-teal-tint-25;
     @include button-styling($colours...);

From e412e1cfb9e94bd37485957797c6c06dc4e2fa14 Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 13:22:10 +0000
Subject: [PATCH 07/10] Rearrange button file

---
 src/components/Button/Button.scss | 52 +++++++++++++++----------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index b177ee080..a81687c55 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -58,6 +58,12 @@
   text-decoration: none;
   width: fit-content;
 
+  &:disabled {
+    background-color: $rpf-darkmode-grey32;
+    color: $rpf-white;
+    cursor: default;
+  }
+
   &:focus-visible {
     border: 3px solid $rpf-brand-raspberry;
     outline: none;
@@ -67,16 +73,30 @@
     margin-right: var(--spacing-1);
   }
 
-  &:disabled {
-    background-color: $rpf-darkmode-grey32;
-    color: $rpf-white;
-    cursor: default;
-  }
-
   &--small {
     padding: var(--spacing-four);
   }
 
+  .btn-outer {
+    background: transparent;
+    cursor: pointer;
+    padding: var(--spacing-eight) 0;
+  
+    &:focus-visible {
+      outline: none;
+  
+      .btn {
+        border: 3px solid $rpf-brand-raspberry;
+      }
+    }
+  }
+  
+  .font-size-large {
+    .btn svg {
+      margin-right: var(--spacing-2);
+    }
+  }
+
   // Variants
   &--primary {
     $colours: $rpf-teal, $rpf-teal-tint-25, $rpf-teal-tint-75, $rpi-grey-70, $rpf-teal, $rpf-teal-shade-20;
@@ -115,26 +135,6 @@
   }
 }
 
-.btn-outer {
-  background: transparent;
-  cursor: pointer;
-  padding: var(--spacing-eight) 0;
-
-  &:focus-visible {
-    outline: none;
-
-    .btn {
-      border: 3px solid $rpf-brand-raspberry;
-    }
-  }
-}
-
-.font-size-large {
-  .btn svg {
-    margin-right: var(--spacing-2);
-  }
-}
-
 .--dark {
   .btn-outer {
     &:hover {

From f9a56ea319b6f61350fb0be99b0cb5a1dfb835b1 Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 15:05:14 +0000
Subject: [PATCH 08/10] Remove them from buttonComponent as pulls from app
 class

---
 src/components/Button/Button.scss             | 40 +++++++++----------
 .../NewComponentButton/NewComponentButton.js  |  6 +--
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index a81687c55..fa25e736e 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -77,26 +77,6 @@
     padding: var(--spacing-four);
   }
 
-  .btn-outer {
-    background: transparent;
-    cursor: pointer;
-    padding: var(--spacing-eight) 0;
-  
-    &:focus-visible {
-      outline: none;
-  
-      .btn {
-        border: 3px solid $rpf-brand-raspberry;
-      }
-    }
-  }
-  
-  .font-size-large {
-    .btn svg {
-      margin-right: var(--spacing-2);
-    }
-  }
-
   // Variants
   &--primary {
     $colours: $rpf-teal, $rpf-teal-tint-25, $rpf-teal-tint-75, $rpi-grey-70, $rpf-teal, $rpf-teal-shade-20;
@@ -135,6 +115,26 @@
   }
 }
 
+.btn-outer {
+  background: transparent;
+  cursor: pointer;
+  padding: var(--spacing-eight) 0;
+
+  &:focus-visible {
+    outline: none;
+
+    .btn {
+      border: 3px solid $rpf-brand-raspberry;
+    }
+  }
+}
+
+.font-size-large {
+  .btn svg {
+    margin-right: var(--spacing-2);
+  }
+}
+
 .--dark {
   .btn-outer {
     &:hover {
diff --git a/src/components/Editor/NewComponentButton/NewComponentButton.js b/src/components/Editor/NewComponentButton/NewComponentButton.js
index ff45f178f..84b5776ed 100644
--- a/src/components/Editor/NewComponentButton/NewComponentButton.js
+++ b/src/components/Editor/NewComponentButton/NewComponentButton.js
@@ -20,10 +20,6 @@ const NewComponentButton = () => {
     const projectComponents = useSelector((state) => state.editor.project.components);
     const componentNames = projectComponents.map(component => `${component.name}.${component.extension}`)
 
-    const [cookies] = useCookies(['fontSize', 'theme'])
-    const isDarkMode = cookies.theme==="dark" || (!cookies.theme && window.matchMedia("(prefers-color-scheme:dark)").matches)
-    const theme = isDarkMode ? "dark" : "light"
-
     const closeModal = () => setIsOpen(false);
     const showModal = () => {
       dispatch(setNameError(""));
@@ -40,7 +36,7 @@ const NewComponentButton = () => {
     }
 
     return (
-      <div className={`--${theme}`}>
+      <div>
         <Button buttonText={t('filePane.newFileButton')} ButtonIcon={NewFileIcon} buttonOuter onClickHandler={showModal} className="btn--primary btn--small proj-new-component-button" />
 
         <Modal

From 4c5c92ec36ef3ef9a7fa82dec8a6092648c59c00 Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 15:05:45 +0000
Subject: [PATCH 09/10] Remove cookies

---
 src/components/Editor/NewComponentButton/NewComponentButton.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Editor/NewComponentButton/NewComponentButton.js b/src/components/Editor/NewComponentButton/NewComponentButton.js
index 84b5776ed..3135fbf42 100644
--- a/src/components/Editor/NewComponentButton/NewComponentButton.js
+++ b/src/components/Editor/NewComponentButton/NewComponentButton.js
@@ -9,7 +9,6 @@ import Button from '../../Button/Button'
 import NameErrorMessage from '../ErrorMessage/NameErrorMessage';
 import { CloseIcon, NewFileIcon } from '../../../Icons';
 import { validateFileName } from '../../../utils/componentNameValidation';
-import { useCookies } from 'react-cookie';
 import { useTranslation } from 'react-i18next';
 
 const NewComponentButton = () => {

From 67877812ae6c7083faf227a31faf09b98dd8ac0e Mon Sep 17 00:00:00 2001
From: Izzy Smillie <isabelle.smillie@raspberrypi.org>
Date: Thu, 22 Dec 2022 15:25:15 +0000
Subject: [PATCH 10/10] Rename from skinny to small buttons

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f035252b6..a682cdfe3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Message prompting users to login or save if they make non-autosaved changes (#291)
 - Unit tests for the autosave trigger (#291)
 - Project not found and access denied modals shown on project loading error (#298)
-- Styling for skinny buttons (#303)
+- Styling for small buttons (#303)
 
 ## Changed