wip: update soon splash styling

src/App.tsx

@@ -1,5 +1,5 @@
 import { LayoutGroup, LazyMotion, domMax, MotionConfig } from 'framer-motion';
-import { BackgroundImage, DashboardContainer } from './theme/styles';
+import { DashboardContainer } from './theme/styles';
 import { SideBar } from './containers/SideBar';
 import { Dashboard } from './containers/Dashboard';
 
@@ -27,15 +27,14 @@ export default function App() {
  const isShuttingDown = useShuttingDown();
  const showSplash = useUIStore((s) => s.showSplash);
  const view = useUIStore((s) => s.view);
- const visualMode = useUIStore((s) => s.visualMode);
 
  const shutDownMarkup = useMemo(() => {
  return isShuttingDown ? <ShuttingDownScreen /> : null;
  }, [isShuttingDown]);
  const mainMarkup = useMemo(() => {
  if (!isShuttingDown && !showSplash) {
  return (
- <DashboardContainer>
+ <DashboardContainer $view={view}>
  <SideBar />
  <Dashboard status={view} />
  </DashboardContainer>
@@ -63,9 +62,6 @@ export default function App() {
  <SettingsModal />
  <LayoutGroup id="app-content">
  {shutDownMarkup}
- {!visualMode || view !== 'mining' ? (
- <BackgroundImage layout transition={{ duration: 0.3 }} />
- ) : null}
  {mainMarkup}
  <ErrorSnackbar />
  <SplashScreen />

src/components/elements/LinearProgress.tsx

@@ -3,34 +3,25 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
  width: 100%;
- background: ${({ theme }) => theme.palette.background.paper};
- height: 8px;
+ background: ${({ theme }) => theme.palette.base};
+ height: 20px;
  border-radius: 20px;
  overflow: hidden;
  align-items: center;
  display: flex;
+ padding: 5px;
 `;
 
-const Bar = styled(m.div)<{ $isSecondary?: boolean }>`
+const Bar = styled(m.div)`
  border-radius: 20px;
- background: ${({ theme, $isSecondary }) => ($isSecondary ? theme.palette.contrast : theme.palette.success.main)};
- height: 8px;
+ background: ${({ theme }) => theme.palette.contrast};
+ height: 10px;
 `;
 
-export function LinearProgress({
- value = 10,
- variant = 'primary',
-}: {
- value?: number;
- variant?: 'primary' | 'secondary';
-}) {
+export function LinearProgress({ value = 10 }: { value?: number }) {
  return (
  <Wrapper>
- <Bar
- initial={{ width: 0 }}
- animate={{ width: `${value}%` }}
- $isSecondary={Boolean(variant == 'secondary')}
- />
+ <Bar initial={{ width: 0 }} animate={{ width: `${value}%` }} />
  </Wrapper>
  );
 }

src/containers/Airdrop/AirdropPermission/styles.ts

@@ -4,7 +4,7 @@ export const Position = styled('div')`
  pointer-events: none;
 
  position: absolute;
- bottom: 20px;
+ bottom: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
@@ -23,10 +23,11 @@ export const BoxWrapper = styled('div')`
  padding: 20px;
 
  border-radius: 10px;
- background-color: ${({ theme }) => theme.palette.background.accent};
+ background-color: ${({ theme }) =>
+ theme.mode === 'dark' ? theme.colorsAlpha.lightAlpha[5] : theme.colorsAlpha.lightAlpha[80]};
  box-shadow:
  0 10px 25px -12.5px rgba(0, 0, 0, 0.07),
- 0 12.5px 33.33px -16.66px rgba(0, 0, 0, 0.05),
+ 0 13px 33px -16.66px rgba(0, 0, 0, 0.05),
  0 15px 50px -25px rgba(0, 0, 0, 0.035);
 
  pointer-events: all;
@@ -44,14 +45,14 @@ export const TextWrapper = styled('div')`
 `;
 
 export const Title = styled('div')`
- color: #000;
+ color: ${({ theme }) => theme.palette.text.primary};
  font-size: 14px;
  font-weight: 600;
  line-height: 110%;
 `;
 
 export const Text = styled('span')`
- color: #797979;
+ color: ${({ theme }) => theme.palette.text.secondary};
  font-size: 12px;
  font-weight: 500;
  line-height: 116.667%;

src/containers/AutoUpdateDialog/UpdatedStatus.tsx

@@ -21,7 +21,7 @@ export function UpdatedStatus({ contentLength, downloaded }: UpdatedStatusProps)
  return (
  <Stack alignItems="center">
  <ProgressWrapper>
- <LinearProgress value={(downloaded / contentLength) * 100} variant="secondary" />
+ <LinearProgress value={(downloaded / contentLength) * 100} />
  </ProgressWrapper>
  {shouldShowProgress && (
  <Typography variant="p">{`${formatSize(downloaded)} / ${formatSize(contentLength)}`}</Typography>

src/containers/Dashboard/Dashboard.tsx

@@ -4,10 +4,8 @@ import TribesView from './TribesView/TribesView';
 import SetupViewContainer from './SetupView/SetupViewContainer';
 import { DashboardContainer } from './styles';
 
-function Dashboard({ status }: { status: viewType }) {
+export default function Dashboard({ status }: { status: viewType }) {
  const viewMarkup =
  status == 'setup' ? <SetupViewContainer /> : status == 'tribes' ? <TribesView /> : <MiningView />;
  return <DashboardContainer layout>{viewMarkup}</DashboardContainer>;
-}
-
-export default Dashboard;
+}

src/containers/Dashboard/SetupView/SetupView.tsx

@@ -30,7 +30,7 @@ function SetupView({
  </SetupDescription>
 
  <ProgressWrapper>
- <LinearProgress value={progressPercentage} variant="secondary" />
+ <LinearProgress value={progressPercentage} />
  </ProgressWrapper>
  <SetupPercentage>{`${progressPercentage}%`}</SetupPercentage>
  <SetupDescription>{title ? t(`title.${title}`, titleParams) : ''}</SetupDescription>

src/containers/Dashboard/SetupView/styles.ts

@@ -22,4 +22,5 @@ export const Wrapper = styled('div')`
 export const SoonWrapper = styled.div`
  max-width: 260px;
  height: auto;
+ filter: ${({ theme }) => (theme.mode === 'dark' ? 'brightness(0.9)' : 'none')};
 `;

src/containers/Dashboard/styles.ts

@@ -14,7 +14,7 @@ export const DashboardContainer = styled(m.div)`
 `;
 
 export const ProgressWrapper = styled.div`
- margin: 30px 0 20px 0;
+ margin: 20px 0;
  display: flex;
  width: 100%;
 `;

src/theme/palettes/dark.ts

@@ -59,6 +59,7 @@ const darkPalette: ThemePalette = {
  paper: c.grey[700],
  accent: c.grey[400],
  main: c.grey[800],
+ splash: '#2E2E2E',
  },
  success: {
  main: c.green[600],

src/theme/palettes/light.ts

@@ -59,6 +59,7 @@ const lightPalette: ThemePalette = {
  main: c.grey[50],
  paper: '#fff',
  accent: c.grey[100],
+ splash: '#e5e5e5',
  },
  success: {
  main: c.success[300],

src/theme/styles.ts

@@ -1,28 +1,16 @@
 import styled from 'styled-components';
 import { m } from 'framer-motion';
-import clouds from '@app/assets/backgrounds/clouds.png';
+
+import { viewType } from '@app/store/types.ts';
 
 export const sidebarWidth = '348px'; // if this is updated please update the value in init-visuals.js
 
-export const DashboardContainer = styled(m.div)`
+export const DashboardContainer = styled(m.div)<{ $view?: viewType }>`
  display: grid;
  grid-template-columns: ${sidebarWidth} auto;
  position: relative;
  gap: 20px;
  padding: 20px;
  height: 100%;
- filter: ${({ theme }) => (theme.mode === 'dark' ? 'brightness(0.85)' : 'none')};
-`;
-
-export const BackgroundImage = styled(m.div)`
- background-color: ${(props) => props.theme.palette.background.main};
- background-size: cover;
- pointer-events: none;
- background-image: url(${clouds});
- background-position: center;
- position: fixed;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
+ background-color: ${(props) => (props.$view !== 'setup' ? 'none' : props.theme.palette.background.splash)};
 `;

src/theme/types.ts

@@ -45,6 +45,7 @@ export interface Palette {
  divider: string;
  background: {
  default: string;
+ splash: string;
  paper: string;
  accent: string;
  main: string;