fix(icons-alginment): adjust general icons colors and screens alignment

safe-global · Oct 18, 2024 · 009b9c2 · 009b9c2
1 parent d2c865b
commit 009b9c2
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 57 deletions.
diff --git a/apps/tx-builder/src/components/CreateNewBatchCard.tsx b/apps/tx-builder/src/components/CreateNewBatchCard.tsx
@@ -1,22 +1,26 @@
-import { useRef } from 'react'
+import { useContext, useRef } from 'react'
 import { alpha } from '@material-ui/core'
 import Hidden from '@material-ui/core/Hidden'
 import styled from 'styled-components'
 import { useTheme } from '@material-ui/core/styles'
 
-import { ReactComponent as CreateNewBatchSVG } from '../assets/add-new-batch.svg'
+import { ReactComponent as CreateNewBatchLightSvg } from '../assets/new-batch-light.svg'
+import { ReactComponent as CreateNewBatchDarkSvg } from '../assets/new-batch-dark.svg'
+import { ReactComponent as ArrowBlock } from '../assets/arrowtotheblock.svg'
 import useDropZone from '../hooks/useDropZone'
 import { useMediaQuery } from '@material-ui/core'
 import { Icon } from './Icon'
 import Text from './Text'
 import ButtonLink from './buttons/ButtonLink'
