restyling learneth section

libs/remix-ui/home-tab/src/lib/components/homeTabLearn.tsx

@@ -70,7 +70,7 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.learnEth1" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left">
-            <span>
+            <span style={{fontSize: "0.8rem"}}>
               <FormattedMessage id="home.learnEth1Desc" />
             </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>
@@ -83,11 +83,12 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.learnEth2" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">
-            <span>
-            <FormattedMessage id="home.learnEth2Desc" /></span>
+            <span style={{fontSize: "0.8rem"}}>
+              <FormattedMessage id="home.learnEth2Desc" />
+            </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('soliditybeginner')}>
-            <FormattedMessage id="home.getStarted" />
-          </button>
+              <FormattedMessage id="home.getStarted" />
+            </button>
           </div>}
         </label>
         <label className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }})}>
@@ -95,11 +96,12 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.remixAdvanced" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">
-            <span>
-            <FormattedMessage id="home.remixAdvancedDesc" /></span>
+            <span style={{fontSize: "0.8rem"}}>
+              <FormattedMessage id="home.remixAdvancedDesc" />
+            </span>
             <button className="btn btn-sm btn-secondary mt-2" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>
-            <FormattedMessage id="home.getStarted" />
-          </button>
+              <FormattedMessage id="home.getStarted" />
+            </button>
           </div>}
         </label>
       </div>

libs/remix-ui/home-tab/src/lib/components/homeTabTitle.tsx

@@ -52,19 +52,22 @@ function HomeTabTitle() {
 
   return (
     <div className="px-2 pb-2 pt-2 d-flex flex-column border-bottom" id="hTTitleSection">
-      <div className="mr-4 d-flex">
-        <div onClick={() => playRemi()} style={{ filter: themeFilter.filter}} >
-          <BasicLogo classList="align-self-end remixui_home_logoImg" solid={false} />
-        </div>
-        <audio
-          id="remiAudio"
-          muted={false}
-          src="assets/audio/remiGuitar-single-power-chord-A-minor.mp3"
-          ref={remiAudioEl}
-        ></audio>
-      </div>
+      
       <div className="d-flex justify-content-between">
+        <div className='d-flex justify-content-start'>
         <span className="h-80 text-uppercase" style={{ fontSize: 'xx-large', fontFamily: "Noah, sans-serif" }}>Remix</span>
+          <div className="ml-2 d-flex">
+            <div onClick={() => playRemi()} >
+              <img className="" src="assets/img/guitarRemiCroped.webp" style={{height: "3rem"}} alt=""></img>
+            </div>
+            <audio
+              id="remiAudio"
+              muted={false}
+              src="assets/audio/remiGuitar-single-power-chord-A-minor.mp3"
+              ref={remiAudioEl}
+            ></audio>
+          </div>
+        </div>
         <span>
           <CustomTooltip
             placement={'top'}
@@ -147,7 +150,7 @@ function HomeTabTitle() {
           </CustomTooltip>
         </span>
       </div>
-      <b className="pb-1 text-dark" style={{ fontStyle: 'italic' }}>
+      <b className="py-1 text-dark" style={{ fontStyle: 'italic' }}>
         <FormattedMessage id="home.nativeIDE" />
       </b>
       <div className="pb-1" id="hTGeneralLinks">

libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx

@@ -47,7 +47,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   return (
     <div className="d-flex flex-row w-100" data-id="remixUIHTAll">
       <ThemeContext.Provider value={ state.themeQuality }>
-        <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{flex: 2, minWidth: "35%"}}>
+        <div className="px-2 pl-3 justify-content-start d-flex border-right flex-column" id="remixUIHTLeft" style={{ width: 'inherit' }}>
           <HomeTabTitle />
           <HomeTabFile plugin={plugin} />
           <HomeTabLearn plugin={plugin} />