From 2690d1fb0b690878c8fae43635f0a615e7b8035e Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 28 Sep 2024 10:43:07 +0200
Subject: [PATCH 1/3] chore: add nebula logo to navbar

---
 frontend/src/containers/Navbar.jsx | 35 +++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/frontend/src/containers/Navbar.jsx b/frontend/src/containers/Navbar.jsx
index e8fd5641..f30ad3d9 100644
--- a/frontend/src/containers/Navbar.jsx
+++ b/frontend/src/containers/Navbar.jsx
@@ -7,7 +7,7 @@ import { NavLink, useNavigate } from 'react-router-dom'
 import { Navbar, Dropdown } from '/src/components'
 
 const BasePageTitle = styled.div`
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   font-weight: 500;
   color: #f0f0f0;
   margin-right: 0.5rem;
@@ -24,6 +24,38 @@ const BasePageTitle = styled.div`
   }
 `
 
+const LogoSVG = styled.svg`
+  margin-right: 1rem;
+  path {
+    fill: var(--color-text);
+    stroke: var(--color-text-dim);
+    stroke-width: 0.5;
+  }
+`
+
+const Logo = () => (
+  <LogoSVG width="28" height="28" viewBox="0 0 93 93" version="1.1">
+    <g id="layer2" transform="translate(0,-30.95625)">
+      <g
+        id="g325"
+        transform="matrix(1.6803343,0,0,1.6803343,-44.612547,-16.493951)"
+      >
+        <g
+          id="g75"
+          transform="matrix(0.97722424,0,0,0.98554268,0.60352361,0.16142272)"
+        >
+          <path
+            id="path73"
+            d="M 82.946,84.408 H 26.551 V 28.489 h 56.395 z m -55.395,-1 H 81.946 V 29.489 H 27.551 Z"
+          />
+        </g>
+        <path id="path87" d="M 37.323,67.469" strokeMiterlimit="10" />
+        <path d="m 71.335054,58.98133 c -1.406,-2.625 -4.25,-3.594 -4.594,-3.719 0,0 3.031,-1 3.719,-4.531 0,0 0.813,-3.063 -1.375,-5.656 0,0 -1.375,-2.25 -6.219,-2.688 0,0 -1.438,-0.156 -2.313,-0.188 -0.875,-0.032 -5.063,-0.031 -5.063,-0.031 v 17.895 l -13.14,-17.863 h -2.406 l 15.547,21.072 v 2.459 l -17.5,-23.547 h -1.813 v 27.094 h 2.063 v -23.437 l 17.516,23.578 h 1.813 v -25.25 c 0,0 4.203,-0.313 7.797,0.859 0,0 3.156,0.844 3.031,4.375 0,0 0.344,3.406 -3.688,4.5 0,0 -2.438,0.625 -4.438,0.531 v 1.969 c 0,0 3.625,-0.016 4.813,0.344 0,0 2.969,0.563 4.281,2.938 0,0 1.438,2.406 -0.5,5.125 0,0 -1.188,1.656 -3.781,2.219 0,0 -0.906,0.438 -4.781,0.375 v 1.969 c 0,0 3.5,0.188 5.688,-0.531 2.219,-0.672 4.594,-1.813 5.594,-4.594 -0.001,-10e-4 1.155,-2.642 -0.251,-5.267 z" />
+      </g>
+    </g>
+  </LogoSVG>
+)
+
 const PageTitle = () => {
   const pageTitle = useSelector((state) => state.context.pageTitle)
   const pageIcon = useSelector((state) => state.context.pageIcon)
@@ -81,6 +113,7 @@ const NavBar = () => {
   return (
     <Navbar>
       <div className="left">
+        <Logo />
         <NavLink to={`/mam/editor`}>Assets</NavLink>
         {false && nebula.settings.system.ui_asset_preview && (
           <NavLink to={`/mam/preview`}>Preview</NavLink>

From 07cdf56acae1ccdff5f1880cbaae7ed65cc7a7c2 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 28 Sep 2024 10:43:42 +0200
Subject: [PATCH 2/3] fix: component sizes and padding

---
 frontend/src/components/Button.jsx | 7 +++++++
 frontend/src/components/theme.js   | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Button.jsx b/frontend/src/components/Button.jsx
index 04b5c228..f51a5ada 100644
--- a/frontend/src/components/Button.jsx
+++ b/frontend/src/components/Button.jsx
@@ -16,6 +16,9 @@ const BaseButton = styled.button`
   max-height: ${(props) => props.theme.inputHeight};
   min-width: ${(props) => props.theme.inputHeight} !important;
 
