Wavect/mockups: Implemented Design feedback from Yoonhee

packages/boba/gateway/src/components/icons/BobaLogo.js

@@ -1,11 +1,9 @@
 import * as React from "react"
 import { useTheme } from '@mui/material';
+import { ReactComponent as LogoBoba2 } from 'images/boba2/logo-boba2.svg';
+import {ReactComponent as LogoBoba2dark} from 'images/boba2/logo-boba2-dark.svg';
 
-import {ReactComponent as LogoBoba2} from '../../images/boba2/logo-boba2.svg';
-import {ReactComponent as LogoBoba2dark} from '../../images/boba2/logo-boba2-dark.svg';
-
-
-function BobaLogo({ dark = false, selected = true }) {
+function BobaLogo() {
 
   const theme = useTheme();
 

packages/boba/gateway/src/components/select/Select.js

@@ -14,27 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License. */
 
 import React from 'react';
-import {Select as MuiSelect, MenuItem, useTheme, Typography, Box} from '@mui/material';
+import ReactSelect from 'react-select';
+import { Select as MuiSelect, MenuItem, useTheme, Typography, Box } from '@mui/material';
 import * as styles from './Select.module.scss';
 import * as S from './Select.style';
+import { ArrowDropDownOutlined } from '@mui/icons-material';
 import {
   Option,
   MultiValue,
   SingleValue
 } from './Custom.select';
 
 function Select({
-                  label,
-                  value,
-                  options,
-                  onSelect,
-                  loading,
-                  error = '',
-                  className,
-                  newSelect = false,
-                  isMulti,
-                  isLoading = false,
-                }) {
+  label,
+  value,
+  options,
+  onSelect,
+  loading,
+  error = '',
+  className,
+  newSelect = false,
+  isMulti,
+  isLoading = false,
+}) {
   const theme = useTheme();
   const selected = options.find(i => i.value === value);
 
@@ -61,16 +63,15 @@ function Select({
   }
 
   const renderLoading = (
-    <S.SelectedContainer className={[styles.selected, styles.loading].join(' ')}>
+    <S.SelectedContainer className={[ styles.selected, styles.loading ].join(' ')}>
       Loading...
     </S.SelectedContainer>
   );
 
-  console.log("VALUE", value);
-
   const renderSelect = (
     <>
       <MuiSelect
+        IconComponent={() => <ArrowDropDownOutlined />}
         className={styles.select}
         value={value}
         onChange={onSelect}
@@ -80,8 +81,7 @@ function Select({
             '&& .Mui-selected': {
               backgroundColor: 'transparent !important',
               color: theme.palette.secondary.main,
-            },
-          }
+            },}
         }}
       >
         {options.map((i, index) => (
@@ -94,7 +94,7 @@ function Select({
                 <Typography variant="body2">
                   {i.title}
                 </Typography>
-                <Typography variant="body3" sx={{opacity: 0.65, color: 'inherit'}}>
+                <Typography variant="body3" sx={{ opacity: 0.65, color: 'inherit' }}>
                   {i.description}
                 </Typography>
               </div>
@@ -108,10 +108,9 @@ function Select({
           <div className={styles.subTitle}>{selected ? selected.subTitle : ''}</div>
         </div>
         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M8.71038 12.4393C9.29616 13.0251 10.2459 13.0251 10.8317 12.4393L13.9814 9.28962C14.9264 8.34468 14.2571 6.72896 12.9208 6.72896L6.62132 6.72896C5.28496 6.72896 4.61571 8.34467 5.56066 9.28962L8.71038 12.4393Z"
+          <path d="M8.71038 12.4393C9.29616 13.0251 10.2459 13.0251 10.8317 12.4393L13.9814 9.28962C14.9264 8.34468 14.2571 6.72896 12.9208 6.72896L6.62132 6.72896C5.28496 6.72896 4.61571 8.34467 5.56066 9.28962L8.71038 12.4393Z"
             fill={theme.palette.text.primary}
-            fillOpacity="0.45"/>
+            fillOpacity="0.45" />
         </svg>
       </S.SelectedContainer>
     </>
@@ -124,17 +123,53 @@ function Select({
       className
     ].join(' ')}>
       {label && <Box className={styles.label}>{label}</Box>}
-      <Select
-        onSelect={(e) => {
-          onSelect({
-            value: e.target.value,
-            label: e.target.value,
+      <ReactSelect
+        value={value}
+        onChange={onSelect}
+        isMulti={isMulti}
+        options={options}
+        isLoading={isLoading}
+        styles={{
+          control: (base) => ({
+            ...base,
+            background: theme.palette.background.default,
+            borderRadius: theme.palette.primary.borderRadius,
+            padding: '5px 10px',
+            width: '100%',
+            border: '1px solid rgba(255, 255, 255, 0.14)'
+          }),
+          indicatorSeparator: (base) => ({
+            ...base,
+            display: 'none',
+          }),
+          container: (base) => ({
+            ...base,
+            background: 'none'
+          }),
+          singleValue: (base) => ({
+            ...base,
+            background: 'transparent',
+            color: theme.palette.secondary.text,
+            padding: '5px'
+          }),
+          multiValue: (base) => ({
+            ...base,
+            background: theme.palette.background.secondary,
+            color: theme.palette.secondary.text,
+            marginRight: '5px',
+            paddingRight: '5px',
+          }),
+          valueContainer: (base) => ({
+            ...base,
+            background: 'none',
           })
         }}
-        value={value.value}
-        options={options.map(i => ({value: i.value, title: i.label}))}
-        isLoading={isLoading}
-        multiple={isMulti}
+        theme={theme}
+        components={{
+          Option,
+          MultiValue,
+          SingleValue
+        }}
       />
     </Box>
   }

packages/boba/gateway/src/containers/VoteAndDao/Dao/Dao.js

@@ -142,7 +142,6 @@ function DAO() {
             }}
             sx={{ marginBottom: '20px' }}
             value={selectedState}
-            newSelect={true}
           ></Select>
         </S.DaoProposalHead>
         <DividerLine />

packages/boba/gateway/src/containers/bridge/Bridge.js

@@ -1,4 +1,4 @@
-import { Typography, useMediaQuery, useTheme } from '@mui/material'
+import { useMediaQuery, useTheme } from '@mui/material'
 import React from 'react'
 import { useSelector } from 'react-redux'
 import { selectActiveNetwork } from 'selectors/networkSelector'
@@ -21,23 +21,24 @@ function BridgeContainer() {
           isMobile && accountEnabled ?
             null
             : <S.TitleContainer>
-              <Typography variant="h1"
-              > Transfer
+              <S.BridgeTypography variant="h1">
+                <S.BobaGlassIcon />
+                Transfer
                 <br />
                 tokens between {activeNetwork} and
                 <br />
-                <Typography
+                <S.BridgeTypography
                   variant="h1"
                   component="span"
                   sx={{
                     background: '-webkit-linear-gradient(0deg, #CBFE00 15.05%, #1CD6D1 79.66%)',
                     'WebkitBackgroundClip': 'text',
-                    'WebkitTextFillColor': 'transparent'
+                    'WebkitTextFillColor': 'transparent',
                   }}
                 >
                   Boba network!
-                </Typography>
-              </Typography>
+                </S.BridgeTypography >
+              </S.BridgeTypography>
             </S.TitleContainer>
         }
         <S.Content>

packages/boba/gateway/src/containers/bridge/Bridge.styles.js

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled'
-import { Box } from "@mui/material"
+import {Box, Typography} from "@mui/material"
 import bobaGlassIcon from 'images/boba2/boba_glass.svg'
 import bobaBridgeBg from 'images/boba2/bridge_bg.svg'
 export const PageContainer = styled(Box)(({ theme }) => ({
   margin: '20px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
@@ -24,22 +25,24 @@ export const PageContainer = styled(Box)(({ theme }) => ({
   '::after': {
     content: '" "',
     position: 'absolute',
-    left: '-5%',
-    bottom: '10%',
-    width: '130%',
+    width: '100%',
     height: '100%',
     background: `url(${bobaBridgeBg}) no-repeat`,
-    backgroundSize: '85%',
+    backgroundSize: '100%',
+    backgroundPosition: 'center',
+    left: '0',
+    bottom: '0',
     zIndex: '-1',
-  }
+  },
+
 }));
 
 
 export const ContentWrapper = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   width: '100%',
-  alignItems: 'flex-start',
+  alignItems: 'flex-center',
   gap: '20px',
   [ theme.breakpoints.down('sm') ]: {
     flexDirection: 'column',
@@ -49,14 +52,14 @@ export const ContentWrapper = styled(Box)(({ theme }) => ({
 }))
 
 export const TitleContainer = styled(Box)(({ theme }) => ({
-  width: '40%',
+  width: '50%',
   textTransform: 'uppercase',
   display: 'flex',
   justifyContent: 'center',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   padding: '70px 50px',
   position: 'relative',
-  minHeight: '500px',
+  minHeight: 'auto',
   [ theme.breakpoints.down('sm') ]: {
     padding: '0',
     width: '100%',
@@ -68,18 +71,45 @@ export const TitleContainer = styled(Box)(({ theme }) => ({
       display: 'none'
     }
   },
-  '::before': {
-    content: '" "',
-    position: 'absolute',
-    top: '5%',
-    right: '25%',
-    width: '80px',
-    height: '80px',
-    background: `url(${bobaGlassIcon}) no-repeat`,
-    backgroundSize: '100% 90%',
+  // '::before': {
+  //   content: '" "',
+  //   position: 'absolute',
+  //   top: '20%',
+  //   right: '30%',
+  //   width: '80px',
+  //   height: '80px',
+  //   background: `url(${bobaGlassIcon}) no-repeat`,
+  //   backgroundSize: '100% 90%',
+  // },
+}))
+
+export const BobaGlassIcon = styled(Box)(({ theme }) => ({
+  content: '" "',
+  position: 'absolute',
+  top: '15%',
+  right: '35%',
+  width: '80px',
+  height: '80px',
+  background: `url(${bobaGlassIcon}) no-repeat`,
+  backgroundSize: '100% 90%',
+  [theme.breakpoints.down(1700)]: {
+    top: '20%',
+    right: '40%',
+    width: '70px',
+    height: '70px',
+  },
+  [theme.breakpoints.down(1400)]: {
+    top: '20%',
+    right: '20%',
+    width: '70px',
+    height: '70px',
+  },
+  [theme.breakpoints.down(900)]: {
+    display: 'none',
   },
 }))
 
+
 export const Content = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -94,3 +124,13 @@ export const Content = styled(Box)(({ theme }) => ({
     width: '100%'
   }
 }))
+
+export const BridgeTypography = styled(Typography)(({ theme }) => ({
+  fontSize: '57px !important',
+  [theme.breakpoints.down(1700)]: {
+    fontSize: '40px !important',
+  },
+  [theme.breakpoints.down(1000)]: {
+    fontSize: '30px !important',
+  },
+}))

packages/boba/gateway/src/containers/dao/OldDao.styles.js

@@ -3,6 +3,7 @@ import { Box } from "@mui/material"
 
 export const DaoPageContainer = styled(Box)(({ theme }) => ({
   margin: '0px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',

packages/boba/gateway/src/containers/earn/Earn.styles.js

@@ -3,6 +3,7 @@ import { Box, Typography, Grid } from "@mui/material"
 
 export const EarnPageContainer = styled(Box)(({ theme }) => ({
   margin: '0px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',

packages/boba/gateway/src/containers/ecosystem/Ecosystem.styles.js

@@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles'
 
 export const EcoSystemPageContainer = styled(Box)(({ theme }) => ({
   margin: '0px auto',
+  marginBottom: theme.palette.spacing.toFooter,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around',
@@ -68,10 +69,10 @@ export const ProjectContent = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   padding: '16px',
   paddingTop: '50px',
-  gap: 1,
+  gap: '16px',
   marginTop: '50px',
   width: '100%',
-  height: '140px',
+  height: '165px',
   [theme.breakpoints.down('md')]: {
     minHeight: '140px',
     height: 'auto',
@@ -113,11 +114,13 @@ export const ProjectDescription = styled(Typography)(({ theme }) => ({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   opacity: 0.85,
-  fontSize: '0.7em',
+  fontSize: '13px',
   fontWeight: 400,
   display: '-webkit-box',
   WebkitLineClamp: 3,
   WebkitBoxOrient: 'vertical',
+  lineHeight: '20px',
+  textAlign: 'center',
 }))
 
 export const TileFooter = styled(Box)(({ theme, ...props }) => ({