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,8 +83,9 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.learnEth2" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">
-            <span>
+            <span style={{fontSize: "0.8rem"}}>
-            <FormattedMessage id="home.learnEth2Desc" /></span>
+              <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>
@@ -95,8 +96,9 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
             <FormattedMessage id="home.remixAdvanced" />
           </label>
           {(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">
-            <span>
+            <span style={{fontSize: "0.8rem"}}>
-            <FormattedMessage id="home.remixAdvancedDesc" /></span>
+              <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>

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

@@ -52,9 +52,13 @@ 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}} >
+      <div className="d-flex justify-content-between">
-          <BasicLogo classList="align-self-end remixui_home_logoImg" solid={false} />
+        <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"
@@ -63,8 +67,7 @@ function HomeTabTitle() {
               ref={remiAudioEl}
             ></audio>
           </div>
-      <div className="d-flex justify-content-between">
+        </div>
-        <span className="h-80 text-uppercase" style={{ fontSize: 'xx-large', fontFamily: "Noah, sans-serif" }}>Remix</span>
         <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} />