Refine logos

zanivan · Dec 21, 2023 · 7461fbf · 7461fbf
1 parent 07f7405
commit 7461fbf
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 32 deletions.
diff --git a/docs/data/material/getting-started/templates/album/Album.tsx b/docs/data/material/getting-started/templates/album/Album.tsx
@@ -65,7 +65,7 @@ export default function Album() {
           sx={{
             display: 'flex',
             flexDirection: 'column',
-            gap: 16,
+            gap: { xs: 8, sm: 16 },
             bgcolor: 'background.default',
           }}
         >

diff --git a/docs/data/material/getting-started/templates/album/components/AppBar.tsx b/docs/data/material/getting-started/templates/album/components/AppBar.tsx
@@ -3,15 +3,17 @@ import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
 import ToggleColorMode from './ToggleColorMode';
 
-import LanguageIcon from '@mui/icons-material/Language';
+const logoStyle = {
+  width: '160px',
+  height: 'auto',
+};
 
 function AppAppBar() {
   return (
     <div>
-      <AppBar position="fixed" sx={{ boxShadow: 0 }}>
+      <AppBar position="fixed" sx={{ boxShadow: 0, height: 'var(--AppBar-Height)' }}>
         <Toolbar
           sx={{
             borderBottom: 1,
@@ -20,16 +22,12 @@ function AppAppBar() {
           }}
         >
           <Box sx={{ flexGrow: 1, display: 'flex', alignItems: 'center' }}>
-            <LanguageIcon color="primary" sx={{ mr: 2 }} />
-            <Typography
-              variant="h6"
-              color="primary"
-              sx={{
-                display: { xs: 'none', md: 'flex' },
-              }}
-            >
-              Acme company
-            </Typography>
+            <img
+              src={
+                'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e6faf73568658154dae_SitemarkDefault.svg'
+              }
+              style={logoStyle}
+            />
           </Box>
           <Button color="primary" variant="contained" sx={{ mr: 1 }}>
             Sign up

diff --git a/docs/data/material/getting-started/templates/album/components/Hero.tsx b/docs/data/material/getting-started/templates/album/components/Hero.tsx
@@ -7,7 +7,7 @@ import Chip from '@mui/material/Chip';
 import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
 import Grid from '@mui/material/Grid';
-import { grey, lightBlue } from '@mui/material/colors';
+import { grey } from '@mui/material/colors';
 import CelebrationRoundedIcon from '@mui/icons-material/CelebrationRounded';
 
 export default function ProductHero() {
@@ -18,7 +18,6 @@ export default function ProductHero() {
         backgroundImage: `url("https://images.unsplash.com/photo-1638272181967-7d3772a91265?q=80&w=3570&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")`,
         backgroundSize: 'cover',
         color: 'white',
-        height: '60vh',
       }}
     >
       <Box
@@ -28,7 +27,7 @@ export default function ProductHero() {
           justifyContent: 'center',
           gap: 10,
           width: '100%',
-          height: '60vh',
+          minHeight: { xs: '85dvh', sm: '60vh' },
           backgroundColor: 'rgba(0, 0, 0, 0.6)',
           backdropFilter: 'blur(32px)',
           alignItems: 'center',

diff --git a/docs/data/material/getting-started/templates/album/components/LogoCollection.tsx b/docs/data/material/getting-started/templates/album/components/LogoCollection.tsx
@@ -2,34 +2,49 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
+import { useTheme } from '@mui/styles';
 
-const logos = [
-  'https://www.svgrepo.com/show/303141/spotify-1-logo.svg',
-  'https://www.svgrepo.com/show/303132/coca-cola-logo.svg',
-  'https://www.svgrepo.com/show/303225/visa-logo.svg',
-  'https://www.svgrepo.com/show/303196/netflix-2-logo.svg',
-  'https://www.svgrepo.com/show/303257/paypal-logo.svg',
+const whiteLogos = [
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e891fa22f89efd7477a_TerraLight.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a09d1f6337b1dfed14ab_colorado-white.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
+];
+
+const darkLogos = [
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/61f12e911fa22f2203d7514c_TerraDark.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560a0990f3717787fd49245_colorado-black.svg',
+  'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5ca4e548b0deb1041c33_Ankara-black.svg',
 ];
 
 const logoStyle = {
-  width: '80px',
-  height: 'auto',
-  margin: '0 20px', // Adjusted margin for smaller screens
+  width: '100px',
+  height: '80px',
+  margin: '0 20px',
+  opacity: 0.8,
 };
 
-const LogoCollection = () => {
+export default function LogoCollection() {
+  const theme = useTheme();
+  const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
+
   return (
     <Box sx={{ mt: 10, textAlign: 'center' }}>
       <Typography
         component="h2"
-        variant="subtitle1"
+        variant="subtitle2"
         align="center"
         color="text.secondary"
         gutterBottom
       >
         Trusted by the best companies
       </Typography>
-      <Grid container justifyContent="center" spacing={2}>
+      <Grid container justifyContent="center" spacing={2} sx={{ mt: 2 }}>
         {logos.map((logo, index) => (
           <Grid item key={index}>
             <img src={logo} alt={`Logo ${index + 1}`} style={logoStyle} />
@@ -38,6 +53,4 @@ const LogoCollection = () => {
       </Grid>
     </Box>
   );
-};
-
-export default LogoCollection;
+}