Complete mobile design

Author: velopert

src/components/auth/AuthForm.tsx

@@ -6,13 +6,19 @@ import { AuthMode } from '../../modules/core';
 import palette from '../../lib/styles/palette';
 import AuthSocialButtonGroup from './AuthSocialButtonGroup';
 import AuthEmailSuccess from './AuthEmailSuccess';
+import media from '../../lib/styles/media';
 
 const AuthFormBlock = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
   justify-content: space-between;
   line-height: 1.5;
+  .upper-wrapper {
+    ${media.small} {
+      margin-top: 2rem;
+    }
+  }
   h2,
   h4 {
     margin: 0;
@@ -30,6 +36,10 @@ const AuthFormBlock = styled.div`
     margin-top: 2.5rem;
   }
   .foot {
+    ${media.small} {
+      margin-top: 2rem;
+    }
+
     text-align: right;
     span {
       margin-right: 0.25rem;
@@ -70,7 +80,7 @@ const AuthForm: React.FC<AuthFormProps> = ({
 
   return (
     <AuthFormBlock>
-      <div>
+      <div className="upper-wrapper">
         <h2 data-testid="title">{modeText}</h2>
         <section>
           <h4>이메일로 {modeText}</h4>

src/components/auth/AuthModal.tsx

@@ -5,6 +5,7 @@ import zIndexes from '../../lib/styles/zIndexes';
 import palette from '../../lib/styles/palette';
 import { undrawJoyride } from '../../static/images';
 import transitions from '../../lib/styles/transitions';
+import media from '../../lib/styles/media';
 
 const { useState, useEffect } = React;
 
@@ -21,6 +22,11 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
   .wrapper {
     width: 606px;
     height: 480px;
+    ${media.small} {
+      flex: 1;
+      width: auto;
+      height: 100%;
+    }
 
     ${props =>
       props.visible
@@ -34,6 +40,9 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
     display: flex;
     .gray-block {
+      ${media.small} {
+        display: none;
+      }
       width: 216px;
       background: ${palette.gray1};
       padding: 1.5rem;
@@ -48,10 +57,11 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
       }
       .welcome {
         font-size: 2.25rem;
-        font-weight: bold;
         margin-top: 1.5rem;
         color: ${palette.gray7};
         text-align: center;
+        font-weight: 400;
+        font-size: 2rem;
       }
     }
     .white-block {
@@ -60,6 +70,9 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
       padding: 1.5rem;
       display: flex;
       flex-direction: column;
+      ${media.small} {
+        overflow-y: auto;
+      }
       .exit-wrapper {
         display: flex;
         justify-content: flex-end;
@@ -69,6 +82,9 @@ const AuthModalBlock = styled.div<{ visible: boolean }>`
         svg {
           cursor: pointer;
         }
+        ${media.small} {
+          margin-bottom: 0;
+        }
       }
       .block-content {
         flex: 1;

src/components/common/Button.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import palette, { buttonColorMap } from '../../lib/styles/palette';
+import media from '../../lib/styles/media';
 
 type ColorType =
   | 'teal'
@@ -15,6 +16,7 @@ const ButtonBlock = styled.button<{
   color: ColorType;
   inline: boolean;
   size: ButtonSize;
+  responsive?: boolean;
 }>`
   display: inline-flex;
   align-items: center;
@@ -41,6 +43,17 @@ const ButtonBlock = styled.button<{
       }
     `}
 
