design: (#740) 신고된 내역 확인 페이지 글씨크기 키우기 및 반응형 적용

woowacourse-teams · Oct 16, 2023 · bcde780 · bcde780
1 parent 073277b
commit bcde780
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/frontend/src/components/common/AlarmContainer/ListStyle.ts b/frontend/src/components/common/AlarmContainer/ListStyle.ts
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 
 export const Description = styled.p`
- font-size: 1.4rem;
+ font: var(--text-default);
  text-align: center;
 `;
 
 export const ListContainer = styled.ul`
- font-size: 1.4rem;
+ font: var(--text-default);
 `;
 
 export const ListItem = styled.li<{ $isRead: boolean }>`

diff --git a/frontend/src/components/common/AppInstallPrompt/BookMarkPrompt/style.ts b/frontend/src/components/common/AppInstallPrompt/BookMarkPrompt/style.ts
@@ -85,7 +85,7 @@ export const Description = styled.p`
  font-weight: 700;
 
  @media (max-width: 375px) and (min-width: 280px) {
- font-size: 1.4rem;
+ font: var(--text-default);
  }
 `;
 

diff --git a/frontend/src/pages/ReportAlarmPage/ReportConfirmResult/style.ts b/frontend/src/pages/ReportAlarmPage/ReportConfirmResult/style.ts
@@ -1,12 +1,18 @@
 import styled from 'styled-components';
 
+import { theme } from '@styles/theme';
+
 export const Container = styled.ul`
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  gap: 10px;
 
  font: var(--text-caption);
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ font: var(--text-body);
+ }
 `;
 
 export const List = styled.ul`
@@ -15,11 +21,15 @@ export const List = styled.ul`
  padding-left: 30px;
  margin-top: 10px;
 
- font-size: 1.4rem;
+ font: var(--text-default);
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ font: var(--text-caption);
+ }
 `;
 
 export const ListItem = styled.li`
- margin: 5px 0;
+ margin: 10px 0;
 
  list-style-type: disc;
 `;