update component positions. fix css

libs/remix-ui/statusbar/src/css/statusbar.css

@@ -27,3 +27,11 @@
 .remixui_statusbar_activelink:active {
   color: var(--danger);
 }
+
+.remixui_statusbar_didyouknow {
+
+}
+
+.remixui_statusbar_custom_padding {
+  padding: 0.421em;
+}

libs/remix-ui/statusbar/src/lib/components/didYouKnow.tsx

@@ -0,0 +1,13 @@
+import { CustomTooltip } from '@remix-ui/helper'
+import React from 'react'
+
+export default function DidYouKnow () {
+  return (
+    <CustomTooltip tooltipText={'Did you know'}>
+      <div className="remixui_statusbar_didyouknow text-white small d-flex align-items-center">
+        <span className="pr-2 far fa-exclamation-triangle text-white fa-regular fa-lightbulb"></span>
+        <div>Did you know?</div>
+      </div>
+    </CustomTooltip>
+  )
+}

libs/remix-ui/statusbar/src/lib/components/scamAlertStatus.tsx

@@ -15,7 +15,7 @@ export default function ScamAlertStatus ({ refs, getReferenceProps }: ScamAlertS
       <CustomTooltip
         tooltipText={"Scam Alerts"}
       >
-        <div className="mr-2 d-flex align-items-center justify-content-center remixui_statusbar_scamAlert" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
+        <div className="mr-1 d-flex align-items-center justify-content-center remixui_statusbar_scamAlert" id="hTScamAlertSection" ref={refs.setReference} {...getReferenceProps()}>
           <span className="pr-2 far fa-exclamation-triangle text-white"></span>
           <span className="text-white font-semibold small">
             <FormattedMessage id="home.scamAlert" />

libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx

@@ -8,6 +8,7 @@ import axios from 'axios'
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 import { StatusBar } from 'apps/remix-ide/src/app/components/status-bar'
 import { StatusBarContextProvider } from '../contexts/statusbarcontext'
+import DidYouKnow from './components/didYouKnow'
 
 export interface RemixUIStatusBarProps {
   statusBarPlugin: StatusBar
@@ -78,9 +79,17 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
             <GitStatus plugin={statusBarPlugin} gitBranchName={gitBranchName} setGitBranchName={setGitBranchName} />
           </div>
           <div className="remixui_statusbar"></div>
-          <div className="remixui_statusbar d-flex flex-row">
-            <ScamAlertStatus refs={refs} getReferenceProps={getReferenceProps} />
-            <AIStatus plugin={statusBarPlugin} aiActive={lightAiUp} isAiActive={isAiActive} setIsAiActive={setIsAiActive} />
+          <div className="remixui_statusbar">
+            <DidYouKnow />
+          </div>
+          <div className="remixui_statusbar"></div>
+          <div className="remixui_statusbar d-flex align-items-center p-0">
+            <div className="remixui_statusbar">
+              <AIStatus plugin={statusBarPlugin} aiActive={lightAiUp} isAiActive={isAiActive} setIsAiActive={setIsAiActive} />
+            </div>
+            <div className="remixui_statusbar bg-warning remixui_statusbar_custom_padding d-flex justify-center align-items-center">
+              <ScamAlertStatus refs={refs} getReferenceProps={getReferenceProps} />
+            </div>
           </div>
         </div>
       </StatusBarContextProvider>