refactor: repositioned budget container

stakwork · Oct 17, 2023 · 1e1d362 · 1e1d362
1 parent 68c3cec
commit 1e1d362
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/components/App/AppBar/index.tsx b/src/components/App/AppBar/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { Stats } from '~/components/Stats'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
-import { TAboutParams, getAboutData } from '~/network/fetchSourcesData'
+import { Stats } from '~/components/Stats'
+import { getAboutData, TAboutParams } from '~/network/fetchSourcesData'
 import { colors } from '~/utils/colors'
 import { media } from '~/utils/media'
 
@@ -58,7 +58,7 @@ const Header = styled(Flex).attrs({
   position: absolute;
   top: 0px;
   left: 64px;
-  right: 64px;
+  right: 32px;
   transition: opacity 1s;
   z-index: 99;
   padding: 20px 23px;

diff --git a/src/components/Stats/index.tsx b/src/components/Stats/index.tsx
@@ -111,7 +111,7 @@ export const Stats = () => {
           <div className="text">{stats.numTwitterSpace}</div>
         </Stat>
       </StatisticsWrapper>
-      <StatisticsWrapper>
+      <StatisticsBudget>
         <Budget>
           <div className="icon">
             <BudgetIcon />
@@ -122,7 +122,7 @@ export const Stats = () => {
             </p>
           </div>
         </Budget>
-      </StatisticsWrapper>
+      </StatisticsBudget>
     </StatisticsContainer>
   )
 }
@@ -134,13 +134,21 @@ const StatisticsWrapper = styled(Flex).attrs({
   justify: 'flex-start',
 })``
 
-const StatisticsContainer = styled(Flex).attrs({
+const StatisticsBudget = styled(Flex).attrs({
   align: 'center',
   direction: 'row',
   grow: 1,
-  justify: 'between',
+  justify: 'flex-end',
 })``
 
+const StatisticsContainer = styled(Flex).attrs({
+  align: 'center',
+  direction: 'row',
+  grow: 1,
+})`
+  justify-content: between;
+`
+
 const Stat = styled(Flex).attrs({
   align: 'center',
   direction: 'row',