Merge pull request #734 from alephium/xplr-alph-logo-import

Change Alephium logo import style
alephium · Jul 15, 2024 · e67b513 · e67b513
2 parents f4ff9bf + 921a258
commit e67b513
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/apps/explorer/src/components/AssetLogo.tsx b/apps/explorer/src/components/AssetLogo.tsx
@@ -25,7 +25,7 @@ import styled, { css, useTheme } from 'styled-components'
 import { queries } from '@/api'
 import { useAssetMetadata } from '@/api/assets/assetsHooks'
 import NFTThumbnail from '@/components/NFTThumbnail'
-import AlephiumLogoSVG from '@/images/alephium_logo_monochrome.svg'
+import { ReactComponent as AlephiumLogo } from '@/images/alephium_logo_monochrome.svg'
 import { NFTMetadataWithFile } from '@/types/assets'
 
 interface AssetLogoProps {
@@ -56,7 +56,7 @@ const AssetLogo = (props: AssetLogoProps) => {
   return (
     <AssetLogoStyled className={className} {...props}>
       {assetId === ALPH.id ? (
-        <FramedImage src={AlephiumLogoSVG} borderRadius="full" isAlph />
+        <FramedImage borderRadius="full" isAlph />
       ) : assetType === 'fungible' ? (
         metadata.verified ? (
           <FramedImage src={metadata.logoURI} borderRadius="full" />
@@ -116,7 +116,7 @@ const FramedImage = ({
       }}
       isAlph={isAlph}
     >
-      <Image style={{ backgroundImage: `url(${src})` }} />
+      {isAlph ? <AlephiumLogo /> : <Image style={{ backgroundImage: `url(${src})` }} />}
     </ImageFrame>
   )
 }
@@ -142,14 +142,15 @@ const Image = styled.div`
 
 const ImageFrame = styled.div<{ isAlph?: boolean }>`
   overflow: hidden;
+  display: flex;
   height: 100%;
   width: 100%;
   background-color: ${({ theme }) => theme.bg.tertiary};
 
   ${({ isAlph }) =>
     isAlph &&
     css`
-      background: linear-gradient(218.53deg, #0075ff 9.58%, #d340f8 86.74%);
+      background: linear-gradient(218.53deg, #0026ff 9.58%, #f840a5 86.74%);
     `};
 `
 

diff --git a/apps/explorer/src/components/SearchBar.tsx b/apps/explorer/src/components/SearchBar.tsx
@@ -131,7 +131,7 @@ const SearchIcon = styled(RiSearchLine)`
   color: ${({ theme }) => theme.font.primary};
   position: absolute;
   right: 20px;
-  top: 15px;
+  top: 13px;
   z-index: 11;
   height: 21px;
   cursor: pointer;
@@ -142,7 +142,7 @@ const SearchInput = styled.input`
   width: 100%;
   height: 100%;
   border: 1px solid ${({ theme }) => theme.border.primary};
-  border-radius: 6px;
+  border-radius: 50px;
   padding: 0 50px 0 20px;
   color: ${({ theme }) => theme.font.primary};
   background-color: ${({ theme }) => theme.bg.primary};

diff --git a/apps/explorer/src/pages/HomePage/HomePage.tsx b/apps/explorer/src/pages/HomePage/HomePage.tsx
@@ -109,7 +109,7 @@ const HomePage = () => {
     <StyledSection>
       {width && width > deviceSizes.mobile && (
         <Search>
-          <h2>{t('Search')}</h2>
+          <SearchHeader>{t('Search')}</SearchHeader>
           <SearchBar />
         </Search>
       )}
@@ -274,6 +274,10 @@ const Search = styled.div`
   width: 60%;
 `
 
+const SearchHeader = styled.h2`
+  margin-left: 20px;
+`
+
 const StatisticsSection = styled.div`
   flex: 1;
   min-width: 300px;