Ott 304 responsive main screen (#99)

package.json

@@ -22,6 +22,7 @@
     "react-datepicker": "^3.1.3",
     "react-dom": "^16.13.1",
     "react-player": "^2.6.0",
+    "react-responsive": "^8.1.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
@@ -48,6 +49,7 @@
     "@types/react": "^16.9.0",
     "@types/react-datepicker": "^3.0.2",
     "@types/react-dom": "^16.9.0",
+    "@types/react-responsive": "^8.0.2",
     "@types/react-router": "^5.1.7",
     "@types/react-router-dom": "^5.1.5",
     "@types/styled-components": "^5.1.0",

public/images/search-mob.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10.5" cy="10.5" r="9" stroke="white" stroke-width="3"/>
+<rect x="18.0607" y="15.9393" width="9.01471" height="3" rx="1.5" transform="rotate(45 18.0607 15.9393)" fill="white"/>
+</svg>

public/images/star-white.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0L11.5814 5.44704L17.5595 6.21885L13.1767 10.3571L14.2901 16.2812L9 13.3917L3.70993 16.2812L4.82325 10.3571L0.440492 6.21885L6.41863 5.44704L9 0Z" fill="white"/>
+</svg>

public/images/star.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0L11.5814 5.44704L17.5595 6.21885L13.1767 10.3571L14.2901 16.2812L9 13.3917L3.70993 16.2812L4.82325 10.3571L0.440492 6.21885L6.41863 5.44704L9 0Z" fill="white"/>
+</svg>

src/config/devices.tsx

@@ -0,0 +1,5 @@
+export const devices = {
+  laptop: '(max-width: 1280px)',
+  mobile: '(max-width: 640px)',
+  tablet: '(max-width: 1024px)',
+}

src/features/App/AuthenticatedApp.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import {
   Route,
   Redirect,
@@ -8,6 +8,7 @@ import {
 import { indexLexics } from 'config/lexics/indexLexics'
 import { useLexicsConfig } from 'features/LexicsStore'
 import { PAGES } from 'config'
+import { devices } from 'config/devices'
 import { HomePage } from 'features/HomePage'
 import { TeamPage } from 'features/TeamPage'
 import { MatchPage } from 'features/MatchPage'
@@ -20,17 +21,31 @@ import { Header } from 'features/Header'
 import { MainWrapper } from 'features/MainWrapper'
 import {
   HeaderFiltersStore,
+  SportTypeFilter,
+  TournamentFilter,
 } from 'features/HeaderFilters'
 import { UserFavorites } from 'features/UserFavorites'
 import { UserFavoritesStore } from 'features/UserFavorites/store'
+import { useMediaQuery } from 'features/MediaQuery'
+import { HeaderMobile } from 'features/HeaderMobile'
+import { BottomMenuWrapper } from 'features/HeaderMobile/styled'
 
 export const AuthenticatedApp = () => {
   useLexicsConfig(indexLexics)
+  const isMobile = useMediaQuery({ query: devices.tablet })
 
   return (
     <ScoreStore>
+      {
+        isMobile
+          ? null
+          : (
+            <Fragment>
               <ToggleScore />
               <LanguageSelect />
+            </Fragment>
+          )
+      }
       <Switch>
         <Route path={PAGES.useraccount}>
           <UserAccount />
@@ -39,8 +54,16 @@ export const AuthenticatedApp = () => {
         <HeaderFiltersStore>
           <UserFavoritesStore>
             <MainWrapper>
+              {
+                isMobile
+                  ? <HeaderMobile />
+                  : (
+                    <Fragment>
                       <UserFavorites />
                       <Header />
+                    </Fragment>
+                  )
+              }
               <Route exact path={PAGES.home}>
                 <HomePage />
               </Route>
@@ -58,7 +81,16 @@ export const AuthenticatedApp = () => {
               <Route path={`/:sportName${PAGES.match}/:pageId`}>
                 <MatchPage />
               </Route>
-
+              {
+                isMobile
+                  ? (
+                    <BottomMenuWrapper>
+                      <SportTypeFilter />
+                      <TournamentFilter />
+                    </BottomMenuWrapper>
+                  )
+                  : null
+              }
             </MainWrapper>
           </UserFavoritesStore>
         </HeaderFiltersStore>

src/features/Common/Input/styled.tsx

@@ -29,6 +29,7 @@ export const wrapperStyles = css<WrapperProps>`
 
 export const InputWrapper = styled.div<WrapperProps>`
   ${wrapperStyles}
+  }
 `
 
 type LabelProps = {

src/features/Common/SportName/index.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
 import { T9n } from 'features/T9n'
 
 export const SportName = styled(T9n)<{ color: string }>`
@@ -8,4 +9,9 @@ export const SportName = styled(T9n)<{ color: string }>`
   color: ${({ color }) => color};
   letter-spacing: 0.02em;
   text-transform: uppercase;
+
+  @media${devices.tablet} {
+    font-size: 10px;
+    margin-right: 5px;
+  }
 `

src/features/Common/customScrollbar/index.tsx

@@ -1,5 +1,7 @@
 import { css } from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const customScrollbar = css`
   ::-webkit-scrollbar {
     width: 8px;
@@ -9,6 +11,10 @@ export const customScrollbar = css`
   ::-webkit-scrollbar-thumb {
     border-radius: 6px;
     background: #3F3F3F;
+
+    @media${devices.tablet} {
+      background-color: rgba(255, 255, 255, 0.5);
+    }
   }
 
   ::-webkit-scrollbar-button {
@@ -19,4 +25,8 @@ export const customScrollbar = css`
   ::-webkit-scrollbar-corner  {
     background: transparent;
   }
+
+  @media${devices.tablet} {
+    background-color: #3F3F3F;
+  }
 `

src/features/Header/index.tsx

@@ -33,9 +33,7 @@ export const Header = () => {
       </MenuWrapper>
       {isMatch
         ? (
-          <FilterWrapper>
           <Search />
-          </FilterWrapper>
         )
         : (
           <Fragment>

src/features/Header/styled.tsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components/macro'
 import { Link } from 'react-router-dom'
 
+import { devices } from 'config/devices'
+
 export const HomeButtonLink = styled(Link)`
   width: 55px;
   height: 48px;
@@ -17,6 +19,10 @@ export const Wrapper = styled.header`
   display: flex;
   padding-top: 16px;
   margin-bottom: 30px;
+
+  @media${devices.laptop} {
+    padding-top: 11px;
+  }
 `
 
 export const FilterWrapper = styled.div`
@@ -31,13 +37,30 @@ export const SearchWrapper = styled(FilterWrapper)`
   height: 48px;
   margin-right: 16px;
   display: flex;
+
+  @media${devices.laptop} {
+    width: 51px;
+    margin-right: 9px;
+
+    :focus {
+      width: 288px;
+    }
+  }
 `
 
 export const SportFilterWrapper = styled(FilterWrapper)`
   width: 400px;
+
+  @media${devices.laptop} {
+    width: 234px;
+  }
 `
 
 export const MenuWrapper = styled.div`
   display: flex;
   margin-right: 57px;
+
+  @media${devices.laptop} {
+    margin-right: 24px;
+  }
 `

src/features/HeaderFilters/components/DateFilter/styled.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 type Props = {
   active: boolean,
 }
@@ -11,6 +13,10 @@ export const Wrapper = styled.div<Props>`
   display: flex;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
 
+  @media${devices.tablet} {
+    width: auto;
+  }
+
   ${({ active }) => (active
     ? `
       & ${Button}, ${DateButton} {
@@ -38,6 +44,11 @@ export const DateButton = styled.button`
   background-color: #3F3F3F;
   color: #999999;
 
+  @media${devices.tablet} {
+    background-color: transparent;
+    color: #fff;
+  }
+
   :hover {
     background-color: #484848;
   }
@@ -52,11 +63,21 @@ export const Day = styled.span`
   font-weight: bold;
   font-size: 38px;
   letter-spacing: -0.03em;
+
+  @media${devices.tablet} {
+    font-weight: 600;
+    font-size: 14px;
+}
 `
 
 export const Month = styled.span`
   font-weight: bold;
   font-size: 14px;
+
+  @media${devices.tablet} {
+    font-weight: 600;
+    margin-right: 4px;
+}
 `
 
 export const MonthYearWrapper = styled.div`
@@ -65,12 +86,21 @@ export const MonthYearWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
+  @media${devices.tablet} {
+    flex-direction: row;
+    align-items: center;
+  }
 `
 
 export const Year = styled.span`
   font-style: normal;
   font-weight: 300;
   font-size: 14px;
+
+  @media${devices.tablet} {
+    font-weight: 600;
+  }
 `
 
 const Arrow = styled.div`
@@ -79,6 +109,10 @@ const Arrow = styled.div`
   margin: auto;
   background-color: #222222;
 
+  @media${devices.tablet} {
+    height: 0;
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -94,6 +128,11 @@ export const ArrowLeft = styled(Arrow)`
     transform: rotate(45deg);
     top: 19px;
     left: 17px;
+
+    @media${devices.tablet} {
+      top: 5px;
+      left: 8px;
+    }
   }
 `
 
@@ -102,6 +141,11 @@ export const ArrowRight = styled(Arrow)`
     transform: rotate(225deg);
     top: 19px;
     right: 17px;
+
+    @media${devices.tablet} {
+      top: 5px;
+      right: 8px;
+    }
   }
 `
 
@@ -118,6 +162,11 @@ export const Button = styled.button<ButtonProps>`
   height: 100%;
   cursor: pointer;
   background-color: #3F3F3F;
+
+  @media${devices.tablet} {
+    border-radius: 50%;
+    width: 23px;
+  }
   ${({ borderLeftRadius }) => (
     borderLeftRadius
       ? `

src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const RadioButtonGroup = styled.div.attrs({
   role: 'group',
 })`
@@ -25,11 +27,34 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps)
   font-size: 18px;
   cursor: pointer;
 
+  @media${devices.tablet} {
+    width: 105px;
+    height: 30px;
+    font-size: 13px;
+    color: #fff;
+    background-color: rgba(153, 153, 153, 0.5);
+  }
+
   ${({ selected }) => (
     selected
       ? `
         background-color: #666666;
         color: #ffffff;
+
+        @media${devices.tablet} {
+          :first-child {
+            background-color: #CC0000;
+          }
+          :nth-child(2){
+            background-color: #EACB6F;
+            color: #000;
+          }
+          :last-child {
+            background: transparent;
+            border: 1px solid #fff;
+          }
+          
+        }
       `
       : `
         background-color: #3F3F3F;
@@ -48,4 +73,13 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps)
   :not(:last-child) {
     border-right: 1px solid #222222;
   }
+
+  @media${devices.tablet} {
+    border-right: 0;
+    margin-right: 10px;
+
+    :last-child {
+      margin-right: 0px;
+    }
+  }
 `

src/features/HeaderFilters/components/SportTypeFilter/styled.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
 import { DropdownButton } from '../TournamentFilter/styled'
 
 export const Wrapper = styled.div`
@@ -7,6 +8,10 @@ export const Wrapper = styled.div`
   position: relative;
   border-right: 1px solid #222222;
 
+  @media${devices.tablet} {
+    border-right: 0;
+  }
+
   ${DropdownButton} {
     border-top-left-radius: 2px;
     border-bottom-left-radius: 2px;
@@ -23,6 +28,12 @@ export const SportList = styled.ul`
   border-radius: 2px;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   z-index: 1;
+
+  @media${devices.tablet} {
+    top: -144px;
+    width: 100%;
+    background-color: #3F3F3F;
+  }
 `
 
 export const CustomOption = styled.li<{ image: string }>`

src/features/HeaderFilters/components/TournamentFilter/styled.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
 import { customScrollbar } from 'features/Common'
 
 export const ListWrapper = styled.div`
@@ -11,6 +12,13 @@ export const ListWrapper = styled.div`
   overflow-y: scroll;
   z-index: 2;
 
+  @media${devices.tablet} {
+    width: 200%;
+    left: -100%;
+    top: calc(-92vh + 36px);
+    height: calc(92vh - 36px);
+  }
+
   ${customScrollbar}
 `
 
@@ -35,6 +43,13 @@ export const DropdownButton = styled.button<Props>`
   background-repeat: no-repeat;
   background-position: 113px;
 
+  @media${devices.tablet} {
+    background: transparent;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+
   ${({ active }) => (
     active
       ? `
@@ -70,6 +85,10 @@ export const Arrows = styled.span<Props>`
   background-repeat: no-repeat;
   background-position: center;
 
+  @media${devices.tablet} {
+    display: none;
+  }
+
   ${({ active }) => (
     active
       ? 'background-image: url(/images/arrowUp.svg);'

src/features/HeaderFilters/components/TournamentList/styled.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
 import { Item } from 'features/ItemsList/styled'
 
 export const ListItem = styled(Item)`
@@ -10,6 +11,10 @@ export const ListItem = styled(Item)`
   background-color: #666;
   cursor: pointer;
 
+  @media${devices.tablet} {
+    background-color:  #3F3F3F;
+  }
+
   :focus-within,
   :hover {
     background-color: #999;

src/features/HeaderMobile/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+// import { useRouteMatch } from 'react-router-dom'
+
+import { ToggleScore } from 'features/ToggleScore'
+import { Logo } from 'features/Logo'
+import { Menu } from 'features/Menu'
+import { Search } from 'features/Search'
+import {
+  DateFilter,
+  MatchStatusFilter,
+} from 'features/HeaderFilters'
+
+import {
+  HeaderMobileWrapper,
+  HeaderMobileTop,
+  HeaderMobileMidle,
+  HeaderMobileBottom,
+  HeaderIconsWrapper,
+  IconFavWrapper,
+} from './styled'
+
+export const HeaderMobile = () => (
+  <HeaderMobileWrapper>
+    <HeaderMobileTop>
+      <ToggleScore />
+      <Logo />
+      <HeaderIconsWrapper>
+        <IconFavWrapper />
+        <Search />
+        <Menu />
+      </HeaderIconsWrapper>
+    </HeaderMobileTop>
+    <HeaderMobileMidle>
+      <DateFilter />
+    </HeaderMobileMidle>
+    <HeaderMobileBottom>
+      <MatchStatusFilter />
+    </HeaderMobileBottom>
+  </HeaderMobileWrapper>
+)

src/features/HeaderMobile/styled.tsx

@@ -0,0 +1,67 @@
+import styled from 'styled-components/macro'
+
+export const HeaderMobileWrapper = styled.div`
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+`
+export const HeaderMobileTop = styled.div`
+  width: 100%;
+  height: 40px;
+  background-color: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 18px;
+`
+export const HeaderMobileMidle = styled.div`
+  width: 100%;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 18px;
+  margin-top: 6px
+`
+export const HeaderMobileBottom = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 18px;
+`
+
+export const HeaderIconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  min-width: 100px;
+`
+
+export const IconSearchWrapper = styled.div`
+  width: 20px;
+  height: 20px;
+  margin-left: 23px;
+  background-image: url(/images/search-mobile.svg);
+`
+export const IconFavWrapper = styled.div`
+  width: 20px;
+  height: 20px;
+  background-image: url(/images/star-white.svg);
+`
+export const DateFilterMobileWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+export const BottomMenuWrapper = styled.div` 
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  height: 40px;
+  background: radial-gradient( 49.07% 49.07% at 50% 29.54%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100% ), rgba(0,0,0,0.95);
+`

src/features/HomePage/styled.tsx

@@ -1,6 +1,15 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const Content = styled.main`
   margin-top: 75px;
   padding: 0 16px;
+  @media${devices.tablet} {
+    margin-top: 9px;
+  }
+
+  @media${devices.mobile} {
+    padding: 0;
+  }
 `

src/features/Logo/index.tsx

@@ -1,5 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 type TLogo = {
   height?: number,
   width?: number,
@@ -12,4 +14,13 @@ export const Logo = styled.div<TLogo>`
   background-size: contain;
   background-repeat: no-repeat;
   background-image: url(/images/logo.svg);
+
+  @media${devices.tablet} {
+    width: ${({ width = 55 }) => width}px;
+    height: ${({ height = 41 }) => height}px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 24px;
+  }
 `

src/features/MainWrapper/index.tsx

@@ -1,6 +1,12 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const MainWrapper = styled.div`
   width: 100%;
   padding-left: 80px;
+
+  @media${devices.tablet} {
+    padding: 0
+  }
 `

src/features/MatchCard/CardLive/index.tsx

@@ -30,7 +30,6 @@ import { CardLiveHover } from '../CardLiveHover'
 const UPDATE_INTERVAL = 1000
 
 const MatchStatus = styled(CommonMatchStatus)`
-  min-width: 100px;
   color: #fff;
   background-color: #cc0000;
 `

src/features/MatchCard/styled.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
 import { T9n } from 'features/T9n'
-
 import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from './config'
 
 export const CardWrapper = styled.li.attrs({
@@ -19,6 +19,18 @@ export const CardWrapper = styled.li.attrs({
   cursor: pointer;
   transition: border 0.5s ease-out;
 
+  @media${devices.laptop} {
+    width: 279px;
+    height: 279px;
+    margin: 0;
+  }
+
+  @media${devices.tablet} {
+    width: 100%;
+    height: 299px;
+    margin: 0;
+  }
+
   &:hover {
     border: 2px solid #A4A4A4
   }
@@ -28,11 +40,16 @@ export const PreviewWrapper = styled.div`
   display: flex;
   flex-direction: column-reverse;
   height: 147px;
+
+  @media${devices.tablet} {
+    height: 208px;
+  }
 `
 
 export const Preview = styled.img`
   width: 100%;
   height: 100%;
+
 `
 
 export const MatchStatus = styled.div`
@@ -49,6 +66,13 @@ export const MatchStatus = styled.div`
   letter-spacing: 0.1em;
   text-align: center;
   white-space: nowrap;
+
+  @media${devices.tablet} {
+    top: 10px;
+    left: 20px;
+    width: auto;
+    padding: 6px 8px;
+  }
 `
 
 export const Info = styled.div`
@@ -57,15 +81,27 @@ export const Info = styled.div`
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+
+  @media${devices.tablet} {
+    padding: 13px 18px 17px 18px;
+  }
 `
 
 export const TournamentName = styled.span`
   color: rgba(255, 255, 255, 0.5);
   font-size: 10px;
+
+  @media${devices.tablet} {
+    margin-top: 10px;
+  }
 `
 
 export const Teams = styled.div`
   margin-top: 21px;
+
+  @media${devices.tablet} {
+    margin-top: 0;
+  }
 `
 
 export const Team = styled.div`

src/features/Matches/styled.tsx

@@ -1,7 +1,13 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const Section = styled.section`
   margin-bottom: 30px;
+
+  @media${devices.tablet} {
+    width: 100%;
+  }
 `
 
 export const Title = styled.h2`
@@ -11,4 +17,8 @@ export const Title = styled.h2`
   line-height: 24px;
   letter-spacing: -0.02em;
   color: #fff;
+
+  @media${devices.tablet} {
+    display: none;
+  }
 `

src/features/MatchesGrid/styled.tsx

@@ -1,9 +1,17 @@
 import styled from 'styled-components/macro'
 
-import { MATCH_CARD_WIDTH } from 'features/MatchCard/config'
+import { devices } from 'config/devices'
 
 export const Wrapper = styled.ul`
   display: grid;
-  grid-template-columns: repeat(6, ${MATCH_CARD_WIDTH}px);
+  grid-template-columns: repeat(auto-fill, minmax(279px, 288px));
   grid-gap: 13px;
+
+  @media${devices.laptop} {
+    grid-template-columns: repeat(4, 279px);
+  }
+
+  @media${devices.tablet} {
+    grid-template-columns: repeat(auto-fit, minmax(279px, 1fr));
+  }
 `

src/features/MediaQuery/index.tsx

@@ -0,0 +1 @@
+export * from 'react-responsive'

src/features/Menu/styled.tsx

@@ -2,6 +2,8 @@ import { Link } from 'react-router-dom'
 
 import styled, { css } from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 export const Wrapper = styled.nav`
   position: relative;
   display: flex;
@@ -11,6 +13,11 @@ export const Wrapper = styled.nav`
   height: 48px;
   margin-left: 90px;
   margin-right: 14px;
+
+  @media${devices.laptop} {
+    margin-left: 23px;
+    margin-right: 0;
+  }
 `
 export const ToggleButton = styled.button`
   width: 18px;
@@ -22,6 +29,10 @@ export const ToggleButton = styled.button`
   border: none;
   outline: none;
   cursor: pointer;
+
+  @media${devices.tablet} {
+    background-image: url(/images/userAccount.svg);
+  }
 `
 export const MenuList = styled.ul`
   position: absolute;
@@ -33,6 +44,12 @@ export const MenuList = styled.ul`
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   z-index: 1;
 
+  @media${devices.tablet} {
+    right: 0;
+    left: auto;
+    z-index: 3;
+  }
+
   :before {
     content: '';
     position: absolute;
@@ -42,6 +59,10 @@ export const MenuList = styled.ul`
     height: 12px;
     transform: translate(-50%, -50%) rotate(45deg);
     background-color: #666;
+
+    @media${devices.tablet} {
+      left: 97%;
+    }
   }
 `
 export const MenuItem = styled.li`

src/features/Search/styled.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
 import { customScrollbar } from 'features/Common'
 import {
   InputWrapper,
@@ -9,13 +10,46 @@ import {
 
 export const Wrapper = styled.div`
   position: relative;
+}
+
 `
 
 export const Form = styled.form`
   width: 288px;
+
   ${InputWrapper} {
     margin: 0;
     padding-bottom: 13px;
+
+     @media${devices.laptop} {
+        padding-left: 12px;
+      }
+
+      @media${devices.tablet} {
+        padding-left: 6px;
+        height: 12px;
+        margin-top: 25px;
+        background-color: transparent;
+      }
+  }
+  
+  @media${devices.laptop} {
+    width: 51px;
+
+    :focus-within {
+      width: 348px;
+      position: absolute;
+      z-index: 4;
+      }
+  }
+
+  @media${devices.tablet} {
+    width: 12px;
+    :focus-within {
+      width: 252px;
+      top: -38px;
+      left: -240px;
+      }
   }
   
   ${InputStyled} {
@@ -27,6 +61,10 @@ export const Form = styled.form`
     ::-webkit-search-results-decoration {
       display: none; 
     }
+
+    @media${devices.tablet} {
+      font-size: 14px;
+    }
   }
 
   ${Label} {
@@ -37,12 +75,24 @@ export const Form = styled.form`
       height: 25px;
       background-image: url(/images/search.svg);
       background-repeat: no-repeat;
+
+      @media${devices.laptop} {
+        margin-right: 0;
+      }
+      @media${devices.tablet} {
+        margin-right: 0;
+        background-image: url(/images/search-mob.svg);
+      }
     }
   }
   
   :focus-within {
     ${InputWrapper} {
       padding-left: 0;
+
+      @media${devices.tablet} {
+        background-color: #3F3F3F;
+      }
     }
     
     ${Label} {
@@ -62,5 +112,16 @@ export const Results = styled.div`
   overflow-y: auto;
   z-index: 1;
 
+  @media${devices.tablet} {
+    position: fixed;
+    top: 40px;
+    left: 40%;
+    width: 50vw;
+  }
+  @media${devices.mobile} {
+    left: 0;
+    width: 100vw;
+  }
+
   ${customScrollbar}
 `

src/features/ToggleScore/styled.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components/macro'
 
 import { T9n } from 'features/T9n'
+import { devices } from 'config/devices'
 
 export const Switch = styled.div`
   position: absolute;
@@ -9,6 +10,10 @@ export const Switch = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
+
+  @media${devices.tablet} {
+    position: static;
+  }
 `
 
 export const Title = styled(T9n)`
@@ -18,6 +23,13 @@ export const Title = styled(T9n)`
   letter-spacing: -0.03em;
   color: #999999;
   margin-right: 5px;
+
+  @media${devices.tablet} {
+    order: 2;
+    margin-right: 0;
+    margin-left: 5px;
+    font-size: 12px;
+  }
 `
 
 type IconProps = {