diff --git a/web/src/components/Suggestion.tsx b/web/src/components/Suggestion.tsx
index bb6f099..bdc513e 100644
--- a/web/src/components/Suggestion.tsx
+++ b/web/src/components/Suggestion.tsx
@@ -218,14 +218,14 @@ const Icon = styled(Item)`
border-radius: 4px;
font-size: 1.3rem;
user-select: none;
- background: #1066ff;
+ background: #5610ff;
transition: background 0.1s ease-out;
&:hover {
- background: #3a79ea;
+ background: #723df3;
}
&:active {
- background: #669dfd;
+ background: #a17ff5;
}
`;
diff --git a/web/src/components/Welcome.tsx b/web/src/components/Welcome.tsx
index 28c675f..a397598 100644
--- a/web/src/components/Welcome.tsx
+++ b/web/src/components/Welcome.tsx
@@ -33,7 +33,7 @@ const Welcome: React.FC = () => {
{t('description')}
- Try with these queries
+ Try these queries
namae
@@ -155,7 +155,7 @@ const Text = styled.p`
const Hero = styled.div``;
const ExampleQueries = styled.div`
- margin: 50px 0 50px;
+ margin: 30px 0 0;
`;
const List = styled.div`
@@ -171,32 +171,34 @@ const List = styled.div`
`;
const ColorfulList = styled.div`
+ margin-top: 100px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
- font-size: 1rem;
${mobile} {
flex-direction: column;
+ margin-top: 50px;
+ padding: 20px;
}
- padding: 20px;
- margin-top: 50px;
+ padding: 50px 20vw 50px 20vw;
color: white;
background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%);
`;
const ListItem = styled.div`
- margin: 15px;
+ margin: 30px 15px;
display: flex;
align-items: center;
- font-size: 1.2rem;
+ font-size: 1.5rem;
line-height: 1em;
${mobile} {
margin: 10px 0;
+ font-size: 1.2rem;
}
svg {