+  user-select: none;
+  user-drag: none;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,6 +26,10 @@ const BaseButton = styled.button`
   cursor: pointer;
   white-space: nowrap;
 
+  .icon {
+    font-size: 1.4rem;
+  }
+
   &:focus {
     background: ${(props) => props.theme.colors.surface06};
     outline: 1px solid ${(props) => props.theme.colors.cyan};
diff --git a/frontend/src/components/theme.js b/frontend/src/components/theme.js
index 871f6d4d..b6238adf 100644
--- a/frontend/src/components/theme.js
+++ b/frontend/src/components/theme.js
@@ -22,10 +22,10 @@ const colors = {
 
 const defaultTheme = {
   colors,
-  inputHeight: '32px',
+  inputHeight: '30px',
   inputBorder: 0,
   inputBorderRadius: '4px',
-  inputPadding: '6px',
+  inputPadding: '4px',
   inputBackground: colors.surface04,
   fontSize: '0.9rem',
   gapSize: '6px',

From e68b1aac7e04f3f6ee0a632c342cc3c4595efd7f Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 28 Sep 2024 10:44:15 +0200
Subject: [PATCH 3/3] chore: switch to scss, use default page scaling

---
 frontend/src/index.jsx  |   2 +-
 frontend/src/index.sass | 143 ------------------------------------
 frontend/src/index.scss | 158 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 159 insertions(+), 144 deletions(-)
 delete mode 100644 frontend/src/index.sass
 create mode 100644 frontend/src/index.scss

diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 5fa7393d..e9762f2e 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -10,7 +10,7 @@ import contextReducer from './actions'
 
 import 'react-toastify/dist/ReactToastify.css'
 import 'material-symbols'
-import './index.sass'
+import './index.scss'
 
 const store = configureStore({
   reducer: {
diff --git a/frontend/src/index.sass b/frontend/src/index.sass
deleted file mode 100644
index ec977c01..00000000
--- a/frontend/src/index.sass
+++ /dev/null
@@ -1,143 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,300;0,400;0,600;0,700;1,300;1,400&display=swap')
-
-
-:root
-  --font-family: 'Noto Sans', Roboto, Arial, sans-serif
-  --color-surface-01: #19161f
-  --color-surface-02: #1f1e26
-  --color-surface-03: #24202e
-  --color-surface-04: #2e2a38
-  --color-surface-05: #302c3a
-  --color-surface-06: #3a3544
-  --color-text: #d7d4d5
-  --color-text-hl: #fbfbfb
-  --color-text-dim: #ababab
-
-  --color-cyan: #0ed3fe
-  --color-blue: #4600ff
-  --color-magenta: #b000ff
-  --color-violet: #885bff
-  --color-yellow: #fcde00
-  --color-red: #ff2404
-  --color-green: #5fff5f
-
-  --input-height: 32px
-  --font-size: 0.9rem
-  --gap-size: 6px
-  --section-gap: 8px
-
-
-// Hacks 
-
-::-webkit-scrollbar
-  width: 20px
-  height: 20px
-
-::-webkit-scrollbar-track, ::-webkit-scrollbar-corner
-  background-color: transparent
-
-::-webkit-scrollbar-thumb
-  background-color: var(--color-surface-04)
-  border-radius: 20px
-  border: 6px solid transparent
-  background-clip: content-box
-
-  &:hover
-    background-color: var(--color-surface-05)
-
-.material-symbols-outlined
-  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 200, 'opsz' 20
-  vertical-align: bottom
-  position: relative
-  top: 1px
-
-
-html
-  padding: 0
-  margin: 0
-  background-color: var(--color-surface-01)
-
-  color: var(--color-text)
-  font-size: var(--font-size)
-  font-family: var(--font-family)
-  
-
-#root
-  position: fixed
-  top: 0
-  left: 0
-  right: 0
-  bottom: 0
-  display: flex
-  flex-direction: column
-  padding: var(--section-gap)
-  gap: var(--section-gap)
-  zoom: .9
-
-
-a 
-  color: var(--color-text)
-  text-decoration: none
-  cursor: pointer
-
-  &:hover
-    text-decoration: underline
-
-
-main
-  flex-grow: 1
-  display: flex
-  gap: var(--section-gap)
-
-  &.row, &.column
-    align-items: stretch
-
-section
-  display: flex
-  padding: 12px
-  border-radius: 5px
-  background-color: var(--color-surface-02)
-  border: 1px solid transparent
-
-.section-changed
-  border: 1px solid var(--color-violet)
-
-//
-// Helper classes
-//
-
-.nopad
-  padding: 0
-   
-.row
-  display: flex
-  flex-direction: row
-  gap: var(--section-gap)
-    
-.column
-  display: flex
-  flex-direction: column
-  gap: var(--section-gap)
-
-.center
-  display: flex
-  align-items: center
-  justify-content: center
-    
-.grow
-  position: relative
-  flex-grow: 1
-
-.third
-  flex-basis: 30%
-
-.half
-  flex-basis: 50%
-
-.contained
-  position: absolute
-  top: 0
-  left: 0
-  right: 0
-  bottom: 0
-
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
new file mode 100644
index 00000000..8005a845
--- /dev/null
+++ b/frontend/src/index.scss
@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,300;0,400;0,600;0,700;1,300;1,400&display=swap');
+
+:root {
+  --font-family: 'Noto Sans', Roboto, Arial, sans-serif;
+  --color-surface-01: #19161f;
+  --color-surface-02: #1f1e26;
+  --color-surface-03: #24202e;
+  --color-surface-04: #2e2a38;
+  --color-surface-05: #302c3a;
+  --color-surface-06: #3a3544;
+  --color-text: #d7d4d5;
+  --color-text-hl: #fbfbfb;
+  --color-text-dim: #ababab;
+
+  --color-cyan: #0ed3fe;
+  --color-blue: #4600ff;
+  --color-magenta: #b000ff;
+  --color-violet: #885bff;
+  --color-yellow: #fcde00;
+  --color-red: #ff2404;
+  --color-green: #5fff5f;
+
+  --input-height: 32px;
+  --font-size: 0.9rem;
+  --gap-size: 6px;
+  --section-gap: 6px;
+}
+
+// Hacks
+
+::-webkit-scrollbar {
+  width: 20px;
+  height: 20px;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--color-surface-04);
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+
+  &:hover {
+    background-color: var(--color-surface-05);
+  }
+}
+
+.material-symbols-outlined {
+  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 200, 'opsz' 20;
+  vertical-align: bottom;
+  position: relative;
+}
+
+html {
+  padding: 0;
+  margin: 0;
+  background-color: var(--color-surface-01);
+
+  color: var(--color-text);
+  font-size: var(--font-size);
+  font-family: var(--font-family);
+}
+
+#root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--section-gap);
+  gap: var(--section-gap);
+}
+
+a {
+  color: var(--color-text);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+main {
+  flex-grow: 1;
+  display: flex;
+  gap: var(--section-gap);
+
+  &.row,
+  &.column {
+    align-items: stretch;
+  }
+}
+
+section {
+  display: flex;
+  padding: 12px;
+  border-radius: 5px;
+  background-color: var(--color-surface-02);
+  border: 1px solid transparent;
+}
+
+.section-changed {
+  border: 1px solid var(--color-violet);
+}
+
+//
+// Helper classes
+//
+
+.nopad {
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--section-gap);
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--section-gap);
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.grow {
+  position: relative;
+  flex-grow: 1;
+}
+
+.third {
+  flex-basis: 30%;
+}
+
+.half {
+  flex-basis: 50%;
+}
+
+.contained {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}