alight icons on tabs

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -31,8 +31,7 @@ export class LandingPage extends ViewPlugin {
 
   render () {
     return <div id='landingPageHomeContainer' className='remixui_homeContainer justify-content-between bg-light d-flex' data-id='landingPageHomeContainer'>
-      <RemixUiHomeTab plugin={this} />
-    </div>
-  }
-
+        <RemixUiHomeTab plugin={this} />
+      </div>
+    }
 }

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

@@ -1,20 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useState, useRef } from 'react'
+import React from 'react'
 
-interface  CustomButtonGroupAsArrowsProps {}
-  
 function CustomButtonGroupAsArrows ({ next, previous }) {
-    return (
-        <div
-            style={{
-            textAlign: "center",
-            }}
-        >
-            <h4>These buttons can be positioned anywhere you want on the screen</h4>
-            <button onClick={previous}>Prev</button>
-            <button onClick={next}>Next</button>
-        </div>
-    )
+  return (
+    <div style={{ textAlign: "center" }}>
+      <h4>These buttons can be positioned anywhere you want on the screen</h4>
+      <button onClick={previous}>Prev</button>
+      <button onClick={next}>Next</button>
+    </div>
+  )
 }
 
 export default CustomButtonGroupAsArrows

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

@@ -136,9 +136,9 @@ function HomeTabFile ({plugin}: HomeTabFileProps) {
         </div>
       </ModalDialog>
       <Toaster message={state.toasterMsg} />
-      <div className="justify-content-start p-2 border-bottom d-flex flex-column" id="hTFileSection">
+      <div className="justify-content-start mt-3 p-2 border-bottom d-flex flex-column" id="hTFileSection">
         <label style={{fontSize: "1rem"}}>Files</label>
-        <button className="btn p-2 border my-1" style={{width: 'fit-content'}} onClick={() => createNewFile()}>New File</button>
+        <button className="btn btn-primary p-2 border my-1" style={{width: 'fit-content'}} onClick={() => createNewFile()}>New File</button>
         <label className="btn p-2 border my-1" style={{width: 'fit-content'}} htmlFor="openFileInput">Open File</label>
         <input title="open file" type="file" id="openFileInput" onChange={(event) => {
           event.stopPropagation()

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

@@ -31,7 +31,12 @@ function HomeTabGetStarted ({plugin}: HomeTabGetStartedProps) {
 
   return (
     <div className="pl-2" id="hTGetStartedSection">
-      <label style={{fontSize: "1.2rem"}}>Get Started<span className="ml-2" style={{ opacity: "0.7"}}>- Project Templates</span></label>
+      <label style={{fontSize: "1.2rem"}}>
+        <span className="mr-2" style={{fontWeight: "bold"}}>
+          Get Started
+        </span>
+        - Project Templates
+      </label>
       <div className="w-100 d-flex flex-column">
         <ThemeContext.Provider value={ themeFilter }>
           <Carousel 

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

@@ -53,19 +53,19 @@ function HomeTabLearn ({plugin}: HomeTabLearnProps) {
           <label className="float-left" style={{fontSize: "1rem"}}>Remix Basics</label>
           {(state.visibleTutorial === VisibleTutorial.Basics) && <div className="pt-2 d-flex flex-column text-left">
             <span>Introduction to Remix's interface and concepts used in Ethereum, as well as the basics of Solidity.</span>
-            <button className="btn-sm mt-2 btn-secondary" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>Get Started</button>
+            <button className="btn-sm mt-2 btn-primaryy" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('basics')}>Get Started</button>
           </div>}
         </button>
         <button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Intermediate }})}>
           <label className="float-left" style={{fontSize: "1rem"}}>Remix Intermediate</label>
           {(state.visibleTutorial === VisibleTutorial.Intermediate) && <div className="pt-2 d-flex flex-column text-left">Using the web3.js to interact with a contract. Using Recorder tool.
-          <button className="btn-sm mt-2 btn-secondary" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('useofweb3js')}>Get Started</button>
+          <button className="btn-sm mt-2 btn-primaryy" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('useofweb3js')}>Get Started</button>
           </div>}
         </button>
         <button className="d-flex flex-column btn border" onClick={() => setState((prevState) => {return { ...prevState, visibleTutorial: VisibleTutorial.Advanced }})}>
           <label className="float-left" style={{fontSize: "1rem"}}>Remix Advanced</label>
           {(state.visibleTutorial === VisibleTutorial.Advanced) && <div className="pt-2 d-flex flex-column text-left">Learn the Proxy Pattern and working with Libraries in Remix. Learn to use the Debugger.
-          <button className="btn-sm mt-2 btn-secondary" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>Get Started</button>
+          <button className="btn-sm mt-2 btn-primaryy" style={{width: 'fit-content'}} onClick={() => startLearnEthTutorial('deploylibraries')}>Get Started</button>
           </div>}
         </button>
       </div>

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

@@ -5,7 +5,7 @@ function HomeTabScamAlert () {
   return (
     <div className="" id="hTScamAlertSection">
       <label className="pl-2 text-danger" style={{fontSize: "1.2rem"}}>Scam Alert</label>
-      <div className="py-2 ml-2 align-self-end mb-2 d-flex flex-column border border-danger">
+      <div className="py-2 ml-2 mb-1 align-self-end mb-2 d-flex flex-column border border-danger">
         <span className="pl-4 mt-2">
           <i className="pr-2 text-danger fas fa-exclamation-triangle"></i>
           <b>Scam Alerts:</b>

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

@@ -69,17 +69,15 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
     }
   }, [])
   
-
-  
   return (
     <div className="d-flex flex-row w-100" id="remixUIHTAll">
       <ThemeContext.Provider value={ state.themeQuality }>
-        <div className="px-2 pl-3 justify-content-between 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={{flex: 2, minWidth: "35%"}}>
           <HomeTabTitle />
           <HomeTabFile plugin={plugin} />
           <HomeTabLearn plugin={plugin} />
         </div>
-        <div className="pl-2 pr-3 justify-content-between d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
+        <div className="pl-2 pr-3 justify-content-start d-flex flex-column" style={{width: "65%"}} id="remixUIHTRight">
           <HomeTabFeatured></HomeTabFeatured>
           <HomeTabFeaturedPlugins plugin={plugin}></HomeTabFeaturedPlugins>
           <HomeTabGetStarted plugin={plugin}></HomeTabGetStarted>

libs/remix-ui/tabs/src/lib/remix-ui-tabs.css

@@ -33,6 +33,7 @@
 .iconImage {
     width: 1rem;
     height: 1rem;
+    align-self: start;
 }
 .active {
     border: 1px solid transparent;