Merge pull request #2033 from oasisprotocol/kaja/new-background

lukaw3d · web-flow · commit f50c4ba4dd75 · 2025-06-19T00:57:35.000+02:00
Change explorer background, logo and card borders
diff --git a/.changelog/2033.feature.md b/.changelog/2033.feature.md
@@ -0,0 +1 @@
+Change explorer background, logo and card borders
diff --git a/src/app/components/EmptyState/index.tsx b/src/app/components/EmptyState/index.tsx
@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
 import backgroundEmptyState from './images/background-empty-state.svg'
 import CancelIcon from '@mui/icons-material/Cancel'
+import { useTheme } from '@mui/material/styles'
 
 const StyledBox = styled(Box)(({ theme }) => ({
   display: 'flex',
@@ -38,15 +39,16 @@ type EmptyStateProps = {
 }
 
 export const EmptyState: FC<EmptyStateProps> = ({ description, title, light, minHeight = '250px' }) => {
+  const theme = useTheme()
   const content = (
-    <>
-      <Typography component="span" sx={{ fontSize: '24px', fontWeight: 600 }}>
+    <Box sx={{ color: theme.palette.layout.contrastMain, textAlign: 'center' }}>
+      <Typography component="span" sx={{ fontSize: '24px', fontWeight: 600, display: 'block' }}>
         {title}
       </Typography>
       <Typography component="span" sx={{ fontSize: '16px' }}>
         {description}
       </Typography>
-    </>
+    </Box>
   )
   return light ? (
     <StyledBoxLight sx={{ minHeight }}>
diff --git a/src/app/components/LayerPicker/index.tsx b/src/app/components/LayerPicker/index.tsx
@@ -101,8 +101,8 @@ const LayerPickerContent: FC<LayerPickerContentProps> = ({ isOutOfDate, onClose,
 
   return (
     <StyledLayerPickerContent>
-      <Box sx={{ mb: isTablet ? 0 : 5, color: 'red', position: 'relative' }}>
-        <HomePageLink color={COLORS.brandExtraDark} showText={!isMobile} />
+      <Box sx={{ mb: isTablet ? 0 : 5, position: 'relative' }}>
+        <HomePageLink color="#0500e2" showText={!isMobile} />
       </Box>
       {isTablet && (
         <TabletActionBar>
diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
@@ -31,9 +31,7 @@ export const Header: FC = () => {
           ? theme.palette.layout.contrastSecondary
           : theme.palette.layout.secondary,
         borderRadius: 0,
-        boxShadow: scrollTrigger
-          ? '0px 4px 4px rgba(0, 0, 0, 0.25), 0px 34px 24px -9px rgba(50, 77, 171, 0.12)'
-          : 'none',
+        boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
       }}
     >
       <Box sx={{ px: '15px' }}>
@@ -46,10 +44,7 @@ export const Header: FC = () => {
           }}
         >
           <Grid md={3} xs={4} sx={{ display: 'flex', alignItems: 'center' }}>
-            <HomePageLink
-              color={scrollTrigger ? theme.palette.layout.contrastMain : undefined}
-              showText={!scrollTrigger && !isMobile}
-            />
+            <HomePageLink showText={!scrollTrigger && !isMobile} color="#0500e2" />
           </Grid>
           {withScopeSelector && (
             <>
diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
@@ -193,6 +193,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
                 },
               }
             : {}),
+          border: `1px solid ${COLORS.grayLight}`,
         }}
         value={value}
         onChange={e => onChange(e.target.value)}
diff --git a/src/app/pages/HomePage/Graph/NetworkSelector/index.tsx b/src/app/pages/HomePage/Graph/NetworkSelector/index.tsx
@@ -42,7 +42,7 @@ const StyledButton = styled(StyledSelectButton)(({ theme }) => ({
   minWidth: '200px',
   backgroundColor: theme.palette.layout.primaryBackground,
   border: `2px solid ${theme.palette.layout.lightBorder}`,
-  color: theme.palette.layout.main,
+  color: theme.palette.layout.contrastMain,
   '&:hover': {
     backgroundColor: theme.palette.layout.primaryBackground,
   },
@@ -139,7 +139,7 @@ export const NetworkSelector: FC<NetworkSelectProps> = ({ network, setNetwork })
       Option={SelectOption}
       listbox={StyledListbox}
       label={
-        <Typography variant="caption" sx={theme => ({ color: theme.palette.layout.main })}>
+        <Typography variant="caption" sx={theme => ({ color: theme.palette.layout.contrastMain })}>
           {t('home.selectedNetwork')}
         </Typography>
       }
diff --git a/src/app/pages/HomePage/Graph/images/paratime-selector-glow-testnet.svg b/src/app/pages/HomePage/Graph/images/paratime-selector-glow-testnet.svg
@@ -1,4 +1,4 @@
-<svg width="757" height="693" viewBox="0 0 757 693" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="757" height="693" viewBox="0 0 757 693" fill="none" xmlns="http://www.w3.org/2000/svg" opacity="0.5">
 <g clip-path="url(#clip0_5054_227255)">
 <mask id="mask0_5054_227255" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="33" y="0" width="693" height="693">
 <circle cx="379.632" cy="346.204" r="346.204" fill="#02FBFD"/>
diff --git a/src/app/pages/HomePage/Graph/images/paratime-selector-glow.svg b/src/app/pages/HomePage/Graph/images/paratime-selector-glow.svg
@@ -1,4 +1,4 @@
-<svg width="757" height="693" viewBox="0 0 757 693" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="757" height="693" viewBox="0 0 757 693" fill="none" xmlns="http://www.w3.org/2000/svg" opacity="0.5">
   <g clip-path="url(#clip0_1369_48356)">
     <mask id="mask0_1369_48356" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="33" y="0" width="693" height="693">
       <circle cx="379.632" cy="346.204" r="346.204" fill="#02FBFD"/>
diff --git a/src/app/pages/HomePage/images/background.svg b/src/app/pages/HomePage/images/background.svg
@@ -1,4 +1,4 @@
-<svg width="1428" height="824" viewBox="0 0 1428 824" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1428" height="824" viewBox="0 0 1428 824" fill="none" xmlns="http://www.w3.org/2000/svg" opacity="0.75">
   <g opacity="0.1">
     <path d="M400.026 327.161L195.373 194.354" stroke="url(#paint0_linear_2255_148937)" stroke-width="4.35432"/>
     <path d="M400.026 327.163L604.679 180.204" stroke="url(#paint1_linear_2255_148937)" stroke-width="4.35432"/>
diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
@@ -33,7 +33,7 @@ const HomepageLayout = styled(Box)(({ theme }) => ({
   maxWidth: '100%',
   height: 'fill-available',
   minHeight: '100vh',
-  backgroundColor: COLORS.brandDark,
+  backgroundColor: COLORS.white,
   overflowX: 'hidden',
   [theme.breakpoints.up('sm')]: {
     height: '100vh',
@@ -156,7 +156,7 @@ export const HomePage: FC = () => {
       <HomepageLayout>
         <Content>
           <LogotypeBox>
-            <Logotype showText />
+            <Logotype showText color="#0500e2" />
           </LogotypeBox>
           <SearchInputContainer transparent={isGraphZoomedIn && !searchHasFocus}>
             <SearchInputBox>
diff --git a/src/app/pages/SearchResultsPage/NoResults.tsx b/src/app/pages/SearchResultsPage/NoResults.tsx
@@ -28,17 +28,22 @@ export const NoResults: FC<{
       title={title}
       description={
         <Box
-          sx={{ textAlign: 'center', a: { color: theme.palette.layout.main, textDecoration: 'underline' } }}
+          sx={{
+            textAlign: 'center',
+            a: { color: theme.palette.layout.contrastMain, textDecoration: 'underline' },
+          }}
         >
           <p>
-            <Trans
-              t={t}
-              i18nKey="search.noResults.description"
-              components={{
-                OptionalBreak: <OptionalBreak />,
-                HomeLink: <Link component={RouterLink} to="/" />,
-              }}
-            />
+            <Box>
+              <Trans
+                t={t}
+                i18nKey="search.noResults.description"
+                components={{
+                  OptionalBreak: <OptionalBreak />,
+                  HomeLink: <Link component={RouterLink} to="/" />,
+                }}
+              />
+            </Box>
           </p>
           <p>
             <SearchSuggestionsLinksForNoResults scope={layer && network ? { network, layer } : undefined} />
diff --git a/src/styles/theme/colors.ts b/src/styles/theme/colors.ts
@@ -22,7 +22,7 @@ export const COLORS = {
   eucalyptus: '#4cd4a9',
   grayDark: '#31435a',
   grayExtraDark: '#06152b',
-  grayLight: '#f4f5f7',
+  grayLight: '#E4E4E7',
   grayLight50A: '#f4f5f780',
   grayMedium: '#565b61',
   grayMedium2: '#d5d6d7',
diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
@@ -92,18 +92,18 @@ export const defaultTheme = createTheme({
   },
   palette: {
     background: {
-      default: COLORS.brandDark,
+      default: COLORS.white,
       empty: COLORS.brandExtraDark,
     },
     layout: {
-      main: COLORS.white,
-      border: COLORS.brandDark,
-      contrastMain: COLORS.brandExtraDark,
+      main: COLORS.brandExtraDark,
+      border: COLORS.white,
+      contrastMain: COLORS.white,
       contrastSecondary: COLORS.white,
       darkBorder: COLORS.brandExtraDark,
       hoverBorder: COLORS.white,
       lightBorder: COLORS.aqua,
-      secondary: COLORS.brandDark,
+      secondary: COLORS.white,
       primaryBackground: COLORS.brandExtraDark,
       secondaryBackground: COLORS.iconBackground,
       networkBubbleBorder: COLORS.white,
@@ -389,6 +389,8 @@ export const defaultTheme = createTheme({
       styleOverrides: {
         root: ({ theme }) => ({
           borderRadius: 6,
+          border: `1px solid ${COLORS.grayLight}`,
+          boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
           [theme.breakpoints.down('sm')]: {
             marginBottom: theme.spacing(4),
             padding: theme.spacing(4, 4, 0),
@@ -833,7 +835,9 @@ export const defaultTheme = createTheme({
           fontSize: '16px',
           fontWeight: 700,
           color: COLORS.brandDark,
-          backgroundColor: COLORS.inactiveTab,
+          backgroundColor: COLORS.grayLight,
+          border: `1px solid ${COLORS.grayLight}`,
+          borderBottom: 'none',
           marginRight: theme.spacing(2),
           borderTopLeftRadius: 12,
           borderTopRightRadius: 12,

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Change explorer background, logo and card borders`
Original file line number	Diff line number	Diff line change
`@@ -193,6 +193,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o`
`193`	`193`	`},`
`194`	`194`	`}`
`195`	`195`	`: {}),`
	`196`	+ border: `1px solid ${COLORS.grayLight}`,
`196`	`197`	`}}`
`197`	`198`	`value={value}`
`198`	`199`	`onChange={e => onChange(e.target.value)}`