From f6e4abc0a99152d12eedb21b8ca35636d3bcac8c Mon Sep 17 00:00:00 2001
From: Aashutosh Rathi <aashutoshrathi@gmail.com>
Date: Wed, 29 Jun 2022 15:53:52 +0530
Subject: [PATCH 1/2] fix(css): repeated classess for Wrapper element

---
 src/pages/palette.tsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/pages/palette.tsx b/src/pages/palette.tsx
index 2986c33..c46c221 100644
--- a/src/pages/palette.tsx
+++ b/src/pages/palette.tsx
@@ -16,20 +16,11 @@ import {useGlobalState} from '../global-state'
 import {Color} from '../types'
 import {colorToHex, getColor} from '../utils'
 
-const Wrapper = styled.div<{backgroundColor: string}>`
-  --color-text: ${props => readableColor(props.backgroundColor)};
-  --color-background: ${props => props.backgroundColor};
-  --color-background-secondary: ${props => mix(readableColor(props.backgroundColor), props.backgroundColor, 0.9)};
-  --color-background-secondary-hover: ${props =>
-    mix(readableColor(props.backgroundColor), props.backgroundColor, 0.85)};
-  --color-border: ${props => mix(readableColor(props.backgroundColor), props.backgroundColor, 0.75)};
-
+const Wrapper = styled.div`
   display: grid;
   grid-template-columns: 300px 1fr;
   grid-template-rows: auto 1fr;
   grid-template-areas: 'header header' 'sidebar main';
-  color: var(--color-text);
-  background-color: var(--color-background);
   height: 100vh;
 `
 
@@ -57,7 +48,23 @@ export function Palette({paletteId = '', children}: React.PropsWithChildren<Rout
   }
 
   return (
-    <Wrapper backgroundColor={palette.backgroundColor}>
+    <Wrapper
+      style={
+        {
+          '--color-text': readableColor(palette.backgroundColor),
+          '--color-background': palette.backgroundColor,
+          '--color-background-secondary': mix(readableColor(palette.backgroundColor), palette.backgroundColor, 0.9),
+          '--color-background-secondary-hover': mix(
+            readableColor(palette.backgroundColor),
+            palette.backgroundColor,
+            0.85
+          ),
+          '--color-border': mix(readableColor(palette.backgroundColor), palette.backgroundColor, 0.75),
+          color: readableColor(palette.backgroundColor),
+          backgroundColor: palette.backgroundColor
+        } as React.CSSProperties
+      }
+    >
       <header
         style={{
           gridArea: 'header',

From c8e1b68f9ffffbae98ec008880136c62e602e62f Mon Sep 17 00:00:00 2001
From: Aashutosh Rathi <aashutoshrathi@gmail.com>
Date: Sun, 3 Jul 2022 23:51:38 +0530
Subject: [PATCH 2/2] chore: auto-close tags

---
 src/app.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 781de82..5ebb553 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -29,8 +29,8 @@ export function App() {
       <Router>
         <Index path={`${routePrefix}/`} />
         <Palette path={`${routePrefix}/local/:paletteId`}>
-          <Scale path="scale/:scaleId"></Scale>
-          <Curve path="curve/:curveId"></Curve>
+          <Scale path="scale/:scaleId" />
+          <Curve path="curve/:curveId" />
         </Palette>
         <NotFound default />
       </Router>