Adds banner and media queries

Author: leoronne

src/Layout/styles.ts

@@ -9,11 +9,27 @@ import styled from 'styled-components';
 
 export const Grid = styled.div`
   display: grid;
-  grid-template-columns: 71px 240px auto 240px;
-  grid-template-rows: 46px auto 52px;
-  grid-template-areas:
-    'SL SN CI CI'
-    'SL CL CD UL'
-    'SL UI CD UL';
   height: 100vh;
+
+  grid-template-columns: 65px auto;
+  grid-template-rows: 46px auto;
+  grid-template-areas:
+    'SL CI'
+    'SL CD';
+
+  @media (min-width: 598px) {
+    grid-template-columns: 71px 240px auto 240px;
+    grid-template-rows: 46px auto 52px;
+    grid-template-areas:
+      'SL SN CI CI'
+      'SL CL CD CD'
+      'SL UI CD CD';
+  }
+
+  @media (min-width: 868px) {
+    grid-template-areas:
+      'SL SN CI CI'
+      'SL CL CD UL'
+      'SL UI CD UL';
+  }
 `;

src/assets/img/banner.png

@@ -7,6 +7,10 @@ export const Container = styled.div`
   flex-direction: column;
   padding: 24px 9.5px 0 16px;
   background-color: var(--secondary);
+
+  @media (max-width: 598px) {
+    display: none;
+  }
 `;
 
 export const Category = styled.div`

src/components/ChannelList/styles.ts

@@ -6,7 +6,12 @@ export const Container = styled.div<Props>`
   width: 48px;
   height: 48px;
   position: relative;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
+
+  @media (max-width: 598px) {
+    width: 35px;
+    height: 35px;
+  }
 `;
 
 export const Button = styled.button<Props>`
@@ -18,7 +23,7 @@ export const Button = styled.button<Props>`
   height: 48px;
   border-radius: 50%;
   margin-bottom: 15px;
-  background-color: ${(props) => (props.color ? props.color : 'var(--primary)')}; 
+  background-color: ${(props) => (props.color ? props.color : 'var(--primary)')};
   /* ${(props) => (props.isHome ? 'var(--rocketseat)' : 'var(--primary)')}; */
   position: relative;
   cursor: pointer;
@@ -52,7 +57,7 @@ export const Button = styled.button<Props>`
     font-weight: bold;
     color: var(--white);
     content: '${(props) => props.mentions && props.mentions}';
-    display: ${(props) => (props.mentions && props.mentions > 0 ? 'inline' : 'none')}
+    display: ${(props) => (props.mentions && props.mentions > 0 ? 'inline' : 'none')};
   }
   transition: border-radius 0.2s, background-color 0.2s;
   &.active,
@@ -64,6 +69,25 @@ export const Button = styled.button<Props>`
     visibility: visible;
     opacity: 1;
   }
+
+  @media (max-width: 598px) {
+    width: 30px;
+    height: 30px;
+    margin-bottom: 10px;
+    &::before {
+      width: 5px;
+      height: 5px;
+      left: -13px;
+    }
+    > img {
+      width: 25px;
+      height: 25px;
+    }
+    &::after {
+      height: 10px;
+      font-size: 7px;
+    }
+  }
 `;
 
 export const Tooltip = styled.div<Props>`
@@ -108,4 +132,8 @@ export const Tooltip = styled.div<Props>`
     visibility: visible;
     opacity: 1;
   }
+
+  @media (max-width: 598px) {
+    width: 15px;
+  }
 `;

src/components/ServerButton/styles.ts

@@ -9,6 +9,10 @@ export const Container = styled.div`
   background-color: var(--secondary);
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px;
   z-index: 2;
+
+  @media (max-width: 598px) {
+    display: none;
+  }
 `;
 
 export const Title = styled.h1`

src/components/ServerName/styles.ts

@@ -10,6 +10,10 @@ export const Container = styled.div`
   padding: 10px;
   background-color: var(--quaternary);
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px;
+
+  @media (max-width: 598px) {
+    display: none;
+  }
 `;
 
 export const Profile = styled.div`

src/components/UserInfo/styles.ts

@@ -18,6 +18,9 @@ export const Container = styled.div`
   ::-webkit-scrollbar-track {
     background-color: var(--secondary);
   }
+  @media (max-width: 868px) {
+    display: none;
+  }
 `;
 
 export const Role = styled.span`