Set box-sizing: border-box and fix style issues

diescake · Jul 5, 2019 · 4c96c91 · 4c96c91
1 parent d10a33f
commit 4c96c91
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/app/containers/TodoApp/index.tsx b/src/app/containers/TodoApp/index.tsx
@@ -107,7 +107,7 @@ const TodoApp: FC<TodoAppProps> = (props: TodoAppProps) => {
  {words.todoApp.logout}
  </button>
  </div>
- <button type="button" onClick={modalOpen}>
+ <button type="button" className={style.addButton} onClick={modalOpen}>
  {words.todoApp.newTodo}
  </button>
  <Modal hidden={modalHidden} name={words.todoApp.newTodo} close={modalClose}>
@@ -119,7 +119,7 @@ const TodoApp: FC<TodoAppProps> = (props: TodoAppProps) => {
  placeholder={words.todoApp.placeholder}
  value={text}
  />
- <button type="button" className={style.addButton} disabled={props.fetching} onClick={handleAddTodoClick}>
+ <button type="button" className={style.postButton} disabled={props.fetching} onClick={handleAddTodoClick}>
  {words.todoApp.addTodo}
  </button>
  </Modal>

diff --git a/src/app/containers/TodoApp/style.scss b/src/app/containers/TodoApp/style.scss
@@ -9,13 +9,21 @@
  font-size: 1rem;
 }
 
+.logoutButton {
+ font-size: 1rem;
+}
+
+.addButton {
+ font-size: 1rem;
+}
+
 .inputTodo {
  width: 70%;
  margin: 10px 0;
  padding: 0 10px;
  font-size: 2.6rem;
 }
 
-.addButton {
+.postButton {
  font-size: 2.5rem;
 }
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
@@ -1,11 +1,18 @@
 @import '~@/app/helpers/styleVars';
 
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
 html {
  font-size: 62.5%;
 }
 
 body {
  color: $black_01;
+ font-size: 1.6rem;
 }
 
 a:link {