Style fixes

wrenhawth · Jul 1, 2024 · d43ca5e · d43ca5e
1 parent 9fc190e
commit d43ca5e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/App.css b/src/App.css
@@ -134,6 +134,9 @@ sl-select::part(base) {
   border-radius: 25%;
 }
 
+.curve-arrow {
+  font-size: 32px;;
+}
 .octopus {
   margin: 0;
   /* writing-mode: vertical-lr;

diff --git a/src/App.tsx b/src/App.tsx
@@ -166,12 +166,15 @@ function App() {
   return (
     <>
       <header className='app-header'>
-        <h1>OctoLooper</h1>
+        <h1 style={{ margin: 0 }}>OctoLooper</h1>
         <RhythmSelector setSelectedRhythm={setDrumPreset} selectedRhythm={drumPreset} />
       </header>
       <main className="main">
         <div className='top'>
-          <h3 style={{ marginBottom: 0 }}>❔↓ Mix It Up ↓❔</h3>
+          <h3 style={{ margin: 0 }}>
+            <span className='curve-arrow'> ⤹ </span> Mix It Up <span className='curve-arrow'> ⤸ </span>
+
+          </h3>
 
           <SingleChord chordSymbol={chordList[0]} setChord={getUpdateChordInListFunction(0)} />
         </div>

diff --git a/src/components/SingleChord.tsx b/src/components/SingleChord.tsx
@@ -42,7 +42,7 @@ export const SingleChord = (props: Props) => {
                 <SlIcon name="arrow-right" />
             </SlButton>
         </div>
-        <SlButton variant="default" size="medium" circle onClick={shiftMood}>
+        <SlButton variant="default" size="small" circle onClick={shiftMood}>
                 {isMajorChord && <SlIcon name="emoji-smile" />}
                 {!isMajorChord && <SlIcon name="emoji-smile-upside-down" />}
         </SlButton>