+import { EModes, ThemeModeContext } from '../theme/SafeThemeProvider'
 
 type CreateNewBatchCardProps = {
   onFileSelected: (file: File | null) => void
 }
 
 const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => {
   const theme = useTheme()
+  const mode = useContext(ThemeModeContext)
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'))
 
   const fileRef = useRef<HTMLInputElement | null>(null)
@@ -40,65 +44,91 @@ const CreateNewBatchCard = ({ onFileSelected }: CreateNewBatchCardProps) => {
   return (
     <Wrapper isSmallScreen={isSmallScreen}>
       <Hidden smDown>
-        <CreateNewBatchSVG />
+        {mode === EModes.DARK ? <CreateNewBatchDarkSvg /> : <CreateNewBatchLightSvg />}
+        <StyledArrowBlock />
       </Hidden>
-      <StyledDragAndDropFileContainer
-        {...dropHandlers}
-        dragOver={isOverDropZone}
-        fullWidth={isSmallScreen}
-        error={isAcceptError}
-      >
-        {isAcceptError ? (
-          <StyledText variant="body1" error={isAcceptError}>
-            The uploaded file is not a valid JSON file
-          </StyledText>
-        ) : (
-          <>
-            <Icon type="termsOfUse" size="sm" />
-            <StyledText variant="body1">Drag and drop a JSON file or</StyledText>
-            <StyledButtonLink color="secondary" onClick={handleBrowse}>
-              choose a file
-            </StyledButtonLink>
-          </>
-        )}
-      </StyledDragAndDropFileContainer>
-      <input
-        ref={fileRef}
-        id="logo-input"
-        type="file"
-        onChange={handleFileSelected}
-        accept=".json"
-        hidden
-      />
+
+      <StyledCreateBatchContent>
+        <StyledText variant="body1">Start creating a new batch </StyledText>
+        <StyledText variant="body1">or</StyledText>
+        <StyledDragAndDropFileContainer
+          {...dropHandlers}
+          dragOver={isOverDropZone}
+          fullWidth={isSmallScreen}
+          error={isAcceptError}
+        >
+          {isAcceptError ? (
+            <StyledText variant="body1" error={isAcceptError}>
+              The uploaded file is not a valid JSON file
+            </StyledText>
+          ) : (
+            <>
+              <Icon type="termsOfUse" size="sm" />
+              <StyledText variant="body1">Drag and drop a JSON file or</StyledText>
+              <StyledButtonLink color="secondary" onClick={handleBrowse}>
+                choose a file
+              </StyledButtonLink>
+            </>
+          )}
+        </StyledDragAndDropFileContainer>
+        <input
+          ref={fileRef}
+          id="logo-input"
+          type="file"
+          onChange={handleFileSelected}
+          accept=".json"
+          hidden
+        />
+      </StyledCreateBatchContent>
     </Wrapper>
   )
 }
 
 export default CreateNewBatchCard
 
 const Wrapper = styled.div<{ isSmallScreen: boolean }>`
+  text-align: center;
+  position: relative;
   margin-top: ${({ isSmallScreen }) => (isSmallScreen ? '0' : '64px')};
 `
 
+const StyledArrowBlock = styled(ArrowBlock)`
+  position: absolute;
+  left: -2px;
+  top: 7rem;
+`
+
+const StyledCreateBatchContent = styled.div`
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`
+
 const StyledDragAndDropFileContainer = styled.div<{
   dragOver: Boolean
   fullWidth: boolean
   error: Boolean
 }>`
   box-sizing: border-box;
-  max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '420px')};
+  max-width: ${({ fullWidth }) => (fullWidth ? '100%' : '430px')};
+  width: 100%;
   border: 2px dashed
     ${({ theme, error }) => (error ? theme.palette.error.main : theme.palette.secondary.dark)};
   border-radius: 8px;
   background-color: ${({ theme, error }) =>
     error ? alpha(theme.palette.error.main, 0.7) : theme.palette.secondary.background};
   padding: 24px;
-  margin: 24px auto 0 auto;
+  margin: 6px auto;
 
   display: flex;
   justify-content: center;
   align-items: center;
 
+  svg {
+    margin-right: 4px;
+  }
+
   ${({ dragOver, error, theme }) => {
     if (dragOver) {
       return `
@@ -118,7 +148,6 @@ const StyledDragAndDropFileContainer = styled.div<{
 
 const StyledText = styled(Text)<{ error?: Boolean }>`
   && {
-    margin-left: 4px;
     color: ${({ error, theme }) =>
       error ? theme.palette.common.white : theme.palette.text.secondary};
   }

diff --git a/apps/tx-builder/src/components/FixedIcon/index.tsx b/apps/tx-builder/src/components/FixedIcon/index.tsx
@@ -61,13 +61,14 @@ export type IconTypes = keyof IconType
 
 type Props = {
   type: IconTypes
+  className?: string
 }
 
 /**
  * The `FixedIcon` renders an icon
  */
-function FixedIcon({ type }: Props): React.ReactElement {
-  return <StyledIcon>{icons[type]}</StyledIcon>
+function FixedIcon({ type, className }: Props): React.ReactElement {
+  return <StyledIcon className={className}>{icons[type]}</StyledIcon>
 }
 
 export default FixedIcon
diff --git a/apps/tx-builder/src/components/TransactionBatchListItem.tsx b/apps/tx-builder/src/components/TransactionBatchListItem.tsx
@@ -172,7 +172,7 @@ const TransactionBatchListItem = memo(
                     size="medium"
                     aria-label="Expand transaction details"
                   >
-                    <FixedIcon type={'chevronDown'} />
+                    <StyledArrow isTxExpanded={isTxExpanded} type={'chevronDown'} />
                   </TransactionActionButton>
                 </Tooltip>
               )}
@@ -224,7 +224,17 @@ const TransactionListItem = styled.li`
   margin-bottom: 8px;
 `
 
-// transaction postion dot styles
+const StyledArrow = styled(FixedIcon)<{ isTxExpanded: boolean }>`
+  .icon-color {
+    fill: #b2b5b2;
+  }
+  ${({ isTxExpanded }) =>
+    isTxExpanded &&
+    `
+    transform: rotateZ(180deg);
+
+  `}
+`
 
 const PositionWrapper = styled.div`
   display: flex;

diff --git a/apps/tx-builder/src/components/Wrapper/index.tsx b/apps/tx-builder/src/components/Wrapper/index.tsx
@@ -1,25 +1,27 @@
 import React from 'react'
 import styled from 'styled-components'
 
-function Wrapper({ children }: { children: React.ReactNode }) {
+function Wrapper({ children, centered }: { children: React.ReactNode; centered?: boolean }) {
   return (
-    <StyledWrapper>
+    <StyledWrapper centered={centered}>
       <section>{children}</section>
     </StyledWrapper>
   )
 }
 
-const StyledWrapper = styled.main`
+const StyledWrapper = styled.main<{ centered?: boolean }>`
   width: 100%;
   min-height: 100%;
+  display: flex;
   background: ${({ theme }) => theme.palette.background.main};
   color: ${({ theme }) => theme.palette.text.primary};
 
   > section {
-    padding: 120px 48px 48px;
+    width: 100%;
+    padding: 120px 4rem 48px;
     box-sizing: border-box;
-    max-width: 1024px;
     margin: 0 auto;
+    max-width: ${({ centered }) => (centered ? '1000px' : '1500px')};
   }
 `
 

diff --git a/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx b/apps/tx-builder/src/components/modals/DeleteBatchFromLibrary.tsx
@@ -21,7 +21,7 @@ const DeleteBatchFromLibrary = ({ batch, onClick, onClose }: DeleteBatchFromLibr
       body={
         <StyledModalBodyWrapper>
           <StyledModalDot color="primary">
-            <Text color="white">{batch.transactions.length}</Text>
+            <Text color="background">{batch.transactions.length}</Text>
           </StyledModalDot>
 
           <StyledModalText>{`${batch.name} batch will be permanently deleted`}</StyledModalText>
@@ -58,7 +58,6 @@ const StyledModalDot = styled(Dot)`
     height: 24px;
     width: 24px;
     min-width: 24px;
-    background-color: #566976;
 
     position: absolute;
     top: 22px;

diff --git a/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx b/apps/tx-builder/src/components/modals/DeleteBatchModal.tsx
@@ -19,7 +19,7 @@ const DeleteBatchModal = ({ count, onClick, onClose }: DeleteBatchModalProps) =>
       body={
         <StyledModalBodyWrapper>
           <StyledModalDot color="primary">
-            <Text color="white">{count}</Text>
+            <Text color="background">{count}</Text>
           </StyledModalDot>
 
           <StyledModalText>{`transaction${count > 1 ? 's' : ''}`} will be cleared</StyledModalText>
@@ -55,7 +55,6 @@ const StyledModalDot = styled(Dot)`
   height: 24px;
   width: 24px;
   min-width: 24px;
-  background-color: #566976;
 
   position: absolute;
   top: 22px;

diff --git a/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx b/apps/tx-builder/src/components/modals/DeleteTransactionModal.tsx
@@ -26,7 +26,7 @@ const DeleteTransactionModal = ({
       body={
         <StyledModalBodyWrapper>
           <StyledModalDot color="primary">
-            <Text color="white">{positionLabel}</Text>
+            <Text color="background">{positionLabel}</Text>
           </StyledModalDot>
 
           <StyledModalText>{`${txDescription} will be permanently deleted from the batch`}</StyledModalText>
@@ -62,7 +62,6 @@ const StyledModalDot = styled(Dot)`
   height: 24px;
   width: 24px;
   min-width: 24px;
-  background-color: #566976;
 
   position: absolute;
   top: 22px;

diff --git a/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx b/apps/tx-builder/src/components/modals/SuccessBatchCreationModal.tsx
@@ -35,7 +35,7 @@ const SuccessBatchCreationModal = ({ count, onClick, onClose }: SuccessBatchCrea
           {/* Text */}
           <StyledTextWrapper>
             <StyledModalDot color="primary">
-              <Text color="white">{count}</Text>
+              <Text color="background">{count}</Text>
             </StyledModalDot>
 
             <StyledModalText>Transaction Batch in the queue.</StyledModalText>
@@ -76,8 +76,6 @@ const StyledModalDot = styled(Dot)`
   width: 24px;
   min-width: 24px;
   top: -1px;
-
-  background-color: #566976;
 `
 
 const StyledModalText = styled(Text)`

diff --git a/apps/tx-builder/src/pages/CreateTransactions.tsx b/apps/tx-builder/src/pages/CreateTransactions.tsx
@@ -40,7 +40,7 @@ const CreateTransactions = () => {
 
   return (
     <>
-      <TransactionsSectionWrapper item xs={12} md={6}>
+      <TransactionsSectionWrapper sticky={!!transactions.length} item xs={12} md={6}>
         {transactions.length > 0 ? (
           <>
             <TransactionsBatchList
@@ -110,9 +110,9 @@ const CreateTransactions = () => {
 
 export default CreateTransactions
 
-const TransactionsSectionWrapper = styled(Grid)`
+const TransactionsSectionWrapper = styled(Grid)<{ sticky?: boolean }>`
   position: sticky;
-  top: 40px;
+  top: 80px;
   align-self: flex-start;
 `
 

diff --git a/apps/tx-builder/src/pages/Dashboard.tsx b/apps/tx-builder/src/pages/Dashboard.tsx
@@ -106,7 +106,7 @@ const Dashboard = (): ReactElement => {
 
   return (
     <Wrapper>
-      <Grid alignItems="flex-start" container justifyContent="center" spacing={6}>
+      <Grid container justifyContent="center" alignItems="center" spacing={6}>
         <AddNewTransactionFormWrapper item xs={12} md={6}>
           <Grid container alignItems="center">
             <Grid item xs={6}>

diff --git a/apps/tx-builder/src/pages/ReviewAndConfirm.tsx b/apps/tx-builder/src/pages/ReviewAndConfirm.tsx
@@ -77,7 +77,7 @@ const ReviewAndConfirm = () => {
 
   return (
     <>
-      <Wrapper>
+      <Wrapper centered>
         <StyledTitle>Review and Confirm</StyledTitle>
 
         <TransactionsBatchList