+  ${props =>
+    props.responsive &&
+    css`
+      ${media.small} {
+        height: 1.5rem;
+        padding-left: 0.9375rem;
+        padding-right: 0.9375rem;
+        font-size: 0.75rem;
+      }
+    `}
+
   ${props =>
     props.size === 'medium' &&
     css`
@@ -77,6 +90,7 @@ interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'size'> {
   color?: ColorType;
   inline?: boolean;
   size?: ButtonSize;
+  responsive?: boolean;
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -85,6 +99,7 @@ const Button: React.FC<ButtonProps> = ({
   color = 'teal',
   inline,
   size = 'medium',
+  responsive = false,
   ...rest
 }) => {
   const htmlProps = rest as any;
@@ -93,6 +108,7 @@ const Button: React.FC<ButtonProps> = ({
       color={color}
       inline={inline}
       size={size}
+      responsive={responsive}
       {...htmlProps}
       onClick={e => {
         if (htmlProps.onClick) {

src/components/common/LabelInput.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import palette from '../../lib/styles/palette';
 import { MdLockOutline } from 'react-icons/md';
+import media from '../../lib/styles/media';
 const LabelInputBlock = styled.div<{ focus: boolean }>`
   label,
   input {
@@ -25,6 +26,9 @@ const LabelInputBlock = styled.div<{ focus: boolean }>`
     font-size: 1.5rem;
     border: none;
     outline: none;
+    ${media.small} {
+      font-size: 1.125rem;
+    }
 
     width: 100%;
     color: ${palette.gray7};

src/components/common/PopupBase.tsx

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import OpaqueLayer from './OpaqueLayer';
 import zIndexes from '../../lib/styles/zIndexes';
 import transitions from '../../lib/styles/transitions';
+import media from '../../lib/styles/media';
 
 const PopupBaseBlock = styled.div`
   position: fixed;
@@ -22,6 +23,9 @@ const PopupWrapper = styled.div<{ visible: boolean }>`
   background: white;
   padding: 2rem 1.5rem;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.09);
+  ${media.small} {
+    width: calc(100% - 2rem);
+  }
   ${props =>
     props.visible
       ? css`

src/components/register/RegisterTemplate.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
+import media from '../../lib/styles/media';
 
 const RegisterTemplateBlock = styled.div`
   width: 768px;
@@ -17,6 +18,19 @@ const RegisterTemplateBlock = styled.div`
     font-size: 1.5rem;
     color: ${palette.gray9};
   }
+
+  ${media.small} {
+    width: 100%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-top: 4rem;
+    h1 {
+      font-size: 3rem;
+    }
+    .description {
+      font-size: 1rem;
+    }
+  }
 `;
 
 export interface RegisterTemplateProps {}

src/components/setting/SettingEditButton.tsx

@@ -24,6 +24,7 @@ const StyledButton = styled.button`
   line-height: 1.5;
   color: ${palette.teal6};
   text-decoration: underline;
+  background: none;
   cursor: pointer;
   &:hover,
   &:focus {

src/components/setting/SettingRow.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
 import SettingEditButton from './SettingEditButton';
+import media from '../../lib/styles/media';
 
 export type SettingRowProps = {
   title: string;
@@ -24,12 +25,14 @@ function SettingRow({
         <div className="title-wrapper">
           <h3>{title}</h3>
         </div>
-        <div className="contents">{children}</div>
-        {editButton && (
-          <div className="edit-wrapper">
-            <SettingEditButton onClick={onClickEdit} />
-          </div>
-        )}
+        <div className="block-for-mobile">
+          <div className="contents">{children}</div>
+          {editButton && (
+            <div className="edit-wrapper">
+              <SettingEditButton onClick={onClickEdit} />
+            </div>
+          )}
+        </div>
       </div>
       {description && <div className="description">{description}</div>}
     </Row>
@@ -41,6 +44,9 @@ const Row = styled.div`
   padding-bottom: 1rem;
   & > .wrapper {
     display: flex;
+    ${media.small} {
+      flex-direction: column;
+    }
   }
   .title-wrapper {
     width: 9.5rem;
@@ -50,8 +56,16 @@ const Row = styled.div`
       color: ${palette.gray8};
       margin: 0;
       font-size: 1.125rem;
+      ${media.small} {
+        margin-bottom: 0.5rem;
+      }
     }
   }
+  .block-for-mobile {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
   .contents {
     flex: 1;
     font-size: 1rem;

src/components/setting/SettingRows.tsx

@@ -8,6 +8,7 @@ import Button from '../common/Button';
 import { createFallbackTitle } from '../../lib/utils';
 import { ProfileLinks } from '../../lib/graphql/user';
 import SettingUnregisterRow from './SettingUnregisterRow';
+import media from '../../lib/styles/media';
 
 export type SettingRowsProps = {
   title: string | null;
@@ -70,6 +71,9 @@ function SettingRows({
 
 const Rows = styled.section`
   margin-top: 4rem;
+  ${media.small} {
+    margin-top: 0rem;
+  }
 `;
 
 export default SettingRows;

src/components/setting/SettingSocialInfoRow.tsx

@@ -14,6 +14,7 @@ import useInputs from '../../lib/hooks/useInputs';
 import palette from '../../lib/styles/palette';
 import { ProfileLinks } from '../../lib/graphql/user';
 import SettingEditButton from './SettingEditButton';
+import media from '../../lib/styles/media';
 
 export type SettingSocialInfoRowProps = {
   email?: string;
@@ -209,6 +210,9 @@ const FacebookInputBox = styled.div<{ focus: boolean }>`
 
 const Form = styled.form`
   width: 25rem;
+  ${media.small} {
+    width: 100%;
+  }
   li + li {
     margin-top: 1rem;
   }