fix: subnets & pods page

Author: levanion

apps/ui/src/modals/AIChatModal/components/ChatMessageList/components/AiMessageMarkdown.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components'
 import ReactMarkdown from 'react-markdown'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import { atomDark, prism } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import remarkGfm from 'remark-gfm'
 import { useModal } from 'hooks'
 import { memo, useEffect, useState } from 'react'
@@ -133,7 +133,7 @@ const AiMessageMarkdown = ({ isReply = false, children }: { isReply?: boolean; c
           return !inline && match ? (
             <SyntaxHighlighter
               children={String(children).replace(/\n$/, '')}
-              style={atomDark as any}
+              style={prism as any}
               language={match[1]}
               PreTag='div'
               {...props}

apps/ui/src/pages/ApiKeys/ApiKeys.tsx

@@ -56,8 +56,7 @@ const ApiKeys = () => {
 
         <ButtonPrimary
           onClick={() => navigate('/api-key/create-api-key')}
-          leftIcon={Add}
-          size={Button.sizes?.SMALL}
+          size={Button.sizes?.MEDIUM}
         >
           {t('create-api-key')}
         </ButtonPrimary>

apps/ui/src/pages/ApiKeys/CreateApiKey/CreateApikeysForm.tsx

@@ -23,16 +23,15 @@ function CreateApiKeyForm() {
       <FormikProvider value={formik}>
         <StyledSectionWrapper>
           <StyledHeaderGroup className='header_group'>
-            <div>
+            <div style={{ width: '100%' }}>
               <StyledSectionTitle>Add API Key</StyledSectionTitle>
-              <StyledSectionDescription>Here is your API Key.</StyledSectionDescription>
             </div>
 
             <StyledButtonWrapper>
               <BackButton />
               <ButtonPrimary
                 onClick={formik?.handleSubmit}
-                size={Button.sizes?.SMALL}
+                size={Button.sizes?.MEDIUM}
                 disabled={isLoading}
               >
                 {isLoading ? <Loader size={32} /> : 'Save'}

apps/ui/src/pages/Navigation/MainNavigation.tsx

@@ -37,6 +37,7 @@ import Integrations from 'share-ui/components/Icon/Icons/components/integrations
 import FineTuning from 'share-ui/components/Icon/Icons/components/FineTuning'
 // eslint-disable-next-line import/no-named-as-default
 import Cloud from 'share-ui/components/Icon/Icons/components/Cloud'
+import { API } from 'share-ui/components/Icon/Icons'
 
 const MainNavigation = ({ user }: { user: any }) => {
   const domainEnv = import.meta.env
@@ -177,22 +178,10 @@ const MainNavigation = ({ user }: { user: any }) => {
         </StyledLi>
       )} */}
 
-        {isModel && (
-          <Tooltip content={t('model')} position={Tooltip.positions.LEFT}>
-            <StyledLi
-              isActive={includes(active, 'models')}
-              onClick={() => onHandleClick('/models')}
-            >
-              <FineTuning size={30} />
-              {includes(active, 'models') && <StyledCorner />}
-            </StyledLi>
-          </Tooltip>
-        )}
-        
         <Tooltip content={'Pods'} position={Tooltip.positions.LEFT}>
           <StyledLi
             isActive={includes(active, 'pods')}
-            onClick={() => onHandleClick('/pods')}
+            onClick={() => onHandleClick('/pods/create-pod')}
           >
             <Cloud size={30} fill={includes(active, 'pods') ? '#ffffff' : '#000000'} />
             {includes(active, 'pods') && <StyledCorner />}
@@ -214,6 +203,27 @@ const MainNavigation = ({ user }: { user: any }) => {
           </Tooltip>
         )}
 
+        {isModel && (
+          <Tooltip content={t('model')} position={Tooltip.positions.LEFT}>
+            <StyledLi
+              isActive={includes(active, 'models')}
+              onClick={() => onHandleClick('/models')}
+            >
+              <FineTuning size={30} />
+              {includes(active, 'models') && <StyledCorner />}
+            </StyledLi>
+          </Tooltip>
+        )}
+
+        <Tooltip content={t('api-keys')} position={Tooltip.positions.LEFT}>
+          <StyledLi
+            isActive={includes(active, 'api-key')}
+            onClick={() => onHandleClick('/api-key')}
+          >
+            <StyledAPIIcon size={40} />
+          </StyledLi>
+        </Tooltip>
+
         {/* {isDiscover && (
           <Tooltip content={t('discover')} position={Tooltip.positions.LEFT}>
             <StyledLi
@@ -293,14 +303,14 @@ const StyledLi = styled.li<{ isActive?: boolean }>`
     border-radius: 100px;
     background: #000;
 
-     
-  
     span{
       color: #FFF;
     }
+    
 
     path {
     stroke: #FFF;
+  
     }
 `}
 `
@@ -410,3 +420,8 @@ const StyledCorner = styled.div`
   top: 8px; /* Adjust this value based on your design */
   right: -16px; /* Position the left corner */
 `
+const StyledAPIIcon = styled(API)`
+  path {
+    fill: ${({ theme }) => theme.body.iconColor};
+  }
+`