feat: Mainpage Responsive Web Develop

gnoswap-labs · Aug 8, 2023 · 89205a5 · 89205a5
1 parent a71923c
commit 89205a5
Show file tree

Hide file tree

Showing 39 changed files with 959 additions and 219 deletions.
diff --git a/packages/web/src/components/common/footer/Footer.styles.ts b/packages/web/src/components/common/footer/Footer.styles.ts
@@ -11,7 +11,7 @@ export const FooterWrapper = styled.footer`
   background-color: ${({ theme }) => theme.color.background01};
   border-top: 1px solid ${({ theme }) => theme.color.border02};
   ${media.mobile} {
-    padding: 36px 0px;
+    padding-top: 36px;
   }
 `;
 

diff --git a/packages/web/src/components/common/header/Header.tsx b/packages/web/src/components/common/header/Header.tsx
@@ -36,7 +36,7 @@ interface HeaderProps {
   error: Error | null;
   search: (e: React.ChangeEvent<HTMLInputElement>) => void;
   keyword: string;
-  windowSize: Number;
+  windowSize: number;
 }
 
 const Header: React.FC<HeaderProps> = ({

diff --git a/packages/web/src/components/common/icons/IconHeaderLogo.tsx b/packages/web/src/components/common/icons/IconHeaderLogo.tsx
@@ -8,8 +8,8 @@ const IconHeaderLogo = ({ className }: { className?: string }) => (
     className={className}
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M7.89433 5.6145L15.7431 0.5L31.4989 10.686L23.662 15.7962L7.89433 5.6145ZM7.89375 20.4607V5.60114L-0.000717163 10.6863V25.5864V25.5869L-0.000284195 25.5866L15.7493 35.7369L22.871 31.1447L23.6153 30.6657L7.89432 20.4603L7.89375 20.4607ZM15.9062 13.1316L8.05739 18.2461L23.8073 28.3639L31.4993 23.1626L15.9062 13.1316ZM23.8074 28.3638L31.5 23.1626V25.5472L23.6444 30.6521L23.8074 28.3638Z"
       fill="url(#paint0_linear_6611_66589)"
     />
@@ -22,8 +22,8 @@ const IconHeaderLogo = ({ className }: { className?: string }) => (
         y2="36.5"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#233DBD" />
-        <stop offset="1" stop-color="#0059FF" />
+        <stop stopColor="#233DBD" />
+        <stop offset="1" stopColor="#0059FF" />
       </linearGradient>
     </defs>
   </svg>

diff --git a/packages/web/src/components/common/icons/svg/icon-checked.svg b/packages/web/src/components/common/icons/svg/icon-checked.svg
diff --git a/packages/web/src/components/common/search-input/SearchInput.styles.ts b/packages/web/src/components/common/search-input/SearchInput.styles.ts
@@ -2,6 +2,7 @@ import { CSSProperties } from "react";
 import styled from "@emotion/styled";
 import mixins from "@styles/mixins";
 import { fonts } from "@constants/font.constant";
+import { media } from "@styles/media";
 export interface SearchInputStyleProps {
   fullWidth?: boolean;
   width?: CSSProperties["width"];
@@ -20,9 +21,22 @@ export const SearchInputWrapper = styled.div<SearchInputStyleProps>`
     if (height) return typeof height === "number" ? height + "px" : height;
     return "auto";
   }};
-  padding: 0px 16px;
+  padding: 12px 16px;
   border-radius: 8px;
 
+  .icon-wrapper {
+    ${mixins.flexbox("row", "center", "center")};
+  }
+
+  ${media.mobile} {
+    padding: 8px 12px 8px 12px;
+    ${fonts.body11};
+    .search-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
   &:focus-within {
     background-color: ${({ theme }) => theme.color.background13};
     border: 1px solid ${({ theme }) => theme.color.border03};

diff --git a/packages/web/src/components/common/search-input/SearchInput.tsx b/packages/web/src/components/common/search-input/SearchInput.tsx
@@ -29,7 +29,9 @@ const SearchInput: React.FC<SearchInputProps> = ({
       className={cx(className, { "empty-status": value === "" })}
     >
       <InputStyle placeholder={placeholder} value={value} onChange={onChange} />
-      <IconSearch className="search-icon" />
+      <div className="icon-wrapper">
+        <IconSearch className="search-icon" />
+      </div>
     </SearchInputWrapper>
   );
 };

diff --git a/packages/web/src/components/common/select-tab/SelectTab.styles.ts b/packages/web/src/components/common/select-tab/SelectTab.styles.ts
@@ -1,5 +1,6 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 
 export const SelectTabWrapper = styled.div`
@@ -12,12 +13,20 @@ export const SelectTabWrapper = styled.div`
 
 export const SelectButton = styled.button`
   ${mixins.flexbox("row", "center", "center")};
-  ${fonts.body9};
-  height: 41px;
-  padding: 0px 24px;
+  ${fonts.body10};
+  padding: 8px 24px;
   border-radius: 4px;
   color: ${({ theme }) => theme.color.text04};
   transition: all 0.3s ease;
+  ${media.tablet} {
+    width: 100px;
+    padding: 8px;
+  }
+  ${media.mobile} {
+    width: 80px;
+    padding: 4px 8px;
+    ${fonts.body12};
+  }
   &.selected {
     background-color: ${({ theme }) => theme.color.select};
     color: ${({ theme }) => theme.color.text11};

diff --git a/packages/web/src/components/home/card-list/CardList.stories.tsx b/packages/web/src/components/home/card-list/CardList.stories.tsx
@@ -16,9 +16,9 @@ export default {
 const Template: ComponentStory<typeof CardList> = () => {
   return (
     <div css={wrapper}>
-      <TrendingCardList list={trendingList} />
-      <HighestAprsCardList list={highestList} />
-      <RecentlyAddedCardList list={recentlyList} />
+      <TrendingCardList list={trendingList} windowSize={500} />
+      <HighestAprsCardList list={highestList} windowSize={500} />
+      <RecentlyAddedCardList list={recentlyList} windowSize={500} />
     </div>
   );
 };

diff --git a/packages/web/src/components/home/card-list/CardList.styles.ts b/packages/web/src/components/home/card-list/CardList.styles.ts
@@ -1,5 +1,6 @@
 import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
+import { media } from "@styles/media";
 import mixins from "@styles/mixins";
 import { UP_DOWN_TYPE } from "./CardList";
 
@@ -13,7 +14,10 @@ export const ListItem = styled.li<{ upDownType: UP_DOWN_TYPE }>`
   ${fonts.body12};
   width: 100%;
   height: 40px;
-  padding: 0px 24px;
+  padding: 8px 24px;
+  ${media.tablet} {
+    padding: 8px 16px;
+  }
   cursor: pointer;
   transition: background-color 0.3s ease;
   color: ${({ theme }) => theme.color.text01};

diff --git a/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.styles.ts b/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.styles.ts
@@ -1,25 +1,21 @@
-import mixins from "@styles/mixins";
 import { fonts } from "@constants/font.constant";
-import { css, type Theme } from "@emotion/react";
-
-export const wrapper = (theme: Theme) => css`
-  .title {
-    ${fonts.h1};
-    color: ${theme.color.text02};
-    line-height: 1.2;
+import styled from "@emotion/styled";
+import mixins from "@styles/mixins";
+import { media } from "@styles/media";
 
-    span {
-      color: ${theme.color.point};
-    }
+export const GnoswapBrandWrapper = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  max-width: 706px;
+  width: 100%;
+  gap: 34px;
+  ${media.tablet} {
+    max-width: 547px;
+    padding: 10px 0px;
   }
-
-  .subtitle {
-    font-size: 28px;
-    font-weight: 600;
-    line-height: 34px;
-    color: ${theme.color.text02};
-
-    margin: 20px 0px 34px;
+  ${media.mobile} {
+    max-width: 328px;
+    align-items: center;
+    gap: 32px;
   }
 
   .sns {
@@ -31,25 +27,79 @@ export const wrapper = (theme: Theme) => css`
       height: 28px;
       &:hover {
         .icon * {
-          fill: ${theme.color.icon07};
+          fill: ${({ theme }) => theme.color.icon07};
         }
       }
       .icon {
         width: 28px;
         height: 28px;
         * {
           transition: all 0.3s ease;
-          fill: ${theme.color.icon03};
+          fill: ${({ theme }) => theme.color.icon03};
         }
       }
     }
   }
+`;
+
+export const HeroTitleContainer = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")}
+  width: 100%;
+  gap: 20px;
+  ${media.tablet} {
+  }
+  ${media.mobile} {
+    gap: 8px;
+  }
+`;
+
+export const TitleWrapper = styled.h1`
+  ${fonts.h1};
+  color: ${({ theme }) => theme.color.text02};
 
-  .description {
-    ${fonts.body8};
-    color: ${theme.color.text04};
-    line-height: 1.4;
+  ${media.tablet} {
+    font-size: 46px;
+    line-height: 55px;
+  }
+  ${media.mobile} {
+    font-size: 36px;
+    font-weight: 600;
+    line-height: 43px;
+  }
+
+  span {
+    color: ${({ theme }) => theme.color.point};
+  }
+`;
+export const SubTitleWrapper = styled.h4`
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 34px;
+  color: ${({ theme }) => theme.color.text02};
+  ${media.tablet} {
+    font-size: 20px;
+    line-height: 24px;
+  }
+  ${media.mobile} {
+    font-size: 18px;
+    line-height: 22px;
+  }
+`;
+
+export const DescriptionContainer = styled.div`
+  ${mixins.flexbox("column", "flex-start", "flex-start")}
+  max-width: 706px;
+  width: 100%;
+  gap: 10px;
+  ${media.tablet} {
+    max-width: 547px;
+  }
+`;
 
-    margin-top: 10px;
+export const DescriptionTitle = styled.p`
+  ${fonts.body8};
+  color: ${({ theme }) => theme.color.text04};
+  ${media.tablet} {
+    ${fonts.body10};
   }
 `;
diff --git a/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.tsx b/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.tsx
@@ -3,9 +3,17 @@ import IconGitbook from "@components/common/icons/social/IconGitbook";
 import IconGithub from "@components/common/icons/social/IconGithub";
 import IconMedium from "@components/common/icons/social/IconMedium";
 import IconTwitter from "@components/common/icons/social/IconTwitter";
+import { DeviceSize } from "@styles/media";
 import React, { useCallback } from "react";
 import { ValuesType } from "utility-types";
-import { wrapper } from "./GnoswapBrand.styles";
+import {
+  GnoswapBrandWrapper,
+  HeroTitleContainer,
+  TitleWrapper,
+  SubTitleWrapper,
+  DescriptionTitle,
+  DescriptionContainer,
+} from "./GnoswapBrand.styles";
 
 export const SNS_TYPE = {
   GITHUB: "github",
@@ -18,9 +26,13 @@ export type SNS_TYPE = ValuesType<typeof SNS_TYPE>;
 
 interface GnoswapBrandProps {
   onClickSns: (snsType: SNS_TYPE) => void;
+  windowSize: number;
 }
 
-const GnoswapBrand: React.FC<GnoswapBrandProps> = ({ onClickSns }) => {
+const GnoswapBrand: React.FC<GnoswapBrandProps> = ({
+  onClickSns,
+  windowSize,
+}) => {
   const onClickGithub = useCallback(
     () => onClickSns(SNS_TYPE.GITHUB),
     [onClickSns],
@@ -47,36 +59,42 @@ const GnoswapBrand: React.FC<GnoswapBrandProps> = ({ onClickSns }) => {
   );
 
   return (
-    <div css={wrapper}>
-      <h1 className="title">
-        <span>Swap</span> and <span>Earn</span>
-        <br />
-        on Gnoswap
-      </h1>
-      <h4 className="subtitle">the One-stop Gnoland Defi Platform</h4>
-      <div className="sns">
-        <button onClick={onClickGithub}>
-          <IconGithub className="icon" />
-        </button>
-        <button onClick={onClickGitbook}>
-          <IconGitbook className="icon" />
-        </button>
-        <button onClick={onClickDiscode}>
-          <IconDiscode className="icon" />
-        </button>
-        <button onClick={onClickMedium}>
-          <IconMedium className="icon" />
-        </button>
-        <button onClick={onClickTwitter}>
-          <IconTwitter className="icon" />
-        </button>
-      </div>
-      <p className="description">
-        Gnoswap is an open-source & audited AMM Dex that provides
-        <br />a simplified concentrated-LP experience for increased capital
-        efficiency.
-      </p>
-    </div>
+    <GnoswapBrandWrapper>
+      <HeroTitleContainer>
+        <TitleWrapper>
+          <span>Swap</span> and <span>Earn</span>
+          <br />
+          on Gnoswap
+        </TitleWrapper>
+        <SubTitleWrapper>the One-stop Gnoland Defi Platform</SubTitleWrapper>
+      </HeroTitleContainer>
+      {windowSize > DeviceSize.mobile && (
+        <DescriptionContainer>
+          <div className="sns">
+            <button onClick={onClickGithub}>
+              <IconGithub className="icon" />
+            </button>
+            <button onClick={onClickGitbook}>
+              <IconGitbook className="icon" />
+            </button>
+            <button onClick={onClickDiscode}>
+              <IconDiscode className="icon" />
+            </button>
+            <button onClick={onClickMedium}>
+              <IconMedium className="icon" />
+            </button>
+            <button onClick={onClickTwitter}>
+              <IconTwitter className="icon" />
+            </button>
+          </div>
+          <DescriptionTitle>
+            Gnoswap is an open-source & audited AMM Dex that provides
+            <br />a simplified concentrated-LP experience for increased capital
+            efficiency.
+          </DescriptionTitle>
+        </DescriptionContainer>
+      )}
+    </GnoswapBrandWrapper>
   );
 };