From 471b61b2c030f818cc2810bcb22174cf0a714254 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 25 Jan 2022 01:35:39 -0800 Subject: [PATCH] Clean up font-size We'll have to change this to rems in the future, but at least we're just changing variables --- components/CharacterResult/index.scss | 4 +- components/CharacterUnit/index.scss | 2 +- components/Modal/index.scss | 82 +++++++++++++++++++++------ components/SearchModal/index.scss | 2 +- components/SignupModal/index.scss | 4 +- components/SummonGrid/index.scss | 2 +- components/SummonResult/index.scss | 4 +- components/SummonUnit/index.scss | 2 +- components/WeaponResult/index.scss | 4 +- components/WeaponUnit/index.scss | 2 +- styles/variables.scss | 9 ++- 11 files changed, 87 insertions(+), 30 deletions(-) diff --git a/components/CharacterResult/index.scss b/components/CharacterResult/index.scss index 07d38053..ba900877 100644 --- a/components/CharacterResult/index.scss +++ b/components/CharacterResult/index.scss @@ -19,7 +19,7 @@ .CharacterResult h5 { color: #555; display: inline-block; - font-size: 18px; + font-size: $font-large; font-weight: 500; margin: 2px 4px 4px 0; } @@ -31,7 +31,7 @@ .CharacterResult .stars { display: inline-block; color: #FFA15E; - font-size: 21px; + font-size: $font-xlarge; } .CharacterResult .stars > span { diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index feca9dc0..45aa6f99 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -40,7 +40,7 @@ .CharacterUnit h3 { color: #333; - font-size: 14px; + font-size: $font-regular; font-weight: 500; margin: 0; max-width: 131px; diff --git a/components/Modal/index.scss b/components/Modal/index.scss index 4de30e57..cb93fc4b 100644 --- a/components/Modal/index.scss +++ b/components/Modal/index.scss @@ -9,23 +9,73 @@ position: absolute; left: 0; top: 0; + + .Modal { + background: #f5f5f5; + border-radius: $unit; + color: $grey-00; + display: flex; + flex-direction: column; + + min-width: $unit * 45; + max-width: $unit * 60; + overflow-y: auto; + padding: $unit * 3; + position: relative; + z-index: 10; + + #ModalTop { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: 16px; + margin-right: -8px; + + h2 { + font-size: $font-xlarge; + font-weight: 500; + text-align: left; + flex-grow: 1; + } + + svg { + fill: $grey-50; + padding: $unit / 2; + height: 18px; + width: 18px; + transform: rotate(45deg); + + &:hover { + cursor: pointer; + fill: $grey-00; + } + } + } + + #ModalBottom { + display: flex; + flex-direction: row; + + a { + color: #666; + font-size: $font-regular; + font-weight: 500; + flex-grow: 1; + display: flex; + align-items: center; + } + + .Button { + display: block; + min-height: $unit * 5; + text-align: center; + min-width: $unit * 11; + } + } + } } -.Modal { - background: #f5f5f5; - border-radius: 8px; - display: flex; - flex-direction: column; - min-width: 360px; - max-width: 480px; - overflow-y: auto; - position: relative; - z-index: 10; -} -.Modal .Button { - display: block; - min-height: 45px; - text-align: center; -} \ No newline at end of file + + diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss index e773d854..a9cdb744 100644 --- a/components/SearchModal/index.scss +++ b/components/SearchModal/index.scss @@ -39,7 +39,7 @@ .SearchModal #NoResults h2 { color: #ccc; - font-size: 18px; + font-size: $font-large; font-weight: 500; margin-top: -32px; } \ No newline at end of file diff --git a/components/SignupModal/index.scss b/components/SignupModal/index.scss index ca212d3a..5affc575 100644 --- a/components/SignupModal/index.scss +++ b/components/SignupModal/index.scss @@ -23,7 +23,7 @@ #ModalTop h1 { margin: 0; - font-size: 24px; + font-size: $font-xlarge; text-align: left; flex-grow: 1; } @@ -55,7 +55,7 @@ #ModalBottom a { color: #666; - font-size: 13px; + font-size: $font-regular; font-weight: 500; flex-grow: 1; display: flex; diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss index 1eab08cc..8c994b5e 100644 --- a/components/SummonGrid/index.scss +++ b/components/SummonGrid/index.scss @@ -6,7 +6,7 @@ & .Label { color: $grey-50; - font-size: 12px; + font-size: $font-small; font-weight: $medium; margin-bottom: $unit; text-align: center; diff --git a/components/SummonResult/index.scss b/components/SummonResult/index.scss index 584ffec6..ccf99f58 100644 --- a/components/SummonResult/index.scss +++ b/components/SummonResult/index.scss @@ -19,7 +19,7 @@ .SummonResult h5 { color: #555; display: inline-block; - font-size: 18px; + font-size: $font-large; font-weight: 500; margin: 2px 4px 4px 0; } @@ -31,7 +31,7 @@ .SummonResult .stars { display: inline-block; color: #FFA15E; - font-size: 21px; + font-size: $font-xlarge; } .SummonResult .stars > span { diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss index 509ab294..614b482e 100644 --- a/components/SummonUnit/index.scss +++ b/components/SummonUnit/index.scss @@ -50,7 +50,7 @@ h3 { color: #333; - font-size: 14px; + font-size: $font-regular; font-weight: 500; margin: 0; text-align: center; diff --git a/components/WeaponResult/index.scss b/components/WeaponResult/index.scss index 76f48633..9a7ff926 100644 --- a/components/WeaponResult/index.scss +++ b/components/WeaponResult/index.scss @@ -19,7 +19,7 @@ .WeaponResult h5 { color: #555; display: inline-block; - font-size: 18px; + font-size: $font-large; font-weight: 500; margin: 2px 4px 4px 0; } @@ -31,7 +31,7 @@ .WeaponResult .stars { display: inline-block; color: #FFA15E; - font-size: 21px; + font-size: $font-xlarge; } .WeaponResult .stars > span { diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index 92766685..93c26597 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -37,7 +37,7 @@ .WeaponUnit h3 { color: #333; - font-size: 14px; + font-size: $font-regular; font-weight: 500; margin: 0; text-align: center; diff --git a/styles/variables.scss b/styles/variables.scss index 6d51e1a4..b5caf4c7 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -15,8 +15,15 @@ $grey-90: #F5F5F5; $blue: #61B3FF; $red: #FF6161; +$error: #D13A3A; // Font weight $normal: 400; $medium: 500; -$bold: 600; \ No newline at end of file +$bold: 600; + +// Font size +$font-small: 12px; +$font-regular: 14px; +$font-large: 18px; +$font-xlarge: 21px; \ No newline at end of file