Adapt logos and colors

alephium · Dec 30, 2024 · de893f9 · de893f9
1 parent b9ef64b
commit de893f9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/apps/desktop-wallet/src/components/AlephiumLogo.tsx b/apps/desktop-wallet/src/components/AlephiumLogo.tsx
@@ -20,11 +20,11 @@ import styled from 'styled-components'
 
 import { ReactComponent as AlephiumLogoSVG } from '@/images/alephium_logo_monochrome.svg'
 
-export default styled(AlephiumLogoSVG)`
+export default styled(AlephiumLogoSVG)<{ contrasted?: boolean }>`
   width: 38px;
   height: auto;
 
   path {
-    fill: ${({ theme }) => theme.font.contrastPrimary} !important;
+    fill: ${({ theme, contrasted }) => (contrasted ? theme.font.contrastPrimary : theme.font.primary)} !important;
   }
 `
diff --git a/apps/desktop-wallet/src/components/AnimatedBackground.tsx b/apps/desktop-wallet/src/components/AnimatedBackground.tsx
@@ -112,16 +112,16 @@ const AnimatedBackground = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          opacity: isDarkTheme ? 0.5 : 0.8
+          opacity: isDarkTheme ? 0.6 : 1
         }}
       >
         {circlesDimensions.map((dim, index) => {
           const circleAnimation = [circle1, circle2, circle3, circle4, circle5][index]
           const backgroundColors = [
             isDarkTheme ? '#120096' : '#c689ff',
-            isDarkTheme ? '#ff8119' : '#ffd4b6',
+            isDarkTheme ? '#ab2cdd' : '#ffd4b6',
             isDarkTheme ? '#ff6969' : '#ffaaaa',
-            isDarkTheme ? '#e484ff' : '#ffb7ff',
+            isDarkTheme ? '#8f2cdb' : '#ffb7ff',
             isDarkTheme ? '#1600da' : '#ff9bc8'
           ]
           return (

diff --git a/apps/desktop-wallet/src/pages/HomePage/UnlockPanel.tsx b/apps/desktop-wallet/src/pages/HomePage/UnlockPanel.tsx
@@ -164,5 +164,7 @@ const AlephiumLogoContainer = styled.div`
   width: 100px;
   height: 100px;
   border-radius: 100px;
-  background-color: ${({ theme }) => theme.bg.contrast};
+  background-color: ${({ theme }) => theme.bg.background1};
+  border: 1px solid ${({ theme }) => theme.border.secondary};
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
 `